CSS Tutorial · Next Steps · Lesson 19 of 19

CSS Next Steps

Frameworks, methodologies and practice projects after the CSS basics.

Keep building

Practise layouts: rebuild the layout of a site you like with flexbox and grid.
Tailwind CSS: a popular utility-first framework — you'll recognise every utility from this tutorial (flex, gap-4, rounded-lg).
Methodologies: BEM naming (.card__title--large) or CSS Modules keep large stylesheets manageable.
Modern CSS: native nesting, :has(), container queries, cascade layers (@layer) and color-mix() are all supported in current browsers.

Add behaviour

Make your pages interactive with the JavaScript tutorial, then build components with the React course.

Everything togetherTry it yourself

<style>
  :root { --brand: #2563eb; }
  body { font: 15px system-ui; display: grid; place-items: center; min-height: 180px; background: #f8fafc; margin: 0; }
  .card { background: white; border-radius: 14px; padding: 18px 22px; box-shadow: 0 10px 30px rgb(0 0 0 / 10%); max-width: 280px; }
  .card h3 { margin: 0 0 6px; }
  .card a { display: inline-block; margin-top: 10px; background: var(--brand); color: white; padding: 6px 12px; border-radius: 8px; text-decoration: none; transition: transform 150ms; }
  .card a:hover { transform: translateY(-2px); }
</style>
<article class="card">
  <h3>You finished CSS!</h3>
  <p>Variables, grid, shadows and transitions — all in one card.</p>
  <a href="#">Next: JavaScript</a>
</article>