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
0:00
/ #1: Welcome to Composing Layouts in React
All Course Lessons (24)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 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 subscriptionComments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
Next.JS with Sanity CMS - Serverless Blog App (w/ Vercel)
Sources: udemy
We will start with integration of a very clean application layout I have prepared for you. We will follow latest practices of React and Next JS, this means we w
13 hours 5 minutes 9 seconds
Next.js - The Full Course
Sources: fireship.io
Next.js - The Full Course provides a in-depth look into the Next.js App Router introduced in version 13.2. It puts React Server Components into practice by buil
1 hour 14 minutes 14 seconds
Epic React (Epic React Pro)
Sources: Kent C. Dodds
Building React applications demands that you make expert decisions before you write the first line of code. You're responsible for building a cohesive, maintainable code-base th...
27 hours 57 minutes 10 seconds
React Simplified - Bonus Project
Sources: webdevsimplified.com
What if I told you that you could build this advanced job board project by the end of this course entirely on your own? That's what this entire section of...
5 hours 8 minutes 8 seconds