CSS practice

Filter by difficulty, use hints, reveal solutions and save attempts locally.

1. Practice CSS Introduction by building one step of a responsive SaaS pricing layout and checking the result.

code-writing
beginnerCSS Introduction

1. Start from the CSS Introduction lesson example.

2. Use cards, spacing and states instead of placeholder text.

3. Run the example and compare output before polishing.

2. Practice Syntax by building one step of a responsive SaaS pricing layout and checking the result.

code-fix
beginnerSyntax

1. Start from the Syntax lesson example.

2. Use cards, spacing and states instead of placeholder text.

3. Run the example and compare output before polishing.

3. Practice Selectors by building one step of a responsive SaaS pricing layout and checking the result.

output
beginnerSelectors

1. Start from the Selectors lesson example.

2. Use cards, spacing and states instead of placeholder text.

3. Run the example and compare output before polishing.

4. Practice Colors by building one step of a responsive SaaS pricing layout and checking the result.

fill-blank
beginnerColors

1. Start from the Colors lesson example.

2. Use cards, spacing and states instead of placeholder text.

3. Run the example and compare output before polishing.

5. Practice Backgrounds by building one step of a responsive SaaS pricing layout and checking the result.

true-false
beginnerBackgrounds

1. Start from the Backgrounds lesson example.

2. Use cards, spacing and states instead of placeholder text.

3. Run the example and compare output before polishing.

6. Practice Borders by building one step of a responsive SaaS pricing layout and checking the result.

mini-project
beginnerBorders

1. Start from the Borders lesson example.

2. Use cards, spacing and states instead of placeholder text.

3. Run the example and compare output before polishing.

7. Practice Margins by building one step of a responsive SaaS pricing layout and checking the result.

mcq
beginnerMargins

1. Start from the Margins lesson example.

2. Use cards, spacing and states instead of placeholder text.

3. Run the example and compare output before polishing.

8. Practice Padding by building one step of a responsive SaaS pricing layout and checking the result.

code-writing
beginnerPadding

1. Start from the Padding lesson example.

2. Use cards, spacing and states instead of placeholder text.

3. Run the example and compare output before polishing.

9. Practice Box Model by building one step of a responsive SaaS pricing layout and checking the result.

code-fix
beginnerBox Model

1. Start from the Box Model lesson example.

2. Use cards, spacing and states instead of placeholder text.

3. Run the example and compare output before polishing.

10. Practice Text by building one step of a responsive SaaS pricing layout and checking the result.

output
beginnerText

1. Start from the Text lesson example.

2. Use cards, spacing and states instead of placeholder text.

3. Run the example and compare output before polishing.

11. Practice Fonts by building one step of a responsive SaaS pricing layout and checking the result.

fill-blank
intermediateFonts

1. Start from the Fonts lesson example.

2. Use cards, spacing and states instead of placeholder text.

3. Run the example and compare output before polishing.

12. Practice Display by building one step of a responsive SaaS pricing layout and checking the result.

true-false
intermediateDisplay

1. Start from the Display lesson example.

2. Use cards, spacing and states instead of placeholder text.

3. Run the example and compare output before polishing.

13. Practice Position by building one step of a responsive SaaS pricing layout and checking the result.

mini-project
intermediatePosition

1. Start from the Position lesson example.

2. Use cards, spacing and states instead of placeholder text.

3. Run the example and compare output before polishing.

14. Practice Flexbox by building one step of a responsive SaaS pricing layout and checking the result.

mcq
intermediateFlexbox

1. Start from the Flexbox lesson example.

2. Use cards, spacing and states instead of placeholder text.

3. Run the example and compare output before polishing.

15. Practice Grid by building one step of a responsive SaaS pricing layout and checking the result.

code-writing
intermediateGrid

1. Start from the Grid lesson example.

2. Use cards, spacing and states instead of placeholder text.

3. Run the example and compare output before polishing.

16. Practice Responsive Design by building one step of a responsive SaaS pricing layout and checking the result.

