Composing Layouts in React

4h 38m 12s
English
Paid

Course description

In this course we show you how to build complex layouts in React by composing just a few foundational layout primitives. Along the way you will learn modern CSS Layout tools like Normal Flow, Flexbox, and Grid.

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 24 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Welcome to Composing Layouts in React

All Course Lessons (24)

#Lesson TitleDurationAccess
1
Welcome to Composing Layouts in React Demo
02:31
2
CSS In The Age of Components
02:15
3
Composing Layouts
05:34
4
Encapsulated CSS
08:54
5
Normal Flow as Composable Layouts
08:43
6
CSS Flexbox and CSS Grid as Composable Layouts
06:28
7
A CSS Reset For Composable Layouts
05:41
8
Introduction to layout spacers
02:03
9
The Stack Component
17:08
10
The Split Component
14:22
11
Columns and Column Component
18:26
12
The Grid Component
11:05
13
InlineCluster Component
12:28
14
Inline Component
23:23
15
Introduction to Layout Wrapper Primitives
02:40
16
The PadBox Component
13:45
17
The Center Component
14:28
18
The Frame Component
20:00
19
The Cover Component
17:15
20
The Hero Section Revisited
08:55
21
Introduction to The Settings Pages
01:33
22
The Menu and Header
24:11
23
The Main and SideBar
16:18
24
The Profile Pane
20:06

Unlock unlimited learning

Get instant access to all 23 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Redux

Redux

Sources: ui.dev (ex. Tyler McGinnis)
There's no better strategy for learning a new technology than building your own version of it. In this course, we'll take that to the extreme. First, you'll start off by buildin...
7 hours 13 minutes 23 seconds
Data fetching with React Server Components

Data fetching with React Server Components

Sources: Build UI
Since its release 10 years ago, React's core APIs have remained surprisingly stable. The original component boundary that supports state and lifecycle methods still works to thi...
1 hour 15 minutes 56 seconds
Magic UI Pro

Magic UI Pro

Sources: Dillion Verma
Magic UI Pro is a platform for creating modern, visually appealing landing pages with minimal effort. It offers over 50 pre-designed...
AWS AppSync & Amplify with React & GraphQL - Complete Guide

AWS AppSync & Amplify with React & GraphQL - Complete Guide

Sources: udemy
Deploy a Serverless GraphQL & React JS based Javascript application in the AWS Cloud using AWS AppSync and AWS Amplify. AWS AppSync & AWS Amplify is the BEST wa
11 hours 11 minutes 36 seconds
Beginner Tailwind

Beginner Tailwind

Sources: Chris Sev
Tailwind makes writing CSS easier and lets us customize our designs faster than any other CSS framework. If you want a CSS framework that has pre-built components, then Tailwind...
9 hours 33 minutes 19 seconds