Learn to Build Responsive User Interfaces using HTML, CSS, Tailwind CSS / Bootstrap and AI Tools, with real-world mini-projects .

Week 1: Introduction to Web Development + HTML Basics

• What is front-end development?
• Structure of a web page
• HTML tags, attributes, headings, paragraphs
• Lists, links, images, forms
• Tables, semantic tags

Learning resources

Watch any of the following videos

https://www.edx.org/learn/html5/the-world-wide-web-consortium-w3c-html5-coding-essentials-and-best-practices

• Create a personal bio page
• Resume layout in HTML only
• Mini-project: Static website for a local tuition center

Week 2: CSS Fundamentals

• CSS syntax and selectors
• Inline, internal, and external styles
• Box model, margins, padding, borders
• Colors, fonts, units, flexbox basics

• Style the resume from Week 1
• Create card layouts using CSS
• Mini-project: Promotional page for a local café or bakery

Week 3: Layouts with Flexbox and Responsive Design

=

• Flexbox deep dive
• Media queries
• Mobile-first design
• Navbar and footer structure

• Create a responsive 2-column layout
• Build a responsive navbar and footer
• Mini-project: Website for a local homestay or travel agency

Week 4: Intro to Tailwind CSS

• Installing Tailwind (CDN and project setup)
• Utility-first approach
• Typography, spacing, grids
• Responsiveness with Tailwind

• Rebuild earlier projects using Tailwind
• Tailwind components: buttons, cards, navbars
• Mini-project: Landing page for a local language learning app or coaching class

Week 5: Bootstrap CSS

https://www.coursera.org/learn/developing-websites-and-front-ends-with-bootstrap

• Using Bootstrap via CDN
• Bootstrap grid system
• Components: navbar, buttons, alerts, forms
• Differences between Bootstrap and Tailwind

• Create responsive layouts with Bootstrap
• Tailwind components: buttons, cards, navbars
• Mini-project: Bootstrap website for a local supermarket or product catalogue

Week 6: Final Project + Portfolio Building

• Hosting with GitHub Pages
• File and folder structure for deployment
• Introduction to version control (Git basics)

• Tourism website for Wayanad/Kumarakom
• Digital menu for a local restaurant
• Portfolio for a freelance photographer or graphic designer
• Event website for a local fest or cultural program

• At least 4 mini projects + 1 final project
• A basic portfolio site showcasing all work
• GitHub account with code repositories

Week 6: Final Project + Portfolio Building

• Hosting with GitHub Pages
• File and folder structure for deployment
• Introduction to version control (Git basics)

• Tourism website for Wayanad/Kumarakom
• Digital menu for a local restaurant
• Portfolio for a freelance photographer or graphic designer
• Event website for a local fest or cultural program

• At least 4 mini projects + 1 final project
• A basic portfolio site showcasing all work
• GitHub account with code repositories

Week 7: Using AI Tools for Front-End Development

Learn to use AI tools (ChatGPT, GitHub Copilot, Codeium, etc.) to generate, analyze, and improve HTML, CSS, and framework-based code effectively.

1. Introduction to AI in Web Development (1 hr)
   • What AI tools can and can’t do
   • Why learning code still matters
   • The rise of “AI-assisted developers
2. Using ChatGPT to Write HTML/CSS (1.5 hr)
   • Prompts that work best:
     • Create a 3-column responsive layout using CSS grid
     • Build a navbar in Tailwind CSS with mobile dropdown
   • Refining prompts to get better results
   • Reading and improving AI-generated code
3. Debugging with AI Tools (1 hr)
   • Copy-pasting error messages into ChatGPT
   • Example: “Fix this broken flexbox layout
   • Prompting: “Why is my navbar not responsive?
4. Design to Code with AI (1 hr)
   • Uploading or describing Figma-style layouts
   • Create a landing page from this wireframe
   • Styling from screenshots
5. AI Tools Overview (1.5 hr)
   • ChatGPT (GPT-4o), GitHub Copilot, Codeium
   • Using VS Code extensions for AI help
   • Safety and copyright concerns
   • Ethics of using AI-generated code

• Generate and build:
  • A Tailwind-based pricing table
  • A contact form with validation and layout
  • A responsive card layout with image + text

• Tourism website for Wayanad/Kumarakom
• Digital menu for a local restaurant
• Portfolio for a freelance photographer or graphic designer
• Event website for a local fest or cultural program

• At least 4 mini projects + 1 final project
• A basic portfolio site showcasing all work
• GitHub account with code repositories