code-fix
intermediateResponsive Design

1. Start from the Responsive Design lesson example.

2. Use cards, spacing and states instead of placeholder text.

3. Run the example and compare output before polishing.

17. Practice Media Queries by building one step of a responsive SaaS pricing layout and checking the result.

output
intermediateMedia Queries

1. Start from the Media Queries lesson example.

2. Use cards, spacing and states instead of placeholder text.

3. Run the example and compare output before polishing.

18. Practice Transitions by building one step of a responsive SaaS pricing layout and checking the result.

fill-blank
intermediateTransitions

1. Start from the Transitions lesson example.

2. Use cards, spacing and states instead of placeholder text.

3. Run the example and compare output before polishing.

19. Practice Animations by building one step of a responsive SaaS pricing layout and checking the result.

true-false
intermediateAnimations

1. Start from the Animations lesson example.

2. Use cards, spacing and states instead of placeholder text.

3. Run the example and compare output before polishing.

20. Practice Variables by building one step of a responsive SaaS pricing layout and checking the result.

mini-project
intermediateVariables

1. Start from the Variables lesson example.

2. Use cards, spacing and states instead of placeholder text.

3. Run the example and compare output before polishing.

21. Practice Dark Mode by building one step of a responsive SaaS pricing layout and checking the result.

mcq
advancedDark Mode

1. Start from the Dark Mode lesson example.

2. Use cards, spacing and states instead of placeholder text.

3. Run the example and compare output before polishing.

22. Practice Advanced Selectors by building one step of a responsive SaaS pricing layout and checking the result.

code-writing
advancedAdvanced Selectors

1. Start from the Advanced Selectors lesson example.

2. Use cards, spacing and states instead of placeholder text.

3. Run the example and compare output before polishing.

23. Practice Architecture by building one step of a responsive SaaS pricing layout and checking the result.

code-fix
advancedArchitecture

1. Start from the Architecture lesson example.

2. Use cards, spacing and states instead of placeholder text.

3. Run the example and compare output before polishing.

24. Practice Utility-first CSS by building one step of a responsive SaaS pricing layout and checking the result.

output
advancedUtility-first CSS

1. Start from the Utility-first CSS lesson example.

2. Use cards, spacing and states instead of placeholder text.

3. Run the example and compare output before polishing.

25. Practice Performance CSS by building one step of a responsive SaaS pricing layout and checking the result.

fill-blank
advancedPerformance CSS

1. Start from the Performance CSS lesson example.

2. Use cards, spacing and states instead of placeholder text.

3. Run the example and compare output before polishing.

26. Practice Responsive Landing Page Project by building one step of a responsive SaaS pricing layout and checking the result.

true-false
advancedResponsive Landing Page Project

1. Start from the Responsive Landing Page Project lesson example.

2. Use cards, spacing and states instead of placeholder text.

3. Run the example and compare output before polishing.

27. Practice Card Layout by building one step of a responsive SaaS pricing layout and checking the result.

mini-project
advancedCard Layout

1. Start from the Card Layout lesson example.

2. Use cards, spacing and states instead of placeholder text.

3. Run the example and compare output before polishing.

28. Practice Form Styling by building one step of a responsive SaaS pricing layout and checking the result.

mcq
advancedForm Styling

1. Start from the Form Styling lesson example.

2. Use cards, spacing and states instead of placeholder text.

3. Run the example and compare output before polishing.

29. Practice Navigation Styling by building one step of a responsive SaaS pricing layout and checking the result.

code-writing
advancedNavigation Styling

1. Start from the Navigation Styling lesson example.

2. Use cards, spacing and states instead of placeholder text.

3. Run the example and compare output before polishing.

30. Practice CSS Review by building one step of a responsive SaaS pricing layout and checking the result.

code-fix
advancedCSS Review

1. Start from the CSS Review lesson example.

2. Use cards, spacing and states instead of placeholder text.

3. Run the example and compare output before polishing.