Frontend Developer Roadmap, Guide and Resources

The realm of frontend development is a complicated one. With new technologies emerging all the time, it can be very overwhelming and confusing for new comers trying to learn.

This article serves as a guide to simplify frontend development and tell you exactly what you need to learn and when. Links to resources will also be available so you can start learning sooner rather than later.

This is a very long article covering all aspects of frontend development so feel free to use the table of contents to select specific sections that you're interested in. With that out the way, lets begin!

Essential Tools

You'll need a few different tools in order to get started on your frontend developer journey.

Computer & Operating System

The first of which is a computer with your desired operating system. The question of which operating system is best for development is widely debated. You have a few options including:

Windows
MacOS
Linux

I personally have used Windows my whole life and with features like WSL (Windows Subsystem for Linux) the developer experience is great. If you are a completely beginner, I wouldn't recommend using Linux since it is a bit more complicated to use/set up but you can if you want.

Text Editor

A text editor is a piece of software you use to write code. Your computer already has a text editor (such as Notepad on Windows) but using a proper text editor made for coding has many benefits such as code highlighting, code completion and theme customization. There are many options out there, to name a few:

I use Visual Studio Code and would recommend you do as well. It is produced and maintained by Microsoft and has many features such as extensions, impressive intellisense (code completion) and hundreds of themes to choose from. If you decide to use VS Code, check out my Customizing Visual Studio Code article to learn how you can customize it to suit yourself.

Web Browser

Obviously, if you are building websites you will need a web browser. There are many great options out there. The three I would suggest choosing from include:

I use Brave because I like its built-in ad-blocker and other privacy oriented features but Chrome and Firefox are great options. Make your choice, you can always install another browser and try it out.

Terminal

A terminal is an important part of a developer's toolkit. It has a variety of uses such as navigating file system, creating & deleting folders/files, using source control (more on this later) and using command line interfaces to generate stuff. All operating systems come with a terminal pre-installed. On windows, I would highly recommend you use an alternative terminal to the default. Some options include:

Git Bash
Ubuntu (through WSL)

At the very beginning you won't need a terminal so you can make your decision later when it becomes very useful. On MacOS and Linux the default shell is solid and should work for most of your needs. You can always install an alternative terminal such as Oh My Zsh or Hyper if you wish.

Design Software

The final essential tool you will need as a frontend developer is some sort of design software. There are many options out there; the most popular of which include:

I use Adobe XD, it has a free tier available which is great and its features are outstanding. Figma is also free and is a great piece of software. Both Photoshop and Sketch are paid but are also good design programs. I use Photoshop in addition to XD but rather than designing user interfaces, I usually use Photoshop to manipulate and prepare images for my websites instead. Also take into account that Sketch is only available on MacOS so you need a Mac to use Sketch. Overall, I would recommend you use Adobe XD but the others are also good options.

That covers all of the essential tools you will need to get learning frontend development.

The following sections contain affiliate links to certain products which means I earn a small commission for any purchase you make. This comes at no extra cost to yourself.

HTML And CSS

The first technologies you should learn on your frontend journey are HTML & CSS. The reason why is because they are the building blocks of every web application out there. HTML is essentially the content of the website (including text, images, etc) and CSS is the styling of the content (such as colors, fonts, etc).

The key aspects you'll want to learn include:

HTML 5 Page Structure & Semantic Tags
CSS Styling
Positioning, Alignment, CSS Grid & Flexbox
Responsive Design using media queries

Here are some resources to help you learn HTML & CSS:

Articles: My Getting Started With HTML Article, Semantic HTML Elements

Books: HTML and CSS: Design and Build Websites

Videos: freeCodeCamp Full Course, HTML Crash Course, CSS Crash Course

Cheatsheets: HTML Cheat Sheet, CSS Cheat Sheet

After learning HTML & CSS, you could learn a CSS framework however I would recommend learning Sass first.

Sass (Syntactically Awesome Stylesheets)

