Color Mode

Final Project: Capstone CSS Showcase

This is your individual capstone for Advanced CSS. You have practiced modern selectors, layout systems, architecture, frameworks, motion, SVG, and cutting-edge CSS features. Now you get to show it off in one cohesive, polished project that feels like you: your interests, your design taste, and your best technical work.

Pick one of two paths below. Both options are equally valid. Choose the one that excites you and fits your portfolio goals.

Learning Objectives

By completing this project you will:

Option A: Style Stage–Style Challenge (CSS Only)

Style Stage is a community project: every participant styles the same semantic HTML document using only a custom stylesheet (plus optional custom fonts). The HTML is fixed. Your creativity lives entirely in CSS.

For this option, use the official Style Stage source markup (or the current published HTML structure from the project) and write a complete custom stylesheet. You may not change the HTML except where the Style Stage rules explicitly allow (read their contribution guidelines). Your goal is a distinctive visual design that proves you can work inside real-world constraints.

What to submit

Why this option

It mirrors how design systems and shared templates work in industry: one structure, many skins. It is an excellent demonstration of cascade, architecture, and visual design without leaning on markup changes.

Option B: Custom Showcase Site

Build your own small site (single scrolling page with clear sections, or a few linked HTML pages) that acts as a showcase of what you learned. Think of it as a guided tour: each major section highlights a course topic you mastered, demonstrated with real components or patterns—not empty claims.

Examples of directions you could take (you are not limited to these):

You may use plain CSS, or continue with Bootstrap or Tailwind from Unit 4 if you customize deeply enough that the result does not look like a default template. If you use a framework, explain in your reflection how you extended or overrode it.

Course Mastery Checklist (Required)

Whichever option you choose, your submitted work must clearly demonstrate all of the following. Fold them into the design naturally; reviewers should see evidence without a scavenger hunt.

Foundations and architecture (Units 1–2)

Layout (Unit 3)

Visual design and polish (Unit 4)

Motion and accessibility (Unit 5)

Icons, SVG, and advanced CSS (Unit 6)

Quality over quantity

A smaller page executed beautifully beats a sprawling page with thin examples. The checklist is about demonstrated mastery, not ticking boxes in separate disconnected iframes.

Technical Requirements

Portfolio Location

Add a dedicated folder for this capstone so it is easy to grade and share: 


        portfolio/
        └── unit-6/
            └── capstone-css-showcase/
                ├── index.html
                ├── css/
                │   └── (your stylesheets)
                └── (optional: images/, js/ if needed)

If Option B uses multiple pages, keep them inside capstone-css-showcase/ and link from index.html.

Your main entry URL for submission should be: 


        https://<username>.github.io/portfolio/unit-6/capstone-css-showcase/

Submission

Complete the form below, download the PDF, and submit it to Canvas along with your portfolio link. Your instructor will assess the mastery checklist against your live site and repository; this report is for your URL, a short summary, and reflection—not a duplicate write-up of every requirement.

Capstone CSS Showcase Documentation
Implementation
Provide the live URL to your capstone in your portfolio.
Portfolio link
Capstone summary

State whether you chose Option A (Style Stage markup) or Option B (custom showcase). In one or two short paragraphs, describe what you built and how it demonstrates the course mastery checklist at a high level. Point to specific sections or components on the live page where helpful.

Reflection

What are you most proud of on this project? What was hardest, and what would you refine with more time?

Evaluation Criteria

Submissions are judged holistically. Strong work typically shows:

Academic Integrity

Follow your course and department policies on collaboration and AI. If you adapt code or take inspiration from Style Stage examples, tutorials, or generative tools, cite them in your reflection and ensure the submitted work represents your understanding and creative decisions.