From the course: The Freelance Stack: Real Project with Next.js and Strapi

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Styling: Header

Styling: Header - Next.js Tutorial

From the course: The Freelance Stack: Real Project with Next.js and Strapi

Start my 1-month free trial Buy for my team

Styling: Header

“

So the first thing I notice here is that the layouting is obviously not right on my page, right? Everything appears in a column but I actually want it to be all displaying here as a row, right? So what can I do? Well, I need to make it a flex container but first of all I actually have to create the files to apply my styles. So similarly to how I did it here in the app folder where we have a components folder, I also want to have in my sass folder now a new folder called components and inside of there I can now just create a header as CSS and for that the first thing I'm going to do is I'm going to split my screen so I can immediately see what styles I'm applying to what elements in here and the very first thing I see here as well my parent element or the main element here within my header has the header class so that's just what I'm going to be using now in here I need it to be a flex container and that will change things quite a lot but it doesn't here right it should have changed…

Contents