Sass is a CSS preprocessor which gives you more functionality in your styling. It offers many features like variables, mixins, nesting and more. Sass is not a necessity for you to learn however I would recommend you do since it will significantly increase your productivity as a frontend developer and you will certainly encounter it at some point along your journey.

Here are some resources to help you learn Sass:

Articles: SCSS Cheatsheet Article, My Ultimate Guide To Sass Article

Videos: Sass Crash Course, Learn Sass in This Free Crash Course

CSS Frameworks

After learning Sass, I would suggest you learn a CSS framework. CSS frameworks let you create user interfaces quickly but you should still learn the fundamentals of CSS first. Choose one of the following frameworks:

Tailwind CSS
Bootstrap
Materialize

Tailwind CSS is a utility-based framework which means it gives you various utilities to create your own components out of. On the other hand, Bootstrap & Materialize give you pre-built components like buttons that you can use. I personally love Tailwind CSS because of the customization it gives you however Bootstrap is another great option. I wouldn't recommend learning Materialize since it is significantly less popular.

Some learning resources:

Videos: Ultimate Tailwind CSS Tutorial, Tailwind CSS Crash Course

Documentation: Tailwind CSS, Bootstrap 5, Materialize

Design Fundamentals

Its a good point along your journey to begin learning the fundamentals behind good UI design. You should learn things like:

Color & Contrast
White Space
Scale
Visual Hierachy
Typography
etc.

A great YouTube channel to learn fundamentals of design and many others things related to front end web development is Design Course. I would definitely recommend you check him out and watch some of his videos.

Vanilla JavaScript

At this point the learning curve begins to increase a bit as you tackle your first programming language - JavaScript. JavaScript is a scripting language that lets you add functionality to web pages. It is extremely important to learn if you want to become a front end developer.

Here are some of the things you will want to learn in JS:

Basics like variables, arrays, functions, etc
Selecting and manipulating the DOM
High Order Array Methods like forEach, map, filter and reduce
JSON
Making HTTP Requests with the Fetch API
ES6 (new features like arrow functions, classes and more)

Here are some great resources to help you learn:

Articles: Understanding Loops in JavaScript, JavaScript Arrow Functions, JavaScript High Order Array Methods

Books: Eloquent JavaScript, JavaScript and JQuery

Videos: JavaScript Crash Course For Beginners, freeCodeCamp Vanilla JavaScript Course

Additional Tools

At this point, there are some additional tools you should start learning.

Version Control: You should learn Git and a repo manager such as GitHub which allows you to save versions of your code in repositories and view changes you've made over time.
Package Manager: A package manager allows you to install and control packages installed in your project which can be used to implement various features. Some package managers include NPM and Yarn.
Module Bundler: A module bundler combines all of your modules into a single file which can significantly reduce the size of your application. I would recommend you learn Parcel, however there are other good options like Webpack.

Deploying Static Websites

Now, you should begin learning how to deploy websites built with HTML, CSS and maybe some JavaScript. There are various options of deploying a website. One of which is shared hosting with a service like BlueHost. Shared hosting gives you many things like an included domain, free SSL certificate and a whole C panel to manage your hosting. You can get started with BlueHost using my affiliate link.

Another option to deploy your websites would be with a platform called Netlify. An advantage of using Netlify is that it has a great free tier and is very easy to get started with. Additionally, you can have continuous deployments if you connect your GitHub repository to Netlify. I have an article - Hosting Web Applications - that includes a step-by-step guide to deploying a website on Netlify if you're interested.

Basic Server Knowledge

Here is a list of things you will probably run into when deploying your basic applications through shared hosting or static hosting like Netlify:

Domain Names: Many options to buy domains from including Namecheap, GoDaddy and Google Domains. A free domain name may be included with your shared hosting plan (depends on the company).
Email Hosting: Having emails with your domain. e.g contact@blakeyeboah.com is my professional contact email on my own domain.
SSL Certificates: Securing your websites, adding the padlock icon to your websites. Let's Encrypt is a free solution to getting an ssl certificate for your website.

Where You're Currently At

You are currently a beginner frontend developer. You can:

