Mechcode Roadmap
Front-End Development RoadMap
HTML (Fundamentals)
● +!DOCTYPE
● Block & Inline elements
● Tags & Attributes
● Head & Title
● Imports (script, style...)
● Headings
● Tables
● Anchors & navigation
● Lists (unordered + ordered)
● Forms & Input types
● Events basics
● Images
● Semantic HTML
● Local & Session storage
CSS (Fundamentals)
● Selectors:
○ Basic
○ Combinational
● Pseudo:
○ Selectors
○ Elements
● Specificity
● Inheritance
● Box model
● Fonts & Typography
● Colors
● Positioning
● Units (absolute + relative)
● Overflow
● Float
● Display & Flex
JavaScript (Fundamentals)
● Primitives
● Scopes & Hoisting
● Closures
● Execution context
● Variables (var, let, const)
● Operators
● Type Conversions
● Arrays + methods
● Objects + methods
● Functions + Arrow functions
● Try Catch & Error handling
● Strict mode
● Timeout & Interval
● Classes
Web Fundamentals
● Client Server architecture
● HTTP
● RESTful web services
● Communication:
○ Polling
○ Web sockets
● XML & JSON
● HTTPs & SSL
● Authentications
● Cookies & Sessions
● Security:
○ XSS
○ CORS
○ CSP
● Caching & compression
● HTTP 2.0
BOM & DOM
● DOM Tree
● Accessing DOM
● Node creation & deletion
● Element selectors
● Events handling
● Events listeners
● Event bubbling & delegation
● Iterating Nodelist
● Attribute manipulation
● AJAX & Fetch
● Event Loop
● Shadow DOM
● CSSOM
● Critical Rendering Path
● Browser APIs
● Browser Internals
Version Control
● Git and GitHub
● Clone
● Pull & Fetch
● Commit
● Log
● Push
● Reset
● Restore
● Switch & Checkout
● Branching:
○ Merge
○ Rebase
○ Workflow
● Cherry pick
● Stash
● Squash
● Revert
● Tags
CSS (Advanced)
● Shadows
● Gradients
● Background images
● Masking & blending
● CSS functions
● Media Queries
● Transforms
● Transitions
● Animations
● Flex advanced
● CSS Grids
● CSS sprites
● CSS variables & counters
● Container queries
● Subgrid
● BEM standards
● Responsive web design
JavaScript (Advanced)
● "this" keyword
● Template strings
● De-structuring
● Rest & Spread
● Callbacks
● Promises
● Async Await
● Prototypes
● Modules
● Sets & Weaksets
● Maps & Weakmaps
● Regular expressions
● Symbols
● Proxy & Reflect
● Iterators + Generators
● Dates & Intl
● Typed Arrays
● ES Next features
Frontend Concepts
● Progressive Web App
● Object Oriented Programming
● Functional Programming
● Reactive Programming
● Test Driven Development
● Accessibility & Usability
● Web Performance
● CSR, SSR, SSG, ISR
● Web Security
● Design patterns
● JAM Stack
● Micro frontend
● User Experience
● CI/CD
● Web Assembly
● Web 3.0
HTML Roadmap ([Link])
[Link]. TOPICS RESOURCE
1. Video Lecture Link
2. Notes Link
3. Project 1 Link
4. Project 2 Link
5. Project 3 Link
6 Interview Questions Link
CSS Roadmap ([Link])
[Link]. TOPICS RESOURCE
1. Video Lecture Link
2. Notes Link
3. Project (10) Link
4. Portfolio Project Link
5. Responsive Project Link
6 Interview Questions Link
JavaScript Roadmap ([Link])
[Link]. TOPICS RESOURCE
1. Video Lecture Link
2. Notes Link
3. Basic Projects Link
4. Clone Project Link
5. Interview Questions Link
React Roadmap ([Link])
[Link]. TOPICS RESOURCE
1. Video Lecture(MechCode) Link
2. Video Lecture Link
3. Notes Link
4. Basic Projects Link
5. Crud Projects Link
6. Interview Questions Link
Tailwind & Bootstrap ([Link])
[Link]. TOPICS RESOURCE
1. Video Lecture(Tailwind) Link
2. Video Lecture(Bootstrap) Link
3. Project (Tailwind) Link
4. Portfolio (Bootstrap) Link
Github Roadmap ([Link])
[Link]. TOPICS RESOURCE
1. Video Lecture Link
2. Git cheatSheat Link
3. Notes Link
4. Interview Questions Link
