Web Design Syllabus
WEB DESIGN SYLLABUS
🎯 Module 1: Introduction to Web Design
What is Web Design?
Difference between Web Design & Web Development
Types of Websites: Static, Dynamic, Responsive
Basic Terminology: UI, UX, Frontend, Backend
🧱 Module 2: HTML (Structure)
Introduction to HTML
Basic Tags (headings, paragraphs, links, images)
Lists, Tables, Forms
Semantic HTML5 Elements
Creating Basic Page Layouts
🎨 Module 3: CSS (Styling)
CSS Syntax & Selectors
Inline, Internal, External CSS
Colors, Fonts, Backgrounds
Box Model (Margin, Padding, Border)
Flexbox & Grid Layouts
Responsive Design with Media Queries
🖥️ Module 4: Web Design Principles
Visual Hierarchy
Color Theory & Typography
Layouts & Whitespace
User-Friendly Navigation
Mobile-First Design
🖱️ Module 5: User Interface (UI) Design
Designing Navigation Bars
Forms & Input Styling
Buttons & Hover Effects
Icons & Fonts (Google Fonts, Font Awesome)
Image Optimization & Placement
📱 Module 6: Responsive Web Design
What is Responsive Design?
Viewport & Units (
%, em, rem, vh, vw)Flexbox vs Grid for Responsiveness
Creating Mobile-Friendly Pages
⚙️ Module 7: Tools & Frameworks
Wireframing (Figma / Adobe XD basics)
Bootstrap Basics (Responsive Grid, Components)
Using Templates & Themes
Introduction to Page Builders (Elementor)
💡 Module 8: Website Planning & Content
Domain, Hosting Basics
Choosing Purpose, Target Audience
Sitemap & Navigation Planning
Writing Content for Web
SEO-friendly Design
⚒️ Module 9: Website Building Tools
Using WordPress for Web Design (No-Code)
Using Page Builders (Elementor, Divi)
HTML/CSS Editor Practice (VS Code)
🔐 Module 10: Web Standards & Best Practices
Accessibility Basics (WCAG)
Browser Compatibility
Site Performance (Image Optimization, Lazy Loading)
Secure Design (SSL, Form Validation)
🎓 Module 11: Final Project
Design a complete website using HTML, CSS (and optionally Bootstrap or WordPress)
Must include:
Homepage
About, Services/Products, Contact Page
Responsive Layout
Navigation Bar, Footer, Forms
