Skip to main content

Composing Layouts in React

4h 38m 12s
English
Paid

Unlock the potential of React by mastering the art of composing complex layouts with just a few fundamental layout primitives. In this comprehensive course, you will dive into modern CSS layout tools such as Normal Flow, Flexbox, and Grid, equipping you with the skills to create responsive and sophisticated web applications.

Course Overview

This course provides a step-by-step guide to understanding and implementing layout compositions in React. Whether you are a newcomer or an experienced developer, you'll find value in the streamlined techniques we explore.

What You Will Learn

  • The basics of Normal Flow and how it affects the arrangement of elements in a page.
  • How to leverage Flexbox for flexible and dynamic layouts.
  • Advanced techniques with CSS Grid to create complex designs effortlessly.
  • Strategies for combining these tools to create reusable layout components.

Who Should Take This Course?

This course is ideal for developers who:

  • Want to enhance their layout design skills in React applications.
  • Are looking to update their knowledge with modern CSS practices.
  • Aspire to build responsive and visually appealing web applications.

Prerequisites

Before commencing this course, we recommend that you have a basic understanding of React and CSS. Familiarity with JavaScript will be beneficial but not necessary.

Enroll Now

Join us in this journey of creating efficient and versatile layouts in React using the latest CSS techniques. Enhance your skill set and build stunning web apps that stand out.

About the Author: fullstack.io

fullstack.io thumbnail
Fullstack.io is a resource with good books on js frameworks Angular, React.js, React and Vue.js. The high quality of material presentation distinguishes Fullstack.io among many others on the Internet.

Watch Online 24 lessons

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