Lab 5: Styling a Personal Profile Page

Introduction

In this lab, you'll transform a plain personal profile HTML page into a clean, visually readable portfolio using core CSS. You’ll learn how to apply layout, spacing, typography, and color styling to establish a strong visual hierarchy.

You’ll also use AI-assisted debugging to detect conflicting CSS rules, redundant selectors, and unclear hierarchy—then refine your stylesheet for clarity and maintainability.

By the end of the lab, your profile page should feel polished, accessible, and professional.

Learning Objectives

By the end of this one-hour lab, you will be able to:

Apply core CSS rules to style a simple personal profile or portfolio page
Use CSS layout primitives including flex, spacing, and responsive units
Establish visual hierarchy using sizing, weight, contrast, and whitespace
Identify and remove conflicting or redundant CSS declarations
Use an AI assistant to analyze CSS conflicts and recommend improvements
Improve stylesheet readability and organization (using grouping, comments, and naming conventions)

Getting Started

Prerequisites

Before beginning this lab, ensure you have:

Basic understanding of HTML element structure (div, header, nav, etc.)
Familiarity with core CSS properties (color, font-size, margin, padding, display)
A code editor such as VS Code
A modern browser with DevTools
Access to ChatGPT or another AI assistant

Setup Instructions

Create a new folder for the lab:

mkdir lab5_profile_styling
cd lab5_profile_styling

Create the starter files:
- index.html
- styles.css
- README.md
Open the folder in your code editor.
Open index.html in your browser.

Lab Structure

This lab contains the following files:

README.md – Lab instructions and overview
index.html – Starter profile structure
styles.css – The stylesheet you will enhance

Starter Code

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My Profile</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>

  <header class="header">
    <h1>Jane Doe</h1>
    <p>Web Developer & Designer</p>
  </header>

  <main>
    <section class="bio">
      <img src="https://via.placeholder.com/150" alt="Profile photo" />
      <div>
        <h2>About Me</h2>
        <p>Hello! I'm Jane, a front-end developer passionate about creating clean UI and accessible web experiences.</p>
      </div>
    </section>

    <section class="projects">
      <h2>Projects</h2>
      <ul>
        <li>Responsive Portfolio Website</li>
        <li>JavaScript Quiz App</li>
        <li>CSS Flexbox Layouts</li>
      </ul>
    </section>

  </main>

</body>
</html>

styles.css

/* Starter CSS — intentionally under-styled so you can improve it */

body {
  font-family: sans-serif;
}

.header {
  text-align: center;
}

.bio {
  display: flex;
  gap: 1rem;
}

.projects ul {
  list-style: square;
}

Exercise Overview

In this lab, you will:

Apply foundational styling to typography, spacing, and layout
Improve visual hierarchy using size, weight, and whitespace
Identify and fix conflicting or redundant styles
Use AI to analyze your CSS and suggest refinements
Organize your stylesheet for readability

Your goal is to turn the basic starter page into a clean, readable personal profile page.

How to Work Through the Lab

Step 1 - Strengthen Basic Styling

Enhance the body, header, and section styles:

Set a global max-width for readable line lengths
Add comfortable spacing using margin and padding
Apply a soft, neutral background
Choose a readable font stack

Tasks Update styles.css to include:

max-width
margin: 0 auto
line-height
Basic color palette

Step 2 - Create Visual Hierarchy

Emphasize headings and content groups:

Make h1 large and bold
Add consistent spacing above and below sections
Use a muted color for secondary text
Improve bio layout with aligned spacing and image rounding

Tasks

.header h1, .header p
.bio flex layout spacing
Profile image styling (e.g., border-radius: 50%)
Section heading styling (h2)

Step 3 - Add Structure and Whitespace

Whitespace is key for clarity.

Add:

Vertical rhythm with consistent margin spacing
Section wrappers with padding
CSS utility classes if desired (.mt-2, .mb-4)

Tasks Refine spacing around:

.bio
.projects
li elements

Step 4 - Detect and Resolve CSS Conflicts Using AI

Copy your entire styles.css into ChatGPT and ask:

“Analyze this CSS for conflicting rules, redundant selectors, and opportunities to improve visual hierarchy. Suggest adjustments.”

Follow up questions may include:

“Which selectors might override each other unintentionally?”
“How can I simplify or consolidate my spacing rules?”
“Suggest a better color and typography scale.”

Tasks Apply at least three AI-driven improvements to your stylesheet.

Step 5 - Improve Stylesheet Organization

Use best practices:

Group related rules (typography, layout, components)
Add section comments (e.g., /* Typography */)
Remove unused selectors
Rename vague classes (e.g., .bio → .profile-bio)

Tasks Restructure your stylesheet into clear sections.

Tips for Success

Favor clarity over complexity—simple CSS scales better
Use consistent spacing units (rem recommended)
In DevTools, toggle CSS rules on and off to see their effect
Read selectors top-to-bottom to catch unintended overrides
Ask AI to “walk through the cascade” of any confusing selector set

Reflection Questions

Add your answers to README.md:

Which part of your original CSS contributed most to poor visual hierarchy?
What conflicting or redundant rules did the AI identify?
How did spacing improvements change readability?
What naming convention did you adopt, and why?

What to Expect

By the end of this lab, you should have:

A clean, readable personal profile page
A visually consistent spacing and typography system
Organized CSS with fewer redundancies and conflicts
A clearer understanding of how AI can support front-end debugging

Common Issues and Troubleshooting

Issue: Layout feels cramped

Increase padding and gap
Set line-height: 1.5–1.7

Issue: Styles not applying

Check for selector conflicts
Ensure stylesheet is properly linked

Issue: Image stretches unusually

Set max-width: 100%
Apply fixed dimensions or border radius consistently

Lab Workflow Summary

Open starter HTML/CSS
Apply basic styling and layout
Create a clear visual hierarchy
Add whitespace and structure
Use AI to detect conflicts or redundancies
Refine stylesheet based on suggestions
Restructure stylesheet for readability
Answer reflection questions