CSS bootcamp

Question on the left. Your CSS on the right. Check it.

Each lab is one problem: read the spec, write a solution, press Preview, then Check. Hints stay closed. The correct code is there when you need it. Check reads computed styles.

Start lab 01CSS tutorial

50 labs · 28 easy · 22 medium · progress stays in this browser.

  1. Read the questionInput, output, and a short example. Same shape as a classroom worksheet.
  2. Write CSS, then PreviewThe starter is a skeleton. Change it, then see what happens.
  3. Check, or open a hintCheck runs every test. Hint and correct code stay folded until you open them.

Labs

Work them in order, or jump ahead when you are ready.

  1. 01easy

    Color the heading

    Colors · 5 min

    Open lab
  2. 02easy

    Center the text

    Text · 5 min

    Open lab
  3. 03easy

    Bigger type

    Fonts · 8 min

    Open lab
  4. 04easy

    Card padding

    Box model · 8 min

    Open lab
  5. 05easy

    Rounded card

    Borders · 8 min

    Open lab
  6. 06medium

    Flex row

    Flexbox · 10 min

    Open lab
  7. 07medium

    Two columns

    Grid · 10 min

    Open lab
  8. 08medium

    Muted lead

    Selectors · 10 min

    Open lab
  9. 09easy

    Card margin

    Margins · 8 min

    Open lab
  10. 10easy

    Fixed width

    Height Width · 8 min

    Open lab
  11. 11easy

    Max width

    Max Width · 8 min

    Open lab
  12. 12easy

    Bold heading

    Fonts · 5 min

    Open lab
  13. 13easy

    Letter spacing

    Text · 8 min

    Open lab
  14. 14easy

    Uppercase title

    Text · 5 min

    Open lab
  15. 15easy

    Fade the lead

    Opacity · 5 min

    Open lab
  16. 16medium

    Box shadow

    Shadows · 10 min

    Open lab
  17. 17easy

    Block image

    Display · 8 min

    Open lab
  18. 18easy

    Hide an element

    Display · 5 min

    Open lab
  19. 19medium

    Flex center

    Flexbox · 10 min

    Open lab
  20. 20medium

    Flex column

    Flexbox · 8 min

    Open lab
  21. 21medium

    Grid with gap

    Grid · 10 min

    Open lab
  22. 22medium

    Relative position

    Position · 10 min

    Open lab
  23. 23medium

    Absolute badge

    Position · 12 min

    Open lab
  24. 24medium

    Raise the card

    Z Index · 8 min

    Open lab
  25. 25easy

    Clip overflow

    Overflow · 8 min

    Open lab
  26. 26medium

    Background image

    Backgrounds · 10 min

    Open lab
  27. 27medium

    Linear gradient

    Gradients · 10 min

    Open lab
  28. 28medium

    Color transition

    Transitions · 10 min

    Open lab
  29. 29medium

    Scale on card

    Transforms · 10 min

    Open lab
  30. 30medium

    Hover color

    Pseudo Class · 10 min

    Open lab
  31. 31medium

    First child bold

    Pseudo Class · 10 min

    Open lab
  32. 32medium

    Before content

    Pseudo Element · 12 min

    Open lab
  33. 33easy

    List style none

    Lists · 5 min

    Open lab
  34. 34easy

    Pointer cursor

    UI · 5 min

    Open lab
  35. 35easy

    Border box sizing

    Box Sizing · 8 min

    Open lab
  36. 36easy

    Focus outline

    Outline · 8 min

    Open lab
  37. 37easy

    Horizontal padding

    Padding · 8 min

    Open lab
  38. 38easy

    Min height

    Height Width · 8 min

    Open lab
  39. 39easy

    White space nowrap

    Text · 8 min

    Open lab
  40. 40easy

    Flex gap 24

    Flexbox · 8 min

    Open lab
  41. 41medium

    Space between

    Flexbox · 8 min

    Open lab
  42. 42medium

    Three columns

    Grid · 10 min

    Open lab
  43. 43easy

    Underline border

    Borders · 8 min

    Open lab
  44. 44easy

    Hex text color

    Colors · 5 min

    Open lab
  45. 45easy

    Teal background

    Backgrounds · 5 min

    Open lab
  46. 46easy

    Sans font stack

    Fonts · 8 min

    Open lab
  47. 47easy

    No underline link

    Links · 5 min

    Open lab
  48. 48medium

    Mobile padding

    Media Queries · 12 min

    Open lab
  49. 49medium

    CSS variable color

    Variables · 12 min

    Open lab
  50. 50medium

    Important color

    Important · 8 min

    Open lab

FAQ: CSS Bootcamp Labs

Common questions about this page.

What is the StudyGrid CSS tutorial?

The StudyGrid CSS tutorial is a full beginner track: selectors, the box model, text, layout, flex, grid, and responsive design. Each chapter has copy-and-preview examples.

Should I run css bootcamp labs examples locally for better learning?

Yes. Use the browser editor on StudyGrid for a quick check, then Download the example and run it on your computer. Local runs show real errors and the real toolchain, which is one of the fastest ways to learn css bootcamp labs in this CSS Labs CSS lesson (CSS Bootcamp Labs).

Is the CSS editor the same as Try HTML?

No. Try CSS is a stylesheet preview at /css/try. Try HTML stays at /html/try. CSS lessons never open the HTML-only editor or the Python editor.

Do I need to install anything to learn CSS?

No. Open a chapter, click Try it in CSS, and the page preview updates in the browser.

Where should I start the CSS tutorial?

Start at CSS Intro, then Syntax, Selectors, and How To. After colors and the box model, continue to flex, grid, and media queries. Use Next at the bottom of each chapter.

Is the CSS tutorial free?

Yes. The CSS studio on StudyGrid (studygrid.in) is free: dashboard, chapters, and the live preview editor.