🌐 Web Designing Course 2026

A complete, lecture-by-lecture web designing course: from your first HTML tag to responsive Bootstrap websites.

---

📖 About This Repository

This repository contains the complete classroom code of the Web Designing Course 2026, taught by Yousuf Naveed Khan (Senior Faculty, Aptech Gulshan 2).

Every lecture is a single, self-contained HTML file. The code was written live in class, step by step, together with the students. Each file has comments that explain what each line does, so you can revise any topic on your own.

Who is this for?

• 🎓 Students of this batch, to revise any lecture at any time
• 🧑‍💻 Absolute beginners who want to learn web designing from zero
• 👨‍🏫 Teachers looking for a simple, practical lecture flow

---

🗺️ Course Roadmap

HTML Basics ──► CSS Styling ──► Layouts & Responsive ──► JavaScript ──► DOM & Events ──► Bootstrap ──► Libraries ──► Final Project
 (Lec 1-2)       (Lec 3-7)        (Lec 8-17)              (Lec 18-21)    (Lec 22-23)      (Lec 24-25)   (Lec 26)      (coming soon)

---

📚 Lecture Index

Module 1: HTML Fundamentals

#	Lecture	Topics Covered
01	Text Formatting	Headings, paragraphs, bold, italic, line breaks
02	Links & Lists	Anchor tags, page navigation, ordered and unordered lists

Module 2: CSS Fundamentals

#	Lecture	Topics Covered
03	Introduction to CSS	Inline, internal and external CSS
04	Box Model	Margin, border, padding, content
05	Selectors & Font Styling	Element, class and ID selectors, font properties
06	Images & Backgrounds	Images, background color and background images
07	Personal Profile Card	First mini project: a styled profile card

Module 3: Layouts, Media & Responsive Design

#	Lecture	Topics Covered
08	Layout Concepts	Display, positioning and page layout concepts
09	Tables, Audio & Video	HTML tables, <audio> and <video> tags
10	Forms	Inputs, labels, buttons, form structure
11	Flexbox	Flex container, direction, alignment, wrapping
12	Login Form	Mini project: a styled login form
13	Navbar	Building a navigation bar with Flexbox
14	Cards	Card layouts with hover effects
15	Responsiveness	Media queries, mobile-friendly design
16	Grid System	CSS Grid: rows, columns, gaps
17	Animations	Transitions, keyframes, transforms

Module 4: JavaScript

#	Lecture	Topics Covered
18	Introduction to JS	What is JavaScript, variables, console
19	Operators	Arithmetic, comparison and logical operators
20	Conditionals & Functions	if / else, functions, parameters
21	Loops	for and while loops
22	Arrays, forEach & DOM	Arrays, array of objects, forEach, rendering cards with the DOM
23	Events	addEventListener: click counter, dark mode toggle, live typing

Module 5: Bootstrap & External Libraries

#	Lecture	Topics Covered
24	Introduction to Bootstrap	CDN setup, container, utility classes, buttons (Bootstrap 5.3.8)
25	Bootstrap Grid & Cards	12-column grid, responsive columns, cards (Bootstrap 6 alpha)
26	External Libraries	Contact form with Formspree, popups with SweetAlert2

🔜 Coming Next

• Bootstrap navbar, icons and forms
• Bootstrap dialog (modal) and carousel
• jQuery basics
• Final Project: a complete website built in class, using custom CSS + Bootstrap + JavaScript, AI-assisted

---

🎁 Gift for Students: Web Designer's Toolkit

📄 Download the Web Designer's Toolkit (PDF)

50+ hand-picked free resources every web designer should know: website templates, contact form services, sliders and scroll animations, icons and fonts, free images, color and CSS generators, practice games, free hosting, and VS Code + AI tips.

---

📁 Folder Structure

WebDesigningCourse26/
├── lec01-text-formatting.html ... lec26-externalLibraries.html   # One file per lecture
├── css/          # External stylesheets used by some lectures (lec07, lec13, lec14, lec26)
├── js/           # External JavaScript files (operators, conditionals & functions)
├── images/       # Images used in lectures
├── audio/        # Sample audio for Lec 09
├── video/        # Sample video for Lec 09
├── resources/    # Extra study material (Web Designer's Toolkit PDF)
└── pages/        # Home, About, Services, Contact pages for the links lecture

---

🚀 How to Use This Repository

Option 1: Download

1. Click the green Code button above, then Download ZIP
2. Extract the folder
3. Open any lecXX-....html file in your browser

Option 2: Clone with Git

git clone https://github.com/YousufNaveedKhan/WebDesigningCourse26.git
cd WebDesigningCourse26

Recommended Setup

• Editor: Visual Studio Code
• Extension: Live Server, which reloads the browser automatically on every save
• Browser: latest Google Chrome or Microsoft Edge (press F12 to open DevTools and the Console)

💡 Tip: Lectures 24 onwards load Bootstrap and other libraries from a CDN, so you need an internet connection to see them properly.

---

⚠️ Note About Bootstrap Versions

• Lec 24 uses Bootstrap 5.3.8 (the current stable version).
• Lec 25 onwards uses Bootstrap 6.0.0-alpha.1, released in October 2026.

Bootstrap 6 renamed many classes. If you copy code from older tutorials or from AI tools, check these first:

Bootstrap 5	Bootstrap 6
btn btn-primary	btn-solid theme-primary
btn btn-outline-danger	btn-outline theme-danger
text-primary, text-white	fg-primary, fg-white
col-md-6, col-lg-3	md:col-6, lg:col-3
<script src="...">	<script type="module" src="...">

Bootstrap 6 also needs a modern browser (Chrome / Edge 130+).

---

🛠️ Tools & Libraries Used

Tool	Purpose
HTML5	Page structure
CSS3	Styling, Flexbox, Grid, animations
JavaScript (ES6)	Logic, DOM manipulation, events
Bootstrap	Responsive layouts and ready-made components
SweetAlert2	Beautiful popup alerts
Formspree	Sending contact forms to email without a backend
ChatGPT / Claude	AI-assisted coding: generating sample data and explaining code

---

🤖 AI-Assisted Learning

This course teaches students to use Generative AI the right way:

1. Learn the concept in class first
2. Use AI to generate a variation (sample data, a section, a component)
3. Read and explain every line the AI gave you
4. Save your prompts in a prompts.txt file

AI is your assistant, not your replacement. If you can't explain the code, don't use it.

---

💡 Tips for Students

• Type the code yourself; don't just copy-paste. Your fingers learn too.
• Change values in each lecture (colors, sizes, text) and watch what happens.
• Use the browser Console (F12) to find JavaScript errors.
• Revise one old lecture every day.
• Put every project online (GitHub Pages / Netlify) and add the link to your CV.

---

👨‍🏫 Instructor

Yousuf Naveed Khan Senior Faculty, Aptech Gulshan 2 · Founder & CEO, GFT Solutions

---

⭐ If this repository helped you, give it a star! ⭐

Made with ❤️ for the Web Designing Batch 2026