Beginning your Web Development Journey? Start here.

I started learning how to code four years ago. When I started, I knew that I wanted to build websites and apps. I figured I’d learn what I needed and make some cool stuff to land an entry level developer job. What I didn’t anticipate is how many tools there were to choose from, and there wasn’t much direction on where to start. Choosing a code editor, using the command line, version control, and not to mention learning the tech jargon made it hard to start.

I can’t tell you how many nights I spun my wheels in the wrong direction learning something I’ve never used. This is what I wish someone would of told me as well as a bunch of great resources to get you started.

Where to Start

There are A LOT of languages and tools you can use to build for the web. All of them have their benefits, and are maintained by tons of super smart people. While this is great for pushing the web forward, it’s confusing and overwhelming to start.

Learn HTML, CSS, and Javascript exclusively.

If know HTML, CSS, and Javascript on a deep level, you will be able to create anything on the web.

The Core Ten

Strive for ten hours of real coding each week. That means in the editor, slinging divs, and writing methods. Podcasts, tutorials, and reading blogs aren’t part of that ten. Don’t go over and definitely don’t go under. There’s a certain amount of time it takes for the concepts to sink in, so a steady pace will level up your skills faster.

Tools to Use

Next up, download VsCode to use as your code editor. After that you’ll need a terminal to run commands and do various other things so download iTerm2. Lastly, you need a browser to test your website in so grab the latest version of Google Chrome.

Getting Into the Community

The only way to catch up is to jump right in. Do the following:

• Read FreeCodeCamp and Hackernoon daily
• Listen to the podcasts Syntax and Shop Talk Show weekly
• Hop on Twitter and follow a bunch of developers. Here’s a short list to get you started: Caldera (shameless plug), Dan Abramov, Kyle Mathews, Christian Nwamba, Wes Bos, Jason Miller 🦊 ⚛, Scott Tolinski, Ryan Florence

Will you understand this stuff yet? Probably not. The point is to get you introduced to it early so it’s easier to dive in later.

HTML and CSS

Time: 40 hours

HTML gives webpages structure and CSS makes them look pretty. Do not use a library like Bootstrap for styling during this part. The point is to get used to creating markup, positioning elements, and styling only using CSS. Some of my go to resources to learn for this are:

• CodeCademy
• Treehouse: Front End Web Development

While you’re building things focus on using the Chrome DevTools. It’s important familiarize yourself with all of these things so you can deep dive into them later.

Source Control

Time: Every project you do after this point

Do not skip this! From this point forward and forever, use source control to track and manage your changes. This enables you to go back in time if you really mess things up, collaborate with other developers, and share your code online. To start you’ll need to install Git, create a Github account, and initialize a repository. Check this course out to get started:

• Treehouse: Git Basics

This will likely be your first time using the command line to do computer things. It’s important to get comfortable there, and Git helps familiarize you with it initially. After you feel good about things start using SourceTree. It helps you visualize things and is friendlier to use.

Javascript

Time: 80 hours

Now it’s time to start bringing things to life and jumping into Javascript. This is the scripting language of the web and allows you to do nearly anything nowadays. You can create iOS/Android apps, backend servers, web applications, desktop applications, and even do machine learning with it. Focus all of your time on learning this language and this language alone. If you research you’ll see things like PHP, Ruby, Python, Node, Flask, React, Angular, Webpack, Jenkins, Wordpress, Rollup, Firebase, Docker, Yaml, and the list goes on. All of this stuff is great (except maybe PHP), but you need to focus on learning one thing well before branching out. You most likely won’t be doing too many web things, but that’s ok for now. Places to start:

• Want to learn JavaScript? Here’s a free 24-part course to get you started.
• Modern Javascript from the Beginning

Bring It All Together

Time: 60 hours This is where you take everything you’ve learned so far and bring it together to build some pretty cool things. I recommend going through Wes Bos’s Javascript 30 course to get your feet wet in a variety of projects.

React

Time: 100 hours This is the make or break step in learning modern day web development — learning your first library/framework. Most of the demand you’ll see in the job market for web developers will involve knowledge of some Javascript library or framework. Popular ones are React, Angular, Vue, Preact, and jQuery (though not as much nowadays). You’ll likely end up learning more than one, but I like learning React first because it’s going to shake up everything you’ve learned so far. Courses to check out:

• Level Up Tutorials: React for Everyone
• Modern React with Redux

CSS Time

Time: 20 hours

By this time you should have a collection of good projects and hopefully learned CSS along the way. It’s normally the first thing you learn, but the hardest to master. There’s also a bunch of different ways to style as you’ve probably seen in the courses listed above. You have CSS, SCSS, LESS, CSS-in-JS, inline-styles, PostCSS, Scoped CSS, and on top of that a bunch of different design methodologies for organizing your CSS. Don’t let any of this overwhelm you. To get caught up, read Modern CSS Explained For Dinosaurs. Now it’s time to dive into Flexbox. This will give you the power to create layouts with ease. For learning, read How Flexbox works — explained with big, colorful, animated gifs.

More Javascript

Time: 20 hours If you’ve made it this far, it’s time to slow it down and review what you’ve learned. Libraries, coding patterns, and best practices change all the time, but the foundation of the language does not. Learning Javascript on a deep level is the key to long term success in web development. Buy this course, go through every lesson of it, and make sure you understand these things before moving forward. break glass

• Javascript: Understanding the Weird Parts

Following this guide will help you learn faster, and focus on the most important aspects of web development. If you would be interested in a free video series that follows the the structure of this guide please clap and subscribe!