Loading…
Welcome to the architectural phase of CSS. In the previous lesson, we looked at individual elements. Now, we zoom out to look at the layout.
How do you arrange elements on a screen that changes size? How do you create complex dashboards that work on mobile phones? These questions (6-10) cover the most crucial skills for a modern frontend developer: The Box Model, Modern Layout Systems (Flex/Grid), and Responsive Design.
The Box Model is the fundamental concept that describes how every element in a web page is represented. Every single HTML tag is essentially a rectangular box.
It consists of four layers, from the inside out:
Pro Tip: The most important part of this answer is mentioningbox-sizing: border-box. By default, if you set width: 100px and padding: 20px, the actual width becomes 140px (100 + 20 + 20). Setting box-sizing: border-box forces the padding to be included inside the 100px width, making layout math much easier.
/* Standard Reset for every project */
* {
box-sizing: border-box;
}
.box {
width: 300px;
padding: 20px;
border: 5px solid black;
margin: 50px;
/* With border-box: Total rendered width is 300px */
/* Without it: Total rendered width is 350px (300 + 40 + 10) */
}This is the most common layout question. Both are powerful layout systems, but they serve different purposes.
| Feature | Flexbox | CSS Grid |
|---|---|---|
| Dimension | One-dimensional (Row OR Column). | Two-dimensional (Rows AND Columns simultaneously). |
| Focus | Content-first. You let the content size dictate the layout. | Layout-first. You define the structure (grid), then place items in it. |
| Best Use Case | Navbars, centering items, small UI components. | Overall page layout, complex dashboards, image galleries. |
/* Flexbox: Align items in a single row */
.navbar {
display: flex;
justify-content: space-between; /* Spacing */
align-items: center; /* Vertical alignment */
}
/* Grid: Create a 2D layout */
.dashboard {
display: grid;
grid-template-columns: 200px 1fr; /* Sidebar fixed, Content flexible */
grid-template-rows: auto 1fr; /* Header auto, Content fills rest */
}Responsive Web Design (RWD) ensures a website looks good on all devices (desktops, tablets, and phones). It is not just one technique, but a combination of practices.
The three pillars of responsive design are:
%) or viewport units (vw/vh) instead of fixed pixels for layout widths.max-width: 100%).Additionally, you must include the Viewport Meta Tag in your HTML (<meta name="viewport" content="width=device-width, initial-scale=1.0">) or mobile browsers will zoom out and pretend to be a desktop monitor.
Media queries are the "logic" of responsive design. They allow you to apply CSS rules only if certain conditions are met-usually related to the screen width.
Mobile-First Approach:
It is best practice to write your default CSS for mobile devices first, and then use min-width media queries to add complexity for larger screens (tablets/desktops).
/* Default styles (Mobile) */
.container {
flex-direction: column; /* Stack items vertically */
background-color: white;
}
/* Tablet (Screens larger than 768px) */
@media (min-width: 768px) {
.container {
flex-direction: row; /* Layout side-by-side */
background-color: lightblue;
}
}
/* Desktop (Screens larger than 1024px) */
@media (min-width: 1024px) {
.container {
max-width: 960px; /* Limit width */
margin: 0 auto; /* Center it */
}
}Sample Output behavior:
Resize your browser window. When the width crosses 768px, the background color will instantly snap from white to light blue, and the layout will shift from a column to a row.
CSS animations allow you to animate transitions from one CSS style configuration to another. There are two main ways to move things in CSS: Transitions and Keyframe Animations.
1. Transitions: Simple changes (A to B). Used when a state changes (like hover).transition: all 0.3s ease-in-out;
2. Keyframe Animations (@keyframes): Complex sequences (A to B to C to A). Does not require user interaction to start.
/* Define the animation sequence */
@keyframes slideIn {
0% {
transform: translateX(-100%); /* Start off-screen left */
opacity: 0;
}
100% {
transform: translateX(0); /* End at normal position */
opacity: 1;
}
}
/* Apply it to an element */
.alert-box {
/* Name | Duration | Timing | Delay | Iteration | Direction */
animation: slideIn 0.5s ease-out forwards;
}This code makes an .alert-box smoothly slide in from the left side of the screen when the page loads.
3 questions · no sign-up, nothing stored
Progress is stored in this browser only - no sign-up, nothing sent anywhere.