CSS
Project final - Portfolio card
Combine all parts and finalize the portfolio card.
Project final: combine everything
You've reached the final step. The stylesheet has the header comment plus .card, .card-hero, and .card-title rules. Now you'll add two more things: section comments and a description text rule.
Comments keep the file readable for you and others. The browser doesn't show them, but anyone viewing the source can read them. A short comment above each section makes the file structure easy to scan. The description rule is the final piece that completes the card.
Comment writing practices
When writing comments, keep these in mind:
- Keep it short: a few words is enough. Long comments clutter the file.
- Place matters: a comment should sit right above the section it explains.
- Be specific: write 'Card skeleton' or 'Heading' rather than 'section'.
Good comments help you understand the file quickly when you return months later.
Full file structure
At the end of the project your file will be split into these sections:
- File header: an explanatory comment at the top
- Card skeleton: the
.card rule (width, padding, border, shadow) - Cover image: the
.card-hero rule (background image) - Heading: the
.card-title rule (color, typeface) - Description: the
.card-text rule (color, typeface)
Each section will have a short comment above it. This structure lets you see what each section does at a glance.
Exercise Add section comments and the .card-text rule
Take the file with all the rules from the previous lesson. Make these additions:
- Before the
.card rule, add a /* Card skeleton */ comment. - Before the
.card-hero rule, add a /* Cover image */ comment. - At the end of the file, add a /* Description */ comment and a
.card-text class selector rule with color: #4a5568 and font-family: Georgia, serif.
Show example solution
/* Alex Design - Portfolio card */
/* Card skeleton */
.card {
width: 320px;
padding: 24px;
box-sizing: border-box;
border-radius: 12px;
background-color: #ffffff;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
/* Cover image */
.card-hero {
background-image: url("cover.jpg");
background-size: cover;
height: 140px;
}
.card-title {
color: #2a3d66;
font-family: Georgia, serif;
}
/* Description */
.card-text {
color: #4a5568;
font-family: Georgia, serif;
}
Test yourself
-
Why is it useful to add section comments to a CSS file?
/* Card skeleton */
- To explain sections and improve readability
- To hide style changes from the browser
- To speed up page loading
- To pick colors automatically
Show answer
To explain sections and improve readability — Correct. Comments write explanations for humans reading the file; the browser ignores them.
-
Complete the marker that starts a CSS comment
____ Card skeleton */
Show answer
/* Card skeleton */
-
Match each project concept to its meaning
- background-image
- background picture
- box-shadow
- card shadow
- border-radius
- corner rounding
- /* ... */
- explanatory comment
Next lesson: List style type
