Complete Front end web development roadmap
HTML
- learn the basics
- Forms and validations
- Accessibility
- SEO
- Convention and best Practices
Web Components
- HTML elements
- Custom elements
- Shadow DOM
CSS
- Learn the basics
- Responsive Design
- Making layouts
- Floats
- Positioning
- Display Box
- Model CSS
- Grid
- FlexBox
CSS Architecture
- BEM
- OOCS
- SMACSS
CSS Preprocessor
- Sass
- Postcss
- Less
CSS FrameWorks
- CSS first Frameworks
- Bootstrap
- Materialise CSS
- Bulma
- JS Based Framework
- Reactstrap
- Material Ui
- Tailwind CSS
- Chakra UI
Modern CSS
- Styled Component
- CSS MOdules
- Styled JSX
- Emotion
- Radium
- Glamorous
Javascript
- Syntax and Basic Construct
- Learn DOM manipulation
- Learn Fetch API/ Ajax
- ES6+
- Modular javascript
- Understand below Concepts
- Closures
- Scope
- Async await
- Prototype
- Event Bubbling
- Shadow DOM
- Hoisting
- Strict ...etc *....And many more
JS Framework
- React js
- MobX
- ReduX
- Vue js
- VueX
- Angular
- RxJS
- NgR
Type checkers
- Typescript
- Flow
Progressive Web Apps(PWA)
- Storage
- web Sockets
- Service Workers
- Location
- Notification
- Device Orientation
- Payments
- Credentials
- Accelerated Mobile pages (AMP)
Perfomance
- PRPL Pattern
- RAIL Model
- Perfomance
- Metrics
- Using LightHouse
- Using DevTools
Server Side Rendering (SSR)
- React js
- Next.js
- After.js
- Angular
- Universal
- Vue.js
- Nuxt.js
GraphQL
- Apollo
- Relay Modern
Static site generators
- Next.js
- Gatsby.js
- Nuxt.js
- Vuepress
- jekyll
- Hugo
Mobile Applications
- ReactNative
- NativeScript
- Flutter
- Ionic
Desktop Applications
- electron
- Carlo
- Proton Native
Pacakage Managers
- npm
- Yarn
Test your apps
- Jest
- React-testing-library
- cypress
- enzyme
Build Tools
- Linters and formatters
- Prettier
- ESLint
- StandardJS
Module Bundlers
- Webpack
- Rollup
- Parcel
web security Knowledge
- Owasp top 10
- CORS
- HTTP
- CSP(Content Security policy)
Note:- You don't need to learn all the above things..
Pick some of them and master them
Some useful websites for resources
Top comments (7)
This is nice! Have you ever come across roadmap.sh? 🙂
I casually went to this website, and finally realized what you meant by this comment :)
Ha that's funny! I should have worded it better 😅
yes! It is one of the reference for this post!
if you write more you still see something missing there. for simple project jquery still looks good.
for HTML preprocessor, we can choose pug, slim, haml, etc.
for drawing, gaming, etc SVG, canvas, WebGL, etc are still missing. so you can't say front-end is easy to done.....
Good roadmap thats a long road to drive on :)
Thanks for sharing!
Really cool stuff here!👏