Becoming a developer in 2024 includes learning a lot of new technologies and keeping up to date with everything. Luckily, most resources can be had for free and are readily available.
Here is a sample roadmap with “homework” links. These links will be to free resources where you can learn each topic.
Some sections also have “practice” links. You can go to these and spend as much time as you want putting what you learned into action.
This list is the bare minimum. The section at the end will let you know additional skills you should pick up to be competitive in today’s market.
1. How the Internet Works
Depending on what field you’re coming from, you may or may not already know this. If you are unfamiliar with concepts such as CDNs, DNS, Web Hosting, and HTTPS…then you need to do this section.
This is foundational knowledge to keep in mind when developing websites. An understanding of these things will help you troubleshoot problems as they come up and make sense of where exactly your site lives on the web.
Homework:
Front End Masters – Sections 1-4
2. HTML/CSS
HTML is the markup that makes the structure of a web page. CSS is the markup that controls how it looks. These are both not programming languages and don’t require complex logic or math knowledge.
You can make basic sites just with these two. CSS in particular can take a while to master, since there are many different ways to do the same thing. You also need to keep browser compatibility in mind when writing CSS.
Homework:
FreeCodeCamp Responsive Web Design Course
Practice:
Frontend Practice Project Library
3. JavaScript
JavaScript, also known as JS, is the most popular programming language for the web. Sure, you could learn an “easier” language like Python and make websites with it. It’s less commonly used for websites though and if your goal is to be a front end developer it’s worth learning JS first.
Avoid tutorial hell by slogging through a book. The homework is a free online book that has code snippets you can run in browser. No need to setup a local developer environment just yet.
Homework:
Practice:
Optional: Consider learning about popular UI components.
4. Job Skills
These are skills that can translate to more careers than just a front end dev. These can be useful for IT professionals, Full Stack Devs, Software Engineers, and more.
4.1 Install and setup VSCode
You could setup any IDE here, but this is my personal recommendations list so – go with VSCode! It’s easy to use and you can use it with just about any programming language.
Homework:
Getting Started with VSCode Tutorial
4.2 Command Line
Your Command Line Interface (CLI) will be different depending on what operating system you’re on. The Bash shell is a common one to work with, but since most people run Windows I have included a guide for that.
Start by reading about what a CLI actually is, then take a look at this Window’s command guide. (Otherwise, lookup commands for your operating system.)
Homework:
Operating Systems: What is the Command Line?
4.3 Git
Learn about Version Control and how to send your code off to a repository. For small personal projects, you don’t need to do this. To get a job as a developer, you do. (You can practice with your own projects even if it’s overkill).
Pick one of the tutorials below to follow:
Interactive Browser Git Course
Setup Git yourself locally (recommended)
5. React
A component library is a set of pre-made and tested UI components that you can reuse in your app. They are used in just about every app. The most popular one is React, which is why I recommend you go with that.
The homework is to go through the docs themselves. They are easy to follow and read. I don’t recommend doing a course on React since most of those will be outdated by the time they are released. Just go to the source itself.
If you want to be more niche and pick a different one – Angular, Vue and Svelte are good alternatives.
Homework:
6. Testing
Making sure your code returns the results you expect can be done with thorough testing. There are frameworks that can help you write “unit tests” that will help you find bugs. Jest is a popular testing framework for JavaScript. (Especially React apps!)
How to Write Unit Tests (with Jest)
7. Additional Info
What you should know:
For Job Skills, you should know developer environments more in depth. Research the following:
Package managers like npm. Node.js runtime environment. Code analysis tools like EsLint.
To be full-stack or just more competitive during interviews – solidify your computer programming knowledge. Make sure you understand Data Structures, Algorithms and Design Patterns.
Consider learning some backend topics like – databases, authentication, and caching.
Know how to interact with and write API’s.
Additional Resources:
Data Structures and Algorithms Roadmap
Free Frontend Conference – Keep your skills up to date