Introduction to The Settings Pages

Introduction to settings pages

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the Composing Layouts in React course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to Composing Layouts in React, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course Composing Layouts in React

  • [00:00 - 00:11] What's up guys? Travis here with another lesson in composing layouts in React. In this module, we'll be composing layouts in practice, specifically building a settings page.

    [00:12 - 00:26] So far we have built many simple layouts and page sections, but we haven't yet tackled the whole page. In this module, I'm going to take you through how I build a page from a design image or a PDF.

    [00:27 - 00:36] We're going to try to do this by imitating the design I found on the web. Recreating a web page from scratch is a great way to level up your abilities.

    [00:37 - 00:46] This is something I recommend people do and something I try to do on a regular basis. The page we're going to build is this settings page.

    [00:47 - 01:05] Now this image is an image I borrowed from Telwindui.com actually, but you can find images of web pages or designs all over the web. In fact, you can even just take a screenshot of a web page and just try to recreate it.

    [01:06 - 01:17] Now unlike the previous modules, I'm not going to focus solely on layout this time. I'm going to imitate something much more cultured, what it's really like to build a web page from scratch.

    [01:18 - 01:31] Just like in the Hero Revisited lesson from the previous module, I'm going to be using only the Bedrock Layout Primitive Library. Let's jump right in and build this setting page.