Styling the Landing Page

Summary

In this video, I demonstrate how to enhance a web application's UI using Tailwind CSS. I focus on creating a centered navigation bar, improving color contrast, and making the design responsive. I break down the process of styling components, extending Tailwind's theme, and creating reusable components for different sections like the hero, social links, and article cards. By using Tailwind's utility classes and responsive modifiers, I show how to create a clean, mobile-friendly design that looks good on various screen sizes.

Transcript

All right, so this is what we have now, or at least this is what our design for the foundation or the skeleton UI was meant to look like, right? And now I want to move us a little bit closer to what you see here. So I want to have a centered nav bar, I want to make the profile picture stand out a little bit more, the social stand out, and then also our article cards have some more contrast. So we have this these black sides and then a little more grayish center, so that the elements on the page pop out a little bit more. Now, Tailwind offers a wide range of color options. However, it's often easier to think in terms of what purpose a color serves, and since we can easily extend, change, modify our Tailwind config, I often find myself extending this theme here. So I'm just gonna grab the theme I use for golangblogpost.com, and you can see all of these colors have a name, so now you know if you want something to be the primary, the primary focus, or the secondary focus, or you want to just add a little bit of extra colors or something, you would use some of these options here, right? And we have different kinds of base classes that we can use for background colors. And the great thing about this is that if you don't like the color theme that I have, if you want to change, this is a dark color theme, so if you want to change it to a white color theme, you just change the hex values of these classes, right? And then you'll have a more personalized feel to your blog. Next, we need to make a few changes to our base template. And we want to make a few changes here, so that we have a bit more consistency across all of our pages, but also so that we have a solid foundation from which we can build a responsive web application. And as we saw in our design, all of our pages have this outer edge that has a specific color, which is going to be our bg-base 300. Then we also need to add overflow x-hidden, so that if we have any overflow content on the x-axis, we hide that, so that we don't see any scroll bars there. Next, I want to wrap all of the children in a main element that has flex 1 and width full, so that we take up all of the available height, but also all of the available width. Now, Temple makes it super easy to make things into components, and we have this navigation bar here, that we also had changed in the new design. So, let's just make this into a component and say TempleNavigation. There we go. Now, the design for this was like a little box with the center of the page right at the top. So, to actually do that, we need to change the header class to be a flex container, and then have bg-base 300, and then have a width of full. Our div element will then again also have the bg-base, but bg-base, I can't spell, 100. It's going to be a container that's going to be centered, and then we also want to say flex and justify center, so that our nav element or nav bar actually is in the center. We also remove this little logo or name here. We don't need that for now. Finally, I also want to make a few changes to how our nav element actually looks, and to do that, we want to say font-semi-bold. We're going to put the text down a little bit, and then we're going to say text-based-content, and then we still want to have spacing on the margin, on the x-axis. We want to hover on the line to give a little bit more visual confirmation that you are hovering on a link that you can press. We're going to say hover text-based-content, and then Telo has this little helper class here, so we can modify the opacity so that whenever we hover, it's going to go a little bit down in opacity, so it makes it very clear that we're hovering an element. We can just repeat that for articles, just like this, and then this one is going to be about... It's going to be a little long right now, so let's break it up a bit. There we go. Finally, we just need to add a little bit of styling to our nav element. It's going to have some margin top, it's going to have a little bit of padding, it's going to be rounded, border and border-color will be our base-content, and then the background color will be bg-base-300 to give some contrast, and then we finally set it to w-fit so that the nav element only takes up as much space as it needs to fit all of the links that we put inside of it, and with that in place, we can simply just include it in here. Navigation, go, and now if we go and actually look at our page, we should see quite a few changes. So we have this dark area here where we can sort of see there are some behind it. We're going to fix that in just a second, but we can see we have our nav bar now nicely centered. We have the bar contrast out in the sides here, but remember that Tailwind is mobile first, so we actually need to start from a mobile screen and then start from there. We can see our nav bar is still looking good on the screen size, so let's tackle the rest of this page now so that we can actually see the content on the page. Let's start by removing the main element since this now comes from our base template, and then I want to add some color to our main div here so we have some contrast with the sides, and then make sure that it also has the full width available. Next up, I want to take this section right here and turn it into sort of a hero section, and to do that I'm going to copy paste a little bit of code. There's nothing really new going on here. I'm just grabbing the image from my own personal blog here and putting some styling, putting some of the classes that we made from a color scheme. So we go in now and refresh. We can see that we have some text that we can actually read now. We are using our base content text and also we're using lorem ipsum text, which is really nice to use as a placeholder until you have the real text that you want to put on the website. Next up, let's update this little section right here with our socials. Of course, you need to update this with the proper link to your account, and we have a bit of an error here. Of course, I need to close it like this, and now we also have some better-looking social links. Finally, we need to also update this section with our latest post. I'm just going to replace all of this and wrap all of the article cards in a div. Of course, we can repeat this one more time so that we can still go to all of our dummy article pages here. So let me just update all of these, two seconds, and number five, and we are done. Now, if I save this and go in here again, we actually have a good-looking page now with some nice colors and some nice contrast, right? And again, this is just reusing that color scheme that we made, so there's nothing really new going on here. We are simply just styling out the page using all of our utility classes to make sure that the page looks good on mobile, because if we go in now and say like this, we can see that the cards are a little bit too small, right? So let's just handle that now. To make the design look good on a larger screen, we actually don't need to make too many changes. We just need to change some of our width parameters and maybe bump the font size of some of the elements. So this header subheader section here was a little bit too wide, so we can add this md modifier and say that we only want to use half of the available width. And the same we can do down here, give the social section a little bit more space. So say we're going to say width 96 after we hit the medium size, and we're also going to say please use text as m once we are past the medium breakpoint. And finally, our article cards also look a little bit cramped, and we're going to add two modifiers. We're going to add one for the medium and say please use width 96, and then once we hit larger screen sizes, we're going to say please use two thirds of the available width. If you go in here again and refresh, you can see now our header and subheader section looks a little bit better. Our first article card at least has a little bit more space, a little bit more room for text. So as we saw with our navigation component, it's super easy to break our elements into smaller components, and instead of me repeating myself again for all of these cards, let's put things into components so everything becomes a little bit more readable and a little bit more manageable. We have three sections or three parts of this homepage view that would make sense to turn into components. We have the hero section, we have the social sections, and then we have the article cards, right? And the first two, the hero section and the social section, is going to be really straightforward. We just extract them into template components, grab them, and create a component called hero, and then create one called socials. And then we just include them down here. And if we go in and refresh our page, we should see no changes, which is what we expect. Now for these article cards down here, we need to accept some dynamic data or some parameters. So we just create article cards, and then we create three parameters. We're going to say title, excerpt, and href, and those are all going to be strings. For the title and the excerpt, we can just include them in brackets, and we are good to go. Let me just update here. It's going to be excerpt, excerpt, and now for the links, we actually need to use a temple function called save URL, which just sanitizes and protects us against some security vulnerabilities. So if we don't add this title, it will yell at us, saying you need to use save URL. And also update it down here. So now we have a bit more of our code we use, and we can simply go in and update all of our card components, and I have just cheated a little bit. I have the finished product here, and if we go in and refresh our page now, you can see that we have all of our article cards actually looking quite good now. And if we look back to our home page, we can see it's much cleaner, and it's much more easy to reason about and see what is actually going on compared to before. So this is how you can start to create really maintainable views and sections, and we would down the line simply just pass articles' data down to the home page component and then generate these article cards from there. But for now, this is all we need for our home page component.