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-childand: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;andbackground-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, andsticky
Exercise 5.2: Flexbox
- Create a container with 4 boxes
- Use
justify-content: space-aroundandalign-items: center - Change
flex-direction: column
Exercise 5.3: Grid
- Create a 3x3 grid layout
- Add
grid-gapfor spacing - Use
grid-template-areasfor 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
::beforeand::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)
- Build a multi-page responsive website with a nav bar
- Create a landing page with hero section, background image, buttons, and grid layout
- Animate boxes using flexbox alignment and keyframes
- Create a pricing table using grid
- Build a contact form with validation styling and hover effects