Scribd
Upload
12 views

Roadmap

In this pdf there is roadmap of frontend developer. With full concept and which topic has High priority.

Uploaded by

Abhishek Suruse
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views

Roadmap

In this pdf there is roadmap of frontend developer. With full concept and which topic has High priority.

Uploaded by

Abhishek Suruse
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

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 (Mech.Code)

S.NO. 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 (Mech.Code)

S.NO. 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 (Mech.Code)

S.NO. TOPICS RESOURCE

1. Video Lecture Link

2. Notes Link

3. Basic Projects Link

4. Clone Project Link

5. Interview Questions Link

React Roadmap (Mech.Code)

S.NO. 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 (Mech.Code)

S.NO. TOPICS RESOURCE

1. Video Lecture(Tailwind) Link

2. Video Lecture(Bootstrap) Link

3. Project (Tailwind) Link

4. Portfolio (Bootstrap) Link

Github Roadmap (Mech.Code)

S.NO. TOPICS RESOURCE

1. Video Lecture Link

2. Git cheatSheat Link

3. Notes Link

4. Interview Questions Link

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy