Project: Portfolio card

CSS course · Beginner · Lesson 49/82

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 */
}

All lessons in Beginner

Project: Portfolio card