Creating the MVP

Styling the Article Page

Summary

In this video, I improve the article page design to match the landing page's aesthetic. I install the Tailwind CSS typography plugin to enhance the readability of raw HTML. I modify the page layout to be responsive, removing the back button on smaller screens and adding it back on larger screens. I adjust the article element's width, padding, and typography classes to ensure good readability across different screen sizes. I update the text color and add a divider and placeholder for other articles. The goal is to create a minimal viable product (MVP) for the blog, with plans to incorporate markdown content and code highlighting in the next module.

Transcript

So in the last episode, we ended up with our landing page looking like this. Now, we didn't do any changes to our article page, which currently looks like this, and this is obviously not really gonna invite anyone to read our articles, right? So, just like with the landing page, where we had a skeleton design, this was our skeleton design from earlier, and I want to move it closer to how the landing page looks, so we have something like this. And it's not really gonna require too many changes. We have most of this in place, we just need to make sure that it's responsive, and it uses this color scheme that we created in the last episode, so everything stays more consistent in our design. Before we begin actually styling the article page, I want to grab this plugin from Tailwind that provides us with a set of prose classes that will make raw vanilla HTML look really, really nice. And this fits perfectly into our workflow, as later down the line, we will be taking markdown and converting into HTML. So, we can simply add these prose classes on an article element, and then we just render the transformed markdown inside of that article tag. So, let's go ahead and grab this npm install line right here, and then go into our resources, run npm install. Go. Next, we just need to extend our Tailwind config under the plugins, and we just say require Tailwind CSS typography. And now we can add the prose class to HTML element, and the children of that element would have some nice defaults that makes them super easy to read. Just as what we did with the homepage, we need to remove this main element, since it's now coming from the base template. And then we need to move the back button inside of the main div element here, and this now becomes relative. Container, going to send all of the contents. We're going to make it a flex container with direction column. I'm going to say item center. Flex one, so take up all of the height, and say bg base 100. If we go in here and check the screen from our mobile size screen, refresh, we can see we have not the right background color, but we still have some overflow. The color for the font is not really right, but we have this button that doesn't really fit into the flow of the screen, and it's simply because we don't have enough screen real estate. So we're going to be removing the back button on smaller screens, and then showing it on larger screens. To do that, just going to grab some code here. I'm going to update this. And the only new thing here really is that we are saying start with being invisible, and then once we get up to a medium-sized screen, become visible, and then everything else basically stay the same. So now, if we refresh the page, we can see that the button is gone, and we have a little bit easier to read color now. And if we go out of this, we can see that we have the back button as we want, right? Now, for our article element, we don't need to make too many changes. We just want to say take up all of the width on small screens, add a bit of padding, and then on larger screen size, remove the padding, and only take up four-fifths of the available width. And then we're going to use the prose classes that we get from the Tailwind plugin, and we're going to say prose on smaller screen sizes, and then when we reach a large screen size, we're going to say prose xl. And this basically just add a bit more spacing between the paragraphs and also bumps up the font size a little bit. If you jump in here and actually update, the text color is still wrong, but we have a little bit of error so the content can breathe a bit more. But let's just go in here and say text-based content so we can read it, and let me just remove the old ones and add one more so it gives a bit more of a feel of what an actual article looks like. So now you can see we can actually read the content that is on the page, right? We still have a little bit of overflow that's going to be fixed in just a second. Now, down here at the bottom, we also have this divider here. I'm going to throw this inside of the article tag. So just down at the bottom, put that in, and you can see it now adds a little bit of space. It's also keeping with the size of the content so everything looks really nice and aligned. Finally, we have the new or other articles that you can read. So let me just remove all of this, and here we are not really doing much. We are just adding the text-based content so the content is readable. We add a little bit of margin, and now you can see we have some content that actually fits onto the screen for our small mobile-sized screen here, right? And you can read it, and it aligns perfectly. So this is looking quite decent for our mobile-sized screens, but if we actually jump in here to a full-size screen, you can see we now have the back button, and we have the content taken up just enough so it's readable, and the font size is a little bit bigger. And down here, we have the other articles that's going to show up once we have more articles to show. But this is essentially what we need for our article page. Of course, we want to change the lorem ipsum text, and in the next module, we're going to be tackling actually having the markdown content ship with our binary. We're going to pass it, and we're going to make it look good and make sure our code examples is also showing up on the page with some nice highlighting and so forth. But for now, the MVP of our blog is basically finished.

Early Access

$95 $65 USD

Get access

Invoices and receipts available for easy company reimbursement