🧾 Course Modules: Web Design (HTML, CSS, JavaScript) with Practical Project

🎓 Course Title:

Web Design Foundation with Practical Media Website Project

📍 Course Duration:

4 Weeks (8 Days – Saturdays & Sundays)

📚 Course Format:

• Theoretical + Hands-on Practical Sessions
  
  

• Final Project: Build a Full Media Website
  
  

• Class + Homework Assignments
  
  

• Mentor Feedback & Review Sessions

🔹 Module 1: Introduction to Web Design & Tools

• What is Web Design?
  
  

• Web Designer vs Web Developer
  
  

• Overview of Frontend Development
  
  

• Introduction to VS Code, Browser DevTools, Live Server
  
  

• Folder Structures & Project Planning
  
  

✅ Outcome: Students understand the web design process and set up their development environment.

🔹 Module 2: HTML – Structure of the Web

• HTML Syntax, Tags, Elements, Attributes
  
  

• Common Tags: head, title, meta, link, script
  
  

• Text, Headings, Lists, Images, Links
  
  

• Forms and Form Validation (Basic)
  
  

• Semantic HTML: article, section, nav, aside
  
  

🧪 Mini Task: Create a personal portfolio page with only HTML

✅ Outcome: Ability to build structured, semantic HTML pages.

🔹 Module 3: CSS – Styling the Web

• CSS Syntax, Selectors, Properties, Colors
  
  

• Box Model, Margin, Padding, Border
  
  

• Typography, Google Fonts
  
  

• Positioning: Static, Relative, Absolute, Fixed
  
  

• Flexbox & Grid Layout
  
  

• Responsive Design (Media Queries)
  
  

• Basic Animations & Transitions
  
  

🧪 Mini Task: Style the portfolio page to look professional and responsive

✅ Outcome: Understand how to style and layout any webpage responsively.

🔹 Module 4: JavaScript – Making the Web Interactive

• JavaScript Syntax & Data Types
  
  

• Variables, Operators, Functions
  
  

• DOM Manipulation (Get/Change HTML Elements)
  
  

• Events: Click, Input, Form Submission
  
  

• Loops, Conditions
  
  

• Simple Form Validation
  
  

• Basic Array and Object Handling
  
  

🧪 Mini Task: Create an interactive image slider or accordion component

✅ Outcome: Able to add interactivity and logic to static web pages.

🏗️ Module 5: Practical Project – Build a Media Website

Objective: Apply all HTML, CSS, and JavaScript knowledge by building a dynamic media/news website.

🧱 Project Scope Includes:

• Homepage with News Sections (HTML Structure)
  
  

• Navbar, Footer, and Multi-page Layout
  
  

• Responsive Grid of Articles (CSS)
  
  

• Article Page Template
  
  

• Image Slider or Featured Article Section (JavaScript)
  
  

• Basic Form with Validation (e.g., Newsletter Signup)
  
  

• Light/Dark Mode Toggle (JavaScript)
  
  

✅ Deliverable: A full-fledged responsive Media Website ready to publish or use in your portfolio.

🎯 Course Completion Outcome:

• Confidence in writing clean HTML, CSS, JavaScript code
  
  

• Able to build real-world web pages and complete websites
  
  

• Ready to pursue roles like:
  
  

  • Junior Web Designer
    
    

  • Frontend Developer (Entry Level)
    
    

  • Freelance Web Projects

📝 Optional: Assessment & Certification

• Final Project Evaluation (Checklist Provided)
  
  

• Optional Quiz on Key Concepts
  
  

• Certificate of Completion (Upon Request)