Lessons
view all ⭢
lesson
CSS Grid vs Flexbox for Composable LayoutsComposing Layouts in ReactYou will learn the basics of CSS Flexbox and CSS Grid, especially which properties conform to the Encapsulated CSS principles and which ones do not.
lesson
How to Vertically Center a DIV in React With CSSComposing Layouts in ReactIn this lesson, we will learn how to build the Cover primitive, which will vertically center its children and allow you to inject a top or a bottom section around it.
lesson
Resize Images And Maintain Aspect Ratio in React and CSSComposing Layouts in ReactIn this lesson, we will build the Frame primitive, which frames out a visual media, like an image or video, and forces it into the aspect ratio needed for the design without distorting the image.
lesson
Automatically Center Text DIVs with React Center ComponentComposing Layouts in ReactIn this lesson, we will be creating a Center layout primitive that centers itself and its children.
lesson
How to Build a Pricing Page Widget in React With PadBoxComposing Layouts in ReactIn this lesson, you will learn how to build the PadBox primitive and use it in a Pricing Plan component.
lesson
Introduction to Layout Wrapper PrimitivesComposing Layouts in ReactIntroduction to layout wrapper primitives
lesson
How to Build a React Responsive Grid LayoutComposing Layouts in ReactBuilding an inherently responsive grid of items has been reduced down into a single line of CSS. In this lesson, you will learn how to build the Grid primitive that easily lets us achieve this layout.
lesson
How to Build React Grid Layouts With Custom Column NumbersComposing Layouts in ReactHaving a column-based grid system to lay our elements out on is very useful, which is why Bootstrap and other CSS frameworks are built on that model. In this lesson, you will learn how to build the Columns primitive and its helper the Column to build your custom column layout.