Here’s a 12-module foundation course designed to give learners an in-depth understanding of website infrastructure, with a strong focus on frontend basics. Each module includes a class topic, hands-on learning, a daily homework task, and contributes toward a live project: launching a personal website.

---

🎓 Course: “Frontend Foundations: Build & Launch Your First Website”

🗓 Duration: 12 Days x 2hr Live Classes

🧠 Level: Beginner-Friendly

🚀 Certiificate after Final Project: Launch your own personal portfolio website by your own coding & deploy web hosting.

---

📚 Course Outline

Module 1: Understanding the Web

• Topics Covered:
• How websites work (Browser, Server, Domain, Hosting)
• HTTP/HTTPS basics
• Tools needed (Code editor, browser, dev tools)
• Homework: Write a one-paragraph explanation of how a website loads in your browser.

---

Module 2: HTML Essentials

• Topics Covered:
• HTML document structure
• Basic tags: headings, paragraphs, links, images, lists
• Semantic HTML
• Homework: Build a basic HTML page with your bio and image.

---

Module 3: HTML Advanced

• Topics Covered:
• Forms, inputs, buttons
• Tables and iframes
• Meta tags and accessibility
• Homework: Create a contact form using HTML.

---

Module 4: Introduction to CSS

• Topics Covered:
• CSS syntax and selectors
• Adding styles (inline, internal, external)
• Colors, fonts, spacing
• Homework: Style your bio page using external CSS.

---

Module 5: CSS Layout – Box Model & Positioning

• Topics Covered:
• Box model breakdown
• Display types (block, inline, inline-block)
• Positioning: static, relative, absolute, fixed
• Homework: Create a layout with three positioned boxes.

---

Module 6: CSS Layout – Flexbox

• Topics Covered:
• Flex container and items
• Alignment, justification, direction
• Responsive layouts using Flexbox
• Homework: Build a responsive navigation bar using Flexbox.

---

Module 7: CSS Layout – Grid

• Topics Covered:
• Grid container and tracks
• Grid areas and auto-placement
• Responsive grid layouts
• Homework: Create a grid-based portfolio layout.

---

Module 8: Responsive Design

• Topics Covered:
• Media queries
• Mobile-first design
• Viewport units and rem/em
• Homework: Make your existing pages responsive.

---

Module 9: JavaScript Basics

• Topics Covered:
• Syntax, variables, data types
• Functions, conditionals, loops
• Console and debugging
• Homework: Write a simple JavaScript script to take user input and display a message.

---

Module 10: DOM Manipulation

• Topics Covered:
• The Document Object Model
• Selecting and modifying elements
• Event listeners
• Homework: Add interactivity (e.g., button click) to your bio page.

---

Module 11: Putting It Together

• Topics Covered:
• Folder structure
• Linking HTML, CSS, JS
• Hosting basics (GitHub Pages/Netlify)
• Homework: Combine all pages and assets into a cohesive website.

---

Module 12: Launch Day

• Topics Covered:
• Final site polishing
• Live walkthrough of deployment
• Launch your personal website
• Homework: Publish your website and share the live link.

---

🧩 Live Project:

Build your personal website (portfolio, bio, contact, project showcase) through all modules. Final deployment on GitHub Pages or Netlify.

---