Frontend Developer Roadmap, Guide and Resources
12 min read
Table of contents
- Essential Tools
- HTML And CSS
- Sass (Syntactically Awesome Stylesheets)
- CSS Frameworks
- Design Fundamentals
- Additional Tools
- Deploying Static Websites
- Basic Server Knowledge
- Where You're Currently At
- Server Side Rendering
- Static Site Generators
- Beyond Frontend Development
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!
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:
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.
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.
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.
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.
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
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
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
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
- Visual Hierachy
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.
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
- 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:
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
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 email@example.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
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.
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 Crash Course, Redux Crash Course, React List Of Courses
Vue Crash Course, Vuex Crash Course, Vue School
Angular Crash Course, Angular Educational Resources
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.
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!
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:
LinkedIn: Blake Yeboah
You can also show your support by buying me a coffee 😃
Did you find this article valuable?
Support Blake Yeboah by becoming a sponsor. Any amount is appreciated!