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

Server Side Rendering with React and Redux

Server Side Rendering with React and Redux

Sources: udemy, Stephen Grider
Go beyond the basics of React and Redux! This course will teach you to combine the ultra-popular React v16, Redux, React Router, and Express technologies to bu
8 hours 14 minutes 30 seconds
React Router v4

React Router v4

Sources: ui.dev (ex. Tyler McGinnis)
For good reason, React Router is the most popular 3rd party library in the React ecosystem. If you're using React, odds are you're also using React Router. React Router v4 intro...
6 hours 44 minutes 1 second
Responsive LLM Applications with Server-Sent Events

Responsive LLM Applications with Server-Sent Events

Sources: fullstack.io
Large Language Models (LLMs) are transforming entire industries, but their integration into user interfaces with real-time data streaming...
1 hour 18 minutes 18 seconds
React & TypeScript Chrome Extension Development [2021]

React & TypeScript Chrome Extension Development [2021]

Sources: udemy
Hi! Welcome to the comprehensive Chrome Extension Development course using modern web frameworks in 2021. This is the only course on Udemy that is focused on bu
8 hours 52 minutes 35 seconds
Testing React with Jest and Testing Library

Testing React with Jest and Testing Library

Sources: udemy
React Testing Library has become an extremely popular option for testing React, and with good reason! This detailed, comprehensive course
7 hours 41 minutes 32 seconds