Strapi & GatsbyJS Course - Portfolio Project

Channel:

freeCodeCamp.org

Subscribers:

10,700,000

Published on June 25, 2020 3:43:26 PM ● Video Link: https://www.youtube.com/watch?v=Oc_ITwxiG-Y

Duration: 5:17:22

51,430 views

1,266

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