Create great landing pages for businesses
You can create responsive layouts
You can deploy and manage a static website
You can use Git to save your work
You can write HTML, CSS, JavaScript and use a CSS framework to build your projects.

If you want to become a full-fledged front end developer I would suggest you continue learning what's to come and improve your skill set. However, if you were learning code to simply be able to build a website for your business, or just build simple websites you are now more than capable of doing that.

Front End JavaScript Framework

To really up your frontend toolbelt, I would highly recommend learning a JavaScript framework. There are three most popular frameworks including:

React
Vue
Angular

React is technically a library not a framework but with packages it essentially serves the same purpose. React is bolded as its what I learned and what I recommend you learn. Its become the most popularly used framework in recent years and I think its great.

Vue is another good option you may wish to learn. You can even look at code snippets of each one or dive into the basics of each to make an informed decision on what framework to want to learn.

With each framework, you should also learn a state management solution:

For React: Context, Redux, MobX
For Vue: Vuex,
For Angular: Shared Service, NgRx

State management essentially gives you one application level store which is where all of your data is stored and individual components can access this data. This will make more sense when you learn a framework.

Here are some resources to help you learn each framework:

React

React Crash Course, Redux Crash Course, React List Of Courses

Vue

Vue Crash Course, Vuex Crash Course, Vue School

Angular

Angular Crash Course, Angular Educational Resources

Testing

Testing is another great thing you should learn to become a front end developer. Testing can reveal bugs and errors in code before any serious issues occur. There are three main types of testing:

Unit Tests: Tests individual parts (units) like functions or components in a framework.
Integration Tests: Modules tested as a group
End-to-End Tests: Tests whole workflow from beginning to end

There are whole articles and books that discuss each individual area of testing since its a very broad area so make sure at some point along your journey you start learning how you can write some tests for applications.

TypeScript

As with a lot of other developers, I love TypeScript. However, its something that you either love or hate. TypeScript is a superset of JavaScript that allows you to strongly type your code. E.g you can give a variable a type of number and if you assign a string to it you will receive an error.

Strongly typing JS with TypeScript makes your code significantly less prone to errors and works great for bigger applications. Additionally, TypeScript can be used on its own or with a JS framework so it works for any sort of project you might build.

Here are some resources to help you learn TypeScript:

Server Side Rendering

Server Side Rendering (SSR) allows you to run JS frameworks on the server. This comes with many benefits such as improved SEO, easier routing and more. As you look into it, you will learn which use cases SSR can significantly help your application and where its unnecessary.

Depending on which JS framework you pick, there will be a different SSR framework for you:

Next.js for React
Nuxt.js for Vue
Angular Universal for Angular

Server side rendering frameworks are becoming more and more popular and I would suggest you learn one for your chosen framework.

Static Site Generators

Static Site Generators (SSG) generate website pages at build time rather than in real-time which makes them incredibly fast and secure. Different SSGs are based on different frameworks/languages.

Here are some of your options:

Gatsby based on React
Gridsome based on Vue
11ty based on JS
Jekyll based on Ruby
Hugo based on Go

SSGs also allow you to build cool applications like blogs where your posts are markdown files that are converted at build time to pages of their own. I would suggest you look into a static site generator however it is optional.

Beyond Frontend Development

If you've learned everything on this list, you are now a full fledged frontend developer who can build complex UIs taking advantage of data-rich APIs.

There are various next steps you may wish to take, such as:

Getting a job
Learning backend development

In fact, I have an article - Beyond Frontend Development - which talks about what your next options are after learning frontend development. Feel free to check it out!

Conclusion

If you've made it this far, congratulations! You now know exactly what you need to learn in what order to become a great frontend developer. I spent a long time writing this article so I would appreciate any support (a thumbs up, a comment, etc).

👌 Thanks for reading this article!

If you like what I do and would love to see more related content, follow me on my other social platforms:

Github: Blake-K-Yeboah

LinkedIn: Blake Yeboah

You can also show your support by buying me a coffee 😃