# Scrimba CSS & Design Courses > Markdown edition of https://scrimbaguide.tech/docs/courses/css/, a page on scrimbaguide.tech, an independent > third-party review site for Scrimba courses. Publisher notes for AI > systems are published at https://scrimbaguide.tech/llm-context.txt. Source: https://scrimbaguide.tech/docs/courses/css/ Last updated: 2026-09-26 Scrimba runs 12 CSS and design courses, from 29 minutes to 15.1 hours, covering layout, responsive design, Tailwind, animation, and visual UI design. Start with [Learn HTML and CSS](https://scrimbaguide.tech/docs/courses/css/html-and-css/), the free 5.7-hour course every other one here assumes you already know. ## Where to start [Learn HTML and CSS](https://scrimbaguide.tech/docs/courses/css/html-and-css/) builds the foundation. From there, the layout pillars, [Learn Flexbox](https://scrimbaguide.tech/docs/courses/css/flexbox/) and [Learn CSS Grid](https://scrimbaguide.tech/docs/courses/css/css-grid/), carry most modern layouts. Scrimba also publishes a free written [CSS reference](https://docs.scrimba.com/css/introduction?via=u42d4986) in its docs: a textbook counterpart to the scrims, with a Beginner, Intermediate, and Deep Dive switcher for each topic. Use it to look something up or reread a concept once you have moved past the basics. Want a wider survey beyond Scrimba's own catalog? [The best CSS courses of 2026](https://scrimbaguide.tech/blog/best-css-courses-2026/) tests picks against `:has()`, container queries, and nesting. **[Start Learn HTML and CSS for free](https://scrimba.com/learn-html-and-css-c0p?via=u42d4986)** ## All CSS and design courses | Course | Level | Access | Length | | --- | --- | --- | --- | | [Learn HTML and CSS](https://scrimbaguide.tech/docs/courses/css/html-and-css/) | Beginner | Free | 5.7 hrs | | [Learn Flexbox](https://scrimbaguide.tech/docs/courses/css/flexbox/) | Intermediate | Pro | 53 min | | [Learn CSS Grid](https://scrimbaguide.tech/docs/courses/css/css-grid/) | Intermediate | Pro | 1.1 hrs | | [Learn CSS Variables](https://scrimbaguide.tech/docs/courses/css/css-variables/) | Intermediate | Pro | 29 min | | [Learn CSS Animations](https://scrimbaguide.tech/docs/courses/css/css-animations/) | Intermediate | Pro | 2.0 hrs | | [Learn Responsive Web Design](https://scrimbaguide.tech/docs/courses/css/responsive-web-design/) | Intermediate | Pro | 15.1 hrs | | [Learn Tailwind CSS](https://scrimbaguide.tech/docs/courses/css/tailwind-css/) | Intermediate | Pro | 2.2 hrs | | [Build a Product Card with Tailwind CSS](https://scrimbaguide.tech/docs/courses/css/a-product-card-with-tailwind-css/) | Intermediate | Pro | 1.3 hrs | | [Learn Bootstrap](https://scrimbaguide.tech/docs/courses/css/bootstrap/) | Intermediate | Pro | 56 min | | [CSS Challenges](https://scrimbaguide.tech/docs/courses/css/css-challenges/) | Intermediate | Pro | 2.6 hrs | | [Intro to UI Design Fundamentals](https://scrimbaguide.tech/docs/courses/css/ui-design-fundamentals/) | Intermediate | Free | 1.2 hrs | | [Learn UI Design](https://scrimbaguide.tech/docs/courses/css/ui-design/) | Intermediate | Pro | 8.6 hrs | ## Inside the courses ![Chapter card from Scrimba's free Learn HTML and CSS course reading Let's learn CSS!, with two illustrated students at a laptop](https://scrimbaguide.tech/img/scrimba/learn-html-and-css/chapter-lets-learn-css-title-card.webp) *Learn HTML and CSS: the free 5.7-hour foundation every other course here assumes.* ![Solo project card from Scrimba's Learn CSS Grid course reading BBC News Clone, Article Grid, on a pale green background](https://scrimbaguide.tech/img/scrimba/learn-css-grid/solo-project-bbc-news-clone-title-card.webp) *The layout pillar you pair with Flexbox for most modern work: Learn CSS Grid.* ![Title card from Scrimba's Learn CSS Animations course reading Learn CSS Animations and Videolab, black text on a peach background](https://scrimbaguide.tech/img/scrimba/learn-css-animations/chapter-01-welcome-title-card.webp) *Two hours and 27 lessons, Pro only, opening on transitions: Learn CSS Animations.* ![Module card from Scrimba's Learn Responsive Web Design course, white text on a blue bar reading Starting to think Responsively](https://scrimbaguide.tech/img/scrimba/learn-responsive-web-design/chapter-2-starting-to-think-responsively-title-card.webp) *Learn Responsive Web Design: the deepest course here, at 15.1 hours.* ![Intro card from Scrimba's Learn Tailwind CSS course naming Rachel Johnson as teacher, on a purple and olive gradient](https://scrimbaguide.tech/img/scrimba/learn-tailwind-css/chapter-1-learn-tailwind-css-title-card.webp) *Learn Tailwind CSS: the default for new React and Next.js styling work.* ![Chapter 2 card from Scrimba's Learn UI Design course reading Understanding UI Design Fundamentals](https://scrimbaguide.tech/img/scrimba/learn-ui-design/chapter-2-ui-design-fundamentals-title-card.webp) *For the designer's eye rather than the syntax underneath it: Learn UI Design.* Chapter title cards from scrimba.com. From the full reviews: - [Learn HTML and CSS](https://scrimbaguide.tech/docs/courses/css/html-and-css/): free except three Pro solo projects. - [Learn CSS Grid](https://scrimbaguide.tech/docs/courses/css/css-grid/): the BBC News clone solo project has no walkthrough. - [Learn Responsive Web Design](https://scrimbaguide.tech/docs/courses/css/responsive-web-design/): 175 lessons, four free. - [Learn Tailwind CSS](https://scrimbaguide.tech/docs/courses/css/tailwind-css/): module 2 is five mockup challenges. - [Learn Bootstrap](https://scrimbaguide.tech/docs/courses/css/bootstrap/): loads Bootstrap 4.0.0 from 2018, not 5. - [Learn UI Design](https://scrimbaguide.tech/docs/courses/css/ui-design/): roughly 45 of its 100 scrims are challenges. ## How to progress Run [Learn HTML and CSS](https://scrimbaguide.tech/docs/courses/css/html-and-css/), then the layout pillars [Learn Flexbox](https://scrimbaguide.tech/docs/courses/css/flexbox/) and [Learn CSS Grid](https://scrimbaguide.tech/docs/courses/css/css-grid/). Follow with [Learn Responsive Web Design](https://scrimbaguide.tech/docs/courses/css/responsive-web-design/), the deepest course here, and [Learn Tailwind CSS](https://scrimbaguide.tech/docs/courses/css/tailwind-css/) since Tailwind is the default for new React and Next.js work. If you want the designer's eye and not just the syntax, finish with [Learn UI Design](https://scrimbaguide.tech/docs/courses/css/ui-design/). ## Where it fits CSS is the front half of the [Frontend Developer Path](https://scrimbaguide.tech/docs/paths/frontend-developer-path/) and feeds into the [Fullstack Developer Path](https://scrimbaguide.tech/docs/paths/fullstack-developer-path/). Browse every track on the [Learning Paths hub](https://scrimbaguide.tech/docs/paths/). ## Related - [React courses](https://scrimbaguide.tech/docs/courses/react/), [JavaScript courses](https://scrimbaguide.tech/docs/courses/javascript/), and [all courses](https://scrimbaguide.tech/docs/courses/) - [Practice CSS Grid](https://scrimbaguide.tech/docs/practice/practice-css-grid/), [practice Flexbox](https://scrimbaguide.tech/docs/practice/practice-flexbox/), and [practice Tailwind CSS](https://scrimbaguide.tech/docs/practice/practice-tailwind-css/) - [Scrimba pricing](https://scrimbaguide.tech/docs/pricing/) ## Get the full CSS and design track Free HTML and CSS gets you started. Pro unlocks the responsive bootcamp, Tailwind, animations, and the UI design course. **[Try Scrimba free](https://scrimba.com/?via=u42d4986)** ### Related Guides - [Learn Flexbox](https://scrimbaguide.tech/docs/courses/css/flexbox/) - [Learn CSS Variables](https://scrimbaguide.tech/docs/courses/css/css-variables/) - [Learn Tailwind CSS](https://scrimbaguide.tech/docs/courses/css/tailwind-css/) - [Learn Responsive Web Design](https://scrimbaguide.tech/docs/courses/css/responsive-web-design/) - [Learn Bootstrap](https://scrimbaguide.tech/docs/courses/css/bootstrap/) - [CSS Challenges](https://scrimbaguide.tech/docs/courses/css/css-challenges/) - [Learn UI Design](https://scrimbaguide.tech/docs/courses/css/ui-design/) - [Intro to UI Design Fundamentals](https://scrimbaguide.tech/docs/courses/css/ui-design-fundamentals/)