Webbo3 Web Development Bootcamp · Month 1 · Capstone Project

Month 1 Capstone Project: Build and Deploy a Multi-Page Personal Portfolio Website

A complete independent project bringing together HTML, CSS, responsive design, version control with Git and GitHub, and deployment to Netlify. You will build a four-page portfolio and publish it live.

This is the capstone project for Month 1 of the Webbo3 Web Development Bootcamp. Everything you have learned so far, semantic HTML, CSS layout with Flexbox and Grid, responsive design with media queries, mobile-first thinking, and version control fundamentals, comes together here. The goal is not to build the most complex website in the world. It is to build a clean, professional, fully responsive multi-page portfolio that you can show to a hiring manager, a client, or a friend, and have them understand within ten seconds who you are and what you can do. You will write the code, push it to GitHub, deploy it to Netlify, and submit it for instructor review. This is your first complete product as a web developer. Treat it like one.

1. Project Requirements: Four Pages, One Coherent Story

Your portfolio must contain exactly four HTML pages, linked together through a consistent navigation menu that appears on every page. Each page serves a specific purpose, and together they tell a complete story about you as a developer.

Home page (index.html). This is the landing page. It must contain a hero section with your name, a brief tagline describing what you do, and a call-to-action button that links to your Projects page. Below the hero, include a short introduction paragraph, three skill cards using CSS Grid or Flexbox, and a footer with your email and social links. The home page has three seconds to make an impression. Keep the design clean, the text scannable, and the visual hierarchy obvious. The largest text on the page should be your name. The second largest should be the tagline. Everything else supports those two elements.

About page (about.html). This page tells your story. Include a professional photograph or a placeholder image, a biography of at least two paragraphs, and a timeline or list of milestones using semantic HTML. The about page should answer three questions: who you are, why you are learning web development, and what you are looking to do next. Use a two-column layout on desktop, stacking vertically on mobile. The image should be on the left and the text on the right, or the reverse. Do not center-align long paragraphs of text. Left-aligned text is easier to read, especially on wide screens.

Projects page (projects.html). This page showcases at least three projects. Each project must be displayed as a card containing a project image, a title, a one-paragraph description, a list of technologies used, and a link to the live project or its GitHub repository. Use CSS Grid for the project cards so they automatically reflow from one column on mobile to two or three columns on desktop. If you do not have three real projects yet, create placeholder cards for projects you plan to build during this bootcamp. The projects page proves you can build things. Even placeholder cards demonstrate that you understand layout, structure, and presentation.

Contact page (contact.html). This page must contain a working HTML form with fields for name, email, subject, and message, plus a submit button. Below the form, include your email address, a link to your LinkedIn profile, and a link to your GitHub profile. The form does not need a backend in this capstone. It can use a service like Formspree, Netlify Forms, or simply open the user's email client with a mailto link. What matters is that the form looks professional, is accessible, and provides clear feedback. Label every input with a proper label element. Use placeholder text as a hint, not as a replacement for the label. Add required attributes where appropriate.

2. Responsive Design Requirements

In 2026, a non-responsive website is a broken website. Research shows that over 73 percent of web designers identify non-responsive design as a primary reason visitors abandon a site. Google uses mobile-first indexing, meaning the mobile version of your site is the primary basis for search rankings. Your portfolio must look and function correctly on phones, tablets, laptops, and desktops. This is not a bonus feature. It is the baseline.

Mobile-first approach. Start by designing for the smallest screen first, then progressively enhance for larger screens. Write your base CSS for mobile devices, typically 320 pixels to 480 pixels wide. Use min-width media queries to add complexity as the screen grows, not max-width media queries to remove complexity as it shrinks. This approach forces you to prioritize essential content. If something does not fit on a mobile screen, it is probably not essential. Mobile-first CSS looks like this:

