Okay, let's dive into the meat and potatoes of this design. The content feed. We are going to move our attention away from the login screen and into this feed layout. So I have the Figma file here where I can inspect things, but we also have the prototype, which is quite nice to look at because the content is actually scrolling. And so I'm going to flip between both as we implement it. Just before we start in the previous lesson,

And so I'm going to flip between both as we implement it. Just before we start in the previous lesson, we've talked about the prettier plugin that sold tailwind classes and I've realized I haven't set that up in the project. So because we're going to change HTML files for this new page design, I wanna quickly set up this prettier plugin. So let me install prettier and prettier-plugin-tailwindcss. Alright, and to configure it, we're going to need

So let me install prettier and prettier-plugin-tailwindcss. Alright, and to configure it, we're going to need to create a .prettierrc file and we'll keep all the defaults. But here I need to add a plugins array where I will pass the prettier-plugin-tailwindcss. So that should have the prettier plugin all set up. And so when I save the index.html file here, you should see the classes reorder in 3, 2, 1. Boom. There we go. So now you can see for example,

Boom. There we go. So now you can see for example, the responsive breakpoints here are at the end. So if I was to take this md:w-68 and I was putting it at the start of the class string, when I save, it will jump right back at the end. So the plugin is working. Alright. And with that out of the way, we are going to start a new HTML file for the feed. And luckily the feed dev server supports

to start a new HTML file for the feed. And luckily the feed dev server supports multiple files by default. So let's go and create that and start building. I'm actually going to duplicate the index.html file and rename this one, feed.html. And so we're going to keep the document head and the body tag and basically we can delete everything else that is inside like so.

and basically we can delete everything else that is inside like so. And let's just have a h1 that says feed as a placeholder. And so now if we navigate to the feed URL, we're going to load that new HTML page. Perfect. But instead of manually navigating to the feed page, let's make these buttons go to the feed page. So from index.html, let's go find uh, action buttons. So we have one here, two, three, and four.

So from index.html, let's go find uh, action buttons. So we have one here, two, three, and four. So we will make all these four buttons go to /feed. And so now from the homepage we can speed run the login and if we click on any of these buttons, it'll take us to the feed page. Excellent. We are now in a great shape to get cracking with the feed design. Okay, so at first glance it's pretty obvious that the design has three columns.

Okay, so at first glance it's pretty obvious that the design has three columns. The navigation here, the main column, and then the sidebar. And like I said, we have this prototype which makes it pretty clear that the main column is going to be scrolling. So one thing I want you to notice is here I have the design set to fit to the width of the display, but if I was to go to actual size a hundred percent, look at what happens. We don't have enough space on this recording resolution.

to actual size a hundred percent, look at what happens. We don't have enough space on this recording resolution that I have to show the three columns. So once again, we're going to take the proportions with a grain of salt and I'm going to try to make a design that fits really nicely within the 1280 pixels resolution and then we can do some responsive adjustments. Okay, with all that said, let's try in this lesson to focus on getting the main three column layout going. So I want a sidebar on the left, sidebar on the right.

to focus on getting the main three column layout going. So I want a sidebar on the left, sidebar on the right and then the main column that can scroll in the middle. So when duplicating the HTML page, I kept the body tag and I'm not quite sure we need to keep all the classes and actually I'm going to remove all of them so that we can start fresh. I will just keep the background and textColor because these I know that I want. So here for the three column layouts,

because these I know that I want. So here for the three column layouts, the first decision we need to make is grid or flex. Uh, it doesn't really matter, although here I'm going to select flex. And the reason is at certain break points we are going to hide certain elements like the sidebar. Uh, and so I don't want to have to change the grid columns, I just want the content to use the full width based on how many elements there are.

I just want the content to use the full width based on how many elements there are. And sometimes flex makes it a bit easier. Alright, so a flex container for the three different columns is going to be the body directly. So we can set this to flex and let's give it the generous gap of 16 to begin with. And so inside of this we are going to have three columns, the navigation, the content, and the sidebar.

And so inside of this we are going to have three columns, the navigation, the content, and the sidebar. So for the navigation, even if it's on the left, I will use a header tag. And here let's have a p tag that says navigation for now the content tag is going to be a main tag. And here let's have a little bit more copy because it's going to stretch. So I'll have a full paragraph as a placeholder. And for the sidebar here,

So I'll have a full paragraph as a placeholder. And for the sidebar here, I think I can use an A side element. And the text here will say sidebar. Alright, and out of the box you can see that we off to a good start because we have a long paragraph here. It has used the majority of the space and then the navigation and sidebar just use their content length. Uh, and this is something Flexbox is pretty

and sidebar just use their content length. Uh, and this is something Flexbox is pretty good at out of the box. So one thing I like to do when prototyping designs is to use colored boxes to try to get the shapes into place. So for example, we're going to give a light yellow background to our sidebar so we can see more of the space that it should occupy. Alright, so here aside class equals bg. Let's go with the pixelHighlightColor at 50% opacity.

Alright, so here class equals bg. Let's go with the pixel highlight color at 50% opacity like we've done before. Alright? And we are going to want to give it a little bit more space than just the word sidebar. So let's give it a width of 72. So you can see it's obviously not respecting the 72 width and it's because the overwhelming paragraph here is taking as much space as it can.

