Chapters (53)
- 0:00Intro
- 4:47Dev Setup
- 7:19Starter Info
- 20:31Navbar
- 27:38Hero Image Query
- 31:56Hero
- 41:22Services And Title
- 49:52Strapi Info
- 51:54Strapi Setup
- 56:44First Content Type
- 1:07:09First Content
- 1:15:16Connect Gatsby To Strapi
- 1:20:25Project Backend
- 1:24:37Jobs Query
- 1:29:31Jobs Component
- 1:47:47Projects Content-Type
- 1:55:53Projects Content
- 2:00:24Projects Query
- 2:05:54Projects Setup
- 2:12:04Project List
- 2:19:34Project Component
- 2:27:15Projects Page
- 2:31:12Blog Content-Type
- 2:36:45Blog Content
- 2:43:59Blog Query
- 2:49:45Blog List
- 2:54:02Blog Component
- 2:58:42Blog Page
- 3:03:49Create Blog Pages Programmatically
- 3:10:34Blog Template
- 3:16:22Blog Image
- 3:19:02Strapi Claudinary
- 3:27:25Prop Types
- 3:46:17Footer
- 3:49:24Sidebar
- 3:54:47Sidebar Toggle
- 4:00:42Sidebar Animation
- 4:02:58Error Page
- 4:05:54About Page Intro
- 4:08:33About Page Content Type And Data
- 4:13:34About Page
- 4:22:37Contact Page
- 4:27:17Formspree
- 4:32:13Gatsby Browser
- 4:34:56Google Fonts
- 4:37:48Netlify Deploy
- 4:42:55Seo Intro
- 4:46:36Seo Alternatives
- 4:48:00Seo Basic Setup
- 4:54:29Seo Query
- 5:01:55Seo All Pages
- 5:08:18Sitemap Plugin
- 5:10:30Twitter Cards
Show the creator's full description
Learn to use Gatsby and Strapi to code a portfolio project in this full course. Strapi is the most popular open-source Headless CMS and is based on Node.js. Gatsby allows developers to quickly build very fast static websites and apps. Both use JavaScript.
🎥 Gatsby Tutorial: https://www.youtube.com/watch?v=kzWIUX3CpuI
💻 Starter Code: https://github.com/john-smilga/strapi-gatsby-porfolio-2020-api
🔗 View completed project: https://gatsby-strapi-portfolio-project.netlify.app/
✏️ Course created by John Smilga. Check out his YouTube channel: https://www.youtube.com/codingaddict
🔗 John Smilga's website: https://www.johnsmilga.com
❤️ Try interactive JavaScript courses we love, right in your browser: https://scrimba.com/freeCodeCamp-JavaScript (Made possible by a grant from our friends at Scrimba)
⭐️ Course Contents ⭐️
⌨️ (00:00) Intro
⌨️ (04:47) Dev Setup
⌨️ (07:19) Starter Info
⌨️ (20:31) Navbar
⌨️ (27:38) Hero Image Query
⌨️ (31:56) Hero
⌨️ (41:22) Services And Title
⌨️ (49:52) Strapi Info
⌨️ (51:54) Strapi Setup
⌨️ (56:44) First Content Type
⌨️ (1:07:09) First Content
⌨️ (1:15:16) Connect Gatsby To Strapi
⌨️ (1:20:25) Project Backend
⌨️ (1:24:37) Jobs Query
⌨️ (1:29:31) Jobs Component
⌨️ (1:47:47) Projects Content-Type
⌨️ (1:55:53) Projects Content
⌨️ (2:00:24) Projects Query
⌨️ (2:05:54) Projects Setup
⌨️ (2:12:04) Project List
⌨️ (2:19:34) Project Component
⌨️ (2:27:15) Projects Page
⌨️ (2:31:12) Blog Content-Type
⌨️ (2:36:45) Blog Content
⌨️ (2:43:59) Blog Query
⌨️ (2:49:45) Blog List
⌨️ (2:54:02) Blog Component
⌨️ (2:58:42) Blog Page
⌨️ (3:03:49) Create Blog Pages Programmatically
⌨️ (3:10:34) Blog Template
⌨️ (3:16:22) Blog Image
⌨️ (3:19:02) Strapi Claudinary
⌨️ (3:27:25) Prop Types
⌨️ (3:46:17) Footer
⌨️ (3:49:24) Sidebar
⌨️ (3:54:47) Sidebar Toggle
⌨️ (4:00:42) Sidebar Animation
⌨️ (4:02:58) Error Page
⌨️ (4:05:54) About Page Intro
⌨️ (4:08:33) About Page Content Type And Data
⌨️ (4:13:34) About Page
⌨️ (4:22:37) Contact Page
⌨️ (4:27:17) Formspree
⌨️ (4:32:13) Gatsby Browser
⌨️ (4:34:56) Google Fonts
⌨️ (4:37:48) Netlify Deploy
⌨️ (4:42:55) Seo Intro
⌨️ (4:46:36) Seo Alternatives
⌨️ (4:48:00) Seo Basic Setup
⌨️ (4:54:29) Seo Query
⌨️ (5:01:55) Seo All Pages
⌨️ (5:08:18) Sitemap Plugin
⌨️ (5:10:30) Twitter Cards
--
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
Description and video by freeCodeCamp.org. This page is an independent companion view; the video is embedded from YouTube.