Your cart is empty.
Keep shopping10 Days Of CSS Flexbox
5,018 students
10 Days Of CSS Flexbox
Master Flexbox in 10 days with classic layouts and creative projects — curated in one structured course, no frameworks.
Created byJoshan Grewal
Last updated 4/2026
English
What you'll learn
- Build structured layouts like forms, navigation menus and keyboards using Flexbox
- Design creative UIs including multi-colored grids and triangle patterns with Flexbox positioning.
- Understand and apply key Flexbox properties: justify-content, align-items, flex-wrap, flex and more.
- Create responsive designs using Flexbox in real-world layouts including a webpage and a masonry grid.
- Use project-based learning to master layout techniques over 10 focused, hands-on challenges.
- Improve layout problem-solving and strengthen your ability to think in Flexbox for modern UI development.
Explore related topics
Course content
11 sections • 33 lectures • 2h 51m total length
Requirements
- Students should have a good understanding of how to setup and create basic HTML documents.
- Students should have a good understanding of generic CSS.
- A web browser is required. We will use Google Chrome and will occasionally make use of the Chrome Dev Tools.
- A coding editor is required. We will use VS Code with the Live Server plugin installed.
Description
This course is created and taught by the instructor. In this updated version, AI tools were used in a limited capacity to help refine introduction lecture articles. All explanations, concepts and teaching are original and based on the instructor’s own understanding and experience.
If you’re looking to build practical, professional layouts using CSS Flexbox, you’re in the right place. This course is designed for learners who have a basic familiarity with Flexbox concepts and are ready to apply them through hands-on projects — no advanced experience required.
Rather than teaching every Flexbox property in isolation, this course focuses on applied layout thinking. Each project is inspired by real-world designs, showing how Flexbox can be used to recreate them in a clean, efficient way.
What You'll Build:
Day 1: Form layout with equal-width label and input columns
Day 2: Multi-colored centered box layout
Day 3: Triangle of colored circles layout
Day 4: Symmetrical bricks layout
Day 5: Old style mobile layout
Day 6: Keyboard-style layout
Day 7: Multi-colored steps layout
Day 8: Responsive masonry grid layout
Day 9: Responsive webpage design
Day 10: Responsive dropdown navigation menu
Some layouts are simple and straightforward, while others are more involved but all are designed to deepen your understanding of how Flexbox works in practical, everyday design scenarios. The course uses only HTML and CSS, with no frameworks or JavaScript required, making it perfect for focusing purely on core, practical layout skills.
By the end of the course, you’ll have a solid understanding of Flexbox and the ability to confidently design your own flexible layouts — from structured forms to creative grids and navigation menus — without relying on frameworks.
Enroll now and start building with CSS Flexbox.
Who this course is for:
- Anyone looking to feel confident in designing webpages using the CSS Flexbox layout model
- Anyone looking to see how CSS Flexbox can be used given different design layouts
- Anyone that may have theoretical knowledge of CSS Flexbox and would now like to put this into practice by building various practical projects