← All freeCodeCamp videos

Strapi & GatsbyJS Course - Portfolio Project

53,932 views 1,272 likes 2020-06-25 5:17:22 Watch on YouTube ↗ freeCodeCamp ↗
FullstackWeb DevelopmentStrapiGatsbyJS

Chapters (53)

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.