From the course: Master Next.js: Elaborate Hands-On Web Development, React Basics, Advanced Next.js, and Deployment
Unlock this course with a free trial
Join today to access over 25,200 courses taught by industry experts.
Customizing utility styles with Next.js
From the course: Master Next.js: Elaborate Hands-On Web Development, React Basics, Advanced Next.js, and Deployment
Customizing utility styles with Next.js
OK, so up to this point, although we've gone over some of the core important aspects of using module CSS in Next.js and taking a look at the file structures and how we can leverage layout components and how they then get rendered automatically with HTML, we've been pretty minimal in terms of actually styling. So let's actually get a bit more deeper and polish this project so that you You have a nice polished project that you can show to prospective employers to show off your Next.js skills. So the first thing I want to do is open the components layout module. So let's go back to the components layout over here. And we want the CSS module. So we'll go to the next one, actually. And let's create a few more tags. So we're going to have a header. So we do the container, let's do the header. So display, we'll set it to flex. So this basically creates a flexible type of display for our header. We can even then go into the direction of the flex. So let's say we can flex with columns so that…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
-
-
-
(Locked)
Download the CSS starter kit project from Next.js official7m 27s
-
(Locked)
How images optimize with Next.js5m 31s
-
(Locked)
Scripts and header data and props with Next.js6m 58s
-
(Locked)
CSS modules and Next.js optimizations with layout7m 12s
-
(Locked)
Global styling with Next.js4m 47s
-
(Locked)
Customizing utility styles with Next.js9m 55s
-
(Locked)
Metadata for SEO and social media with Next.js6m 43s
-
(Locked)
Writing dynamic layout components with Next.js11m 31s
-
(Locked)
How to use children and props in React and Next.js10m 54s
-
(Locked)
-
-
-