Build a Complete Website

🔄 Quick Recall: Throughout this course, you’ve learned to build HTML structures, style with CSS, add JavaScript interactivity, debug issues, optimize performance, and deploy with SEO. Now let’s build a complete project using everything.

Capstone Project: Build a Portfolio Website

This exercise walks you through building a real, deployable portfolio website. Adapt it to your needs — it could be a personal portfolio, a business landing page, or a project showcase.

Phase 1: Plan

Before writing any code, define what you’re building:

Help me plan a portfolio website with these pages:

1. Homepage — Hero section, about preview, featured projects (3), testimonials, CTA
2. Projects — Grid of 6+ project cards with filtering by category
3. About — Bio, skills, experience timeline
4. Contact — Contact form with validation

Design constraints:
- Vanilla HTML, CSS, JavaScript (no frameworks)
- Mobile-first responsive design
- Dark mode support via system preference
- Target: Lighthouse 90+ on all scores

Create a file structure, component list, and build order.

✅ Quick Check: Why plan before prompting? Because AI generates better code when you know exactly what you need. A vague request (“build me a portfolio”) produces generic output. A specific plan (“I need a hero section with two CTAs, a filterable project grid, and a contact form with validation”) produces focused, reviewable components.

Phase 2: HTML Structure

Build the HTML for each page, one component at a time:

Homepage hero section:

Create the HTML for a homepage hero section:
- Large heading with name and title
- Brief tagline (1-2 sentences)
- Two CTA buttons: "View Projects" and "Contact Me"
- A subtle background element (will style with CSS later)

Semantic HTML, accessible, no CSS or JavaScript.

Project cards:

Create the HTML for a project showcase grid:
- 6 project cards with: image, title, description, technology tags, and "View Project" link
- Filter buttons above: All, Web, Design, App
- Each card is an article element inside a list

Include aria-labels for the filter buttons and proper heading hierarchy.

Work through each component, reviewing the HTML before moving on.

Phase 3: CSS Styling

Apply your design system from Lesson 3:

Step 1: Generate design tokens (custom properties for colors, spacing, typography).

Step 2: Style the layout with CSS Grid (page structure) and Flexbox (component internals).

Step 3: Add responsive behavior:

Make this page responsive:

[paste your current CSS]

Breakpoints:
- Mobile: base styles (< 768px)
- Tablet: 768px (2-column project grid, side-by-side about layout)
- Desktop: 1024px (3-column project grid, max-width container)

Add dark mode using custom property overrides.

Phase 4: JavaScript Interactivity

Add behavior to your components:

Project filtering:

Write vanilla JavaScript to filter the project cards:
- Filter buttons: All, Web, Design, App
- Click a filter to show only matching cards
- "All" shows everything
- Smooth fade transition when cards show/hide
- Update URL with active filter (?category=web)
- Active filter button gets visual highlight

No dependencies.

Contact form validation:

Write form validation for: Name (required), Email (required, valid format),
Subject (required), Message (required, 20+ characters).
Show errors below each field using textContent. Prevent submission until valid.
Include accessible error announcements.

Mobile navigation:

Write vanilla JavaScript for mobile hamburger menu:
- Toggle button shows/hides the nav
- Menu slides in from the right
- Overlay covers the background
- Escape key closes the menu
- Focus is trapped inside the open menu
- aria-expanded updates on toggle

No dependencies.

Phase 5: Optimization and SEO

Before deploying, optimize everything:

Review my complete website for deployment readiness:

[describe your pages and features]

Audit:
1. Performance — Are images lazy-loaded? CSS/JS minified? Critical resources preloaded?
2. SEO — Does every page have unique title, description, OG tags?
3. Accessibility — Keyboard navigation, screen reader compatibility, contrast ratios?
4. Cross-browser — Any CSS/JS that might break in Safari or Firefox?
5. Security — Any user input handled unsafely?

Provide a prioritized fix list.

Phase 6: Deploy

1. Push your code to a GitHub repository
2. Connect to Netlify or Vercel
3. Configure your custom domain (or use the free subdomain)
4. Submit your sitemap to Google Search Console
5. Run Lighthouse one final time on the live site

Testing Checklist

Before you call it done:

Course Review

Here’s everything you’ve learned, connected:

1. AI as partner (Lesson 1) — Small prompts, review everything, iterate
2. HTML structure (Lesson 2) — Semantic elements, accessibility, forms
3. CSS styling (Lesson 3) — Design tokens, Grid/Flexbox, responsive, dark mode
4. JavaScript (Lesson 4) — DOM manipulation, events, validation, security
5. Interactive features (Lesson 5) — APIs, search/filter, accessible components
6. Debugging (Lesson 6) — Error diagnosis, performance optimization, Core Web Vitals
7. Deployment (Lesson 7) — Hosting, SEO meta tags, structured data, monitoring

Key Takeaways

• Build in layers: HTML structure first, CSS styling second, JavaScript behavior third, optimization last — each layer builds on the previous
• Break large projects into small components and prompt AI for one piece at a time — focused requests produce better code
• Test on multiple devices, browsers, and input methods (keyboard, screen reader) before deploying — your development environment doesn’t represent your users
• Every website needs: responsive design, keyboard accessibility, fast loading, proper meta tags, and structured data
• The AI-first workflow (plan → prompt → review → test → iterate) works for any web project, from simple landing pages to complex applications
• Keep learning: frameworks like React, Vue, and Svelte build on the vanilla fundamentals you’ve mastered here

Congratulations! You’ve learned to build websites with AI as your development partner. The fundamentals you’ve practiced — semantic HTML, responsive CSS, accessible JavaScript, and performance optimization — are the foundation for every web project, with or without frameworks.