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