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 view all books →
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
Explore new Communities Join our Discord Server What Our Students Say
Tutorials
Pricing

Welcome to

Composing Layouts in React

Module 1

Introduction

1 Lesson 2 Minutes

01Welcome to Composing Layouts in React
Sneak Peek00:02:30

Module 2

Composable Layouts

6 Lessons 37 Minutes

01CSS in the Age of Components
Sneak Peek00:02:14
02What is Layout Composition? A React Layout Primitives Guide
Sneak Peek00:05:33
03Encapsulated CSS - How to Apply CSS in a Composable Way
Sneak Peek00:08:53
04Normal Document Flow in HTML, CSS, and React
Sneak Peek00:08:42
05CSS Grid vs Flexbox for Composable Layouts
Sneak Peek00:06:27
06How to Add a CSS Reset to Remove Default Browser Style
Sneak Peek00:05:40

Module 3

Layout Primitives - The Spacers

7 Lessons1 Hours 38 Minutes

01What are Layout Spacers?
Sneak Peek00:02:02
02How to Build a Stacked Component Layout in React
Sneak Peek00:17:07
03How to Build a Split Pane Layout in React
Sneak Peek00:14:21
04How to Build React Grid Layouts With Custom Column Numbers
Sneak Peek00:18:25
05How to Build a React Responsive Grid Layout
Sneak Peek00:11:04
06How to Build Responsive React Text Elements With InlineCluster
Sneak Peek00:12:27
07How to Add Inline Styling to React Components
Sneak Peek00:23:22

Module 4

Layout Primitives - The Wrappers

6 Lessons1 Hours 16 Minutes

01Introduction to Layout Wrapper Primitives
Sneak Peek00:02:39
02How to Build a Pricing Page Widget in React With PadBox
Sneak Peek00:13:44
03Automatically Center Text DIVs with React Center Component
Sneak Peek00:14:27
04Resize Images And Maintain Aspect Ratio in React and CSS
Sneak Peek00:19:59
05How to Vertically Center a DIV in React With CSS
Sneak Peek00:17:14
06How to Build Accessible Navigation Divs in React
Sneak Peek00:08:54

Module 5

Composing Layouts in Practice

5 Lessons1 Hours 16 Minutes

01Introduction to The Settings Pages
Sneak Peek00:01:32
02How to Build a React Navbar With a Menu and Header
Sneak Peek00:24:10
03How to Build a React Sidebar Menu
Sneak Peek00:16:17
04How to Build a Profile Settings Page in React
Sneak Peek00:20:05
05How to Build a Privacy Page with Toggle Buttons in React
Sneak Peek00:14:05

Module 6

Bonus Lessons

3 Lessons

Next Introduction:

Welcome to Composing Layouts in React