Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

CSS Challenges

Enroll for freeGet started!

Join 566 other students

Log in to get

Access to all our free courses
Interactive hands-on content
100s of code challenges
Join a friendly community
Enroll for free
Subscribe to access!Subscribe to access!

Subscribe to access to this course and ALL other courses. You get a 30-day money-back guarantee, no questions asked.

Subscription includes

All courses and career paths
100s of coding challenges
Certificates of completion
Exclusive Pro members chat
The course creator Treasure Porth

with Treasure Porth

Course level: Intermediate

Find out how well you really know CSS with our bumper-pack of challenges. Recreate components and layouts from popular applications like Github, Codepen, and Instagram, and build loading animations, progress bars, flashcards and more using pure CSS!

What's inside

This course contains 50 interactive scrims

two girls
CSS Challenges

50 lessons2 hours 31 min

1. Welcome to CSS Challenges!
3:18
2. Challenge: Colorful Button
2:01
3. Solution: Colorful Button
6:15
4. Challenge: Expanding Search Bar
2:20
5. Solution: Expanding Search Bar
3:52
6. Challenge: Codepen Tile
1:31
7. Solution: Codepen Tile
5:55
8. Challenge: Loading Animation 1
1:14
9. Solution: Loading Animation 1
2:55
10. Challenge: Loading Animation 2
1:17
11. Solution: Loading Animation 2
2:39
12. Challenge: Archery Target
1:15
13. Solution: Archery Target
2:41
14. Challenge: Word Carousel
1:07
15. Solution: Word Carousel
3:49
16. Challenge: Flag of France
2:26
17. Solution: Flag of France
3:43
18. Challenge: Flag of Germany
1:02
19. Solution: Flag of Germany
1:59
20. Challenge: Flag of Madagascar
1:03
21. Solution: Flag of Madagascar
4:42
22. Challenge: Flags of Switzerland
1:48
23. Solution: Flag of Switzerland
4:15
24. Challenge: Flag of Japan
1:04
25. Solution: Flag of Japan
2:31
26. Challenge: Flag of Sweden
2:03
27. Solution: Flag of Sweden
5:51
28. Challenge: Flag of Niger
1:36
29. Solution: Flag of Niger
4:04
30. Challenge - Github Profile Layout
2:35
31. Solution - Github Profile Layout
5:24
32. Challenge - Toggle Switch
2:42
33. Solution: Toggle Switch
6:06
34. Challenge: Playing Card - Ace of Spades
0:52
35. Solution: Playing Card - Ace of Spades
3:19
36. Challenge: Playing Card - 4 of Hearts
0:55
37. Solution: Playing Card - 4 of Hearts
4:49
38. Challenge: Adjustable Progress Bar
2:09
39. Solution: Adjustable Progress Bar
3:18
40. Challenge: Jeopardy Flashcard
2:44
41. Solution: Jeopardy Flashcard
5:17
42. Challenge: Loading Animation 3
1:57
43. Solution: Loading Animation 3
3:08
44. Challenge - Instagram Stories Menu
3:04
45. Solution - Instagram Stories Menu
9:01
46. Challenge - Animated Progress Bar
2:14
47. Solution - Animated Progress Bar
3:55
48. Challenge - Github Contributions Graph
2:32
49. Solution - Github Contributions Graph
3:42
50. Congrats, you've completed CSS Challenges!
0:55

You'll learn

Styling nested elements

Centering and alignment

Transitions

Pseudo elements

Hover effects

Keyframe animations

Word carousel

CSS grid

Flexbox

calc()

Position

Shapes

Aspect ratio

CSS variables

Simple profile layout

Toggles

Progress bars

Design matching

You'll build

screenshot
Github Contributions Graph

Build your own fun and colorful version of a Github Contributions graph.

screenshot
Instagram Stories Menu

Practice your layout prowess by building a simplified version of the Instagram stories menu.

screenshot
Country Flags

Practice using the calc() function by building several country flags using pure CSS.

man

Prerequisites

Before taking this course, you should have a basic understanding of HTML and CSS. Below is our suggested resource to get you up to speed.

Meet your teacher

The course creator

Treasure Porth

Treasure has been working as a software engineer and teaching code since 2015, when she switched careers after attending a free local bootcamp. She tries to make every subject as simple and accessible as possible, and is passionate about affordable education and helping others break into the tech industry.

Why this course rocks

This hands-on course will guide you through engaging challenges covering a wide range of CSS techniques.

Along the way, you'll refresh and refine your knowledge of all the key CSS features, from transitions and pseudo-elements to hover effects, keyframe animations, and much more!

Looking for practical CSS experience? This course has that, too! You'll put your knowledge to the test by recreating instantly-recognizable components from sites such as Github, Codepen, and Instagram.

After completing each challenge, you'll compare your solution with the one provided by our in-house CSS expert. This experience is akin to pair programming, allowing you to learn from their expertise and gain valuable insights.

By the end of this course, you will not only have a comprehensive understanding of CSS but also have gained practical experience in recreating components from well-known apps from around the web. This knowledge will equip you to tackle any CSS challenge with confidence.

CSS knowledge at the ready? Let's get started.

F to the A oracle to the Q
Who is this course for?

This course offers a fun mix of educational CSS exercises and real world challenges where you’ll recreate components that exist in the wild. It’s for anyone who is comfortable with CSS and wants to practice and improve their skills.

What if I get stuck or my version isn’t exact?

No worries, you're here to learn! Teacher Treasure provides solutions to each challenge, so you can look at those for hints and guidance.

What if my answer is different to the suggested solution?

That's totally fine! There are so many ways to style using CSS. We provide solutions to help you in case you get stuck, but you’re free to solve the challenges in any way you’re comfortable— including Flexbox, CSS Grid, or any other means!