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.
Blog section homepage JSX - Next.js Tutorial
From the course: The Freelance Stack: Real Project with Next.js and Strapi
Blog section homepage JSX
So, what we have left to do to completely finish off the blog page is now this last blog preview here on the main page. Now, when looking at it, we could think maybe we can integrate this also with the Featured Items component that we already created, but there's actually so many small differences that it's a bit too annoying to make that its own component. If you want to, you can obviously try doing that yourself, but we'll be creating a new block preview component for this one. A few of the differences obviously in the layouting here, right, so that the first row has to have first a highlight article as the bigger article and then the other one smaller to the side. But then you also have small stuff here like the item not having a background color for the text, the border radius of the images, the headline is centered, all of that stuff you could probably do through styling in SAS, but it's also just going be a good exercise for us to again read data in and then display it on the…
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)
Create dynamic zone in Strapi for customizable blog content14m 6s
-
(Locked)
Creating data for highlight article8m 28s
-
(Locked)
Article hero section JSX5m 45s
-
(Locked)
Styling: Article hero section5m 26s
-
(Locked)
Article intro component JSX8m 40s
-
(Locked)
Styling: Article intro component5m 29s
-
(Locked)
Generic article component to render different component depending on Strapi data9m 14s
-
(Locked)
Article headline JSX3m 15s
-
(Locked)
Styling: Article headline1m
-
(Locked)
Text with image component JSX15m 9s
-
(Locked)
Styling: Text with image component5m 48s
-
(Locked)
Article paragraph JSX2m 23s
-
(Locked)
Styling: Article paragraph1m 6s
-
(Locked)
Image component JSX3m 49s
-
(Locked)
Styling: Image component2m 20s
-
(Locked)
Other articles section on individual blog page3m 17s
-
(Locked)
Blog section homepage JSX13m 11s
-
(Locked)
Styling: Blog section homepage8m 52s
-
(Locked)
Fix article item for featured items on homepage1m 18s
-
(Locked)
-
-