Find the perfect coding resourcesLearn more→

CSS Challenges

ScrimbaScrimba
•
Recommended
View Course
Leaderboard
CSS
Meet Your Instructor
Treasure Porth avatar

Treasure Porth

Instructor

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.

2h 36m

Format

Interactive coding

Free

What You'll Learn

Style nested elements using CSS

Center and align content with Flexbox and Grid

Apply smooth transitions between element states

Use pseudo-elements ::before and ::after

Create interactive hover effects

Overview

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.

Table of Contents
1
Welcome to CSS Challenges!3:18
2
Challenge: Spoiler Revealer1:17
3
Solution: Spoiler Revealer3:39
4
Challenge: Colorful Button2:01
5
Solution: Colorful Button6:15
6
Challenge: Expanding Search Bar2:20
7
Solution: Expanding Search Bar3:52
8
Challenge: Codepen Tile1:31
9
Solution: Codepen Tile5:55
10
Challenge - Github Profile Layout2:35
11
Solution - Github Profile Layout5:24
12
Challenge - Instagram Stories Menu3:04
13
Solution - Instagram Stories Menu9:01
14
Challenge - Github Contributions Graph2:32
15
Solution - Github Contributions Graph3:42
16
Challenge: Loading Animation 11:14
17
Solution: Loading Animation 12:55
18
Challenge: Loading Animation 21:17
19
Solution: Loading Animation 22:39
20
Challenge: Loading Animation 31:57
21
Solution: Loading Animation 33:08
22
Challenge: Archery Target1:15
23
Solution: Archery Target2:41
24
Challenge: Playing Card - Ace of Spades0:52
25
Solution: Playing Card - Ace of Spades3:19
26
Challenge: Playing Card - 4 of Hearts0:55
27
Solution: Playing Card - 4 of Hearts4:49
28
Challenge: Flag of France2:26
29
Solution: Flag of France3:43
30
Challenge: Flag of Germany1:02
31
Solution: Flag of Germany1:59
32
Challenge: Flag of Madagascar1:03
33
Solution: Flag of Madagascar4:42
34
Challenge: Flag Challenge1:48
35
Solution: Flag of Switzerland4:15
36
Challenge: Flag of Japan1:04
37
Solution: Flag of Japan2:31
38
Challenge: Flag of Sweden2:03
39
Solution: Flag of Sweden5:51
40
Challenge: Flag of Niger1:36
41
Solution: Flag of Niger4:04
42
Challenge: Word Carousel1:07
43
Solution: Word Carousel3:49
44
Challenge - Toggle Switch2:42
45
Solution: Toggle Switch6:06
46
Challenge: Adjustable Progress Bar2:09
47
Solution: Adjustable Progress Bar3:18
48
Challenge: Animated Progress Bar2:14
49
Solution - Animated Progress Bar3:55
50
Challenge: Jeopardy Card Flip2:44
51
Solution: Jeopardy Flashcard5:17
52
Congrats, you've completed CSS Challenges!0:55
53
How to Utilize Your Certificate0:56

Share Your Experience

Sign in to leave a review and help others

No reviews yet. Be the first to review!