The Frontend Web Development RoadMap (2021)
An Encapsulated Guide for becoming a Frontend web developer.
Become a Frontend Developer
HTML + CSS + JS = Fronted Developer but not modern Fronted Developer.
Before I go ahead and list down the resources, please know that the roadmap and the list below is exhaustive and you don’t need to know it all from the get go.For Frontend development, all you need to get started with is learn some basic HTML, CSS and JavaScript and start working on projects; everything else you will learn along way.
Every thing started with a small step and to become a master in Frontend Development you need to start from the basics.
- Basics
- CSS Framework
- Package Manager
- CSS Preprocessor
- Build Tool
- Front-end Framework
- Testing
- PWA
- Performance
- CSR
- SSR
- Static Site Generator
These are the things which is very much important for front-end master. I’ll discuss each of this one by one.
Internet and how it works?
Get the basic understanding of network and other relevant knowledge.
- What is Internet?
- What is HTTP and how it evolved
- HTTP/3 the past, the present and the future - “Lowdown on the Fast New UDP-Based Protocol”
- How Browsers Work
- How DNS works
Learn HTML
HTML provides the skeleton of a webpage. Learn the basics of HTML; learn the basic tags, learn how to write semantic HTML, understand basic SEO, learn how to divide your pages into sections that will help you style them.
Style your pages with CSS
With the help of HTML, you create structure for your pages. CSS allows you to style your pages and make them pretty. If you take the analogy of human body, the skeleton would be the HTML, skin would be the CSS and muscles that help us move would be JavaScript
Basics of JavaScript
JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on.
Version Control Systems and Git
Version control systems allow you to track changes to your codebase/files over time. They allow you to go back to some previous version of the codebase without any issues. Also, they help in collaborating with people working on the same code — if you’ve ever collaborated with other people on a project, you might already know the frustration of copying and merging the changes from someone else into your codebase; version control systems allow you to get rid of this issue.
