Who is this for?

I would like to say everyone, but it's mostly for beginners who want to develop for a living. If you know something on this list or want to contribute, there's always the comments. I also love finding new resources.

Where to start?

Just pick a thing. But if you want to do web development you're gonna have to tangle with HTML, CSS, and JavaScript eventually. If hearing things like front-end, back-end, or full-stack gives you anxiety, I would recommend starting with front-end development. Front-End is a great place to start and you can begin with just making static websites. So no tricky JavaScript or anything, at first. Just worry about building the structure, customizing the layout, and how it looks.

IDEs, REPLs & Text Editors

To code you'll need either some sort of Interactive Development Environment or IDE, or a text editor like Notepad. But I would suggest you use a code editor.

REPL stands for Read, Eval, Print, Loop and there are neat online ones customized to be used for whatever environment you're using. If you need to test out a function or code snippet, use them.

• Resources

  • Desktop IDEs
    • VSCode
    • Sublime
    • Atom
  • Online IDEs/Editors
    • Code Tasty
    • Code Sandbox
    • AWS Cloud 9
  • Online REPLs
    • Repl.it (only one you need, trust me)

• Videos

  • Traversy Media
    • VS Code Guide and Setup
    • Atom Editor packages and set up

HTML & CSS

So we start off with HTML and CSS. If you see things like HTML5, don't panic that's just the most recent iteration of HTML or hyper text markup language. CSS stands for cascading style sheets. You'll hear things about CSS frameworks and stuff but learn enough plain css to make basic cosmetic and layout changes to pages first. I would strongly recommend you learn the following before using CSS frameworks or libraries for anything besides cosmetic changes (unforseen side-effects may occur):

• position
• z-index
• display
• flexbox
  • in-depth guide
• css-grid
  • in-depth grid guide

I'll be addressing CSS frameworks after this section. But below is a listing of links I find or found helpful on my journey.

• Sites/Reference:

  • Mozilla Developers Network (dry but super thorough)
    • HTML Docs
    • CSS Docs
  • W3 Schools (beginner friendly)
    • Learn HTML
    • Learn CSS
  • Rithm School (Free Online Curriculum w/ some videos)
    • HTML & CSS Basics
  • Learn to Code HTML & CSS (online book)
    • Basics
    • Advanced
  • CSS Tricks (advanced CSS tips and tricks, also good breakdowns)
  • CSS Interactive Cheat Sheet
  • HTML Interactive Cheat Sheet

• Videos (YouTube, Scrimba, etc):

  • Traversy Media (king of crash courses)
    • HTML CrashCourse for Absolute Beginners
    • CSS Crash Course
    • Flexbox in 20 minutes
  • Free Code Camp Videos info
    • FCC HTML5 - full course w/ samples
    • HTML Full Course - Build a Website Tutorial
    • CSS Full Course w/ flexbox and css-grid
    • CSS Grid Course
  • Scrimba Intro to HTML

• Interactive Tutorials & Drills: Use these to sharpen your Flexbox and CSS-grid skills

  • Flexbox Froggy
  • Flexbox Defense
  • CSS Grid Garden

CSS Libraries/Frameworks and more, or Bootstrap and friends:

So you've safely emerged from the tall grasslands of HTML and CSS on your web developer journey. What lies before you next is the expansive plains of CSS frameworks and libraries.

There's a lot of confusion about what constitutes a CSS framework vs. a library and I'm not gonna get into that here. Instead I'll just show you some possibilites. This list will focus on what's popular and/or good. These are not necessarily the same thing. Popular libraries/frameworks almost always have a large, supportive community with robust documentaion, while the ones considered good may have the same support but solve a particular problem well or better than others.

• Sites/Reference:

  • Bootstrap Docs
    • Examples
  • Skeleton (Simple and Clean)
  • Materialize CSS
    • Examples

• Videos:

  • Traversy Media
    • Skeleton Landing Page
    • MaterializeCSS Crash Course pt. 1
      • pt. 2
  • Design Course
    • Bootstrap 4 Crash Course

Online Curriculum:

These links are complete repos, lists, and curriculum you can follow if you feel lost. But remember devs are paid for thinking so if you find something that doesn't work for you, pivot or come back to it later. Be kind to yourself!

• MDN Learn Web Development
• RithmSchool
• P1xt Guides (Pick one!!)
• W3 Schools
• Free Code Camp
• The Odin Project
• Upcase by ThoughBot (Rails, Design, TDD)
• App Academy Open (free version of App Academy Curriculum)

[Edit]: Next I'll add a part 0 where I'll talk about some resources for learning the bash terminal/command line and version control with git/github.