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 💻 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 ⭐️ 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 And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp