Current section: Styling 7 exercises

Intro to Styling


00:00 Alright, styling. It's going to be awesome. We're going to be learning all about how to link resources onto our page. Not just styles, also favicon, but you can actually use the same approach for linking a bunch of different kinds of resources as well. And so the basic

00:15 idea with HTML to link resources onto the page is by using the link tag. You can read all about the link tag on the Mozilla development network, the MDN web docs, and there are actually a lot of things that you can do with the link tag. So grab yourself a cup of hot chocolate

00:34 or something and sit down and read through this. It will be quite useful to you. But this is how you get styles onto the page. Like I said, you can also link favicons, you can link documents and prefetch actual fetch requests. You can link or preload styles and

00:54 preload modules. So lots of really cool things that you can do with the link tag. In Remix, there are actually a lot of ways that you can style the page, but the idea of getting links onto the page is going to be the same. So we have this special export called links,

01:12 which we can apply in any of our routes, which we'll learn in the next exercise. So the links export allows you to just export a bunch of objects that have the attributes you want on your link tags. And then whenever the route is active, Remix will render the link tag.

01:27 And when that route is not active, Remix will get rid of that link tag. So on top of that, you need to tell Remix that you want to render those links. And so you put those in the head. We'll talk about that as well. And yeah, then you can get into a couple of the specifics

01:44 of the different styling options that you have. Like I said earlier, we're going to be working with Tailwind. We'll also be using PostCSS. But then you also have the options of CSS modules and vanilla extract and CSS side effect imports, all of which we will add support

01:58 for, though we will not directly be using these three as part of what we're building because we can get pretty much everything out of Tailwind. It's amazing. So feel free to dive into the Remix styling docs page. There's plenty of stuff going on in here as well. And then you can jump into

02:18 the exercises. When we're all done, you'll have a hello world that you can be very proud of. But you'll notice that it's it is styled. It does have a special font. You take a look at the network and we're loading some CSS files as well as our favicon and our fonts and all

02:35 of that stuff. So that's what you can have to look forward to in this exercise. And I hope you have just the best time going through it.