Skip to content
Learn Netverks

Track

bulma

Bulma

36 lessons: Flexbox columns, modifiers, components, forms, hero/sections—Bulma 1.x CDN in every playground (CSS only).

Mode
iframe_html
Practice
HTML preview sandbox
Lessons
36 units

Before you start

Bulma—a modern CSS framework built on Flexbox with simple, readable class names and no required JavaScript.

Lightweight alternative to Bootstrap when you want components without a large runtime or jQuery-era baggage.

Smaller marketing sites, internal dashboards, and projects that need quick responsive layout with minimal JS.

36 iframe lessons with Bulma 1.x CDN (CSS only), hands-on challenges, interview prep, and 108 MCQs—patterns, not copied vendor docs.

After flexbox confidence from the CSS or HTML & CSS tracks—before or alongside Bootstrap comparison.

Lesson order

Sequential — follow top to bottom

36 lessons are live in this track. Start from step 01 for the smoothest path.

  1. 01 intro Introduction to Bulma

    beginner

    Open →
  2. 02 what-is-bulma What is Bulma?

    beginner

    Open →
  3. 03 flexbox-first-mindset The flexbox-first mindset

    beginner

    Open →
  4. 04 how-bulma-works How Bulma works under the hood

    intermediate

    Open →
  5. 05 playground-workflow Playground workflow

    beginner

    Open →
  6. 06 columns-system The columns system

    beginner

    Open →
  7. 07 containers Containers and max-width

    beginner

    Open →
  8. 08 column-sizes Column sizes and nesting

    intermediate

    Open →
  9. 09 tiles-level Tiles and level

    intermediate

    Open →
  10. 10 footer-level Footer and section layout

    beginner

    Open →
  11. 11 layout-patterns Common layout patterns

    intermediate

    Open →
  12. 12 typography Typography

    beginner

    Open →
  13. 13 colors-helpers Colors and helpers

    beginner

    Open →
  14. 14 responsive-columns Responsive columns

    intermediate

    Open →
  15. 15 visibility-helpers Visibility helpers

    intermediate

    Open →
  16. 16 images-figures Images and figures

    beginner

    Open →
  17. 17 buttons Buttons and modifiers

    beginner

    Open →
  18. 18 messages Messages and notifications

    beginner

    Open →
  19. 19 cards Cards

    beginner

    Open →
  20. 20 navbar-burger Navbar and the burger menu

    intermediate

    Open →
  21. 21 menu-media Menu and media objects

    intermediate

    Open →
  22. 22 table Tables

    beginner

    Open →
  23. 23 form-structure Form structure

    intermediate

    Open →
  24. 24 form-controls Form controls

    intermediate

    Open →
  25. 25 form-states Validation and field states

    intermediate

    Open →
  26. 26 icons-inputs Icons in controls

    intermediate

    Open →
  27. 27 select-file Select and file upload

    intermediate

    Open →
  28. 28 hero Hero sections

    intermediate

    Open →
  29. 29 section-box Sections and boxes

    beginner

    Open →
  30. 30 panel-tabs Panels and tabs

    intermediate

    Open →
  31. 31 tags-breadcrumb Tags and breadcrumbs

    beginner

    Open →
  32. 32 customize-sass Customize with Sass

    advanced

    Open →
  33. 33 capstone-marketing Capstone: marketing landing page

    advanced

    Open →
  34. 34 interview-essentials Interview essentials

    advanced

    Open →
  35. 35 production-checklist Production build checklist

    advanced

    Open →
  36. 36 summary Track summary

    beginner

    Open →