📚 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.