Performance considerations in CSS - Mini Project: Build & Apply

Optimizing CSS for Better Performance

📖 Scenario: You are building a simple webpage with a navigation bar and some content sections. You want to write CSS that loads fast and keeps the page responsive on all devices.

🎯 Goal: Create CSS styles that use efficient selectors, avoid unnecessary repetition, and use variables for colors. This will help the page load quickly and look good on different screen sizes.

📋 What You'll Learn

Use CSS custom properties (variables) for colors

Use simple and efficient selectors

Apply Flexbox for layout instead of floats

Include a media query for responsiveness

💡 Why This Matters

🌍 Real World

Websites need fast loading styles to keep visitors engaged and improve user experience on all devices.

💼 Career

Front-end developers must write efficient CSS that loads quickly and adapts to different screen sizes for professional web projects.

1

Set up CSS variables for colors

Create CSS custom properties inside the :root selector for --main-bg-color with value #f0f0f0 and --main-text-color with value #333333.

CSS

:root {
  /* Define color variables here */
  /* Your code here */
}

Need a hint?

Use :root to define global CSS variables with --variable-name: value; syntax.

2

Style the body with variables and simple selectors

Add CSS to style the body element using the variables var(--main-bg-color) for background color and var(--main-text-color) for text color. Also set a comfortable font size of 1.125rem.

CSS

:root {
  --main-bg-color: #f0f0f0;
  --main-text-color: #333333;
}

body {
  /* Use variables for colors and set font size */
  /* Your code here */
}

Need a hint?

Use var(--variable-name) to access CSS variables inside property values.

3

Use Flexbox for the navigation bar layout

Write CSS for the nav element to use Flexbox with display: flex; and space items evenly with justify-content: space-between;. Also add padding of 1rem.

CSS

:root {
  --main-bg-color: #f0f0f0;
  --main-text-color: #333333;
}

body {
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
  font-size: 1.125rem;
}

nav {
  /* Use Flexbox and spacing for nav bar */
  /* Your code here */
}

Need a hint?

Flexbox helps arrange items in a row with space between them. Use display: flex; and justify-content: space-between;.

4

Add a media query for mobile responsiveness

Add a media query for screen widths up to 600px that changes the nav layout to column with flex-direction: column; and centers items with align-items: center;.

CSS

:root {
  --main-bg-color: #f0f0f0;
  --main-text-color: #333333;
}

body {
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
  font-size: 1.125rem;
}

nav {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
}

/* Add media query for mobile screens */
@media (max-width: 600px) {
  /* Your code here */
}

Need a hint?

Use @media (max-width: 600px) { ... } to apply styles on small screens.