Share Description
This course is a concise, intermediate-level course from Scrimba, taught by co-founder Per Harald Borgen, designed to demystify one of the most powerful and essential layout modules in modern CSS. This free tutorial, delivered through 14 interactive screencasts in just under an hour, gets straight to the point, teaching you all the key concepts of CSS Flexbox. The course is highly practical, moving quickly from theory to real-world application. You won't just learn what properties like flex-direction or justify-content do; you'll actively use them to build components. The curriculum is built around interactive exercises that solidify your knowledge and culminates in two bonus projects: building a fully responsive navbar and a clean, modern image grid. This hands-on approach, powered by Scrimba's unique interactive player, allows you to pause the lesson at any time, jump directly into the code, experiment with the properties, and master the concepts before moving on. It’s the perfect, fast-paced course for any developer who has a grasp of HTML and CSS but needs to finally master modern, one-dimensional layouts.
Topics the course covers:
This course provides a comprehensive yet rapid tour of all essential Flexbox properties and concepts, including:
- Flexbox Fundamentals: Understanding the core concept of a flex container and its items.
- The Two Axes: Mastering the main axis and the cross axis, which are fundamental to aligning content.
- Container Properties:
- flex-direction: Controlling if items are arranged in a row or a column.
- justify-content: Aligning items along the main axis (e.g., space-between, center).
- align-items: Aligning items along the cross axis.
- flex-wrap: Controlling whether items wrap to a new line.
- Item Properties:
- order: Changing the visual order of flex items.
- flex-grow: Dictating how much an item should grow relative to others.
- flex-shrink: Dictating how much an item should shrink if space is limited.
- flex-basis: Defining the default size of an item before remaining space is distributed.
- Shorthands: Using the powerful flex property to set grow, shrink, and basis in one declaration.
- Practical Projects: Applying all learned concepts to build two real-world components: a responsive navigation bar and a flexible image grid.
Benefits of opting this course:
By enrolling in this free course, you will:
- Gain a complete and practical understanding of CSS Flexbox in under an hour of highly focused, interactive learning.
- Master one of the most in-demand skills for modern frontend development.
- Learn how to build complex, responsive, and flexible layouts with a fraction of the code used in "old" CSS methods.
- Finally be able to vertically and horizontally center content with ease.
- Learn directly from Scrimba co-founder Per Harald Borgen, who is known for his simple, clear, and effective teaching style.
- Build two practical, real-world components (a navbar and an image grid) that you can analyze and use in your own future projects.
- Experience Scrimba's unique interactive platform, allowing you to learn by doing, not just by passively watching videos.
- Gain the confidence to build the flexible, responsive websites that are required in today's multi-device world.
Why take this course:
If you have ever struggled with CSS floats, position hacks, or the nightmare of trying to vertically center an element, this course is your solution. CSS Flexbox is a "must-have" skill for any serious web developer, and this course is arguably the fastest and most effective way to acquire it. Once you understand how to properly use flexible containers, you will wonder how you ever managed to build websites without this tool. This course, taught by Per Harald Borgen, is specifically designed to get you up to speed as quickly as possible. It skips the boring fluff and focuses relentlessly on the core concepts you need to be productive today. The hands-on exercises and bonus projects are not just afterthoughts; they are integral to the learning process, ensuring you can immediately apply what you've learned. In a world where every single website needs to be flexible and responsive, mastering Flexbox is no longer optional. This free, interactive, and concise course is the most efficient way to gain that mastery and elevate your CSS skills to a truly professional level.
