Advent of CSS 2023
- Get now
- Learn more
👋 Welcome

START HERE!
Setting up your Project
Challenge #1 - Building An Icon Component

Challenge #1
Project Files
Solution #1
Challenge #2 - Building an Avatar Component

Challenge #2
Project Files
Solution #2
Challenge #3 - Form Fields and CSS Only Validation

Challenge #3
Project Files
Solution #3
Challenge #4 - Show / Hide Password

Challenge #4
Project Files
Solution #4
Challenge #5 - Login Layout

Challenge #5
Project Files
Solution #5
Challenge #6 - Slide up Footer

Challenge #6
Project Files
Solution #6
Challenge #7 - Hamburger Menu

Challenge #7
Project Files
Solution #7
Challenge #8 - Slide Out Navigation

Challenge #8
Project Files
Solution #8
Challenge #9 - Dropdown Menu

Challenge #9
Project Files
Solution #9
Challenge #10 - Interior Page Layout

Challenge #10
Project Files
Solution #10
Challenge #11 - Custom Checkbox

Challenge #11
Project Files
Solution #11
Challenge #12 - RSVP Pages

Challenge #12
Project Files
Solution #12
Challenge #13: Invite Card

Challenge #13
Project Files
Solution #13
Challenge #14 - Invite Group Form

Challenge #14
Project Files
Solution #14
Challenge #15 - Modal

Challenge #15
Project Files
Solution #15
Challenge #16 - Create your wishlist

Challenge #16
Project Files
Solution #16
Challenge #17 - Slide Out Panel

Challenge #17
Project Files
Solution #17
Challenge #18 - View Your Wish List Layout

Challenge #18
Project Files
Challenge #19 - Expanding and Collapsing Accordion

Challenge #19
Project Files
Challenge #20 - Dashboard Page

Challenge #20
Project Files
Challenge #21 - Pairing

Challenge #21
Project Files
Challenge #22 - Thank You Note

Challenge #22
Project Files
Challenge #23 - Spinner for the Loading State

Challenge #23
Project Files
Challenge #24 - Light and Dark Theme Switcher

Challenge #24
Project Files
Appendix

Getting Help and Support
Working with GitHub
Working with Gitpod
Working with Storybook
Working with Redwood
Testimonials
Want more? Where to go from here?

Challenge #6 - Slide up Footer

3 Lessons