roadmap for front-end development

There are some great roadmaps for web developers out there. But some make you solve a "puzzle" before even getting started, as there are multiple choices that you have to make.

When I started to learn Web Development, I wished that I could find an experienced developer who would tell me what they had done to become a Web Developer. Unfortunately, I couldn't find anyone.

I will also be talking about some example projects that you can build to practice your skills.

Tools You Need to Know to Become a Web Developer

I'll assume that you are a beginner. In that case, there are a few tools that you need to know before getting into programming.

VS Code (or other code editor)

First, you should learn how to use Visual Studio Code, which is a source code editor. It is a free and powerful tool.

In the beginning, I recommend learning some of the basic shortcuts and installing some of the extensions like ESlint, Prettier, or Live Server.

Here's a free, full-length course on the freeCodeCamp YouTube channel to get you started.

The Command Line

Next, you need to know about the Command-Line. You should learn what it is, and some of the basic commands like how to move around directories, how to create a new directory, or how to create a new file.

Version Control - Git and GitHub

No matter what you do, as a developer, you need to know about Git. Git is a Version Control system used for tracking changes. It is usually used with GitHub, which is a code hosting platform.

In the beginning, learning Git might be overwhelming, therefore you just need to know some of the basics like how to create a new Repository, how to clone a project, how to make a new commit, and how to pull and push the new changes.

One of the best ways to practice Git is by working in a team. There, you need to know how to create a new branch, how to make pull requests, and how to resolve conflicts.

Here's a great Git and GitHub crash course on the freeCodeCamp YouTube channel to get you going with version control.

Design tools - Figma

The last tool is Figma. Figma is a design tool and is free to use for individuals. But here I want to talk about how to use Figma as a developer.

Alright, so these are the tools that you need to know of when getting started. You don't need to know everything, but be sure that you understand the basics so that you can improve while learning to code.

HTML and CSS

Next, let's continue with programming languages. And let's start off by talking about Responsive Websites.

Responsive websites are sites that look good and are usable on all devices or screen sizes. You probably know how important it is to build a responsive website, as people use so many different devices these days.

So let's jump to the first two languages that you need to know to build a website: HTML and CSS.

HTML stands for Hypertext Markup Language. It it is used to build the skeleton for your website. HTML is not difficult to learn, but you might want to pay more attention to HTML forms as they will be fundamental in the future.

CSS stands for Cascading Style Sheets. This is a markup language but I also consider it to be a programming language. CSS is not necessarily difficult to learn but it's difficult to master.

There are few topics that you want to pay more attention to like:

Box model - how margins, padding, and borders work together.
CSS units - used for expressing lengths (e.g: rem, vh, and vw).
Position - specifies the type of positioning method. It also confuses many people so make sure you spend some time on it.
Variables - or Custom properties are entities that can be reused throughout a document. This is my favorite feature in CSS. They make working with CSS so enjoyable and you can create themes with just a few lines of code.
Media query - decides what to show on different screen sizes. They are a key component of responsive design.
Animation - lets an element change from one style to another. If you know how to use animation correctly, it makes your site stand out. Otherwise, it will make your website look unprofessional, so be careful.
Flexbox, CSS Grid - used for building Responsive layouts (I forgot to mention this in the video).

When you know the basics of HTML and CSS, the next step is to build some basic websites. For example, you can try a Homepage, a Form like a login page or a checkout page. You can even build a Portfolio. You can find example projects on DevChallenges.io.

Website deployment

Once you have your website, you need to put it on the internet, so people can see it. Deployment is the process of deploying your code to a hosting platform.

Back in the day it was a lot more difficult to do. But now, it's super easy and you can use tools like GitHub Pages, Netlify, or Vercel.

Here's a full YouTube course on how to get your site online that covers the entire process from start to finish.

JavaScript - Fundamentals

Alright, the next topic is JavaScript. JavaScript is a popular programming language and is widely used for Web Development, among other things.

You will need to learn some of the basic features of the language like Data Types, Loops, and Conditionals.

Then there are topics that you will want to dive deeper into.

First, we have debugging. This is the process of finding and fixing errors. Here's a great in-depth guide to bug squashing to get you started.

Then there are other topics like Objects, Primitives, and Arrays. Especially when working with Arrays, you need to know about Array methods as well.

Functions are the main building blocks in your program. So make sure that you don't overlook them.

One of my favorite features in JavaScript is de-structuring it is easy to write and makes the language super powerful.

And no matter how good you are with programming, you will have errors in your scripts. This means you'll want to know about Error handling as well.

Asynchronous programming is important, especially when you need to communicate with the server. So spend some time learning about Promises and Async/Await.

JavaScript - Browser

Let's move on to how JavaScript is used in the browser.

First, you need to know what a Document Object Model or DOM is. Then you need to know how to get elements, how to change the classes, or how to change the style with JavaScript.

After that you have to introduced with JS DOM (Document Object Model)

You also need to learn about different User Interface Events like click, mouse over, mouse down, and so on.

And, you'll also want to pay more attention to Forms in JavaScript as they have many events and properties

JavaScript - Other features

The Fetch API is an important topic. It lets you send network requests to servers. This is useful, for example, when we need to submit a form or get a user's information.

Another important topic is Storing Data in the browser. Here you need to know what the differences are between Cookies, LocalStorage, and sessionStorage.

Other less important topics when you are just getting started are Regular expressions, Web Components, and Websockets.

Regular expressions are used to search and replace text. Web Components, are a new thing but you should totally check them out.

Lastly, we have Websockets. They are useful when you need to have continuous data exchanges like in chat applications.

So after learning Javascript, you might want to spend some time to learn about TypeScript. I love TypeScript as it gives me a safe feeling while writing code.

TypeScript provides static typing, that allows you to catch errors earlier in the debugging process. It also saves your time as it finds bugs before the code runs.

Here's a helpful post on TypeScript types to help you think about them the right way.

You can stop here and start working on some projects. But personally, I would continue by learning at least one framework. Then you can practice JavaScript at the same time.