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 to use as your code editor. After that you’ll need a terminal to run commands and do various other things so download . Lastly, you need a browser to test your website in so grab the latest version of . VsCode iTerm2 Google Chrome Getting Into the Community The only way to catch up is to jump right in. Do the following: Read and daily FreeCodeCamp Hackernoon Listen to the podcasts and weekly Syntax Shop Talk Show Hop on Twitter and follow a bunch of developers. Here’s a short list to get you started: (shameless plug), , , , , , , Caldera 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 40 hours Time: HTML gives webpages structure and CSS makes them look pretty. 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: Do not use a library like Bootstrap for styling during this part. 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 Git, create a Github account, and initialize a repository. Check this course out to get started: install 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 . It helps you visualize things and is friendlier to use. SourceTree Javascript 80 hours Time: 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 60 hours Time: 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 course to get your feet wet in a variety of projects. Javascript 30 React 100 hours Time: This is the make or break step in modern day web — 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: learning development Level Up Tutorials: React for Everyone Modern React with Redux CSS Time 20 hours Time: 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 20 hours Time: 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. Buy this course, go through every lesson of it, and make sure you understand these things before moving forward. *break glass* Learning Javascript on a deep level is the key to long term success in web development. 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! My name is Marcus Wood. I am the founder of Caldera, a full-service digital agency focusing on web applications.