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

Watch Online Composing Layouts in React

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

Flexbox Simplified

Flexbox Simplified

Sources: kevin powell
Flexbox is a wonderful tool that opens up the world of responsive layouts, but it can be hard to predict exactly what's going to happen when we use it, and it's full of sometime...
4 hours 41 minutes 57 seconds
React & TypeScript - The Practical Guide

React & TypeScript - The Practical Guide

Sources: Academind Pro
TypeScript is an amazing technology that helps developers write better code with less errors - simply because it let's you catch & fix type-related errors whilst writing the cod...
7 hours 22 minutes 54 seconds
Build a Realtime App with React Hooks and GraphQL

Build a Realtime App with React Hooks and GraphQL

Sources: udemy
Master the latest and greatest features in React within the context of a full-stack, real-world app. A realtime, full-stack React app from scratch with a GraphQL Server (Apollo ...
4 hours 32 minutes 39 seconds
React Fundamentals

React Fundamentals

Sources: ui.dev (ex. Tyler McGinnis)
If you're serious about learning React, there's no better place to do it. Originally launched in 2016, this course has been taken by tens of thousands of developers and maintain...
4 hours 36 minutes 46 seconds