Final Project: One Page, Fully Realized

You have already built a one-page website, made it your own, and experimented with CSS polish. For your final project, you will bring those pieces together into one clear, functional, thoughtfully designed webpage.

One HTML page HTML + CSS No JavaScript required

What you are making

A complete single-page creative website with a clear visual identity, meaningful content, working navigation, and a layout that adapts to different screen sizes. The goal is not to add as many effects as possible. The goal is to make intentional choices and show what you have learned.

Required page sections

• Header and navigation: a site title or identity, with working links to sections on this page.
• Hero: an engaging introduction with a heading, brief supporting text, and an optional call-to-action that links to a section below.
• Projects or featured content: at least three cards or content blocks, with relevant images and descriptions.
• About: a short paragraph that tells visitors about you, your topic, or the purpose of the site.
• Footer: a simple ending with appropriate identifying information or a return-to-top link.

Complete the project in six steps

1. Fork your most recent CodePen. Begin with your completed CSS Polish & Creative Effects version. Rename the fork AMDE 155 — Final One-Page Website. Keep the existing HTML and CSS; revise rather than rebuild.
2. Check your content. Replace unfinished placeholder text and images. Make sure all three project cards have meaningful content. Edit your hero and About text so visitors understand your site’s purpose.
3. Improve the design. Establish a consistent color palette, type hierarchy, spacing, alignment, and image treatment. Remove anything that distracts from the content.
4. Choose at least two CSS enhancements. Examples include a smooth hover transition, a subtle card shadow, a gradient, a restrained animation, or smooth scrolling. Use techniques from the previous lesson. Effects should support the design, not overwhelm it.
5. Test desktop and mobile. Use CodePen’s preview and resize the browser. Make sure text remains readable, images do not overflow, cards rearrange when needed, and navigation still works.
6. Review and submit. Use the checklist below, then submit your final CodePen URL and a brief reflection in D2L.

Helpful code reminders

You do not need to use these exact class names. They are reminders of techniques you have already practiced. Adapt them to your own project.

<nav aria-label="Main navigation">
  <a href="#projects">Projects</a>
  <a href="#about">About</a>
</nav>

<section id="projects">...</section>
<section id="about">...</section>

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 700px) {
  .project-grid {
    grid-template-columns: 1fr;
  }
}

.project-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

@media (prefers-reduced-motion: reduce) {
  .project-card {
    transition: none;
  }
  .project-card:hover {
    transform: none;
  }
}

The code examples use generic selectors. If your CodePen uses different class names, change the selectors to match your HTML. The copy buttons work in this standalone lesson; some WordPress configurations may remove scripts from pasted content.

Final checklist

• My site contains one HTML page only.
• My header, hero, three content cards, About section, and footer are complete.
• My navigation links move to the correct sections of the same page.
• My content and images are intentional; no unfinished placeholders remain.
• My colors, typography, and spacing feel consistent.
• I have included at least two purposeful CSS enhancements.
• My layout works on a phone-sized screen and on a desktop.
• Images have meaningful alt text when they convey information; text is readable and links can be reached by keyboard.
• My CodePen URL opens the finished version of my project.

What to submit

Submit the following to the AMDE 155 Final Project Dropbox in D2L:

1. Your final CodePen URL (HTML and CSS in the same Pen).
2. A short reflection (4–6 sentences) explaining what you improved since Part II, which two CSS enhancements you used, and one design decision you are pleased with.

Due date: Refer to the final project Dropbox in D2L. (Instructor: insert confirmed date before publishing.)

How your work will be evaluated

Return to top