When you’re a beginner, you might find yourself scratching your head thinking about how to begin your journey as a frontend developer. There are so many languages, libraries, and frameworks to choose from, so we created this frontend roadmap to help you on your way.
Your roadmap to becoming a frontend developer can be easily divided into 4 main parts:
- basic knowledge of software developers — fundamental topics necessary for software development and front end development
- basic knowledge of frontend development — elementary knowledge necessary for delivering web applications
- intermediary know-how — JavaScript frameworks
- advanced information — good to know, but not necessary in any situation
Let’s begin!
1. Roadmap to frontend developer — fundamentals
Let’s start with some basic knowledge. A frontend developer is someone who develops the user interfaces of web applications and web pages. You are responsible for the structure and web design, improving the user experience, balancing design and functionality, optimizing the web application for most devices, and much more. Simply put, as a frontend developer, you are in charge of the lines of code that make up the operation and structure of the user interface for your web apps.
Before you learn javascript and frameworks, you need to know about the basics of computer science. You should know what a function is, how your code will be interpreted, how to handle data, and basically, slowly build your basic knowledge of web development.
There are plenty of online courses that can help you grasp the basics, for instance:
- Introduction to Computer Science by Harvard
- Introduction to Computer Science and Programming by the University of London
- Introduction to Computer Science and Programming by MIT
It’s also crucial that you understand how browsers work, what HTTP and DNS are, and cookies. You can learn more about how the web works with this guide from freeCodeCamp.
2. Frontend learning roadmap — HTML and CSS
Everything starts with HTML. And if you want to make things pretty, you learn CSS.
As you can guess, HTML is the foundation of Frontend web development. Will you could be tempted to start learning all of the tags by heart, but you don’t need to; for starters, you need to understand the HTML document structure and basic tags, like HTML, head, title, body, and so forth.
As you grow more familiar, you can start working with semantic HTML and meta tags to improve your rankings on search engines.
Once you learn HTML, you can create web pages, but they aren’t be pretty or professional. To achieve that, you also need to learn CSS and style sheets. In the beginning, focus on some basic knowledge like:
- CSS selectors like HTML {}, .class{}, #id {};
- The box model is used to organize distinct sections of all elements;
- Positioning and other basic properties so that you know how to position elements and maintain the flow of your web pages;
- Media queries to define the looks and feels of your website on any device;
- More advanced properties, like variables, clip-path, text-ellipsis, etc;
- Advanced CSS Selector if you want to be granular with your selections.
To practice, you can make your first website with HTML and CSS, and everything will make sense once you use it. To gain a head start, you can check out this responsive web design course from freeCodeCamp that walks you through all you need to know. This is the first step you take towards creating your own portfolio of projects.
3. Frontend roadmap — learning Git
No matter what you’ve been told before, version control is not optional knowledge. No matter what version control system you use, like GitHub, DevOps, or BitBucket, GIT is common to all of them.
What is GIT?
An open-source distributed version control system that is specially made to handle any project of any size efficiently. In simpler words, GIT is like a local history of all the changes you’ve made to your project, organized in a single place. This can help you with the following:
- Keeping track of your code
- Backing up your code
- Avoiding unwanted consequences from mistakes or unexpected changes
- Collaborating with your teammates or anyone on a project.
There is a free course on version control with Git and a lot of articles on the topic that can help you start learning git.
4. Frontend developer roadmap — JavaScript
At this point, you’re a static site generator. If you want to add some interactivity to your projects, it’s time to dive into JavaScript.
If you need to have any interactivity or handle data (forms, pop-ups, and so forth), you’re going to need Javascript and Javascript frameworks. But what are those?
JavaScript is a programming and scripting language developed specifically for network-centric applications. JS is used in backend development as well. It might seem a little bit intimidating at first since it’s asynchronous — this means that the code isn’t necessarily executed in the order that it appears.
After developing a feel for how the code executes, you can start learning to create and dispose of event listeners; this will make it possible for you to trigger a callback when events occur.
The next step is getting familiar with DOM Manipulation. Along with event listeners, this will allow you to change any part of your web pages according to what events happen.
Just pick one JavaScript course from the many that are available online and start learning:
- Learn JavaScript, from Codecademy
- Intro to JavaScript, from Udacity
- JavaScript course, from W3Schools
- The Modern JavaScript Tutorial, from JavaScript.Info
5. Algorithms and Data Structures
Knowing some programming languages alone doesn’t make you a good frontend developer. You also need to know your tools well and be able to optimize your code. If you take the time to understand algorithms and data structures — like the differences between lists, queues, and stacks, or understand sorting algorithms and how they work — you’ll start writing cleaner and optimized code.
If you want to learn more about how clean code looks or why it is important, you can check out some courses from Clean Coders.
6. APIs
Even if you’re a frontend developer, you still need to find a way to communicate with the backend. This is what APIs are for: making your web application or web pages dynamic.
There are a lot of APIs available nowadays that make it possible for you to do almost anything you could wish for in your code. Here are some examples of very common browser APIs:
APIs for document manipulation
The DOM (Document Object Model) API lets you modify HTML and CSS. When you see a popup window on a website, that’s done by this API.
APIs for fetching data from a server
Used to update small sections of a web page on their own, this API has a huge impact on the performance of web pages and how they behave. Instant updates make the page seem more responsive and snappy. The name of this technique is Ajax.
APIs for graphics
As the name suggests, these APIs allow you to update pixel data from an HTML canvas element for 2D and 3D scenes. In simpler words, they let you draw shapes, import images, apply filters, and many more. You can also combine them with APIs for animation loops.
APIs for audio and video
As you’d expect, these APIs allow you to add multimedia elements to your web pages, like creating custom controls for playing audio and video, displaying captions or subtitles, grabbing video feed, and much more.
Client-side storage APIs
These are becoming more and more popular since being able to store data on the client-side is very beneficial. Using them makes it possible for your app to save its state between page loads and might even allow it to work offline.
There are also third-party APIs, like the Twitter API, the Google Maps API, or the YouTube API, that let you import all sorts of data and elements from these applications directly on your web page.
Each API works in a slightly different way, but they generally have common features and patterns that you can easily learn in order to work with them. As a general rule, your own code interacts with them through JavaScript objects. They act as containers for the data used by the APIs, and the functionalities it makes available.
7. Frontend web roadmap — JavaScript Frameworks
The best way to learn anything is to put it into practice. Before learning JavaScript frameworks, you should try making your own basic apps using vanilla javascript. If you need some inspiration, here are some small project ideas and some web app ideas to check.
With vanilla JavaScript, you are finally able to create functional front-ends. However, they aren’t scalable, and you won’t have all the advantages that using JavaScript frameworks and libraries a frontend developer needs.
Now you’re left with an important choice in your hands: which is the best web framework to learn first? While you shouldn’t lose sleep over it, the most popular JavaScript frameworks and libraries at the moment are React and Vue.
Before you make your choice, let’s go together through the learning journeys for both of them:
a. Frontend React Roadmap
While not technically a framework, React is one of the most popular JS libraries, especially for designing user interfaces. One of its best features is the ability to make reusable components that allow you to scale your application efficiently. A developer learning React can’t go wrong.
Let’s divide the roadmap into three main parts: foundation, basics, and design.
I. Foundation
- Get familiar with the UI — learn how to set up a React project, so you get familiar with the CLI, or the Command-line Interface. Running your React app can help you get to know the UI of React;
- Understand the code flow — in order to become a React developer, you need to get familiar with the code flow and the project structure. Find out how React runs in the browser, what is the virtual DOM and how it’s manipulated;
- JSX — similar to HTML, based on XML, try to get a good grasp of it and its advantages over HTML;
- Components — learn what types of components are in React, their life-cycles, and which ones you should use in different situations;
- Handling — states, functions, and JSX events;
- Modules — they allow you to create sharable code;
- Nesting and reusability — understand component nesting and how to create components in a way that they could be reused;
II. Basics
- Debugging and logging
- Fetching data from APIs — get a grasp of React’s built-in fetch function for retrieving data from an endpoint, storing it, and then displaying it accordingly.
- Use the Axios package
- UseEffect hook & useContext hook
- Work with browser local data
- React router
III. Design
- Grid layout — as the name suggests, this offers a grid layout to help you build your design by using rows and columns.
- Flexbox — get familiar with the container, aligning, and justifying concepts.
- SCSS — get familiar with CSS preprocessors and importing other SCSS files.
To make things easier, you can use this crash course on YouTube to kickstart your learning journey and create your first react app. You should also check the React official document.
b. Vue Web Frontend Roadmap
This progressive framework is used for building user interfaces and is very similar to** React**. If you’re already familiar with vanilla Javascript and you are an entry-lever frontend developer, you shouldn’t have any problems with Vue. The Vue official document is a great place to start.
A great advantage of Vue is that you can build progressive web apps with it — applications that work almost like a native one, increasing the user experience.
Javascript frameworks aren’t the end of the road. There’s so much more to do, like learn Sass, study material design, web security, and many other subjects that can come in handy in different situations.
8. Conclusion
There are many more things to learn than what we talked about and, frankly, the learning journey never really ends. The important thing is to always be aware of what skills you need, what new features come out, and to be flexible. Additionally, it’s always a good idea to showcase your projects into a personal portfolio — it’s a great way to see your progress and you can also use it in a job interview.
The next step in your career could be becoming a full stack developer, in which case you’re going to need backend roadmaps to follow. As with frontend development, you get one step closer with each crash course you take.
Happy coding!
