Days 01–05
Week 1 — HTML + CSS Foundations
Build the visual skeleton of every webpage
DAY 01
HTML Basics — Structure & Content
▶
What to Learn
- HTML document structure:
<!DOCTYPE html>,<html>,<head>,<body> - Headings h1–h6, paragraphs, and line breaks
- Anchor tags for links: internal, external, and email links
- Opening files in the browser and using Chrome DevTools to inspect elements
Assignment
✏️ Your Task: Create a simple personal webpage
index.html. Include your name as a heading, a short bio paragraph, and 3 links to websites you like. Open it in the browser.
DAY 02
Images, Lists, Tables & Buttons
▶
What to Learn
- Images with
<img src alt>and proper accessibility attributes - Ordered and unordered lists
<ul>,<ol>,<li> - Tables with
<table>,<thead>,<tbody>,<tr>,<td> - Block vs inline: div vs span and when to use each
- Button element and how it differs from anchor tags
Assignment
✏️ Your Task: Create a Restaurant Menu page with sections (Starters, Mains, Desserts), food images, a price table, and an "Order Now" button.
DAY 03
HTML Forms
▶
What to Learn
- Form element and its attributes: action, method
- Input types: text, email, password, number, checkbox, radio, date
- Labels and their importance for accessibility
- Dropdown menus with
<select>and<option> - Multi-line input with
<textarea>and submit button
Assignment
✏️ Your Task: Build a Registration Form with: name, email, password, date of birth, gender (radio), country (dropdown), terms checkbox, and a Submit button.
DAY 04
CSS Basics — Selectors, Colors, Box Model
▶
What to Learn
- CSS syntax: selectors, properties, values
- Ways to apply CSS: inline, internal (style tag), external (linked file)
- Colors: named, hex, rgb, rgba
- Typography: font-family, font-size, font-weight, line-height, text-align
- The Box Model: content → padding → border → margin
- Backgrounds: background-color, background-image, background-size
Assignment
✏️ Your Task: Style all your HTML pages from Days 1–3. Add colors, fonts, borders, padding, and margins. Make them look clean and readable.
DAY 05
Flexbox Basics + Responsive Navbar
▶
What to Learn
- display: flex and the flex container model
- flex-direction, justify-content, align-items
- flex-wrap for multi-line flex layouts
- gap for spacing between flex children
- Building a horizontal navbar that links pages together
Mini Project
🏗️ End of Week 1 Project
Simple Landing Page with Responsive Navbar
Create a landing page with a sticky navbar
Use Flexbox to layout the navbar (logo left, links right)
Add a hero section with a headline and a call-to-action button
Add a features section with 3 cards side by side using Flexbox
Style consistently — fonts, colors, spacing
Days 06–10
Week 2 — CSS Deep Dive + JavaScript Basics
Master layouts and write your first interactive scripts
DAY 06
CSS Review — Card UI Component
▶
What to Learn
- Revisit margin vs padding — the exact difference
- border, border-radius, and box-shadow for card styling
- width, height, max-width, and percentage-based sizing
- overflow: hidden, object-fit: cover for images inside cards
Assignment
✏️ Your Task: Create a product card UI component — image on top, title, description, price, and an "Add to Cart" button. Make it look polished.
DAY 07
Flexbox Deep Dive
▶
What to Learn
- All justify-content values: flex-start, center, flex-end, space-between, space-around
- All align-items values: stretch, center, flex-start, flex-end, baseline
- flex-grow, flex-shrink, flex-basis — controlling how items scale
- Nesting flex containers for complex layouts
- flex-wrap: wrap for responsive card grids
Assignment
✏️ Your Task: Build a responsive card layout with at least 6 product cards using Flexbox. Cards should wrap naturally on smaller screens.
DAY 08
JavaScript Intro — Variables, Types, Operators
▶
What to Learn
- var vs let vs const — when to use each
- Data types: string, number, boolean, null, undefined
- Arithmetic, comparison, and logical operators
- console.log() and how to open the browser console
- typeof operator for checking data types
Assignment
✏️ Your Task: Write a script that checks if a number is even or odd. Write another that adds two numbers and logs the result. Open the console and verify all outputs.
DAY 09
Conditions, Loops & Functions
▶
What to Learn
- if / else if / else for decision making
- for loop, while loop — when to use each
- Functions: declaration, parameters, return values
- Calling functions and storing return values in variables
Assignment
✏️ Your Task: Build simple calculator functions: add(a,b), subtract(a,b), multiply(a,b), divide(a,b). Use if/else to handle division by zero. Log results in the console.
DAY 10
Arrays & Objects
▶
What to Learn
- Arrays: creating, accessing, and modifying items by index
- Array methods: push, pop, shift, unshift, length
- Looping through arrays with forEach
- Objects: key-value pairs, dot notation, bracket notation
- Storing real-world data (students, products) in objects
Assignment
✏️ Your Task: Create an array of 5 student objects — each with name, age, and grade. Loop through the array and log each student's info in a readable format.
Days 11–15
Week 3 — JavaScript + DOM + APIs
Make webpages interactive and connect to real data
DAY 11
DOM Basics
▶
What to Learn
- What the DOM (Document Object Model) is
- Selecting elements: getElementById, querySelector, querySelectorAll
- Changing content: textContent, innerHTML
- Changing styles: element.style.property
- Changing attributes: setAttribute, getAttribute
Assignment
✏️ Your Task: Create a webpage with a heading and a button. When the page loads, use JS to change the heading text and color dynamically (without touching the HTML).
DAY 12
Event Listeners & Click Events
▶
What to Learn
- addEventListener('click', callback) — the core pattern
- Event object (e) — what it contains
- Input events: 'input', 'change', 'keyup'
- Preventing default browser behavior with e.preventDefault()
- Updating the DOM in response to user actions
Assignment
✏️ Your Task: Build a Counter App — display a number on screen with Increment (+), Decrement (−), and Reset buttons. Update the DOM count live.
DAY 13
ES6 — Arrow Functions, Template Strings, Destructuring
▶
What to Learn
- Arrow functions: syntax differences from function declarations
- Template literals: backtick strings with
${variable}interpolation - Destructuring: extract values from objects and arrays cleanly
- Spread operator (...) for copying arrays and objects
- Default parameter values in functions
Assignment
✏️ Your Task: Rewrite all your earlier JavaScript code using ES6 syntax — replace regular functions with arrow functions, use template literals for all string output, destructure your student objects.
DAY 14
Promises, Async/Await & Fetch API
▶
What to Learn
- What a Promise is: pending, resolved, rejected
- Chaining with .then() and handling errors with .catch()
- async/await — cleaner syntax for Promises
- fetch(url) to call a REST API and get data
- response.json() to convert API response to a JS object
- try/catch block for handling fetch errors
Assignment
✏️ Your Task: Fetch users from
https://jsonplaceholder.typicode.com/users and display each user's name and email on the page by creating DOM elements dynamically.
DAY 15
Mini Project — Todo List App
▶
What to Learn / Apply
- Managing a list of items in a JavaScript array
- Rendering the array to the DOM (re-render on every change)
- Adding tasks from an input field on Enter or button click
- Deleting tasks by index from the array
- Marking tasks as complete by toggling a CSS class
🏗️ End of Week 3 Project
Todo List App
Input field + "Add Task" button
Display tasks as a list on the page
Click a task to mark it complete (strikethrough)
Delete button on each task item
Empty state message when no tasks exist
Days 16–20
Week 4 — React Ecosystem
Build modern UIs with React, Tailwind, Axios & React Router
DAY 16
Introduction to React + JSX + Components
▶
What to Learn
- What React is and why it exists (component-based UI)
- Setting up a React project with Vite:
npm create vite@latest - JSX — HTML-like syntax inside JavaScript
- Functional components and returning JSX
- Importing and composing components inside App.jsx
Assignment
✏️ Your Task: Create a Hello React app using Vite. Build a
Header, Card, and Footer component. Compose them inside App.jsx and view in the browser.
DAY 17
Props, useState & Event Handling
▶
What to Learn
- Props — passing data from parent to child components
- Props are read-only — you never mutate them
- useState hook — declaring state in functional components
- How re-rendering works when state changes
- Handling events in React: onClick, onChange, onSubmit
Assignment
✏️ Your Task: Build a React Counter App — a component with a count in state, and three buttons (Increment, Decrement, Reset) that update state and re-render the count.
DAY 18
useEffect + API Calls with Axios
▶
What to Learn
- useEffect hook — running side effects after render
- Dependency array: [], [value], or no array — what each does
- Installing Axios:
npm install axios - axios.get() vs fetch() — why Axios is cleaner
- Managing loading and error states in UI
- Rendering a list of API data using .map()
Assignment
✏️ Your Task: Fetch users from
https://jsonplaceholder.typicode.com/users using Axios inside useEffect. Display a loading spinner while fetching, then render the users as cards.
DAY 19
Tailwind CSS — Utility-First Styling
▶
What to Learn
- Installing Tailwind in a Vite + React project
- Core utility classes: spacing (p-, m-), sizing (w-, h-), colors, flex, grid
- Responsive prefixes: sm:, md:, lg:, xl: — mobile-first
- Hover and focus states: hover:bg-blue-600, focus:outline-none
- Using @apply in CSS for reusable class groups
Assignment
✏️ Your Task: Convert your existing React UI (counter app + user list) to use Tailwind classes only. Remove all CSS files and style everything with Tailwind utilities.
DAY 20
React Router — Multi-Page React App
▶
What to Learn
- Installing React Router:
npm install react-router-dom - BrowserRouter, Routes, Route components
- Link vs anchor tags — why Link doesn't reload the page
- Dynamic routes with useParams: /products/:id
- useNavigate for programmatic navigation
- 404 fallback route with path="*"
🏗️ End of Week 4 Project
Multi-Page React App (Home, Products, Contact)
Home page with hero section and featured products
Products page — fetch and display items from an API
Product Detail page at /products/:id using useParams
Contact page with a styled form
Shared Navbar with React Router Links on all pages
All styled with Tailwind CSS
Final Portfolio Projects
E-Commerce Frontend
Product listing, cart with state, checkout form. Filter by category, search bar, responsive layout.
React
Tailwind
Axios
Router
Task Manager
Add, complete, and delete tasks. Data persists via localStorage. Filter by status.
React
useState
localStorage
Tailwind
Movie Search App
Search movies via OMDB or TMDB API. Display posters, ratings, and a detail page per movie.
React
Axios
useEffect
Router
Weather Dashboard
Search any city for live weather. Display temperature, humidity, wind, and 5-day forecast using OpenWeatherMap API.
React
Axios
Tailwind
API
Notes Application
Create, edit, and delete notes with a rich text area. Store in localStorage. Tag-based filtering and search.
React
useState
localStorage
Tailwind
After Completing This Plan
Recommended Tools
Visual Studio Code
Best editor for frontend. Install extensions: ESLint, Prettier, Tailwind CSS IntelliSense.
Git + GitHub
Version control. Commit every day. Push every project to a public GitHub repo.
Chrome DevTools
Inspect elements, debug JS, check network requests, test responsiveness.
Vite
Blazing fast React project setup. Use
npm create vite@latest for all React projects.Study Materials
Official docs used by professional developers.
MDN Web Docs developer.mozilla.org ↗
React Documentation react.dev ↗
Tailwind CSS Documentation tailwindcss.com/docs ↗
Axios Documentation axios-http.com ↗
React Router Documentation reactrouter.com ↗
W3Schools — HTML & CSS w3schools.com ↗
Code With Harry — JavaScript codewithharry.com ↗
Code With Harry — React JS codewithharry.com ↗