Become a Frontend 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 the way.

Internet and how it works?

Get the basic understanding of internet, browsers, networks and other relevant knowledge.

• Read What is Internet?
• Watch How the internet works in 5 minutes
• Read What is HTTP and how it evolved?
• Read HTTP/3: the past, the present, and the future
• Read What Is HTTP/3 – Lowdown on the Fast New UDP-Based Protocol
• Read How Browsers Work: Behind the scenes of modern web browsers
• Watch DNS as Fast As Possible
• Read How DNS works?
• Read DNS in One Picture

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.

Please know that I have put multiple links for each resource. While you may pick something new while going through each, you don’t need to go through all of them – if you feel like you have understood the concepts and are just repeating what you learnt, you may skip the resource and move to exercises section.

• Watch HTML Crash Course For Absolute Beginners
• Read W3Schools – HTML Tutorial
• Watch HTML Full Course – Build a Website Tutorial
• Read A few HTML tips
• Read Six tips to set up a better HTML document
• Read HTML Semantic Elements
• Read HTML elements reference

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 – we will learn more about JavaScript in the coming sections.

• Read W3Schools – CSS Tutorial
• Watch CSS Crash Course For Absolute Beginners
• Watch Build An HTML5 Website With A Responsive Layout
• Watch Flexbox CSS In 20 Minutes

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. In this section, you will learn the basics of JavaScript.

• Read W3Schools – JavaScript Tutorial
• Watch JavaScript Crash Course for Beginners
• Watch Build a Netflix Landing Page Clone with HTML, CSS & JS

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.

In this section, you will learn what version control systems are and understand how to use Git which is the de facto VCS.

• Watch Version Control System Introduction
• Watch Git & GitHub Crash Course For Beginners
• Watch Learn Git in 20 Minutes

Now that you know what git is go ahead and create an account on GitHub and push everything that you do from now on to GitHub so that you can get the practice and get it reviewed from the other people in the community.

Modern JavaScript

In this section you will learn how to use package managers and get started with the “modern JavaScript”.

• Read Modern JavaScript for Dinosaurs (Don’t worry if you don’t understand some parts of it)
• Watch What is NPM and how to use it
• Watch NPM Crash Course

Source: roadmap