A structured guide for mastering HTML, CSS, and JavaScript — the foundational technologies every full stack developer should know.
This README is curated to help you focus on essential concepts needed for building modern web applications. It avoids deep-dive tangents into rarely used features so you can learn efficiently and effectively.
Each topic comes with project ideas to apply what you've learned!
The skeleton of any web page.
- 🏗️ Document Structure (
<!DOCTYPE html>,<html>,<head>,<body>) - 🔠 Semantic Tags (
<header>,<nav>,<main>,<section>,<footer>) - 📝 Forms & Inputs (text, checkboxes, dropdowns)
- 🖼️ Images & Media (
<img>,<video>,<audio>) - 🔗 Hyperlinks
- 📋 Lists (
<ul>,<ol>,<li>) - 🎨 Tables (
<table>,<tr>,<td>,<th>) - 💬 Comments
- 🌐 Meta Tags (SEO, viewport, charset)
- Personal Portfolio Website
- Use semantic tags, images, links, and tables.
- Simple Blog Layout
- Create sections like header, sidebar, main content, footer.
- Online Resume Builder
- Build a form that generates a styled resume preview.
Make your website beautiful and responsive.
- 🎯 Selectors & Specificity
- 📦 Box Model (margin, border, padding, content)
- 🧩 Layouts: Flexbox ✅, CSS Grid ✅
- 📱 Responsive Design (Media Queries, Mobile First)
- 🎨 Colors & Backgrounds
- 🖋️ Typography
- 🔄 Transitions & Animations
- 🛠️ CSS Variables / Custom Properties
- 🧱 CSS Methodology (BEM, SMACSS)
- 🧭 Positioning
- 🧪 Pseudo Classes & Elements
- 📐 Units (px, em, rem, %, vw/vh)
- Landing Page Redesign
- Style a product landing page using Flexbox/Grid.
- Responsive Image Gallery
- Create a gallery that adjusts layout on mobile/tablet/desktop.
- Animated Login Form
- Add hover effects, transitions, and subtle animations.
Supercharge your CSS with variables, mixins, and nesting.
- 🎨 Variables (
$primary-color) - 🧱 Nesting
- 🔁 Mixins & Functions
- 🧩 Partials & Imports
- 🧠 Control Directives (
@if,@for,@each) - 🧰 Best Practices (modular structure, naming conventions)
- Theme Switcher Using SCSS Variables
- Create light/dark themes using variables and mixins.
- Reusable UI Component Library
- Build buttons, cards, navbars as reusable SCSS components.
- CSS Utility Framework (Mini-Tailwind Clone)
- Generate utility-first classes using SCSS loops.
Bring interactivity and logic to your apps.
- 🧮 Variables & Data Types
- 🔄 Operators & Loops
- 📦 Functions (arrow functions, parameters, return)
- 🧠 Conditionals
- 📃 Arrays & Objects
- 🕒 Date & Time Handling
- 📜 Strings & Template Literals
- 📂 Modules (
import/export) - 🧪 Error Handling (
try...catch)
- 👁️ Selecting Elements
- 🖍️ Modifying Content & Styles
- 🧩 Creating & Removing Elements
- 🎟️ Events (
addEventListener,click,submit) - 📥 Forms & Input Handling
- 🎯
thiskeyword - 🧷 Destructuring
- 📦 Spread / Rest Operators
- 📦 Default Parameters
- 🧠 Arrow Functions
- 🔁 Promises
- 🚀 Async/Await
- 🗃️ Maps & Sets
- 🧵 Optional Chaining (
?.) & Nullish Coalescing (??)
- 📡 Fetch API
- 📄 JSON Parsing
- 📍 LocalStorage & SessionStorage
- 🌐 Geolocation API
- To-do List App
- Add, delete, and persist tasks using localStorage.
- Weather Dashboard
- Fetch weather data from an API and display it dynamically.
- Interactive Quiz App
- Use arrays, objects, and event listeners to build a quiz game.
These are important for real-world development.
- 🧱 Component-Based Thinking
- 🔄 SPA vs MPA Basics
- 🚀 ES Modules & Module Bundlers
- 🧪 Debugging Tools (Chrome DevTools)
- 🧪 Testing Basics (Jest, unit tests)
- 🛠️ Git & Version Control
- 📦 Package Managers (npm, yarn, pnpm)
- 🚀 Deployment (Netlify, Vercel, GitHub Pages)
Boost productivity and code quality.
- 📁 File Structure Best Practices
- 🧹 Linting (ESLint, Stylelint)
- 🧰 Task Runners / npm Scripts
- 📦 Build Tools (Webpack, Vite)
- 🧪 Testing Frameworks (Jest, Cypress)
- 🚀 Deployment Platforms
- 🧾 Documentation Tools (Markdown)
| Week | Focus |
|---|---|
| 1–2 | 🧱 HTML Essentials |
| 3–4 | 🎨 CSS Fundamentals + Flexbox/Grid |
| 5–6 | 🧠 JavaScript Basics |
| 7–8 | 🧩 DOM Manipulation + Events |
| 9–10 | 🚀 ES6+ Features + APIs |
| 11–12 | 🛠 Build Mini Projects |
| 13+ | 🧰 Explore Frameworks (React, Vue, etc.) |
If you found this roadmap helpful, feel free to star ⭐ or fork this repository.
Have suggestions? Open an issue or reach out — happy coding! 💻✨