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
?? 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
