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: Me (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:
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:
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:
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
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!
Top comments (3)
JavaScript and React will take much more time then 100 hours. 1000 is more realistic number 😉
20 hours for CSS? It's 3-4 days, you probably won't even make your first layout and web page for that time.
As well as 10 hours for week is nothing. Not to discredit your article, but I would rather warn starters that learning programming and web development is a hard and long process. Make sure you like it and really want to invest in it, otherwise you will end up tired, overwhelmed and lost.
Yeah for sure, I've been doing React for 3 years and still learn new things about it. I also agree 10 hours isn't a lot and some days when I was a beginner I'd code for 10 hours in a single day. However, the theme of the article is for beginners to allot 10 hours to solely focus on code in the editor with no phone or distractions. In the article I say that doesn't include tutorials, podcasts or anything else too. When I started, I used Treehouse and watched hours and hours of tutorials, but didn't get hands on the keyboards very much when that's what I needed most.
The goal of the article is to give folks a framework on what to run through when they begin. By the end of it they'll want to know if it's something they want to continue to pursue coding or not, but they probably will because coding is awesome 😄.
Wow. I'm so glad I found this. I'm just starting to learn code and I have been looking for a guide like this :) THANK YOU!!!