This web development course offers detailed step-by-step instructions on how to design and build a website from scratch using technologies like Adobe XD, CSS, React, Gatsby, Netlify, and more.

In this free course you will be using the JAMStack architecture, which relies on JavaScript, reusable APIs, and Markup. Why is this so awesome?

One reason is that JAMStack sites generate pre-built files served over a CDN, which means your website will be 🔥 blazing fast. 🔥

Another reason is that JAMStack is developer friendly, and tools like Gatsby make building sites fast, easy, and fun for all skill levels. If you want to learn more about the JAMStack architecture check out the following link: https://jamstack.org/

💥 DEMO SITE 💥

🔗 https://modest-jennings-a3a908.netlif...

📂 COURSE FILES 📂

🔗 https://www.skillthrive.com/courses/d...

⚙️ HOST CODE FROM COURSE FILES ON NETLIFY ⚙️

🔗 https://youtu.be/gLLVzhprtaA

🎨 DESIGN 🎨

Lesson 1: Install Adobe XD & Design Homepage Hero – 1:30

🔗 Adobe XD: https://www.adobe.com/products/xd.html

🔗 Google Fonts: https://fonts.google.com/

Lesson 2: Design Homepage Cards & Card Grid Layout – 15:17

Lesson 3: Design Footer & Blog Archive Page – 24:14

Lesson 4: Design Individual Blog Page Template – 32:52

Lesson 5: Design Contact Page – 43:30

✏️ CONTENTFUL ✏️

Lesson 6: Create Content Models in Contentful – 50:08

🔗 Contentful: https://www.contentful.com/

Lesson 7: Add Media & Content in Contentful – 01:01:33

💻 BUILD & CODE 💻

Lesson 8: Prepare Your Coding Environment – 01:11:08

🔗 iTerm2: https://www.iterm2.com/

🔗 Node.js: https://nodejs.org/en/

🔗 Git: https://git-scm.com/book/en/v2/Gettin...

🔗 Gatsby CLI: https://www.gatsbyjs.org/docs/gatsby-...

🔗 Visual Studio Code: https://code.visualstudio.com/

Lesson 9: Install the Contentful Source Plugin for Gatsby – 01:15:46

🔗 Gatsby Contentful Source: https://www.gatsbyjs.org/packages/gat...

🔗 Using Environment Variables in Gatsby: https://www.gatsbyjs.org/docs/environ...

🔗 Gatsby Google Fonts Plugin: https://www.npmjs.com/package/gatsby-...

Lesson 10: Build the Nav Component – 01:22:47

🔗 Browser Monads: https://www.npmjs.com/package/browser...

Lesson 11: Style the Nav Component – 01:30:37

Lesson 12: Build the Featured Component – 01:34:15

Lesson 13: Style the Featured Component – 01:41:35

Lesson 14: Build the Homepage Cards & Card Grid Layout – 01:45:13

Lesson 15: Style the Homepage Cards & Card Grid Layout – 01:51:32

Lesson 16: Build & Style the Footer – 01:55:16

Lesson 17: Create the Blogs with the Create Page API – 02:01:16

Lesson 18: Build the Blog Template – 02:04:27

🔗 Gatsby Transformer Remark: https://www.npmjs.com/package/gatsby-...

Lesson 19: Style the Blog Template – 02:14:41

Lesson 20: Create the Blog Archive & Add Pagination– 02:20:23

Lesson 21: Build the Blog Archive Template – 02:33:07

Lesson 22: Style the Blog Archive – 02:46:35

Lesson 23: Create the Category Pages with the Create Page API – 02:52:16

Lesson 24: Build the Contact Page using Netlify Forms – 02:59:24

🔗Netlify Forms: https://www.netlify.com/docs/form-han...

Lesson 25: Style the Contact Page – 03:05:53

🚀 DEPLOY 🚀

Lesson 26: Deploy the Site to Netlify & Setup a Build Webhook – 03:09:50

🌟 TOP RECOMMENDED COURSES 🌟

CSS

(Paid) Build Responsive Real World Websites with HTML5 and CSS3 https://www.udemy.com/design-and-deve...

(Free) CSS Crash Course For Absolute Beginners https://www.youtube.com/watch?v=yfoY5...

JAVASCRIPT

(Paid) The Complete JavaScript Course 2019: Build Real Projects! https://www.udemy.com/the-complete-ja...

(Free) Learn JavaScript - Full Course for Beginners https://www.youtube.com/watch?v=PkZNo...

REACT

(Paid) The Complete React Web Developer Course (with Redux) https://www.udemy.com/react-2nd-edition/

(Free) React JS Crash Course - 2019 https://www.youtube.com/watch?v=sBws8...

🔔 SUBSCRIBE 🔔

https://www.youtube.com/channel/UCvHK...

👋 FOLLOW US 👋

INSTAGRAM: https://instagram.com/skillthrive/

FACEBOOK: https://facebook.com/skillthrive/