(Please bear with me while I'm breaking this up into multiple separate posts and updating anchors, apologies if some links between sections do not work, they should be updated within the next 24 hours)

Introduction

This post is targeted at anyone and everyone out there who has decided, for any reason at all -- that they would like to become a web developer.

Although there is plenty of information that even experienced developers may find helpful, the primary audience I am aiming to target with this post are complete beginners.

The purpose is to give readers an introduction to a massive range of topics.

It is not meant to be a fully comprehensive deep dive into any one of those topics in particular.

Instead, at the end of each section where I discuss a concept, I will include a curated list of links and resources which you can visit to continue your learning on that topic.

With a couple exceptions, all of these resources are entirely free.

At any point a topic is spoken of or introduced, I will make an attempt to answer these three questions:

• What is it?
• Why is it important?
• How do you use it?

These questions are critical to beginners in particular as I know it can often be extremely difficult to bridge the gap between discussion of a concept and seeing how it's actually used in practical application. For example: I know websites use a programming language called Javascript but where do I actually write that code and how do I make it run?

If you encounter anything in this tutorial that you feel is skipped over too quickly, please let me know in a comment and I will make a best effort to update it to be more clear.

My goal here is to provide you with not only the technical details you need to know, but also answers to a lot of more generalized common questions that come up like:

• "How long do I need to practice before I can apply for jobs?"
• "Do I need to go to college? (or back to college again?)"
• "How do I know which things I even need to learn?"

In fact, maybe you're still so early in your journey that you don't even know what being a "web developer" means! And that's perfectly okay.

Perhaps you're still in college and worried about what it's going to be like to apply for jobs when you graduate. Or maybe you hate your current job and you heard on the internet that being a web developer is a real sweet gig.

Well, you're right it is. And it's a bit unique compared to some other professional fields like medicine, law or civil engineering where you really can learn and acquire all the skills necessary to succeed from the comfort of your own home entirely for free.

That may not necessarily be the most efficient route, or the one that is right for you, but it does afford potential avenues of opportunity to a lot of people who might otherwise not have the same options.

With that said it's important to state unequivocally that being accessible does not make it easy. Learning web development is difficult. Really difficult. It's a massive field.

That's the bad news.

The good news, is that it's a good kind of difficult. And you don't need to know everything. Not even close. I certainly don't.

If your goal is to get employed, you just need to learn enough. Enough to get started and make small contributions to the big projects at the companies where you work. Enough to keep asking questions and learning as you go.

Now let's start by diving right into one of the most common questions people will ask themselves before they take the plunge

Do I have what it takes to become a developer?

Aspiring to becoming a web developer (which itself is just a specific area of focus for the more generalized role of software developer) means signing up for a lifetime of learning.

If that alone isn't enough to scare you aware right now, then that's a good sign you're on the right track.

The very first lesson, and the first thing you need to learn, is to become comfortable with not knowing how to do something. It's going to happen to you constantly. Even when you've got years of experience. There's a good chance that you'll encounter something you don't know how to do at first glance as frequently as every day.

If you see yourself as someone who can be in that situation, and see it as a challenge to overcome rather than an impasse, then you are fortunate enough to possess what is probably the most important pre-requisite for becoming a developer.

The entire software industry exists because of people with that attitude, and it is entirely dependent on them to continue to function.

If you're still reading I'm going to assume you've agreed that you are that kind of person. Great! Let's take this opportunity to test that.

Is there a roadmap or summary of everything I should learn?

I'm going to hit you with a link that you might come across while you're beginning your journey. Maybe you've already come across it.

Before you click, acknowledge that part of being a developer is recognizing that it's perfectly okay not to know something. It's perfectly okay not to know lots of stuff!

Take a moment to skim through the link below. If you feel completely overwhelmed, remember that's totally normal.

The step-by-step roadmap to becoming a front-end developer

What do you think? That's a heck of a lot you're going to have to learn isn't it? Maybe this wasn't such a good idea?

The reality is you're going to come across a lot of similar links like this while you are learning. They are often going to make you feel like maybe it's too much, that the journey will not be possible.

I've been a developer for many years (including enough to be teaching and training others) and there's topics and tools on that list that not only have I never used -- but there's some I've never even heard of!

I'm here to tell you definitively that if your goal is simply to "become employed as a web developer" then you can safely devote 100% of your attention to just the first five things on that list:

1. Internet (the browser and simple web servers)
2. HTML (the structure of websites and web apps)
3. CSS (the style/appearance of websites and web apps)
4. Javascript (the interactivity and data for websites and web apps)
5. Version control systems (the ability to work with other team members and back up your project)

That's it. Almost everything else on that list is simply a tool someone has created that boils down to one of the above (or makes it easier/faster to work with them).

If you have a solid understanding of the fundamentals of those five things, then you will have the necessary knowledge to learn everything else.

I'll pick a few random ones off the list to demonstrate:

• Electron: Electron is a tool that uses chromium (basically the Chrome browser) to let you write web apps that you actually install on your computer. It's popular because since it's Chrome based, you can write those apps and run them on almost any platform (Windows, Mac, Linux, etc). You write those apps in HTML, CSS and Javascript. So if you know those three, then you can easily learn Electron. Popular Electron apps include Slack, Discord and VS Code.
• Sass: Sass is an enhanced version of CSS. It lets you write a bunch of extra syntax that you can't write in normal CSS in addition to regular CSS. Once it's written you use a little tool called a preprocessor to convert that file into a regular CSS file. If you understand the fundamentals of CSS, you can easily learn SASS.
• React: React is a tool written in Javascript to make organizing and interacting with parts of the browser easier. Its syntax is basically a mix of HTML and Javascript together. Rather than having to manually write all the instructions for interacting with browser elements in Javascript, you can write re-usable React components to share behavior across different parts of your website or web app. Similar to SASS, a processor is then run over the React code to convert it into Javascript. If you understand the fundamentals of HTML and Javascript, then you can easily learn React.

Those are just three examples, but as I said the majority of topics on that roadmap could have similar descriptions. Most everything in the front-end ecosystem comes back around to HTML, CSS, and Javascript.

HTML, CSS and Javascript are the building blocks of the web, have been for decades, and despite what anyone says, there is no indication that is going to change anytime soon. Nothing is truly future proof, but those three are about as close as you get in the web development industry.

So that basic introduction out of the way, let's talk about what being a web developer really means.

What is a web developer?

A web developer is someone who contributes work to any part of a web page or application. It is a subset of the field of software development describing someone who specifically works on projects that are accessed by users over the internet.

It doesn't even necessarily mean writing code. For example you might build pages in Wix or Squarespace or Wordpress using drag-and-drop tools to place the elements where you want them.

Anyone who works on building websites is a web developer (at least as far as I'm concerned). They're just using different tools.

Nevertheless, the most common definition of a web developer is someone who uses HTML, CSS and Javascript to build websites and web apps.

The majority of jobs out there hiring for a "developer" position are looking for those skills at absolute minimum. The majority of this tutorial will be focused on those three technologies.

What is the different between a Front-End, Back-End and Full-Stack developer?

Front End Developer

A front-end developer is someone whose focus is on the part of we pages and apps that the user sees. Their core tools are HTML, CSS and some Javascript.

There is a very interesting article called The Great Divide that discusses the divide in the front-end development world.

At absolute minimum I would expect someone applying as a front-end developer to be able to work comfortably in HTML and CSS, with a basic knowledge of Javascript.

Back End Developer

A back-end developer is someone who works on the part of the sites and apps that relates to the data itself and how the user interacts with it.

A back-end dev needs to understand network configuration, hosting, HTTP, REST, user authentication, be familiar with web servers like Apache and Nginx, and know how to work with databases like MySQL or MongoDB.

Common programming languages you'll use to do back-end development are PHP, Python, Javascript, Java and C#.

Full Stack Developer

Full-stack developers are simply devs who have experience working on both front-end and back-end. Often they will not have as much experience as a dedicated dev in either domain, but they are considered extremely valuable to companies for being a jack of all trades.

Full-stack devs are more common now as many modern tools are built around the assumption of blurring lines between front and back end. It's more common than ever for companies to want to hire devs who can work with both.

My recommendation to anyone would be to have a preference for either front or back, but at least be willing to learn the basics of the other. It will greatly benefit your career opportunities if you do.

This guide will focus on tools and strategies needed to become a front-end developer, but we'll cover basic explanations of the fundamentals of back-end as well so you're at least aware of how they work if that's a path you decide you want to take.