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.
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: Alcamine (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.
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.
Time: 80 hours
Bring It All Together
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.
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!