Common UI use cases in CSS - Mini Project: Build & Apply

Common UI Use Cases with CSS

📖 Scenario: You are building a simple webpage with common user interface elements: a navigation bar, a button, and a card layout. These are typical parts of many websites.

🎯 Goal: Create CSS styles to make a navigation bar with horizontal links, a button with hover effect, and a card with shadow and padding. The page should look neat and user-friendly.

📋 What You'll Learn

Use Flexbox to layout the navigation bar horizontally

Style the button with background color and change color on hover

Create a card style with padding, border radius, and subtle shadow

Use CSS variables for colors

Make the layout responsive for smaller screens

💡 Why This Matters

🌍 Real World

These CSS styles are common in many websites and apps to create clean, user-friendly interfaces that work well on different devices.

💼 Career

Knowing how to style navigation bars, buttons, and cards with responsive design is essential for front-end web development jobs.

1

Set up CSS variables and basic styles

Create CSS variables for --primary-color as #3498db and --secondary-color as #2ecc71. Then set the body background color to #f0f0f0 and font family to Arial, sans-serif.

CSS

/* Your code here */

Need a hint?

Use :root to define CSS variables. Then style the body selector with background and font.

2

Style the navigation bar with Flexbox

Create a CSS rule for nav to use display: flex and justify-content: center. Also style nav a links to have no underline, padding of 1rem, and color using var(--primary-color).

CSS

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
}

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

/* Your code here */

Need a hint?

Use Flexbox on nav to center links horizontally. Remove underline from links and add padding and color.

3

Add button styles with hover effect

Create a CSS rule for button with background color var(--secondary-color), white text color, border radius 0.5rem, and padding 0.5rem 1rem. Add a hover effect that changes background color to #27ae60.

CSS

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
}

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

nav {
  display: flex;
  justify-content: center;
}

nav a {
  text-decoration: none;
  padding: 1rem;
  color: var(--primary-color);
}

/* Your code here */

Need a hint?

Style the button with background, text color, rounded corners, and padding. Add a hover style to change background color.

4

Create card style with padding, border radius, and shadow

Create a CSS rule for .card with background color white, padding 1rem, border radius 1rem, and box shadow 0 4px 6px rgba(0, 0, 0, 0.1). Add a media query for screens smaller than 600px that sets .card width to 90%.

CSS

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
}

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

nav {
  display: flex;
  justify-content: center;
}

nav a {
  text-decoration: none;
  padding: 1rem;
  color: var(--primary-color);
}

button {
  background-color: var(--secondary-color);
  color: white;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #27ae60;
}

/* Your code here */

Need a hint?

Style the card with white background, padding, rounded corners, and shadow. Use a media query to make it narrower on small screens.