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.
What Figma is and how to use it - Next.js Tutorial
From the course: The Freelance Stack: Real Project with Next.js and Strapi
What Figma is and how to use it
So when I introduced the freelance stack, I said there were two main pieces of technology We are going to be using to build this app and that is true, which is Next.js and Strapi That's going to be our focus but I also want to take at least a few minutes just to talk about the design tool that we will be using because I've Been seeing it more and more in practice just to pre-emphasize this, right? It's not super important which design tool you're going to be using But there's a very good chance that it will be Figma, because it has been taking the design community by storm. And I'm not even a design guy, and even I know that. Before that, there were a lot of people providing designs in Adobe XD and Sketch, as well as in Figma. But by now, pretty much everybody that I know is actually using Figma. So let's take a moment to look into the different things we actually need to know to be, as a developer, as quick and efficient as we can with Figma. know exactly how we can transform 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.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.
Contents
-
-
Why are we using Next.js?6m 11s
-
Setting up a Next.js project3m 52s
-
(Locked)
Simple routing in Next.js4m 11s
-
(Locked)
Layouting in Next.js5m 25s
-
(Locked)
Linking from page to page2m 56s
-
(Locked)
Server and client components overview7m 56s
-
(Locked)
Data fetching6m 7s
-
(Locked)
Dynamic routing12m 59s
-
(Locked)
Not found pages4m 55s
-
-
-
(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)
-
-
(Locked)
Creating InfoBlock content type on Strapi14m 57s
-
(Locked)
Use single content type in Strapi to create InfoBlocks per page17m 33s
-
(Locked)
Fetch InfoBlock data on Strapi8m 27s
-
(Locked)
Fetch data from Strapi and process it16m 57s
-
(Locked)
Render InfoBlocks on page9m 20s
-
(Locked)
Create button from InfoBlock Strapi data on page7m 13s
-
(Locked)
Render InfoBlocks on experience page4m 45s
-
(Locked)
-
-
(Locked)
Highlight Article JSX structure8m 8s
-
(Locked)
Styling: Highlight article6m 42s
-
(Locked)
Subscribe to newsletter JSX structure4m 34s
-
(Locked)
Styling: Subscribe to newsletter component9m 57s
-
(Locked)
Functionality subscribe to newsletter component6m 15s
-
(Locked)
Featured items component JSX structure11m 36s
-
(Locked)
Styling featured items component12m 19s
-
(Locked)
-
-
(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)
-
-
(Locked)
Post requests in Strapi with the newsletter signup7m 7s
-
(Locked)
Hook up frontend to signup component in Strapi10m 16s
-
(Locked)
Strapi participant and event content type7m 21s
-
(Locked)
Feeding data into Strapi for all events6m 56s
-
(Locked)
Signup form JSX15m 50s
-
(Locked)
Styling: Signup form8m 56s
-
(Locked)
Signup form functionality: Sending data to Strapi from main events page18m 50s
-
(Locked)
Pregenerate individual event pages14m 12s
-
(Locked)
Event data processing4m 46s
-
(Locked)
Render individual event page based off Strapi data9m 43s
-
(Locked)
Sign up for specific event8m 56s
-
(Locked)
Fetch and filter upcoming events with a string query from Strapi15m 26s
-
(Locked)
Adjust featured items component for individual event page11m 26s
-
(Locked)
Styling: FeaturedItem component adjusted for event3m 45s
-
(Locked)
Fetch more events on individual event page & thank you10m 45s
-
(Locked)
-
-
(Locked)
Deployment overview6m 10s
-
(Locked)
Deploy Strapi server to Heroku13m 56s
-
(Locked)
Difference between production Strapi and local development2m 16s
-
(Locked)
Migrate local database from SQLite to Postgres to the production database16m 40s
-
(Locked)
Handle image uploads in production with AWS S320m 52s
-
(Locked)
Replace image paths in production db to use AWS S3 bucket images8m 37s
-
(Locked)
Deployment of Next.js frontend to Heroku7m 34s
-
(Locked)