/* Base styles for mobile */
.project-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* Tablet and up */
@media (min-width: 768px) {
  .project-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .project-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

Fluid typography with clamp. Instead of setting fixed font sizes that jump abruptly at breakpoints, use the CSS clamp function to make text scale smoothly between a minimum and maximum size based on viewport width. This creates a more polished experience on devices of every size:

h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
}

This heading will never be smaller than 2rem, never larger than 3.5rem, and will scale proportionally with the viewport width in between. Apply clamp to your headings and body text for a truly fluid typographic system.

Touch-friendly targets. On mobile devices, buttons and links must be large enough to tap easily without accidental presses. The standard guideline is a minimum touch target of 44 pixels by 44 pixels. Add adequate spacing between interactive elements. Your navigation menu on mobile should be a hamburger menu that expands when tapped, or a vertically stacked list that is always visible. Horizontal navigation that requires horizontal scrolling on a phone is unacceptable.

Responsive images. Every image on your site must scale to fit its container without breaking the layout. Use max-width: 100% and height: auto on all images. If you use the HTML picture element or srcset attributes, you earn extra credit for performance optimization, but the minimum requirement is that images do not overflow their containers on any screen size.

Testing across devices. Use your browser's developer tools to test at multiple breakpoints: 320px, 375px, 768px, 1024px, and 1440px. Better yet, open your site on an actual phone and tablet. Resize your desktop browser window to extreme narrow and wide sizes. Check that text remains readable, that buttons are tappable, and that no horizontal scrolling appears. Horizontal scrolling on mobile is almost always a sign of a layout error.

3. Semantic HTML and Accessibility Standards

A professional portfolio is not just about looks. It is about structure. Semantic HTML helps search engines understand your content, helps screen readers navigate your site, and makes your code more maintainable. In 2026, accessibility is not an optional add-on. It is a core pillar of web design.

Semantic structure. Use header for your site header and navigation, main for the primary content of each page, section for distinct content areas, article for self-contained pieces like project cards, and footer for the site footer. Use h1 exactly once per page, for the main title. Use h2 for section headings, h3 for subsections, and so on. Do not skip heading levels. A screen reader user navigates by headings, and skipping from h2 to h4 breaks their mental model of your page structure.

Alt text for images. Every image must have an alt attribute. If the image is decorative, use alt="". If the image conveys information, describe it concisely. For your profile photo, alt="Portrait of [Your Name], a web developer based in Lagos" is appropriate. For project screenshots, describe what the project does, not just "Project 1 screenshot." Alt text is read by screen readers, displayed when images fail to load, and indexed by search engines.

Color contrast and readability. Ensure your text has sufficient contrast against its background. The minimum ratio for normal text is 4.5 to 1 under WCAG 2.2 guidelines. Use online contrast checkers if you are unsure. Avoid pure black text on pure white if it strains your eyes. A dark gray like #1a1a1a on white is often more comfortable. Keep line length between 50 and 75 characters for optimal readability. On wide screens, constrain your content width with a max-width container, typically 760 to 1200 pixels centered with auto margins.

Keyboard navigation. Test your entire site using only the Tab key. Can you reach every link, button, and form field? Is the focus indicator visible? A portfolio that cannot be navigated by keyboard is a portfolio that excludes users with motor disabilities and power users who prefer keyboard shortcuts. Add a skip-to-content link at the top of each page so keyboard users can bypass the navigation menu.

4. Version Control with Git and GitHub

Writing code is only half the job. The other half is managing it. Version control lets you track changes, experiment safely, collaborate with others, and deploy your code to production. Git is the industry standard version control system. GitHub is the most popular platform for hosting Git repositories. You will use both for this capstone.

Initializing your repository. Open your terminal or command prompt inside your project folder. Run git init to create a new Git repository. This creates a hidden .git folder that tracks every change you make. Create a .gitignore file in your project root and add common files that should not be committed, such as .DS_Store, Thumbs.db, and any temporary files your editor creates. For a simple HTML and CSS project, your .gitignore might look minimal, but the habit matters.

