Before you begin

Starting point: Your completed or partially completed website from Part One. It should already have a header, hero, three project cards, an About section, and a footer.

1. Open CodePen and sign in.
2. Open the Pen you made for Part One. If you cannot find it, return to Part One and rebuild the starter first.
3. Choose Fork from the CodePen menu to make a copy (or save a separate copy using your usual workflow). Name it One-Page Website — Part Two.
4. Keep the original Part One version so you can compare your progress.

Choose a clear visual direction

Decide what your website is about: a student portfolio, photography series, imaginary creative studio, event, or another appropriate topic.

1. Write a short site name (2–5 words).
2. Choose two main colors and one accent color.
3. Write a one-sentence introduction for your hero.
4. Decide what each of your three project cards will feature.

Example: Site: Motion Studies / Colors: navy, cream, coral / Intro: “Experiments in color, movement, and photography.”

Improve your typography

A website becomes easier to read when headings, body text, and small labels have different sizes and weights.

1. In CodePen, open the CSS panel.
2. Scroll to the very bottom and paste the CSS below.
3. Change the heading sizes or colors if they suit your design.
4. Look at the hero and About sections. Make sure the heading is clearly larger than the paragraph.

/* PART TWO: TYPOGRAPHY */
body {
 font-family: Arial, Helvetica, sans-serif;
 line-height: 1.7;
}
h1, h2, h3 {
 line-height: 1.2;
}
.hero h1 {
 font-size: clamp(2.5rem, 6vw, 5rem);
 letter-spacing: -0.04em;
}
.projects h2, .about h2 {
 font-size: clamp(1.6rem, 3vw, 2.4rem);
}
.project-card h3 {
 font-size: 1.25rem;
 margin-bottom: 0.25rem;
}
.project-card p {
 margin-top: 0;
}

Replace the gradient rectangles with real images

Part One used colored rectangles as placeholders. Now use three images related to your website’s subject. You may use your own work or appropriately licensed images.

1. Find three image URLs that end in an image file extension, or use stable direct image URLs from your own hosting. In CodePen, an ordinary webpage URL will not work as an image source.
2. In the HTML panel, locate the first project card. Find the line beginning <div class="art art-one".
3. Replace only that line with the image code below. Change the URL and description.
4. Repeat for the second and third cards, replacing their art-two and art-three divs.
5. In the CSS panel, add the image styling shown below.

<img
class="project-image"
src="https://example.com/your-photo.jpg"
alt="Describe what is visible in this image"
>

/* PART TWO: REAL PROJECT IMAGES */
.project-image {
 display: block;
 width: 100%;
 height: 220px;
 object-fit: cover;
 border-radius: 8px;
}

What does object-fit: cover do? It fills the image area without stretching the photograph. Some edges may be cropped.

Make the project cards feel finished

Each card should tell visitors what they are looking at. Keep the descriptions short and specific.

1. Replace the starter titles (“Color Study,” “Blue Shift,” and “Warm Forms”) with your own titles.
2. Write one or two sentences for each card.
3. Add a small category label above each title, using the example below.
4. Add the CSS for category labels and a more polished card.

<article class="project-card">
<img class="project-image"
src="https://example.com/your-photo.jpg"
alt="A blurred figure against a blue wall">
<p class="category">Photography / Experiment 01</p>
<h3>Motion Study</h3>
<p>An exploration of movement and color
     using a slow shutter speed.</p>
</article>

/* PART TWO: PROJECT CARD DETAILS */
.project-card {
 overflow: hidden;
 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.project-card .category {
 font-size: 0.75rem;
 text-transform: uppercase;
 letter-spacing: 0.1em;
 color: #526b91;
 margin-top: 14px;
}

Customize the hero and About section

1. Change the logo text in your header to your site’s name.
2. Replace the hero’s headline and short introduction with your own words.
3. Change the gradient colors in your existing .hero CSS rule.
4. Write 3–5 sentences in your About section explaining the site’s subject, purpose, and intended audience.
5. Make sure the “View projects” button still jumps to the Projects section.

.hero {
 background: linear-gradient(135deg, #14253d, #2f80a3);
}

Add one subtle interaction

You already used hover transitions in Part One. Refine them so the site feels responsive without distracting from the content.

1. Paste the CSS below at the bottom of your CSS panel.
2. Move your mouse over a project card and a navigation link.
3. Adjust the movement from -4px to -8px, then choose the version you prefer.

.project-card {
 transition: transform 0.25s ease,
 box-shadow 0.25s ease;
}
.project-card:hover {
 transform: translateY(-4px);
 box-shadow: 0 14px 30px rgba(0, 0, 0, 0.13);
}
nav a:focus-visible, .button:focus-visible {
 outline: 3px solid #ffcd65;
 outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
 .project-card { transition: none; }
 .project-card:hover { transform: none; }
}

Test the mobile layout

Your desktop layout is only half the assignment. The page should also be readable on a narrow screen.

1. Make the CodePen preview narrower by dragging the divider, or use the browser’s responsive/device preview.
2. At about 375px wide, confirm that the cards stack into one column.
3. Check that navigation links are visible and can be tapped.
4. Make sure no text runs off the right edge of the screen.
5. Add the CSS below if your cards or images are too wide.

@media (max-width: 700px) {
 .project-grid {
 grid-template-columns: 1fr;
 }
 .project-image {
 height: 200px;
 }
 .hero {
 padding: 70px 6%;
 }
 .hero h1 {
 font-size: 2.5rem;
 }
}

Check accessibility and fix errors

1. Use one h1 for the page’s main headline. Use h2 for major sections and h3 for project titles.
2. Confirm that all three images have meaningful alt descriptions.
3. Click Home, Projects, About, and View projects. Each must lead to the correct section.
4. Make sure text is easy to read against the background.
5. Use the Tab key to move through links. You should see a visible focus outline.

Submit your finished website

Save your Part Two CodePen. Submit the public/shareable Pen URL in the D2L Dropbox designated by your instructor. If you are working with local files instead, submit index.html, style.css, and any locally referenced images together.

Required checklist

• My Part Two project builds on my Part One website.
• My website has its own subject, title, colors, and writing.
• There are three project cards with working images.
• Every project card has a category, title, and description.
• The hero and About sections have been customized.
• My navigation links and hero button work.
• My page includes a hover effect and visible keyboard focus.
• My page works on desktop and mobile.
• I have saved and tested the link I am submitting.

Short reflection

In 3–5 sentences, answer: What did you change from Part One? Which CSS rule helped you most? What did you discover while testing the mobile layout?

Assessment focus: working code, thoughtful customization, readable layout, and completion of the steps—not advanced effects or visual perfection. No JavaScript is required.