Ultimate RoadMap with so many resources for Front-End Development 💥💥

Subscribe to my newsletter and never miss my upcoming articles

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

Comments (2)

Ahmed Altaai's photo

Thank you! Your content will for sure fill some of my gaps

Rahul's photo

I didn't get you. How can i fill your gaps though?