Making your first commit. After creating your initial HTML and CSS files, stage them with git add . and commit with git commit -m "Initial commit: add home page structure and base styles". Write meaningful commit messages. "Fix" is not a good commit message. "Fix navigation alignment on mobile screens" is. Your commit history tells the story of your development process. Instructors and employers read it.

Creating a GitHub repository. Log in to GitHub and click the New Repository button. Name it something professional like personal-portfolio or your-name-portfolio. Do not initialize it with a README or license if you already have a local repository. Keep it public for this bootcamp so instructors can review it. After creating the repository, GitHub displays instructions for pushing an existing repository. Copy the commands, which look like this:

git remote add origin https://github.com/yourusername/your-repo-name.git
git branch -M main
git push -u origin main

Run these commands in your terminal. Your code is now on GitHub. Refresh the repository page and you should see your files.

Making regular commits as you build. Do not wait until the project is finished to commit. Commit at logical milestones: after completing the home page, after adding responsive styles, after finishing the about page, after fixing a bug. Each commit should represent one coherent change. If you break something, you can use git log to see your history and git checkout to revert to a previous version. This safety net is why professionals use version control for everything, even solo projects.

Repository structure. Your GitHub repository should have a clean root directory containing your HTML files, a css folder, an images folder, and a js folder if you use any JavaScript. Do not commit IDE configuration files, operating system files, or node_modules if you experiment with build tools. A clean repository shows professionalism.

5. Deploying to Netlify

A website that only lives on your computer is not a website. It is a draft. Deployment is the process of publishing your code to a live server so anyone in the world can visit it with a URL. Netlify is a cloud platform that makes this process nearly automatic for static sites like your portfolio. It connects directly to your GitHub repository and rebuilds your site every time you push new code.

Creating a Netlify account. Go to netlify.com and sign up. You can use your GitHub account as your login method, which simplifies the connection process. Netlify offers a generous free tier that is more than sufficient for personal portfolios and learning projects.

Connecting your GitHub repository. From the Netlify dashboard, click Add new site, then Import an existing project. Select GitHub as your Git provider. Authorize Netlify to access your repositories. You can grant access to all repositories or only selected ones. For security, select only the repository you want to deploy. Choose your portfolio repository from the list.

Configuring the deployment. Netlify will detect that your project is a static site with no build step required. Leave the build command blank and set the publish directory to the root of your repository, typically a single dot . or a slash /, depending on where your index.html lives. If your HTML files are in the root of the repository, the publish directory is simply . Click Deploy site. Netlify will clone your repository, publish your files, and assign you a random subdomain like random-name-123456.netlify.app.

Customizing your domain. Once deployment is complete, click Site settings, then Domain management. You can change the random subdomain to something more professional like your-name-portfolio.netlify.app, provided the name is available. This is free on Netlify. If you own a custom domain, you can connect it here as well, but it is not required for this capstone.

Continuous deployment. The most powerful feature of Netlify's Git integration is automatic deployment. Every time you push changes to your main branch on GitHub, Netlify detects the push, rebuilds your site, and publishes the updated version within minutes. This means your live site stays in sync with your repository. If you fix a typo or add a new project, commit and push, and the change goes live automatically. You do not need to manually upload files or reconfigure anything.

Alternative: drag and drop deploy. If you prefer not to connect GitHub directly, you can use Netlify Drop. Go to app.netlify.com/drop, drag your project folder onto the page, and Netlify deploys it instantly. This gives you a live URL immediately. However, updating the site requires dragging the folder again, so for this capstone, the Git-connected method is strongly preferred because it demonstrates professional workflow.

6. Submission Requirements and Review Checklist

Submit your completed project via the bootcamp portal before the deadline. Late submissions receive a 20 percent penalty. Your submission must include the following three items.

The live Netlify URL. This is the public link where your portfolio is hosted. Test it on your phone before submitting. If it does not load, does not look correct, or has broken links, fix it before submitting. The live URL is the first thing your instructor will click.

