ui

✅ 8 PM – 10 PM Slot: HTML → CSS → JavaScript → React.js

🔸 1. HTML (2–3 Days)

Focus: Structure, Semantic Tags, Accessibility

HTML Boilerplate, Tags, Attributes
Forms (<form>, <input>, <textarea>, name, action, method)
Table, List, Iframe, Media Tags
Semantic Tags: <header>, <footer>, <main>, <section>, <article>
HTML5 APIs: Geolocation, Audio/Video, Storage, etc.

🔸 2. CSS (4–5 Days)

Focus: Styling, Layout, Responsive Design

CSS Selectors, Units (px, em, %, rem)
Box Model, display, position, z-index
Flexbox and Grid (🔥 Must master)
Transitions, Animations
Media Queries
Pseudo-classes and Pseudo-elements
CSS Variables

🔸 3. JavaScript (10–14 Days)

Focus: Core Logic, DOM, ES6+

Data Types, Loops, Conditions, Functions
Array & Object Methods (map, filter, reduce, etc.)
DOM Manipulation (getElementById, querySelector, etc.)
Events & Event Bubbling
ES6+: let, const, Arrow Functions, Destructuring, Spread
Closures, Hoisting, Scope, this
Promises, Async/Await, Fetch API
LocalStorage, SessionStorage

🔸 4. React.js (15–20 Days)

Focus: Components, Props, State, Hooks, Routing

Create React App, JSX Syntax
Functional Components
useState, useEffect, useRef
Props & State
Event Handling
Conditional Rendering
List Rendering, Keys
Forms in React
Lifting State Up
Routing: react-router-dom
State Management Basics (Context API)
API Calling using axios, fetch
Custom Hooks

✅ 10 PM – 12 AM Slot: Bootstrap → jQuery → Vue.js

🔸 5. Bootstrap (2–3 Days)

Focus: Quick UI Design, Grid, Components

Bootstrap Grid System (rows, cols)
Buttons, Cards, Forms, Navbars
Utility classes (spacing, colors)
Modals, Carousel, Alerts
Customizing Bootstrap

Class	Use Case	Sample Code
`container`	Fixed width responsive container	`<div class="container">...</div>`
`container-fluid`	Full width container across all breakpoints	`<div class="container-fluid">...</div>`
`row`	Create horizontal group of columns	`<div class="row">...</div>`
`col`	Auto-layout column	`<div class="col">...</div>`
`col-md-6`	Medium screen 6-column layout	`<div class="col-md-6">...</div>`
`d-flex`	Use Flexbox layout	`<div class="d-flex">...</div>`
`justify-content-center`	Center flex children horizontally	`<div class="justify-content-center">...</div>`
`align-items-center`	Center items vertically in flex container	`<div class="align-items-center">...</div>`
`text-center`	Center text alignment	`<div class="text-center">Centered</div>`
`text-end`	Right-align text	`<div class="text-end">Right</div>`
`text-start`	Left-align text	`<div class="text-start">Left</div>`
`bg-primary`	Set background color to primary	`<div class="bg-primary">Blue</div>`
`bg-success`	Background success (green)	`<div class="bg-success">Success</div>`
`bg-danger`	Background danger (red)	`<div class="bg-danger">Error</div>`
`text-white`	White-colored text	`<div class="text-white">White Text</div>`
`p-3`	Padding on all sides (1rem)	`<div class="p-3">...</div>`
`m-2`	Margin on all sides (0.5rem)	`<div class="m-2">...</div>`
`rounded`	Rounded corners	`<div class="rounded">...</div>`
`shadow`	Box shadow	`<div class="shadow">...</div>`
`border`	Add default border	`<div class="border">...</div>`
`btn`	Base button class	`<button class="btn">Click</button>`
`btn-primary`	Primary styled button	`<button class="btn btn-primary">Click</button>`
`btn-danger`	Danger styled button	`<button class="btn btn-danger">Delete</button>`
`form-control`	Style input or textarea	`<input class="form-control" />`
`form-check`	Checkbox container	`<div class="form-check">...</div>`
`form-check-input`	Styled checkbox	`<input class="form-check-input" type="checkbox">`
`form-check-label`	Label for checkbox	`<label class="form-check-label">Check</label>`
`form-select`	Styled select box	`<select class="form-select">...</select>`
`input-group`	Group input and button	`<div class="input-group">...</div>`
`input-group-text`	Add text addon inside input group	`<span class="input-group-text">@</span>`
`navbar`	Basic navbar class	`<nav class="navbar">...</nav>`
`navbar-light`	Light themed navbar	`<nav class="navbar navbar-light">...</nav>`
`navbar-dark`	Dark themed navbar	`<nav class="navbar navbar-dark">...</nav>`
`navbar-expand-lg`	Expand navbar on large screens	`<nav class="navbar navbar-expand-lg">...</nav>`
`navbar-brand`	Branding element in navbar	`<a class="navbar-brand">Brand</a>`
`navbar-nav`	Container for nav items	`<ul class="navbar-nav">...</ul>`
`nav-item`	Navigation list item	`<li class="nav-item">...</li>`
`nav-link`	Link inside navbar	`<a class="nav-link">Link</a>`
`card`	Basic card component	`<div class="card">...</div>`
`card-header`	Header section of card	`<div class="card-header">Title</div>`
`card-body`	Main content area of card	`<div class="card-body">Content</div>`
`card-footer`	Footer section of card	`<div class="card-footer">Footer</div>`
`modal`	Modal container	`<div class="modal">...</div>`
`modal-dialog`	Dialog box of modal	`<div class="modal-dialog">...</div>`
`modal-content`	Content inside modal dialog	`<div class="modal-content">...</div>`
`alert`	Alert box	`<div class="alert alert-warning">Warning</div>`
`alert-success`	Success alert box	`<div class="alert alert-success">Success</div>`
`collapse`	Collapsible content container	`<div class="collapse">...</div>`
`accordion`	Accordion component wrapper	`<div class="accordion">...</div>`
`accordion-item`	Single item inside accordion	`<div class="accordion-item">...</div>`

🔸 6. jQuery (2–3 Days)

Focus: Quick DOM Manipulation & AJAX

DOM Manipulation ($('#id'), .text(), .html())
Event Handling (.on(), .click(), .hover())
Effects: fadeIn, fadeOut, slideToggle
AJAX in jQuery
jQuery Form Validations

🔸 7. Vue.js (7–10 Days)

Focus: Simpler alternative to React with 2-way binding

Vue Basics: CDN, CLI, Vue Instance
Templates, Directives (v-bind, v-if, v-for, etc.)
Methods, Computed Properties
Components
Props & Events
Forms & 2-way Binding (v-model)
Lifecycle Hooks
Vue Router (SPA)
Vuex (State Management)