I've got you everything covered. This is the final you need. The best resources with the best road map. You definitely need this if you are curious how to start with front-end development. This post covers everything about front-end development.

The roadmap makes sure that gaps in the plan are identified and can be closed as needed in the future. It also serves as a guide for the developers during their journey, allowing them to recognize and act on events that require a change of direction.

Let's Start 🙌

HTML

• Learn the basic
• Forms and validation
• Accessibility
• SEO Basics
• Conventions and Best practices

(Free Resources )

1. W3Schools
2. Learn HTML
3. Free UDEMY Course for HTML/CSS from scratch
4. HTML and CSS From scratch - FreeCodeCamp
5. HTML in 2hr - FreeCodeCamp
6. TutorialsPoint - HTML

Web Components

• HTML Templates
• Custom Elements
• Shadow DOM

(Free Resources)

1. W3Css templates
2. HTML5 UP
3. Using Shadow DOM
4. Using custom elements

Version control systems

• Basic usage of git
  • Terminal
  • GUI Client (SourceTree, Fork, GitKraken)
• Repo hosting services
  • Github
  • Bitbucket
  • Gitlab

(Free RESOURCES)

1. GIT Handbook
2. GIT Cheatsheets(Available in all languages)
3. Github learning lab
4. Bitbucket - Documentation
5. GitLab - Docs
6. GitLab - Learning Tracks
7. Free Book For github learning
8. HTTP - Intro

CSS

• Learn the basics
• Responsive design and media queries
• Making layouts
  • Floats
  • Positioning
  • Display box
  • Model CSS
  • Grid
  • FlexBox

CSS Preprocessor

• SASS
• PostCSS
• Less

CSS Architecture

• BEM
• OOCS
• SMACSS

CSS Frameworks

• CSS First frameworks
  • Bootstrap
  • Materilize CSS
  • Bulma
• JS Based framework
  • Reactstrap
  • Material UI
  • Tailwind CSS
  • Chakra UI

Modern CSS

• Styled component
• CSS Modules
• Styled JSX
• Emotion
• Radium
• Glamorous

(Free Resources For CSS )

1. W3Schools CSS
2. FreeCodeCamp - CSS Course
3. Intro CSS - This series will teach you CSS in one hour
4. Bulma - Tutorials provided by OpenBase
5. Scrimba - Bootstrap 4
6. Materiliza CSS : Docs
7. SoloLearn - CSS (And all the major Langauges too)
8. CSS - CheatSheets
9. CSS Grid - CheatSheets
10. CSS Flexbox - CheatSheets
11. Chakra UI
12. SASS - Tutorials
13. CSS-Tricks - Provide you everything tutorial with best understanding

Javascript

• Syntax and Basic construct
• Learn DOM Manipulation
• Learn fetch API / Ajax (XHR)
• ES6+ and modular Javascript
• Understand the concepts, Hoisting, Event bubbling, scope, prototype, Shadow DOM, strict...

JS Framework

• React.js
  • Reux
  • MobX
• Vue.js
  • VueX
• Angular
  • RxJS
  • NgR

Type checkers

• Typescript
• Flow

Progressive Web Apps (PWA)

• Storage
• Web Socket
• Service Workers
• Location
• Notifications
• Device Orientation
• Payments
• Credentials
• Accelerated Mobile Pages (AMP)

Performance

• PRPL Pattern
• RAIL Model
• Performance
• Metrics
• Using lighthouse
• Using DevTools

Server-Side Rendering (SSR)

• React.js
  • Next.js
  • After.js
• Angular
  • Universal
• Vue.js
  • Nuxt.js

(Resources For JS )

1. JS for Cats
2. A 30-day coding challenge in which you will build 30 things using vanilla JavaScript
3. The excellent teachers at Watch and Code have released their beginning JavaScript course for free.
4. javascript exercises for beginners
5. A short interactive website which has exercises for introducing new programmers to the primary concepts in JavaScript.
6. The Epic React Crash Course
7. React DOCS
8. Vue.js - Best NET NINJA Playlist
9. Vue.js Crash Course
10. Angular - Docs
11. Github - More learning Resources
12. Using DevTools
13. A closure is a function that has access to its outer function scope even after the return of the outer function (For better understanding head inside the blog).
14. For learning PWAS
15. Using WEBPACK
16. Typerscript - Official Handbook

READ MORE -> Unique and cool toolkit for developers

GraphQL

• Apollo
• Relay Modern

Static Site Generator

• Next.js
• GatsbyJS
• Vuepress
• Jekyll
• Hugo

Mobile Applications

• React native
• Native Script
• Flutter
• Ionic

Desktop Applications

• Electron
• Carlo
• Proton Native

Package Manager

• npm
• yarn

Testing your apps

• Jest
• react-testing-library
• Cypress
• Enzyme

Build tools

• Linters and formatters
  • Prettier
  • ESLint
  • StandardJS

Module Bundlers

• Webpack
• Rollup
• parcel

Web security Knowledge

• HTTPS
• CORS
• Content secure policy
• OWASP Security risks

(RESOURCES )

1. The Fullstack Tutorial for GraphQL
2. A free video course for building static and server-side rendered applications with Next.js and React
3. Gatsby - Tutorials
4. 4hrs Great Gatsby Bootcamp
5. Learn WebPack in 15mins
6. Learn webpack - FreeCodeCamp Video lecture
7. Linting and formatting
8. Learn standard JS
9. Learn - Parcel
10. Parcel - the simpler webpack
11. Learn HTTPS
12. CORS - Complete tutorial
13. NPM - TutorialsPoint
14. NodeFreeSchool
15. Yarn - Docs
16. Learning Yarn
17. Jest - Docs
18. Electron - Tutorials
19. React Native - Docs
20. Flutter - Docs
21. Awesome Flutter - A bit overwhelming for beginners, but have a look at the ‘Video Series’ section, ‘Blogs’ section, and the apps under ‘Templates’. You’ll utilise the other sections once you’ve begun your journey with Flutter!
22. React Native - Github repo resource

---

Sorry I used alphabetical order instead of numbers,
I hope you for best developer career ahead,
All the resources are comprised of tutorials, docs and courses,
If you find this some way or the other way helpful plz comment and share,

If you have anything to add in this, Comment down below, 😀

---

DO YOU WANT AN INTERACTIVE ROAD MAP IN PDF FORMAT 😎🙌 ?

If yes. Then subscribe to my blog I'll be sending INteractive RoadMap you via email with something extra too.

Thanks For Reading.😎

---

Visit Here too -> My gatsby blog