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.
Hero section JSX structure - Next.js Tutorial
From the course: The Freelance Stack: Real Project with Next.js and Strapi
Hero section JSX structure
So, if we look into our design, we can see we've done the footer, we've done the header, right here, but now what we want to do is we want to do the main page of our application, which is basically all of, oops, all of this, let's remove that, all of this. That's the next part. And we're going to start with the hero section right here. what we want to look out for is whenever we code up a component we want to see whether it's a repeated component somewhere else in the design and with this hero section we see that it's actually not just on the main page it's also over here on the experience page it also happens to be here on the blog page and we'll see how we handle it then but for now we want to write this hero section in a way that we can just pull it in or just use it on our main page but also then on the experience page so it should be its own component that can be adjusted depending on the color theme right so here we have like this bluish color here it's going to be orange and we…
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)
Header JSX structure17m 24s
-
(Locked)
Styling: Header8m 43s
-
(Locked)
Footer JSX structure10m 18s
-
(Locked)
Styling: Footer8m 11s
-
(Locked)
Hero section JSX structure16m 27s
-
(Locked)
Styling: Hero section15m 26s
-
(Locked)
InfoBlocks JSX structure9m 26s
-
(Locked)
Styling: InfoBlocks5m 53s
-
(Locked)
Experience page: Reuse created hero section and infoblocks8m 47s
-
(Locked)
Styling: Adjust header colour per path1m 26s
-
(Locked)
-
-
-
-
-
-