The Freelance Stack: Real project with NextJS 13 and Strapi

سرفصل های دوره

From Design to Handover: Building Real-World Projects for Freelancers

1 - Introduction

1 - Course Intro

2 - What is the Freelance Stack

3 - Figma Design File.txt

3 - How to go through this course

3 - sass.zip

4 - Materials to go through the course.html

4 - assets.zip

2 - NextJS Crash Course

5 - Why are we using NextJS

6 - Setting up a NextJS Project

7 - Simple Routing in NextJS

8 - Layouting in NextJS

9 - Linking from Page to Page

10 - Server and Client Components Overview

11 - Data Fetching

12 - Dynamic Routing

13 - Not Found Pages

3 - Developer Intro To Figma

4 - Initial Project Setup NextJS Strapi and Sass

15 - NextJS Base Setup

16 - Reminder on styling.html

16 - sass.zip

17 - Styling Video Sass Setup

18 - Figma Design File.txt

18 - Google Font Link to include when importing into scss.txt

18 - Styling Video Variables and Typography

19 - Overview of our setup and why we set it up this way

20 - Strapi Installation and Overview

5 - Landing Page Experience Page with Layout Components

21 - Header JSX Structure

22 - Styling Header

23 - Footer JSX Structure

24 - Filter to give SVGs any colour you want.html

25 - Styling Footer

26 - Hero Section JSX Structure

27 - Styling Hero Section

28 - InfoBlocks JSX Structure

29 - Styling InfoBlocks

30 - Experience Page Reuse created Hero Section and Infoblocks

31 - Styling Adjust Header colour per path

6 - Connecting our Frontend to Strapi

32 - Creating InfoBlock Content Type on Strapi

33 - Use Single Content Type in Strapi to create InfoBlocks per page

34 - Fetch InfoBlock Data on Strapi

35 - Fetch Data from Strapi and process it

36 - Render InfoBlocks on page

37 - Create Button from InfoBlock Strapi Data on page

38 - Render InfoBlocks on Experience page

7 - Main Page of the Blog

39 - Highlight Article JSX Structure

40 - Styling Highlight Article

41 - Subscribe To Newsletter JSX Structure

42 - Styling Subscribe to Newsletter Component

43 - Functionality Subscribe to Newsletter Component

44 - Featured Items Component JSX Structure

45 - Styling Featured Items Component

8 - Implement Blog on frontend through Strapi and NextJS

46 - Create blog article type on Strapi

47 - Input blog article data on Strapi

48 - Render articles from Strapi data on main page of the blog

49 - Create dynamic routes for all blog articles

9 - Create fully customisable blog article

50 - Create dynamic zone in Strapi for customisable blog content

51 - Creating data for highlight article

52 - Article Hero Section JSX

53 - Styling Article Hero Section

54 - Article Intro Component JSX

55 - Styling Article Intro Component

56 - Generic Article Component to render different component depending on strapi data

57 - Article Headline JSX

58 - Styling Article Headline

59 - Text with Image Component JSX

60 - Styling Text with Image Component

61 - Article Paragraph JSX

62 - Styling Article Paragraph

63 - Image Component JSX

64 - Styling Image Component

65 - Other Articles Section on Individual Blog Page

66 - Blog Section Homepage JSX

67 - Styling Blog Section Homepage

68 - Fix Article Item for Featured Items on Homepage

10 - Events Section Create Signup Functionality for offered Surfcamps Events

69 - Post Requests in Strapi with the Newsletter Signup

70 - Hook up Frontend to Signup Component in Strapi

71 - Strapi Participant and Event Content Type

72 - Feeding Data into Strapi for all events

72 - example-events-data.zip

73 - Signup Form JSX

74 - Styling Signup Form

75 - Signup Form Functionality Sending data to Strapi from main events page

76 - Pregenerate individual event pages

77 - Event Data Processing

78 - Render individual event page based off strapi data

79 - Sign up for specific event

80 - Fetch and filter upcoming events with a string query from Strapi

81 - Adjust featured items component for individual event page

82 - Styling FeaturedItem Component adjusted for event

83 - Fetch more events on individual event page THANK YOU

139,000 تومان

خرید اشتراک افزودن به سبد خرید

خرید دانلودی فوری

در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

تولید کننده: Udemy