Frontend Path & Resource

Step 0: The Web Basics

Things to learn

0.1 How the Internet works.

0.2 How the broswer works.

0.3 What is HTTP, DNS, Server & IP Address.

Resource

Video: YouTube

Article: MDN

Step 1: HTML & CSS

Recommended

1.1 HTML (Free)

1.2 CSS (Free)

1.3 Beginner to Advance Course (Paid)

Other Good Resource

1.4 freeCodeCamp (Free)

1.5 Advance CSS Course (Paid)

Step 2: Build Projects

Start building projects with HTML & CSS.

Build atleast 5-10 projects to get a good grasp of the language.

Project Ideas

2.1 Article

2.2 Template website for inspiration

2.3 Web Design inspiration

Step 3: JavaScript

Recommended

3.1 Introduction to JavaScript (Free)

3.2 Beginner to Advance Course (Paid)

3.3 Advance JavaScript Theory (Paid)

Other good resources

3.4 javascript.info (Free)

3.5 Eloquent JavaScript (Free)

3.6 Udemy Course (Paid)

Step 4: Build Projects

Build atleast 10 Projects to master the basics.

Project Ideas

4.1 100+ JavaScript projects (Free)

4.2 20 Projects Course (Paid)

Step 5: Learn the essentials

Version control

5.1 Github Official Documentation (Free)

5.2 Video Lecture (Free)

Package Manager

5.3 NPM Crash Course (Free)

5.4 Yarn Crash Course Optional (Free)

Module Bundler

5.5 Webpack Crash Course (Free)

Step 6: Build Your Portfolio

Now that you know HTML, CSS and JavaScript. You can build your own portfolio website and put all your projects you made in it.

You can start Freelancing if you want, it'll give you a side income and also real life practice of building websites.

Freelancing Sites

6.1 Upwork

6.2 Fiverr

Step 7: TypeScript

TypeScript is a superset of javascript, it'll help you write more strict code and if you want to learn a framework like angular, TypeScript knowledge is needed.

7.1 Video tutorial (Free)

7.2 Full Course (Paid)

Step 8: Frontend Framework

Choose any one.

React.js

8.1 Official Documentation (Free)

8.2 Udemy Course (Paid)

Angular

8.3 Official Documentation (Free)

8.4 Udemy Course (Paid)

Vue.js

8.5 Official Documentation (Free)

8.6 Udemy Course (Paid)

Note: Framework technologies keeps updating and changing, so a course might get outdated.

Step 9: Build Projects

Now that you've learned a framework, its time to build projects using that.

Project Ideas

9.1 5 Projects

Note: blog says the projects are for react.js but they can also be made using Angular and Vue.js

Step 10: Keep Learning

Keep learning new technologies and keep building projects. Practice makes perfect.
Search for a job or start Freelancing.

THANK YOU!