AMDE 155 · Introduction to Web Design · Layout Lab

Build a One-Page Creative Website

You’ve already made gradients and animations. Now you’ll use those skills to build an actual page with navigation, a hero section, three project cards, and an About section. No JavaScript required.

01 / What you’ll build

Here’s a visual preview of the starter layout. Your finished page should look different: choose your own topic, colors, words, and artwork.

02 / Learning objectives

• Organize a page using header, nav, main, section, and footer.
• Use display: flex to arrange navigation links.
• Use display: grid to create three project cards.
• Apply a gradient and a hover transition you’ve already practiced.
• Use anchor links and a media query to improve usability.

03 / Live working example

Use the links, hover over the cards, and make your browser narrower. This is the exact HTML and CSS provided below—not a screenshot.

04 / Start in CodePen

1. Open a new Pen at codepen.io/pen.
2. Copy the HTML example into the HTML panel.
3. Copy the CSS example into the CSS panel.
4. Do not paste the <style> tags into CodePen. The code below is ready as-is.
5. Save your Pen, then change one thing at a time.

HTML / Structure

Notice that each navigation link uses an href="#..." that matches a section’s id. That’s how anchor navigation works.

<header class="site-header">
  <a class="logo" href="#home">CREATIVE / LAB</a>
  <nav aria-label="Main navigation">
    <a href="#home">Home</a>
    <a href="#projects">Projects</a>
    <a href="#about">About</a>
  </nav>
</header>
<main>
  <section class="hero" id="home">
    <p class="eyebrow">Student portfolio / 2026</p>
    <h1>Make something<br>worth exploring.</h1>
    <p>Design, photography, and experiments.</p>
    <a class="button" href="#projects">View projects ↓</a>
  </section>
  <section class="projects" id="projects">
    <h2>Featured work</h2>
    <div class="project-grid">
      <article class="project-card">
        <div class="art art-one" role="img" aria-label="Pink and purple abstract gradient"></div>
        <h3>Color Study</h3><p>Exploring gradients and movement.</p>
      </article>
      <article class="project-card">
        <div class="art art-two" role="img" aria-label="Blue abstract gradient"></div>
        <h3>Blue Shift</h3><p>A study in shape and contrast.</p>
      </article>
      <article class="project-card">
        <div class="art art-three" role="img" aria-label="Orange abstract gradient"></div>
        <h3>Warm Forms</h3><p>Color, texture, and space.</p>
      </article>
    </div>
  </section>
  <section class="about" id="about">
    <h2>About this project</h2>
    <p>This is a one-page website built with HTML and CSS.</p>
  </section>
</main>
<footer><p>© 2026 Creative Lab</p></footer>

CSS / Layout and style

Find the numbered comments: 1 = defaults, 2 = Flexbox header, 3 = gradient hero, 4 = Grid cards, 5 = mobile layout.

/* 1. Reset and page defaults */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Arial, sans-serif;
       line-height: 1.6; color: #172b42; }
/* 2. Header: Flexbox aligns the logo and links */
.site-header { display: flex; justify-content: space-between;
  align-items: center; gap: 20px; padding: 18px 6%;
  background: #172b42; }
.logo, nav a { color: white; text-decoration: none; }
.logo { font-weight: 800; letter-spacing: .08em; }
nav { display: flex; gap: 22px; }
nav a:hover { color: #aeeaff; }
/* 3. Hero: a gradient you can customize */
.hero { padding: 110px 6%; text-align: center; color: white;
  background: linear-gradient(135deg, #5133a4, #d85b9f); }
.hero h1 { font-size: clamp(2.2rem, 6vw, 4.5rem);
  line-height: 1.1; margin: 15px 0; }
.eyebrow { text-transform: uppercase; letter-spacing: .2em; }
.button { display: inline-block; margin-top: 20px;
  padding: 12px 24px; border-radius: 7px;
  background: white; color: #172b42; text-decoration: none;
  font-weight: bold; transition: transform .25s ease; }
.button:hover { transform: translateY(-5px); }
/* 4. Project cards: CSS Grid makes columns */
.projects, .about { padding: 65px 6%; }
.project-grid { display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.project-card { background: #f2f5f9; padding: 15px;
  border-radius: 12px; transition: transform .25s ease; }
.project-card:hover { transform: translateY(-7px); }
.art { min-height: 175px; border-radius: 8px; }
.art-one { background: linear-gradient(45deg, #ff8bb8, #704ac7); }
.art-two { background: linear-gradient(130deg, #6ce0ec, #304aaf); }
.art-three { background: linear-gradient(145deg, #ffc36a, #f06c75); }
.about { background: #eaf0f6; }
footer { background: #172b42; color: white;
  padding: 20px 6%; text-align: center; }
/* 5. Mobile: stack header and cards */
@media (max-width: 700px) {
  .site-header { flex-direction: column; }
  nav { flex-wrap: wrap; justify-content: center; }
  .project-grid { grid-template-columns: 1fr; }
  .hero { padding: 70px 6%; }
}
/* Respect visitors who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .project-card { transition: none; }
}

05 / Guided experiments

06 / Make it your own

Choose a subject: your photography, an imaginary design studio, a music event, a favorite hobby, or a small business. Keep the basic page structure but customize the content and visual direction.

• ☐ A site title and at least three working anchor links
• ☐ A hero with a headline, short introduction, and gradient
• ☐ Three cards with distinct titles and descriptions
• ☐ An About section and a footer
• ☐ At least one hover transition
• ☐ A mobile layout that works at narrow widths
• ☐ Your own colors, content, and visual identity

Optional challenge: Replace the colored gradient rectangles with your own images using <img>, descriptive alt text, and width: 100%. Add a fourth card and see how Grid responds.

07 / Common fixes

08 / Submit and reflect

Submit your CodePen link (or your website files, if directed). In 2–3 sentences, explain where you used Flexbox, where you used Grid, and one change you made to the original design.