CF

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.

About the Author: Fullstack.io

Fullstack.io thumbnail

Fullstack.io is the technical book and course publisher founded by Nate Murray, Ari Lerner, and team — known for the ng-book Angular series, the React Quickly books, and the fullstack React series that anchored a generation of working developers' first deep-dive into modern JavaScript framework material. Fullstack.io has since rebranded to Newline for its newer course catalog.

The book / course catalog covers the modern JavaScript framework landscape — Angular, React, Vue, GraphQL, Node.js — at the level of comprehensive reference works rather than introductory tutorials. The Fullstack.io style is unusually rigorous about the underlying APIs and edge cases that ship projects to production.

The CourseFlix listing under this source carries over 20 Fullstack.io / Newline courses spanning that range. Material is paid; the original platform sold both per-course access and membership tiers. Courses are aimed at developers ready to move past introductory tutorials into the depth of a chosen framework.

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

Related courses

Frequently asked questions

What is Composing Layouts in React about?
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…
Who teaches this course?
It is taught by Fullstack.io. You can find more courses by this instructor on the corresponding source page.
How long is the course?
It contains 24 lessons with a total runtime of 4 hours 38 minutes. Every lesson is available to watch online at your own pace.
Is it free to watch?
It is part of CourseFlix's premium catalog. A subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch it online?
The course is available to watch online on CourseFlix at https://courseflix.net/course/composing-layouts-in-react. The page hosts every lesson with the integrated video player; no download is required.