Project 2 — Portfolio

1. Learning Objectives

In this project guide, you will build a personal Portfolio Page. By the end of this project, you will be able to:

• Design an asymmetric, grid-based project gallery using CSS Grid.
• Create hover overlays that slide or fade in smoothly using CSS Transitions and Transforms.
• Build a responsive contact form with focus states and inputs validation.
• Apply image ratio rules (e.g. aspect-ratio) to prevent layout shifts.
• Structure modular, reusable layouts.

2. What We Are Building & Design System

We are building a responsive portfolio for a designer named Alex Morgan. The page features:

• Intro Header: Simple name header with navigation links.
• Project Gallery Grid: A responsive grid of project cards. Hovering over a card slides up a translucent details overlay.
• Contact Form: A clean form layout supporting email and message inputs.

3. Step-by-Step Implementation Guide

Step 1: HTML Semantic structure

Create the HTML structure. Use <nav> for the navigation list, <section> wrappers with unique IDs for page sections, and standard <form> tags for the contact section:

Step 2: Hover Overlay Transitions

To slide up the project details card on hover, position the overlay absolutely inside a relative parent card. Use transform: translateY(100%) to hide it initially, and set it to translateY(0) on hover:

Step 3: Aspect-Ratio Image Optimization

Set an explicit aspect-ratio on card images to prevent layout shifts as images load:

4. Full Working Code

Save this self-contained code block as portfolio.html to test the responsive portfolio page:

5. Reviewing the Build / Self-Correction Checks

Verify your layout handles common web layout constraints:

• Test hover actions using touch events: On touch screens, hovering doesn't work. Verify that clicking on a card triggers the overlay slide transition correctly.
• Verify form inputs require valid emails: Type invalid emails in the email input field and submit the form. Verify that browser-level validation prevents submission and highlights the input as invalid.
• Check focus states contrast: Verify focus outlines are distinct to support keyboard accessibility.

6. Practice Exercises & Extensions

7. Summary & Next Steps

By building this portfolio page, you have combined CSS Grid layouts, overlay hover transitions, and responsive form validation styles.

• Next, proceed to **Project 3 — Pricing Page** to build pricing tables with a billing toggle switch.