paint-brush
Beginning your Web Development Journey? Start Here.by@marcuswood
28,040 reads
28,040 reads

Beginning your Web Development Journey? Start Here.

by Marcus WoodJuly 5th, 2018
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

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.

People Mentioned

Mention Thumbnail
Mention Thumbnail

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - Beginning your Web Development Journey? Start Here.
Marcus Wood HackerNoon profile picture

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:

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:

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!

My name is Marcus Wood. I am the founder of Caldera, a full-service digital agency focusing on web applications.