Frontend-Development

Frontend Roadmap

Introduction

What is front end developer

• What is a frontend developer? - frontendmasters.com
• Frontend web developer - Mozilla Developer docs
• What is frontend development - Freecodecamp

What is frontend web development

• Frontend Development explained - Mayuko(Youtube)
• Frontend web development - Wikipedia

Understanding Internet

How does internet work

• Computer Networking course - Kunal Khushwaha(Youtube)
• How the Internet Travel Across Oceans? - TechVision(Youtube)
• How does the Internet Work? - Vox(Youtube)
• How does the Internet Work? - Mozilla web docs
• How Does the Internet Work? - Stanford.edu
• How Does the Internet Work? - cloudflare
• How Does the Internet Work? - Lesics(Youtube)

Internet-CS50's understanding technology

• Resource

Learning HTML

HTML Tutorial

• Learn HTML - FreeCodeCamp(Youtube)
• Learn HTML - Codecadmeny
• HTML Tutorial - W3schools
• HTML Tutorial - TutorialsPoint
• HTML course, build a website - FreeCodeCamp(Youtube)
• HTML crash course - Traversy Media(Youtube)
• HTML Tutorial, making a Website - FreeCodeCamp(Youtube)

Frontend Projects

• frontendmentor.io
• frontendpractice.com

Learning CSS

CSS Tutorials

• Learn CSS - web.dev
• Learn CSS - codecademy
• CSS tutorial -w3schools
• CSS zero to hero - FreeCodeCamp(Youtube)
• Kevin Powell(Youtube)
• Introduction to CSS - Web Dev Simplified

Frontend Projects

• frontendmentor.io
• frontendpractice.com

Learning Javascript

JS Tutorials

• Learn JavaScript - FreeCodeCamp(Youtube)
• JavaScript Tutorial - Programming with Mosh(Youtube)
• JavaScript Programming - FreeCodeCamp(Youtube)
• JavaScript Tutorial - w3schools
• Learn JavaScript - Codecademy
• Free JS Courses for Beginners - FreeCodeCamp

Understanding JavaScript

• NamasteJS/How JS works - Akshay Saini

Frontend Projects

• frontendmentor.io
• frontendpractice.com

Learning Version Control

• Git Documentation
• Git Tutorial

Understanding Package Managers

• What is NPM & why do we need it?
• NPM crash course
• Yarn package manager crash course
• Learn Package Manager
• Javascript Package manager
• Package management basics

Learn Build Tools

• What are build tools?
• 6 best build tools
• Learn build tools?
• Freecodecamp

Let's pick a framework/library for you

-Frameworks-Web Development

React

• Tutorial
• Docs

Vue JS

• Tutorial
• Docs

Angular

• Angular Tutorial - Programming with Mosh(Youtube)
• Learn Angular - FreeCodeCamp(Youtube)
• Docs

Frontend Projects

• frontendmentor.io
• frontendpractice.com

CSS Frameworks

• Top CSS Frameworks
• Tailwind vs MUI vs Bootstrap vs Chakra vs...

Bootstrap

• Tutorial
• Docs

Chakra UI

• Tutorial 1 - Chakra UI for beginners
• Tutorial 2 - Build check out page with chakra UI
• Docs

Tailwind CSS

• Tailwind css crash course - Traversy Media(Youtube)
• Tailwind crash course - Traversy Media(Youtube)
• Docs

What is PWA(Progressive Web Apps)

• PWA tutorial - The Net Ninja(Youtube)
• Progressive web apps - Mozilla developer docs
• What are progressive web apps? - Freecodecamp
• Progressive Web Apps

Sample projects for practice

• frontendmentor.io
• frontendpractice.com