Login
SelfTeach.me/Advent of CSS 2024
Get access for free

  • Free

Advent of CSS 2024

  • Course
  • 49 Lessons

24 CSS Challenges for the Season
Get now

Contents

👋 Welcome

Start Here

Challenge #1 - Photo Gallery Card

Challenge #1
Challenge #1 - Project Files

Challenge #2 - Toggle

Challenge #2
Challenge #2 - Project Files

Challenge #3 - Tooltip with Arrow

Challenge #3

Challenge #4 - Header with Rulers

Challenge #4
Challenge #4 - Project Files

Challenge #5 - Scroll up to Reveal the Footer

Challenge #5

Challenge #6 - Scroll Indicator

Challenge #6
Challenge #6 - Project Files

Challenge #7 - Animated Label

Challenge #7
Challenge #7 - Project Files

Challenge #8 - Scroll into View, Top Nav

Challenge #8
Challenge #8 - Project Files

Challenge #9 - Button with a Gradient Border

Challenge #9
Challenge #9 - Project Files

Challenge #10 - Horizontal Scroller with Scroll Snap

Challenge #10
Challenge #10 - Project Files

Challenge #11 - Vertical Text with Outline

Challenge #11
Challenge #11 - Project Files

Challenge #12 - Same HTML, Different CSS

Challenge #12
Challenge #12 - Project Files
Challenge #12 - Hints

Challenge #13 - Three-State Toggle

Challenge #13
Challenge #13 - Project Files

Challenge #14 - Corner Ribbon

Challenge #14
Challenge #14 - Project Files

Challenge #15 - Highlight Text

Challenge #15
Challenge #15 - Project Files

Challenge #16 - Custom Scroll Bar

Challenge #16
Challenge #16 - Project Files

Challenge #17 - CSS Only Brackets

Challenge #17
Challenge #17 - Project Files
Challenge #17 - Hints

Challenge #18 - Skeleton Loading Image

Challenge #18
Challenge #18 - Project Files

Challenge #19 - News Layout with Container Queries

Challenge #19
Challenge #19 - Project Files

Challenge #20 - Frosted Glass Effect

Challenge #20
Challenge #20 - Project Files

Challenge #21 - Theme Switcher

Challenge #21
Challenge #21 - Project Files

Challenge #22 - Equal Column Layout

Challenge #22
Challenge #22 - Project Files

Challenge #23 - Animated Hamburger Menu

Challenge #23
Challenge #23 - Project Files

Challenge #24 - Stacked Cards

Challenge #24
Challenge #24 - Project Files