CSS
Project: Portfolio card
Overview of the 5-lesson project: a portfolio card.
Project: Portfolio card
In this 5-lesson project you'll style a portfolio card. A card is a common element on the web that holds an image, a title, and a short description.
You'll build a designer's card from scratch. Each lesson adds one piece to the stylesheet, and by the final lesson you'll have a complete card.
You'll use:
- Class selectors (
.card) and the box model - Background images and typefaces
- Shadows and borders
- Section comments
Project roadmap
Here's how we'll build the project step by step:
- Starting point: add an explanatory comment to the file.
- Card skeleton: give
.card a width, padding, box sizing, and corner rounding. - Image and heading: add a background image to
.card-hero, color and typeface to .card-title. - Shadow and border: add a shadow and a border to
.card. - Project final: separate sections with comments and add the description text.
Each lesson's starting code contains the previous lesson's solution; you only add the new piece.
Target file structure
At the end of the project you'll have this structure:
- File header: an explanatory comment at the top
- Card skeleton: the
.card rule (width, padding, corner rounding, border, shadow) - Cover image: the
.card-hero rule (background image) - Heading: the
.card-title rule (color, typeface) - Description: the
.card-text rule (color, typeface)
You'll build this step by step across 5 lessons.
Exercise Add a header comment to the stylesheet
To start the project, add a comment at the top of the stylesheet. The comment should include the words Alex Design and Portfolio card. CSS comments use the /* ... */ syntax and are not shown by the browser; they're only visible to anyone reading the source. We'll fill this file in the next lessons.
Test yourself
-
How does starting code work in a project group?
- Each lesson's starting code contains the previous lesson's solution
- Each lesson starts with an empty file
- There is no starting code; everything is written from scratch
- Starting code only appears in the final lesson
Show answer
Each lesson's starting code contains the previous lesson's solution — Correct. In a project, starting code accumulates; you only add the new piece.
-
Match each lesson to the piece it adds
- Header comment
- /* explanation */
- Card skeleton
- width, padding
- Image and heading
- background-image
- Shadow and border
- box-shadow, border
- Project final
- comments + .card-text
-
Complete the .card class selector
____ {
/* card declarations go here */
}
Show answer
.card {
/* card declarations go here */
}
Next lesson: Card skeleton
