Learn
Learn
Learn web development from expert teachers. Build real projects, join our community, and accelerate your career
Get Started
Fullstack Rust Fullstack Node.js Fullstack D3 Fullstack React Fullstack React with TypeScript more →
The newline Guide to Building Your First GraphQL Server with Node and TypeScript
In this course, we'll show you how to create your first GraphQL server with Node.js and TypeScript
Enroll for free
Teach
Teach
Share your knowledge with others, earn money, and help people with their career
Apply Now
Apply To Teach A Course What Our Teachers Say
Amelia Wattenberger
Author of Fullstack D3
"Writing Fullstack D3 was a thoroughly enjoyable, fun process.

The writing was over before I knew it, and we've sold way more copies than I expected! Plus, the compliments from my peers have been really amazing."
Community
Community
Get help with programming projects, find collaborators, and make friends
Join Now
Join our Discord Server What Our Students Say
Tutorials

This video is available to students only

Introduction to Layout Wrapper Primitives

Introduction to layout wrapper primitives

This page is a preview of Composing Layouts in React

Previous Lesson:

How to Add Inline Styling to React Components

Next Lesson:

How to Build a Pricing Page Widget in React With PadBox

Start a new discussion. All notification go to the author.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Composing Layouts in React

Module 1: Introduction

Introduction:

Start Here

Introduction: (2:30)

Welcome to Composing Layouts in React

Module 2: Composable Layouts

Lesson 1: (2:14)

CSS in the Age of Components

Lesson 2: (5:33)

What is Layout Composition? A React Layout Primitives Guide

Lesson 3: (8:53)

Encapsulated CSS - How to Apply CSS in a Composable Way

Lesson 4: (8:42)

Normal Document Flow in HTML, CSS, and React

Lesson 5: (6:27)

CSS Grid vs Flexbox for Composable Layouts

Lesson 6: (5:40)

How to Add a CSS Reset to Remove Default Browser Style

Module 3: Layout Primitives - The Spacers

Lesson 1: (2:02)

What are Layout Spacers?

Lesson 2: (17:07)

How to Build a Stacked Component Layout in React

Lesson 3: (14:21)

How to Build a Split Pane Layout in React

Lesson 4: (18:25)

How to Build React Grid Layouts With Custom Column Numbers

Lesson 5: (11:04)

How to Build a React Responsive Grid Layout

Lesson 6: (12:27)

How to Build Responsive React Text Elements With InlineCluster

Lesson 7: (23:22)

How to Add Inline Styling to React Components

Module 4: Layout Primitives - The Wrappers

Lesson 1: (2:39)

Introduction to Layout Wrapper Primitives

Lesson 2: (13:44)

How to Build a Pricing Page Widget in React With PadBox

Lesson 3: (14:27)

Automatically Center Text DIVs with React Center Component

Lesson 4: (19:59)

Resize Images And Maintain Aspect Ratio in React and CSS

Lesson 5: (17:14)

How to Vertically Center a DIV in React With CSS

Lesson 6: (8:54)

How to Build Accessible Navigation Divs in React

Module 5: Composing Layouts in Practice

Lesson 1: (1:32)

Introduction to The Settings Pages

Lesson 2: (24:10)

How to Build a React Navbar With a Menu and Header

Lesson 3: (16:17)

How to Build a React Sidebar Menu

Lesson 4: (20:05)

How to Build a Profile Settings Page in React

Lesson 5: (14:05)

How to Build a Privacy Page with Toggle Buttons in React

Introduction to Layout Wrapper Primitives