and it's because the overwhelming paragraph here is taking as much space as it can. And so we need to tell the sidebar to never shrink, never give in. And we can do this by setting the shrink-0 class to basically tell it do not give any inch of the space that you want. And with that class in place, we now have a sidebar that's using the w-72 width. Okay, let's do the same treatment for the navigation header.

that's using the W 72 width. Okay, let's do the same treatment for the navigation header. So here I will choose the color of bg-pixel-light at 50% opacity. Okay, nice. And let's give it a width as well. This can be a little bit smaller W 40, we'll probably do. And again, it's being scared of the big scary paragraph here, but we can give it some confidence with shrink-0. There you go. Much better. Okay, that's a pretty good start.

but we can give it some confidence with shrink-zero. There you go. Much better. Okay, that's a pretty good start. The next thing that's bothering me is we probably don't want the columns to go right to the edges. We want some gutter spacing. And so maybe on the body tag we could give a padding level four to the entire thing. And yeah, that's much nicer. Now you will see that there is a problem with this once we start to have the scrolling column in the middle.

that there is a problem with this once we start to have the scrolling column in the middle because it'll disappear behind the padding. But let's keep it as is for now because it's going to show that problem that's quite common. And you know what, right now might actually be a good time to try to set up this scrolling container. So I'll duplicate this paragraph a bunch of times, let's select it and clone it quite a few times. This is definitely enough times

let's select it and clone it quite a few times. This is definitely enough times to cover the whole viewport height and then some. And to just make it look a tiny bit nicer here, I'll have a class of flex flex-col and gap-4 just to create some spacing between each paragraph. Okay, so now we have enough content to bleed out of the viewport and you can already see that the navigation sidebar are expanding

of the viewport and you can already see that the navigation inside bar are expanding below the a hundred percent viewport height. And when I scroll, all three of the columns are sliding basically the whole HTML page. The whole document is scrolling down, um, until we reach the end. And so to be able to stop that phenomenon, if I scroll back to the top, we need to tell a parent element that we want to stop the scrolling at this position here.

to the top, we need to tell a parent element that we want to stop the scrolling at this position here and basically clip out the rest. And then we can tell this container here to have a scrolling container inside this available space. So on the body tag, I will add the class of hdvh just like we had in the previous screen. And I'm going to aggressively clip out everything that bleeds out of this with overflow: clip as once again you've seen in the previous page.

that bleeds out of this with overflow clip as once again you've seen in the previous page. So now as a result you can see that our sidebars are stopping at the end of the viewport, but the problem is I cannot scroll any of the text here and anything below that is lost. Luckily this is pretty easy to fix. So on our main tag, which is our main content area, I can say overflow-y for vertical and we'll set it to auto, not scroll, but auto.

I can say overflow-y for vertical and we'll set it to auto, not scroll, but auto. So it'll only show a scroll bar if it needs to. And now check what happens if I try to scroll down. Hey, hey, very cool. So we have our scrolling column in the middle and our fixed sidebars that are not expanding beyond the 100vh units. And so no matter how tall or skinny or whatever the document is, it'll always scroll.

And so no matter how tall or skinny or whatever the document is, it'll always scroll accordingly like we want. This is great. Okay, great. Might be a bit of a stretch. As you can see it's not perfect yet, but hey, it works. But did you notice the problem that I talked about recently? Watch when I scroll, what happens? You can see that the text disappears right at the top and then also at the bottom it's disappearing or it's appearing after the padding.

and then also at the bottom it's disappearing or it's appearing after the padding. And I don't think that we necessarily want this. Matter of fact, in the prototype you can see that the text is disappearing right at the top edge and also appearing right at the bottom edge. So let's go and fix that. So instead of having padding all around, we only going to have the horizontal padding. So on the body tag I will change p-4

to have the horizontal padding. So on the body tag I will change p-4 to px-4. Although we could apply all of the padding on the individual columns, but I think it kind make sense to have a gutter on the body tag that's gonna make sure that nothing ever touches the edges no matter what. Okay, so now we can scroll across the full spectrum, top to bottom, but obviously our sidebars are touching the

Okay, so now we can scroll across the full spectrum, top to bottom, but obviously our sidebars are touching the top and bottom edges. So we're going to need to compensate for this vertical padding both on the header class py-4. And if I collapse this here on the side here, py-4 as well. And haha, I made a mistake, although if it didn't have a background

And haha, I made a mistake, although if it didn't have a background color, it wouldn't matter. But let's use margins instead of padding. So the background color also doesn't touch the edges just in case. And so both py fours, he can become my fours. Okay. And you can see that we probably want to also add some vertical padding on the main column because right now it's gonna scroll right to the bottom edge.

to also add some vertical padding on the main column because right now it's gonna scroll right to the bottom edge and start right at the top edge. So in the main class he, we can also have this time, not MY, and I'm gonna show you why. If I had MY four, we would recreate these disappearing bands at the top and the bottom, which we've done all the work to avoid. So here we actually want to use PY instead so that it's scrolls all the way through.

So here we actually want to use PY instead so that it's scrolls all the way through. I think this is looking good and I think we have a starting foundation to start implementing the design. We will most definitely get back to this and do some adjustments, responsive tweaks, and maybe overhauls. But as a starting point, I'm pretty happy with this. So let's start, and I think we're gonna start

But as a starting point, I'm pretty happy with this. So let's start, and I think we're gonna start by building the sidebar next.