CSS
Project final - Landing page
Combine all parts and finalize the landing page.
Project final: combine everything
You've reached the final step. The stylesheet has the header comment plus hero, features, and pricing sections. Now you'll add two more things: section comments and a footer section.
Comments keep the file readable for you and others. The browser doesn't show them, but anyone viewing the source can read them. The footer section lays out the links and buttons at the bottom of the page with flex.
Comment writing practices
CSS comments are written with /* ... */. A short comment above each section makes the file structure easy to scan. A single line describing what the section does is enough.
For example, writing /* Hero section */ before the hero rule and /* Features */ before the features rule breaks the file into clear parts. Prefer short, concise expressions over long explanations.
Full file structure
The final file will have these sections: header comment, hero, features, pricing, and footer. Each is separated by its own comment. This structure works well for files touched by a team.
In the footer section, .footer is the flex container and .footer-btn is a button with rounded corners and a shadow. Now write the final code and finish the project.
Exercise Add section comments and footer rules
Take the file with all the rules from the previous lesson. Make these additions:
- Before the
.hero rule, add a /* Hero section */ comment. - Before the
.features rule, add a /* Features */ comment. - Before the
.pricing rule, add a /* Pricing */ comment. - After the
.price-card rule, add a /* Footer */ comment, a .footer rule, and a .footer-btn rule. The .footer gets display: flex, flex-wrap: wrap, and gap: 12px. The .footer-btn gets border-radius: 6px and box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15).
Show example solution
/* TaskFlow landing page */
/* Hero section */
.hero {
display: flex;
justify-content: center;
align-items: center;
background-color: #1a2b4a;
}
/* Features */
.features {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.feature-card {
flex-grow: 1;
border-radius: 8px;
}
/* Pricing */
.pricing {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.price-card {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* Footer */
.footer {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.footer-btn {
border-radius: 6px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
Test yourself
-
Why are CSS comments useful?
- The browser shows them on the page
- They leave a note for anyone reading the source; the browser ignores them
- They speed up page loading
- They adjust colors automatically
Show answer
They leave a note for anyone reading the source; the browser ignores them — Correct. Comments leave a note for anyone reading the source; the browser ignores them.
-
Complete the marker that starts a CSS comment
____ This file styles the TaskFlow landing page */
Show answer
/* This file styles the TaskFlow landing page */
-
Match project concepts to their meanings
- display: flex
- Flex container
- flex-wrap: wrap
- Wrap to next line
- gap
- Space between items
- box-shadow
- Depth via shadow
- border-radius
- Rounded corners
Next lesson: What is a grid container?
