Lesson 30 / 30
Sticky Footer & Card Layouts
Build a sticky footer and a responsive card layout, two patterns used in almost every project.
Sticky footer
The footer sits at the bottom even when the page content is short — flex: 1 on main pushes it down.
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}A card component
The classic bordered, padded, shadowed content box.
.card {
background: #fff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}Cards + Grid = a gallery
Drop .card elements into a repeat(auto-fit, minmax(...)) grid to get a fully responsive card gallery with almost no extra CSS.
Final quiz 1 of 8
Final quiz
Quick check: Which box-model order is correct from inside out?
- content, border, padding, margin
- margin, border, padding, content
- content, padding, border, margin
- padding, content, border, margin
Answer
content, padding, border, margin — Content sits inside padding, then border, then margin.
Final quiz 2 of 8
Final quiz
Quick check: What does box-sizing: border-box change?
- Width excludes content
- Margins collapse
- Borders disappear
- Width includes padding and border
Answer
Width includes padding and border — It makes width math predictable.
Final quiz 3 of 8
Final quiz
Quick check: An absolute element positions itself relative to...
- Its nearest positioned ancestor
- The viewport always
- Its sibling
- The body only
Answer
Its nearest positioned ancestor — Without one it falls back to the initial containing block.
Final quiz 4 of 8
Final quiz
Quick check: Which is best for a two-dimensional layout?
- float
- CSS Grid
- inline
- table-layout hacks
Answer
CSS Grid — Grid handles rows and columns together.
Final quiz 5 of 8
Final quiz
Quick check: Which unit scales with the user's default font size?
- px
- pt
- rem
- cm
Answer
rem — rem is relative to the root font size.
Final quiz 6 of 8
Final quiz
Quick check: Which wins: a class selector or an id selector?
- The class selector
- Whichever is longer
- Neither
- The id selector
Answer
The id selector — Ids have higher specificity.
Final quiz 7 of 8
Final quiz
Quick check: Which properties are best to animate for performance?
- transform and opacity
- width and height
- margin and padding
- top and left
Answer
transform and opacity — They avoid layout and run on the GPU.
Final quiz 8 of 8
Final quiz
Quick check: How do you read a custom property --gap?
- $gap
- var(--gap)
- gap()
- @gap
Answer
var(--gap) — var() reads custom properties.