The GitHub repository link. The repository must be public so the instructor can review your code, your commit history, and your file structure. The README should contain a brief description of the project, the live URL, and a list of technologies used. A good README shows you understand documentation, which is a professional skill.

A brief reflection document. In one paragraph, answer these questions: What was the most challenging part of this project and how did you solve it? What would you do differently if you started over? What feature are you most proud of? This reflection is not graded for writing quality. It is graded for honesty and insight. Instructors use it to understand your thought process and to give better feedback.

Review checklist for self-assessment. Before submitting, verify every item on this list. The home page loads without errors. All four pages are linked correctly and the navigation works on every page. The site is responsive at 320px, 768px, and 1024px. Images have alt text. The contact form has labels and required fields. The GitHub repository has at least five meaningful commits. The Netlify site deployed successfully from the GitHub repository. The README is complete. If you can check every box, you are ready to submit.

Using AI to Move Faster in Your Capstone Project

This project is designed to test your manual skills, but AI can accelerate the repetitive parts so you can focus on design decisions and problem-solving. Here is how to use AI responsibly without letting it replace your learning.

1. Use AI to generate your initial HTML structure.
Instead of typing out the boilerplate HTML for four pages from scratch, describe your page structure to an AI assistant: "Generate semantic HTML for a portfolio home page with a header containing a nav element, a hero section with an h1 and a CTA button, a skills section with three cards using article elements, and a footer with social links." AI will produce clean, accessible markup with proper landmarks. Your job is to customize the content, verify the heading hierarchy, and ensure the navigation links point to the correct pages. Treat AI output as a scaffold, not a finished product.

2. Let AI suggest responsive CSS patterns.
If you are unsure how to make your project grid responsive, ask: "Write CSS using Grid and Flexbox for a project card layout that is one column on mobile, two columns on tablet, and three columns on desktop, with 20px gaps." AI will generate the media queries and grid properties. Review every line. Make sure you understand why grid-template-columns: repeat(3, 1fr) works, and why the media query uses min-width: 1024px. Copying CSS you do not understand is dangerous because you cannot debug it when it breaks on a device you did not test.

3. Use AI to write your Git commit messages and README.
After making a batch of changes, paste your git diff into an AI assistant and ask: "Suggest three concise, descriptive commit messages for these changes." Choose the one that best describes what you actually did. For your README, ask: "Write a professional README for a personal portfolio project built with HTML and CSS, including sections for description, live URL, technologies, and screenshot placeholder." Edit the result to match your actual project. This teaches you what professional documentation looks like while saving you from staring at a blank markdown file.

4. Debug deployment issues with AI.
If Netlify shows a build error or your site deploys but appears blank, paste the error message or describe the symptoms to an AI assistant: "My Netlify site deployed but shows a 404 on the About page. The file is named about.html and is in the repository root. What could be wrong?" AI will likely suggest checking your links for case sensitivity, ensuring your file paths do not include absolute references to your local drive, or verifying that your publish directory is set correctly. This turns a frustrating deployment mystery into a five-minute fix.

5. Verify everything AI generates before you commit it.
AI can hallucinate file paths, generate invalid HTML nesting, or suggest CSS that works in one browser but fails in another. Always test AI-generated code in your browser's developer tools before committing it to Git. Check the accessibility tree for heading hierarchy violations. Test on multiple screen widths. Validate your HTML using the W3C Markup Validation Service. AI accelerates your workflow, but the final responsibility for a working, accessible, professional portfolio is yours. A broken portfolio deployed live is worse than no portfolio at all.

A habit worth building from this project onward: whenever you are stuck on a layout problem, a deployment error, or a design decision, describe the problem to AI in plain English before you search Stack Overflow or ask a friend. AI gives you an instant starting point, a possible solution, or at least a clearer way to phrase the problem. But always test the solution, understand why it works, and make it your own before shipping it. That is the difference between a developer who uses AI and a developer who depends on it.

Good luck. Build a portfolio you would be proud to put in a job application.