Building a News Site - Layout

[00:00 - 00:08] In the upcoming lessons of the course, you will turn what you've learned about typography into practice and you're gonna build a new site. You can now see the site on the screen.

[00:09 - 00:15] The first thing you need to do is to build the site layout. Right now, your site should look similar to this.

[00:16 - 00:29] Make sure your terminal is running the app. And if your site doesn't look like this, or is unable to run, try to follow the previous models steps again, and if that doesn't work, feel free to reach out on the discord and I'll help you.

[00:30 - 00:34] Notice the different site backgrounds on the completed site. Let's build it.

[00:35 - 00:42] Navigate to app/layout.tsx. Change the body class name from BG background to BG sky 50.

[00:43 - 00:54] Navigate to localhost 3000, and you should notice that the BG color is changed. Now go back to the layout file and locate the content container element.

[00:55 - 01:12] Add to it the BG background and the margin class to it which is md:mx-16 ‘x’ means horizontal. Going back to the site, you've now successfully implemented the auto background .

[01:13 - 01:29] Notice that you've used the MD modifier to apply the MX16 class name. On smaller screens like mobile phones, you'd want the inner container to go full width and hide the auto background.

[01:30 - 01:41] Like this. Changing styles based on the screen size is possible with media queries, and tailwind exposes you break points to apply some styles based on the screen size.

[01:42 - 01:53] When you use the MD class name segment, it means that the styles will only be applied for screens larger than the defined MD size. Now let's build a header.

[01:54 - 02:07] Open the app components/siteheader files, and start by replacing the content of the site header with a clean component. Simply clear anything that's inside the header.

[02:08 - 02:14] Perfect. Now import the site config and the h1 component.

[02:15 - 02:31] The h1 component is in UI/typography, and site config is in config. Perfect.

[02:32 - 02:54] Now render the name property from the site config object inside the h1. Your site headers should now show the Newsly name inside of it.

[02:55 - 03:04] You'd want to add a dot after it as well. You can also add a dot after it.

[03:05 - 03:30] You can also add a dot after it as well. And the bottom border.

[03:31 - 03:45] You don't want to change the h1 component globally for the old site, but just for the specific header logo use case. As I've mentioned in the second module, you can use the cn function to combine multiple class names into a single element.

[03:46 - 03:52] So you'd need to allow the h1 component to receive class name as a prop. The current implementation does not allow it.

[03:53 - 04:06] Go to the typography.tsx tfile and import the cn function from lib/cn. Now add an optional class name prop.

[04:07 - 04:23] The question mark after prop name means that it's optional. Pass the cn component as the value of the class name attribute.

[04:24 - 04:32] Great. Now you can style the h1 component from the other.

[04:33 - 04:50] Let's add it in upper class, upper case class name. Change the text color to text orange 700 and make it even bigger for larger screen.

[04:51 - 04:55] We'll make it an LG midi query. We also want to make it a link.

[04:56 - 05:24] So import the next JS link and render it inside h1 component with a link to the main page. The header should now look like this.

[05:25 - 05:28] In the next lesson, you're going to add the categories in navigation.