web-frontend-ultimate.md

Frontend web development includes building the client side code as well as the visuals of the app. In general, a frontend app has 3 parts:

1. HTML: The structure of the UI
2. CSS: The styling of the UI
3. Code (Javascript): The handler of user actions, rendering of the UI and fetching data from apis

Road map

Here's what you should learn, in order:

1. The basics of internet.
   Before you start building actual stuff, it's important to learn about the basics of internet.
   1. How does the internet work 📹
   2. What is HTTP 📹
   3. How browsers work 📹
   4. What is a domain 📹
   5. What is hosting 📹
   6. How DNS works 📹
2. HTML
   Hyper Text Markup Language. This is the skeleton of a website and defines a basic structure.
   • Video tutorials (Watch any one):
     1. HTML Full course by freecodecamp 📹
     2. HTML Tutorial for beginners by programming with mosh 📹
     3. HTML Crash Course 📹
   • Documentation
     1. Mozilla official docs 📃
     2. Microsoft official docs 📃
     3. Dev Docs 📃
     4. W3 Schools 📃
3. CSS
   Cascading Style Sheets. This adds the actual style to your HTML code and gives the website its actual appearance
   • Video Tutorials (Watch any one):
     1. Complete course by freecodecamp 📹
     2. Crash course by Traversy Media 📹
     3. Learn CSS in 20 min by Web Dev Simplified 📹
   • Documentation:
     1. Mozilla official docs 📃
     2. DevDocs 📃
     3. W3 Schools 📃
   • Guides
     1. CSS Tricks 📃
     2. Web.dev 📃
4. Sass
   Syntactically Awesome Style Sheets. A preprocessor scripting language for CSS
   • Official Website 📃
   • Video tutorials (Watch any one):
     1. Sass Tutorial for beginners by freecodecamp 📹
     2. Learn Sass in 20 minutes by Dev Ed 📹
   • Documentation:
     1. Official Docs 📃
     2. W3 Schools 📃
5. CSS Frameworks
   You can learn any CSS framework. Some popular ones are:
   1. Tailwind CSS 📃
   2. Bootstrap 📃
   3. Foundation 📃
   4. Pure 📃
   5. Bulma 📃
   6. Semantic UI 📃
   7. UI Kit 📃
   8. Materialize CSS 📃
6. Javascript
   • Video Tutorials (Watch any one):
     1. Complete javascript course by freecodecamp 📹
     2. JavaScript tutorial for beginners by Programming with Mosh 📹
     3. Crash course by Traversy Media 📹
   • Documentation:
     1. Mozilla official docs 📃
     2. DevDocs 📃
     3. Microsoft official docs 📃
     4. W3 Schools 📃
   • Guides
     1. Mozilla JS Guide 📃
     2. Javascript.info 📃
   • Practice
     1. Javascript Online ⚒️
     2. CodePen ⚒️
7. Typescript
   Typescript is a superset of javascript and is strongly typed. Most modern web apps are written in typescript instead of javascript.
   • Video tutorials:
     1. Typescript course for beginners by Academind 📹
     2. Typescript Tutorial by Programming with Mosh 📹
   • Documentation
     1. Typescript official docs 📃
8. Frontend framework
   Learn any Frontend framework. Some popular ones are
   • ReactJS
     • Video tutorials:
       1. Beginner's Tutorial for React Javascript library 2022 by Freecodecamp 📹
       2. React Tutorial for beginners by Programming with Mosh 📹
       3. ReactJS Crash Course by Traversy Media 📹
       4. Learn React for free by Scrimba 📹
     • Documentation:
       1. React Official Docs 📃
       2. DevDocs 📃
     • Guides:
       1. Official tutorials 📃
       2. Beginners guide by freecodecamp
   • Angular
     • Video tutorials:
       1. Angular Tutorial for beginners by Programming with Mosh 📹
       2. Angular Crash Course by Traversy Media 📹
     • Documentation
       1. Official Angular documentation 📹
   • VueJS
     • Video tutorials:
       1. Vue.js course for beginners by freecodecamp 📹
       2. Vue JS Crash Course by Traversy Media 📹
     • Documentation:
       1. Vue JS official docs 📃

General resources

Here are a few general resources to help you learn different aspects of web development

• Learn
  1. FreeCodeCamp: Free, amazing tutorials for almost everything you want to learn
  2. W3 Schools: Learn HTML, CSS, Javascript and more
  3. Frontend Mentor: Learn frontend
• Practice
  1. Dev Challenges: Amazing challenges to practice JS
  2. Javascript Katas
  3. Leetcode
• Documentation
  1. Dev docs: All your documentation in one place
• Books
  1. Move things with CSS
  2. Typescript in 50 lessons
  3. The frontend developer handbook
• Chrome Extensions
  1. Web Developer: Amazing dev tools
  2. React Dev Tools: Official dev tools for react developers
  3. DailyDev: Get the latest news about the Dev community in your chrome homepage
  4. Wappalyzer: Get to know the frontend stack of any website
  5. Whatfont: Get to know the font of any website
  6. WAVE: Evaluate web content for accessibility issues directly within your browser
  7. axe: Test your web apps to help identify & resolve common accessibility issues

Some sources used for compilation

• https://www.cdw.com/content/cdw/en/articles/software/top-10-free-web-development-resources.html#:~:text=Here%20are%20our%20favorite%20web%20development%20resources%20from,information%20security%2C%20quality%20assurance%2C%20data%20visualization%20and%20more.
• https://twitter.com/mdjunaidap/status/1528361252300406785
• https://twitter.com/sunilc_/status/1528329918643179520