UNIT 2 • STAGE 7 OF 7
Your Complete Profile
Final touches, CSS comments, and celebrating what you built
You Made It to the Final Stage!
Look at what you've built over the past seven stages - a complete, styled profile page with a custom header, Flexbox card layout, images, polished typography, and shadows. That's real CSS.
In this final stage, you'll add CSS comments, do a checklist review, save your work, and celebrate.
🎉 This Is Your Page
You chose the colors. You wrote the words. You applied the CSS. This profile page is a genuine expression of who you are and what you want to build.
Add CSS Comments
CSS comments let you leave notes in your code that the browser completely ignores - they never appear on the page. They serve three purposes that real developers rely on every day:
- Organize sections - grouping rules under labels like
/* HEADER */or/* CARD LAYOUT */makes a long stylesheet scannable at a glance. - Leave explanations for yourself - in a month, you might not remember why you wrote
margin-top: 0. A quick comment like/* removes browser default gap */saves future-you the confusion. - Temporarily disable a rule - wrapping a rule in
/* ... */turns it off without deleting it. Useful for testing what a page looks like without a specific style.
body { ... }
/* === HEADER === */
header { ... }
h1 { ... }
h4 { ... }
/* === CARD LAYOUT === */
.container { ... }
.card { ... }
/* === IMAGES === */
.image-box { ... }
.image-box img { ... }
/* === TYPOGRAPHY === */
h2 { ... }
p { ... }
.card-author { ... }
/* === FOOTER === */
footer { ... }
CSS comments always use /* comment here */ - a slash-asterisk to open and an asterisk-slash to close. Unlike JavaScript or other languages, CSS does not support the // single-line comment style. If you try // comment in CSS it will silently break the line - so always use the /* */ format.
Final Checklist
Go through each item and make sure your page is complete:
- ✅ Your name is in the
<h4>header - not placeholder text - ✅ All three cards have real content in the
<p>tags - ✅ All three image boxes have actual images (
<img src="...">) - ✅ Your page has a footer with your name and the year
- ✅ Every CSS rule has a semicolon at the end of each property
- ✅ All opening braces
{have a matching closing brace} - ✅ Colors feel personal to you - not just the defaults
CSS Skills You've Earned
In Unit 2, you learned to use all of these CSS tools:
Save Your Work
Before you move on:
- Copy all your code from the editor and save it to a file called
this-is-me.html - You can open that file in any browser - it's a real webpage
- Share it with a teacher, parent, or friend - you built this
💾 Your Code is Yours
Everything you wrote in this editor belongs to you. Copy it, save it, modify it, show it off. This is the beginning of your portfolio as a developer.
What's Next - Unit 3
You've finished Unit 2! In Unit 3, you'll combine HTML structure and CSS layout to build something even bigger:
Unit 3 - Read All About It
Build a styled online newspaper featuring Tribal nation news. You'll use position:absolute to overlay text on images, arrange article cards in a row, and create a professional masthead.
position: absolute hero image article cards masthead🌟 Unit 2 Complete!
You used CSS to build a real, styled webpage from scratch. You learned Flexbox, shadows, typography, and image control. You proved that Native youth belong in tech - and you're just getting started.
© 2026 Relentless Feather. All rights reserved.