đ 18-Day Web Design Bootcamp Plan for Beginners
with 3 Days of Live Class
Each class: 10 minutes to 12 mintes â Total 12 classes per day
Bonus: Live Class Days included at the end
1
đ
Day 1 â Introduction to Web Design (HTML Basics)
1
What is HTML
Explain with an example of a simple webpage (e.g., a "Hello World" page)
2
What is the Internet
Diagram of the internet: client, server, browser
3
What is a Browser
Show Chrome, Firefox, Edge screenshots
4
Default Browser
Show how to set a default browser
5
What is an Editor (VS Code)
Install VS Code and show basic setup
6
Basic HTML Syntax
Create a simple page with <html>, <head>, <body>
7
First HTML Program
A "My First Webpage" demo
8
h1âh6 Tags
Display headings in different sizes
9
Paragraph <p>
Write an "About Me" paragraph
10
Lists (ul, ol)
Grocery list (unordered), Task list (ordered)
11
Anchor Tag <a>
Create a link to Google
12
Mini Project
"My Profile Page" with heading, paragraph, and link
2
đ
Day 2 â Multimedia and Forms
1
Live Server Setup
Show how to install and run Live Server in VS Code
2
Images
Insert an image of a cat
3
Videos
Embed a YouTube video
4
Audio
Add a music file to the page
5
Div Tag
Create a container for content
6
Forms
Create a simple form (Name, Email)
7
Input Fields
Text, Password, Email examples
8
Buttons
Submit and Reset buttons
9
Tables (NEW!)
Create a table for student marks
10
Project 1
"My Favorite Things" webpage (images, lists, links)
11
Project 2
"Registration Form"
12
Practice Set
Quick recap exercises (images, form, table)
3
đ
Day 3 â Practice Day
Practice Activity (Classes 1-12)
Practice previous topics - Students build their first mini-project combining all elements
4
đ
Day 4 â CSS Introduction
1
What is CSS
Style a simple page
2
Inline CSS
Add color to headings
3
Internal CSS
Add a <style> block in HTML
4
External CSS
Create a separate style.css file
5-12
30 CSS Properties
Cover 3 properties per class (e.g., color, font-size, background, margin, padding, etc.)
Mini Styling Project
Style the "My Profile Page" beautifully
5
đ
Day 5 â Flexbox Layout
1
What is Flexbox
Explain flex container and items
2
Flex Direction
Row and column layout
3
Justify Content
Center, space-between examples
4
Align Items
Align items vertically
5
Gap Property
Add spacing between boxes
6
Wrap
Show flex-wrap effect
7-12
Mini Flex Projects
Centered card, profile box, gallery layout, etc.
6
đ
Day 6 â CSS Grid Layout
1
What is Grid
Grid container, items
2
Columns & Rows
Create 3x3 grid layout
3
Grid Gap
Add spacing between grid items
4-12
Mini Grid Project
Responsive gallery, pricing table, blog layout
7
đ
Day 7 â Practice & Assignment
Practice Activity (Classes 1-12)
Practice all topics - Students build a small multi-page site
Assignment (7 PM)
50 Questions Quiz - Based on HTML & CSS fundamentals
8
đ
Day 8 â Assignment Review & Project
Review & Build (Classes 1-12)
Review Assignment & Build a small project - Recap difficult topics + practice with a mini-project (e.g., personal blog page)
9
đ
Day 9 â Box Model & Basic Media Queries
1
What is Box Model
Create a box with padding, border, margin
2
Box Model Properties
Detailed examples for each property
3
Media Queries
Change layout based on screen size
4-12
Mini Grid Project
Responsive gallery, pricing table, blog layout
10
đ
Day 10 â Advanced CSS & Frameworks
12 CSS Classes (Classes 1-12)
Buttons, cards, badges, alerts, hover effects, animations, etc. (Bootstrap or custom CSS)
11
đ
Day 11 â Tailwind CSS Basics
12 Tailwind Topics (Classes 1-12)
Installation, container, text color, bg color, flex, grid, padding, margin, border, hover, etc.
12-14
đ
Day 12â14 â Project Marathon 12
12
Project 1
Personal blog website
13
Project 2
Product showcase (e.g., e-commerce landing page)
14
Project 3
Responsive car service landing page
15
đ
Day 15 â JavaScript Basics
1
What is JavaScript
Alert "Hello World"
2
Basic JS
Variables, Data Types, Operators, Functions, Events, DOM - Button click event, image change, color changer
16
đ
Day 16 â Advanced JavaScript
Advanced JS Topics (Classes 1-12)
Loops, Arrays, Objects, DOM Manipulation, Form Validation, Small Project (To-Do App) - Practical projects: Quiz app, form validation, etc.
17
đ
Day 17 â Wedding Website Project
Build a Wedding Website (Classes 1-12)
Home, About, Gallery, RSVP sections
18
đ
Day 18 â Portfolio Website Project
Build a Portfolio Website (Classes 1-12)
Sections: About, Skills, Projects, Contact
19-21
đ
Day 19â21 â Live Class Days
19
Live Class 1
Q&A + Code Review
20
Live Class 2
Solve Errors + Final Touches
21
Project 3
Responsive car service landing page
đ āĻŽā§āĻ˛ āĻāĻ¨ā§āĻ¨āĻ¯āĻŧāĻ¨āĻ¸āĻŽā§āĻš (Key Improvements)
â
āĻāĻžāĻāĻžāĻ¸ā§āĻā§āĻ°āĻŋāĻĒā§āĻ āĻ§āĻžāĻĒā§ āĻ§āĻžāĻĒā§ āĻļāĻŋāĻāĻžāĻ¨ā§:
āĻāĻžāĻāĻžāĻ¸ā§āĻā§āĻ°āĻŋāĻĒā§āĻ āĻļā§āĻāĻžāĻ¨ā§ ā§Š āĻĻāĻŋāĻ¨ā§ āĻāĻžāĻ āĻāĻ°ā§ āĻĻā§āĻāĻ¯āĻŧāĻž āĻšāĻŦā§, āĻ¯āĻžāĻ¤ā§ āĻ§ā§āĻ°ā§ āĻ§ā§āĻ°ā§ āĻļā§āĻāĻž āĻ¯āĻžāĻ¯āĻŧ āĻāĻŦāĻ āĻĒā§āĻ°ā§āĻ¯āĻžāĻāĻāĻŋāĻā§āĻ¯āĻžāĻ˛ āĻĒā§āĻ°āĻā§āĻā§āĻā§āĻ° āĻŽāĻžāĻ§ā§āĻ¯āĻŽā§ āĻļā§āĻāĻž āĻŽāĻāĻŦā§āĻ¤ āĻšāĻ¯āĻŧāĨ¤
â
āĻ
āĻ¤āĻŋāĻ°āĻŋāĻā§āĻ¤ āĻāĻžāĻĒ āĻāĻŽāĻžāĻ¨ā§:
CSS āĻāĻ° ā§Šā§Ļ āĻāĻž āĻĒā§āĻ°āĻĒāĻžāĻ°ā§āĻāĻŋāĻā§ āĻļā§āĻ§ā§ āĻŽā§āĻāĻ¸ā§āĻĨ āĻ¨āĻž āĻāĻ°ā§, āĻĒā§āĻ°āĻā§āĻā§āĻ āĻāĻŋāĻ¤ā§āĻ¤āĻŋāĻ āĻ˛ā§āĻ¸āĻ¨ āĻāĻ° āĻŽāĻžāĻ§ā§āĻ¯āĻŽā§ āĻļā§āĻāĻžāĻ¨ā§ āĻšāĻŦā§āĨ¤ āĻ¯ā§āĻŽāĻ¨: "Button Style āĻāĻ°āĻž", "Card āĻŦāĻžāĻ¨āĻžāĻ¨ā§", "Layout āĻ¤ā§āĻ°āĻŋ āĻāĻ°āĻž"āĨ¤
â
āĻĒā§āĻ°āĻā§āĻā§āĻ āĻ¸āĻŋāĻā§āĻ¯āĻŧā§āĻ¨ā§āĻ¸āĻŋāĻ (āĻ§āĻžāĻĒā§ āĻ§āĻžāĻĒā§ āĻĒā§āĻ°āĻā§āĻā§āĻ):
āĻĒā§āĻ°āĻĨāĻŽā§ āĻ¸āĻšāĻ āĻĒā§āĻ°āĻā§āĻā§āĻ (āĻ¯ā§āĻŽāĻ¨ āĻ°ā§āĻ¸āĻŋāĻĒāĻŋ āĻĒā§āĻ), āĻ¤āĻžāĻ°āĻĒāĻ° āĻāĻāĻā§ āĻāĻāĻŋāĻ˛ (Portfolio), āĻ¤āĻžāĻ°āĻĒāĻ° āĻāĻ¨ā§āĻāĻžāĻ°âā§āĻ¯āĻžāĻāĻāĻŋāĻ āĻ
ā§āĻ¯āĻžāĻĒāĨ¤
â
āĻĢā§āĻ°ā§āĻŽāĻāĻ¯āĻŧāĻžāĻ°ā§āĻ āĻļā§āĻāĻžāĻ° āĻāĻ¨ā§āĻ¯ āĻāĻ˛āĻžāĻĻāĻž āĻĻāĻŋāĻ¨:
CSS āĻāĻ° āĻŦā§āĻ¸āĻŋāĻ āĻļā§āĻāĻžāĻ° āĻĒāĻ° Bootstrap / Tailwind āĻļā§āĻāĻžāĻ° āĻāĻ¨ā§āĻ¯ āĻāĻ˛āĻžāĻĻāĻž āĻĻāĻŋāĻ¨ āĻ°āĻžāĻāĻž āĻšāĻŦā§āĨ¤
â
āĻĄāĻŋāĻŦāĻžāĻāĻŋāĻ āĻļā§āĻāĻžāĻ° āĻāĻ¨ā§āĻ¯ āĻāĻ˛āĻžāĻĻāĻž āĻĻāĻŋāĻ¨:
āĻĄāĻŋāĻŦāĻžāĻāĻŋāĻ āĻļā§āĻāĻž āĻā§āĻŦ āĻā§āĻ°ā§āĻ¤ā§āĻŦāĻĒā§āĻ°ā§āĻŖāĨ¤ āĻāĻāĻ¨ā§āĻ¯ Chrome DevTools āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°ā§ āĻĄāĻŋāĻŦāĻžāĻāĻŋāĻ āĻļā§āĻāĻžāĻ¨ā§āĻ° āĻāĻ¨ā§āĻ¯ āĻāĻ˛āĻžāĻĻāĻž āĻĻāĻŋāĻ¨ āĻĨāĻžāĻāĻŦā§āĨ¤
đ Key Improvements:
1. Slower JavaScript Introduction: Spread over 3 days with practical projects.
2. Reduced Overload: 30 CSS properties split into contextual lessons (e.g., "Styling buttons" instead of memorization).
3. Project Sequencing: Gradual complexity (recipe page â portfolio â interactive apps).
4. Framework Focus: Dedicated days for Bootstrap/Tailwind after core CSS mastery.
5. Debugging Day: Critical for problem-solving skills.
đ ī¸ āĻĒā§āĻ°āĻ¯āĻŧā§āĻāĻ¨ā§āĻ¯āĻŧ āĻā§āĻ˛āĻ¸ āĻļā§āĻāĻžāĻ¨ā§ āĻšāĻŦā§:
â
Figma (Day 2):
Figma āĻĻāĻŋāĻ¯āĻŧā§ āĻĒā§āĻ°āĻā§āĻā§āĻā§āĻ° āĻĄāĻŋāĻāĻžāĻāĻ¨ (wireframe) āĻ¤ā§āĻ°āĻŋ āĻļā§āĻāĻžāĻ¨ā§ āĻšāĻŦā§āĨ¤ āĻ¯ā§āĻŽāĻ¨: āĻāĻ¯āĻŧā§āĻŦāĻ¸āĻžāĻāĻā§āĻ° āĻŦā§āĻ¸āĻŋāĻ āĻĄāĻŋāĻāĻžāĻāĻ¨ āĻāĻŋāĻāĻžāĻŦā§ āĻŦāĻžāĻ¨āĻžāĻ¨ā§ āĻ¯āĻžāĻ¯āĻŧāĨ¤
â
GitHub (Day 5):
āĻā§āĻāĻžāĻŦā§ āĻĒā§āĻ°āĻā§āĻā§āĻ āĻāĻžāĻ°ā§āĻ¸āĻ¨ āĻāĻ¨ā§āĻā§āĻ°ā§āĻ˛ āĻāĻ°āĻ¤ā§ āĻšāĻ¯āĻŧ, āĻ¤āĻž āĻļā§āĻāĻžāĻ¨ā§ āĻšāĻŦā§āĨ¤ GitHub āĻ āĻā§āĻĄ āĻāĻĒāĻ˛ā§āĻĄ āĻāĻ°āĻž āĻļā§āĻāĻžāĻ¨ā§ āĻšāĻŦā§āĨ¤
â
Chrome DevTools (Day 7):
āĻā§āĻĄā§ āĻ¸āĻŽāĻ¸ā§āĻ¯āĻž āĻā§āĻĨāĻžāĻ¯āĻŧ āĻšāĻā§āĻā§, āĻ¸ā§āĻāĻž āĻā§āĻāĻā§ āĻŦā§āĻ° āĻāĻ°āĻž āĻāĻŦāĻ Debugging Layouts āĻļā§āĻāĻžāĻ¨ā§ āĻšāĻŦā§āĨ¤
đ ī¸ Tools to Include:
âĸ Figma Basics (Day 2): Design a wireframe for projects.
âĸ GitHub (Day 5): Version control basics.
âĸ Chrome DevTools (Day 7): Debugging layouts.
đ Ready to Start Your Web Design Journey?
Join our 18-day bootcamp and become a web designer!