This course takes learners from zero coding experience to building complete, responsive static websites using HTML, CSS, Bootstrap, and JavaScript. Along the way, you will learn to use AI tools like Claude, ChatGPT, and GitHub Copilot to write, debug, and improve your code — making you a faster and more confident web developer.
Module 1: Introduction to Web Development & AI
- What is a website? How the internet and web browsers work
- Front-end vs. back-end development (where this course fits)
- Overview of HTML, CSS, Bootstrap, and JavaScript — what each one does
- What is AI, and how can it help with coding? (writing code, explaining errors, saving time)
- Setting up a code editor (Visual Studio Code) and installing useful extensions
- Setting up an AI coding assistant (e.g., GitHub Copilot extension, or using Claude/ChatGPT in the browser alongside the editor)
- Creating your first project folder and file
Part A — HTML
Module 2: HTML Basics
- What is HTML? Understanding tags, elements, and attributes
- Basic page structure:
<!DOCTYPE>,<html>,<head>,<body> - Headings, paragraphs, and text formatting tags
- Creating your first web page
- Using AI to explain unfamiliar HTML tags in simple words
Module 3: HTML — Building Page Content
- Links (
<a>) and navigation between pages - Images (
<img>) and adding media - Lists: ordered, unordered, and nested lists
- Tables: rows, columns, and headers
- Asking AI to generate a starter HTML structure from a simple prompt
Module 4: HTML — Forms & Structure
- Semantic tags:
<header>,<nav>,<section>,<footer>,<div>,<span> - Building forms: input fields, buttons, dropdowns, checkboxes, radio buttons
- Form labels and basic form validation attributes
- Practical exercise: Build a simple multi-section webpage (About, Contact form, Gallery), using AI to check your code for mistakes
Part B — CSS
Module 5: CSS Basics
- What is CSS? Inline, internal, and external stylesheets
- CSS syntax: selectors, properties, and values
- Styling text: fonts, colors, size, alignment
- The Box Model: margin, border, padding, width, height
- Using AI to suggest color palettes and font pairings for a webpage
Module 6: CSS — Layout & Positioning
- Class vs. ID selectors
- Display property: block, inline, inline-block
- Positioning: static, relative, absolute, fixed
- Flexbox basics: aligning and organizing content
- Asking AI to explain why a layout isn't working as expected (debugging with AI)
Module 7: CSS — Advanced Styling
- CSS Grid basics: creating simple grid layouts
- Backgrounds, gradients, and shadows
- Hover effects and simple transitions/animations
- Responsive design basics: media queries for mobile/tablet/desktop
- Practical exercise: Style the webpage built in Module 4 to look professional, using AI prompts to generate and refine CSS ideas
Part C — Bootstrap Framework
Module 8: Introduction to Bootstrap
- What is Bootstrap and why use it?
- Linking Bootstrap via CDN
- Bootstrap Grid System: containers, rows, and columns
- Making layouts responsive automatically
- Using AI to quickly recall Bootstrap class names and their purpose
Module 9: Bootstrap Components
- Navbar (responsive navigation menu)
- Buttons, cards, and badges
- Bootstrap forms and form styling
- Alerts, modals, and tooltips
- Prompting AI to generate a ready-made Bootstrap component
Module 10: Bootstrap — Practical Page Building
- Carousel/image slider
- Bootstrap utility classes (spacing, text alignment, colors)
- Building a responsive landing page using Bootstrap components
- Practical exercise: Rebuild a webpage layout using Bootstrap instead of custom CSS, using AI to help structure the layout faster
Part D — JavaScript
Module 11: JavaScript Basics
- What is JavaScript and what does it do on a website?
- Variables, data types, and basic operators
- Writing and linking a JS file to an HTML page
- Using the browser console for testing code
- Using AI to explain what a piece of JavaScript code does, line by line
Module 12: JavaScript — Logic & Control
- Conditional statements: if, else, else if
- Loops: for and while
- Functions: creating and calling functions
- Arrays and basic array methods
- Practicing prompts like "Write a function that checks if a form field is empty"
Module 13: JavaScript & the DOM
- What is the DOM (Document Object Model)?
- Selecting elements (getElementById, querySelector)
- Changing text, styles, and content dynamically
- Handling events: click, hover, form submit
- Using AI to fix a broken piece of DOM code (debugging practice)
Module 14: JavaScript — Interactive Features
- Building simple interactive elements: image sliders, toggle menus, form validation
- Show/hide content (accordions, tabs)
- Simple form validation with JavaScript
- Practical exercise: Add interactive features (mobile menu toggle, form validation) to the Bootstrap page, using AI to generate a first draft and then improving it yourself
Module 15: Working Effectively with AI Coding Tools
- Recap: which AI tools are useful for web development (Claude, ChatGPT, GitHub Copilot)
- How to write clear coding prompts (be specific: what page, what feature, what style)
- Using AI for: generating starter code, explaining errors, suggesting improvements, writing comments
- Important habit: always read and understand AI-generated code before using it — never copy-paste blindly
- Checking AI code for mistakes, outdated practices, or things that don't match your project
- Practical exercise: Take a small feature request (e.g., "add a dark mode toggle") and complete it using AI assistance from prompt to working code
Module 16: Final Project — Complete Website with AI Assistance
- Planning a complete website: homepage, about, services/portfolio, contact page
- Structuring the project with HTML (using AI to speed up repetitive structure)
- Styling with CSS and Bootstrap for a responsive design (using AI for style suggestions)
- Adding JavaScript interactivity (navigation, forms, sliders), using AI to help troubleshoot
- Testing the website on different screen sizes (responsive check)
Module 17: Publishing & Course Wrap-Up
- Basics of hosting a static website (GitHub Pages, Netlify, or similar free options)
- Domain names explained (brief overview)
- Final project review and feedback
- Recap of key concepts across HTML, CSS, Bootstrap, JavaScript, and AI-assisted development
- Q&A session and course completion certificate/assessment (optional)