A comprehensive, project-rich web development repository — covering the full journey from HTML fundamentals to JavaScript, Bootstrap, and Responsive Design, with real-world projects built at every stage.
"The best way to learn web development is to build things — and then build more things."
⭐ If this repository helped your web development journey, please give it a star!
This repository documents my complete full-stack web development learning journey — from writing the first HTML tag to building interactive JavaScript applications, responsive layouts, and Bootstrap-powered UIs. Every chapter contains both theory-driven code examples and real-world projects that apply the concepts learned.
The learning path here is intentional and progressive: each technology is introduced only when the foundation before it is solid. HTML before CSS. CSS before JavaScript. Fundamentals before frameworks.
| Audience | How This Helps |
|---|---|
| 🌱 Beginners | See a complete, structured web development path from absolute zero |
| 🎓 CS / IT Students | Real projects alongside theory — not just code snippets |
| 💼 Interview Candidates | HTML, CSS, JS fundamentals with applied examples |
| 🔬 Developers Reviewing Fundamentals | Clean examples of DOM, Flexbox, Grid, responsive design |
| 🏢 Recruiters | A transparent record of full-stack web development skill building |
Complete-MERN-Stack-Development/
│
├── 01_HTML/ ← HTML fundamentals + 3 projects
│ ├── Core Topics (15 files)
│ │ ├── Introduction, Headings, Paragraphs, Emmet
│ │ ├── Links, Images, Lists, Tables
│ │ ├── Inline vs Block Elements, ID & Class
│ │ ├── HTML Entities, Multimedia, SVG
│ │ ├── Semantic Tags, HTML Tables (6 variants)
│ │ ├── HTML Forms, Media Queries (PWA Page)
│ │ └── 6 HTML Practice Pages
│ └── Projects in HTML/
│ ├── 01 HTML Resume Project (personal resume page)
│ ├── 02 The Code Magazine (multi-page blog layout)
│ └── 03 HTML CV Project (multi-page CV with navigation)
│
├── 02_CSS/ ← Deep CSS coverage + 6 projects
│ ├── Core Topics (21 sections)
│ │ ├── Selectors (basic, combinator, pseudo, universal)
│ │ ├── Colors, Fonts, Units, Box Model
│ │ ├── Backgrounds, Borders, Gradients, Shadows
│ │ ├── Dimensions, Position Properties
│ │ ├── 2D & 3D Transforms
│ │ ├── Flexbox (2 files)
│ │ ├── CSS Grid (7 variants including nested grid)
│ │ ├── Media Queries, CSS Variables
│ │ ├── Transitions, Animations
│ │ ├── Blog Layout, Modern Button, Accordion Component
│ └── Projects in CSS/
│ ├── 01 Parallax Website (scroll-based parallax effect)
│ ├── 02 Responsive Image Gallery (15-image responsive grid)
│ ├── 03 Personal Site Project (full personal portfolio page)
│ ├── 04 New Year Resolution Page (creative landing page)
│ ├── 05 The Code Magazine (HTML + CSS version)
│ └── 06 Lisbon Chair Shop (product landing page)
│
├── 03 Responsive Design Projects/ ← 2 fully responsive builds
│ ├── 01 Developer Portfolio (responsive developer portfolio)
│ └── 02 G3 Architects (responsive architecture firm site)
│
├── 04 Bootstrap Projects/ ← 3 Bootstrap projects
│ ├── 01 Tindog Project (Tinder-for-dogs landing page)
│ ├── 02 Landing Page Using Bootstrap (full business landing page)
│ └── 03 Blog Project Using Bootstrap (portfolio + blog layout)
│
└── 06_Javascript/ ← 6 JS chapters + DOM projects
├── 01 JS Fundamentals Part 1 (11 core topics + 4 challenges)
│ └── Data types, operators, conditionals, strings, ternary
├── 02 JS Fundamentals Part 2 (10 core topics + 5 challenges)
│ └── Functions, arrays, objects, loops, arrow functions
├── 03 Developer Skills (debugging, clean code practices)
├── 04 JS in the Browser — DOM (3 interactive projects)
│ ├── Guess My Number Game (DOM manipulation + game logic)
│ ├── Modal Window (event-driven UI component)
│ └── Pig Game (two-player dice game with flowchart)
├── 05 How JS Works Behind the Scenes (6 deep-dive files)
│ └── Scoping, hoisting, this keyword, primitives vs references
└── 06 Data Structures, Operators & Strings (18 files + 5 challenges)
└── Destructuring, spread/rest, optional chaining, Sets, Maps, Strings
| # | Technology | Topics Covered | Projects Built | Status |
|---|---|---|---|---|
| 01 | HTML | 15 core topics + 6 practice pages | 3 | ✅ Complete |
| 02 | CSS | 21 sections including Grid, Flexbox, Animations | 6 | ✅ Complete |
| 03 | Responsive Design | Media queries, fluid layouts | 2 | ✅ Complete |
| 04 | Bootstrap | Components, grid system, utilities | 3 | ✅ Complete |
| 05 | Tailwind CSS | — | — | 🔄 Coming Soon |
| 06 | JavaScript | 6 chapters, 50+ files, 3 DOM projects | 3 | 🔄 In Progress |
| 07 | React | — | — | 🔄 Coming Soon |
| 08 | Node.js & Express | — | — | 🔄 Coming Soon |
| 09 | MongoDB | — | — | 🔄 Coming Soon |
| 10 | Full MERN Projects | — | — | 🔄 Coming Soon |
Total so far: 57 commits · 14 projects · HTML + CSS + Bootstrap + JavaScript
- ✅ Real projects at every stage — not just exercises, but actual deployable pages
- ✅ Structured progression — each technology builds directly on the previous one
- ✅ Deep CSS coverage — Flexbox, Grid (7 variants), animations, transitions, variables, media queries
- ✅ JavaScript fundamentals to internals — from basic syntax to scoping, hoisting, closures
- ✅ DOM projects — interactive games and components, not just static pages
- ✅ Bootstrap mastery — 3 real Bootstrap projects beyond basic component usage
- ✅ Responsive design — 2 dedicated fully responsive projects
git clone https://github.com/ualiurrahat/Complete-MERN-Stack-Development.git
cd Complete-MERN-Stack-DevelopmentAll HTML/CSS projects run directly in the browser — no build tools or dependencies needed:
# Simply open the index.html file of any project in your browser
# Example — open the Lisbon Chair Shop project:
open "02_CSS/Projects in CSS/06 Lisbon Chair Shop/index.html"Foundation:
01_HTML → 02_CSS → 03 Responsive Design
Frameworks & Libraries:
04 Bootstrap → (Tailwind CSS — coming soon)
Scripting:
06_Javascript Part 1 → Part 2 → Developer Skills
→ DOM Projects → JS Internals
→ Data Structures & Strings
Full Stack (Coming Soon):
React → Node.js & Express → MongoDB → MERN Projects
- Browser: Chrome or Firefox with DevTools open
- Editor: VS Code with Live Server extension (for instant preview)
- Extension: Prettier for code formatting
A fully playable two-player dice game with complete game logic, score tracking, and turn management — built using vanilla JavaScript and DOM manipulation. Includes the original flowchart design.
A modern e-commerce product landing page built with pure HTML and CSS — showcasing Flexbox layout, custom typography, product cards, and a clean color palette.
A fully responsive architecture firm website with sponsor logos, team section, service cards, and mobile-first layout using CSS media queries.
A Tinder-inspired landing page for dogs — built with Bootstrap's grid system, carousels, testimonials section, and responsive navbar.
Md. Ualiur Rahman Rahat B.Sc. EEE — Gopalganj Science and Technology University B.Sc. Computer Science (in progress) — University of the People (CGPA: 3.73)
This repository represents my complete web development foundation — built before pivoting my primary focus to Python, Data Analytics, and Data Science. The JavaScript and full MERN stack chapters will be continued when web programming courses begin at University of the People.
I also maintain these related repositories:
- 🐍 Complete Python Development Bootcamp — structured Python learning toward Data Science
- 📘 Complete DSA in C++ — 260+ problems, 24+ topics
- 🏆 Complete C++ Programming Mastery — 40 modules + 6 real projects
This repository is licensed under the MIT License — free to use as a learning reference with attribution.
⭐ Found this useful? A star goes a long way — thank you!
From a blank HTML file to full-stack development — built one commit at a time.