Ultimate CSS Masterclass (Part 3: Exercises & Mini-Projects)

1. Basic CSS Exercises

Exercise 1.1: Style Your First Page

  • Create an HTML page
  • Add internal CSS
  • Style the <body> with a background color
  • Style <h1> with a font, color, and text-align center
  • Style <p> with color, font-size, and line-height

Goal: Apply basic colors, fonts, and text alignment

Exercise 1.2: Inline vs Internal vs External

  • Add a paragraph with inline CSS
  • Add another paragraph styled via internal CSS
  • Link an external CSS file and style another paragraph

Goal: Learn different ways to apply CSS

2. Selectors Exercises

Exercise 2.1: Class & ID

  • Add 3 <div> elements
  • Give each a class and style them differently
  • Give one an ID and style it uniquely

Exercise 2.2: Descendant & Child

  • Create <div> with multiple <p>
  • Style all <p> inside <div> using descendant selector
  • Style only direct child <p> with child selector

Exercise 2.3: Pseudo-classes

  • Create a navigation bar
  • Change link color on :hover
  • Style first and last list items with :first-child and :last-child

3. Colors, Fonts, and Text Exercises

Exercise 3.1: Text Styling

  • Change heading colors, font-family, font-size
  • Style paragraphs with line-height, letter-spacing, and text-align
  • Apply uppercase and capitalize using text-transform

Exercise 3.2: Backgrounds

  • Add solid color background to <body>
  • Add a background image to a <div>
  • Experiment with background-size: cover; and background-position: center;

4. Box Model Exercises

Exercise 4.1: Padding and Margin

  • Create 2 <div> elements side by side
  • Add padding inside and margin outside
  • Observe spacing

Exercise 4.2: Border & Radius

  • Add border to a box
  • Make rounded corners with border-radius
  • Add a shadow using box-shadow

5. Layout Exercises

Exercise 5.1: Display & Position

  • Create inline, block, and inline-block elements
  • Experiment with position: relative, absolute, fixed, and sticky

Exercise 5.2: Flexbox

  • Create a container with 4 boxes
  • Use justify-content: space-around and align-items: center
  • Change flex-direction: column

Exercise 5.3: Grid

  • Create a 3x3 grid layout
  • Add grid-gap for spacing
  • Use grid-template-areas for advanced placement

6. Lists and Navigation Exercises

Exercise 6.1: Horizontal Menu

  • Remove bullets with list-style: none
  • Display <li> inline
  • Add hover effect to links

Exercise 6.2: Vertical Sidebar

  • Style a vertical menu
  • Add hover background-color change

7. Forms Exercises

Exercise 7.1: Input Styling

  • Style text inputs, email fields, and textareas
  • Add padding, border-radius, and focus effect

Exercise 7.2: Button Styling

  • Style a submit button with color, padding, hover effect, and cursor change

8. Pseudo-elements and Transitions Exercises

Exercise 8.1: Before & After

  • Add content before and after a heading using ::before and ::after
  • Add icons or decorative symbols

Exercise 8.2: Transitions

  • Create a button
  • Add transition: background-color 0.5s
  • Change background color on hover

9. Animations Exercises

Exercise 9.1: Simple Animation

  • Animate a box moving left to right using @keyframes
  • Make it loop infinitely

Exercise 9.2: Hover Animation

  • Animate color change or scale on hover

10. Media Queries and Responsive Design Exercises

Exercise 10.1: Responsive Text

  • Change font-size for screens smaller than 768px

Exercise 10.2: Responsive Layout

  • Make a 3-column layout collapse into 1 column on small screens
  • Adjust navigation menu for mobile

11. Mini-Projects

Project 11.1: Personal Portfolio Page

  • Header with name and nav bar
  • About section with image and text
  • Projects section using flexbox or grid
  • Contact form styled beautifully
  • Footer with social links

Project 11.2: Blog Layout

  • Multiple <article> posts
  • Sidebar for recent posts or categories
  • Hover effects for links
  • Responsive layout

Project 11.3: Media Gallery

  • Grid of images
  • Hover effects with transform and transition
  • Responsive for mobile screens

Project 11.4: Animated Buttons

  • Buttons with hover effects
  • Buttons with small scale animation using @keyframes

Project 11.5: FAQ Page

  • Use <details> and <summary> for interactive questions
  • Add CSS animations for smooth opening

12. Challenge Exercises (Advanced)

  1. Build a multi-page responsive website with a nav bar
  2. Create a landing page with hero section, background image, buttons, and grid layout
  3. Animate boxes using flexbox alignment and keyframes
  4. Create a pricing table using grid
  5. Build a contact form with validation styling and hover effects