Advent of CSS 2024
- Buy now
- Learn more
👋 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

Challenge #12 - Same HTML, Different CSS

3 Lessons