Course Overview

📚 Website Design Training Course Structure
🕒 Duration: 8 Weeks | Level: Beginner to Intermediate
────────────────────────────────────────────
📖 Module 1: Introduction to Web Design
• What is Web Design?
• Roles of a Web Designer vs Web Developer
• Overview of Frontend vs Backend
• Tools You'll Need (VS Code, Browsers, Extensions)
📖 Module 2: HTML Fundamentals
• Structure of an HTML Document
• Headings, Paragraphs, Links, Lists
• Images, Iframes, and Embeds
• Forms and Input Elements
• Semantic HTML
📖 Module 3: CSS Styling Basics
• Inline, Internal, and External CSS
• Selectors, Classes, IDs
• Colors, Fonts, and Text Styling
• Box Model & Spacing (Margin, Padding, Border)
• CSS Units: px, em, rem, %, vw/vh
📖 Module 4: Layouts with Flexbox & Grid
• Display Properties
• Flexbox Fundamentals
• CSS Grid Basics
• Building Responsive Layouts
📖 Module 5: Responsive Design & Media Queries
• Mobile-First Design
• Breakpoints & Media Queries
• Making Websites Work on All Devices
• Viewport & REM-based Scaling
📖 Module 6: JavaScript Essentials for Designers
• Intro to JavaScript in the Browser
• Basic Syntax, Variables, and Functions
• DOM Manipulation Basics
• Adding Interactivity (e.g., Button Clicks, Toggles)
📖 Module 7: Real Projects & UI Practice
• Design a Personal Portfolio Website
• Create a Product Landing Page
• Build a Blog Layout
• Mini Animations with CSS + JS
📖 Module 8: Design Principles & Tools
• Visual Hierarchy & Layout Best Practices
• Typography & Color Theory
• Using Figma or Adobe XD for Wireframing
• Exporting Assets & Collaborating with Developers
🧪 Final Project
• Design and Develop a Complete Responsive Website
• Optional: Host your project on GitHub Pages or Netlify
• Submit: HTML, CSS, JS files + Live Demo Link
✅ Outcome: Ability to create fully responsive, modern, and interactive websites from scratch.