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.
\nIn this free course you will be using the JAMStack architecture, which relies on JavaScript, reusable APIs, and Markup. Why is this so awesome?
\nOne reason is that JAMStack sites generate pre-built files served over a CDN, which means your website will be 🔥 blazing fast. 🔥
\nAnother 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/
\n💥 DEMO SITE 💥
\n🔗 https://modest-jennings-a3a908.netlif...
\n📂 COURSE FILES 📂
\n🔗 https://www.skillthrive.com/courses/d...
\n⚙️ HOST CODE FROM COURSE FILES ON NETLIFY ⚙️
\n🔗 https://youtu.be/gLLVzhprtaA
\n🎨 DESIGN 🎨
\nLesson 1: Install Adobe XD & Design Homepage Hero – 1:30
\n🔗 Adobe XD: https://www.adobe.com/products/xd.html
\n🔗 Google Fonts: https://fonts.google.com/
\nLesson 2: Design Homepage Cards & Card Grid Layout – 15:17
\nLesson 3: Design Footer & Blog Archive Page – 24:14
\nLesson 4: Design Individual Blog Page Template – 32:52
\nLesson 5: Design Contact Page – 43:30
\n✏️ CONTENTFUL ✏️
\nLesson 6: Create Content Models in Contentful – 50:08
\n🔗 Contentful: https://www.contentful.com/
\nLesson 7: Add Media & Content in Contentful – 01:01:33
\n💻 BUILD & CODE 💻
\nLesson 8: Prepare Your Coding Environment – 01:11:08
\n🔗 iTerm2: https://www.iterm2.com/
\n🔗 Node.js: https://nodejs.org/en/
\n🔗 Git: https://git-scm.com/book/en/v2/Gettin...
\n🔗 Gatsby CLI: https://www.gatsbyjs.org/docs/gatsby-...
\n🔗 Visual Studio Code: https://code.visualstudio.com/
\nLesson 9: Install the Contentful Source Plugin for Gatsby – 01:15:46
\n🔗 Gatsby Contentful Source: https://www.gatsbyjs.org/packages/gat...
\n🔗 Using Environment Variables in Gatsby: https://www.gatsbyjs.org/docs/environ...
\n🔗 Gatsby Google Fonts Plugin: https://www.npmjs.com/package/gatsby-...
\nLesson 10: Build the Nav Component – 01:22:47
\n🔗 Browser Monads: https://www.npmjs.com/package/browser...
\nLesson 11: Style the Nav Component – 01:30:37
\nLesson 12: Build the Featured Component – 01:34:15
\nLesson 13: Style the Featured Component – 01:41:35
\nLesson 14: Build the Homepage Cards & Card Grid Layout – 01:45:13
\nLesson 15: Style the Homepage Cards & Card Grid Layout – 01:51:32
\nLesson 16: Build & Style the Footer – 01:55:16
\nLesson 17: Create the Blogs with the Create Page API – 02:01:16
\nLesson 18: Build the Blog Template – 02:04:27
\n🔗 Gatsby Transformer Remark: https://www.npmjs.com/package/gatsby-...
\nLesson 19: Style the Blog Template – 02:14:41
\nLesson 20: Create the Blog Archive & Add Pagination– 02:20:23
\nLesson 21: Build the Blog Archive Template – 02:33:07
\nLesson 22: Style the Blog Archive – 02:46:35
\nLesson 23: Create the Category Pages with the Create Page API – 02:52:16
\nLesson 24: Build the Contact Page using Netlify Forms – 02:59:24
\n🔗Netlify Forms: https://www.netlify.com/docs/form-han...
\nLesson 25: Style the Contact Page – 03:05:53
\n🚀 DEPLOY 🚀
\nLesson 26: Deploy the Site to Netlify & Setup a Build Webhook – 03:09:50
\n🌟 TOP RECOMMENDED COURSES 🌟
\nCSS
\n(Paid) Build Responsive Real World Websites with HTML5 and CSS3\nhttps://www.udemy.com/design-and-deve...
\n(Free) CSS Crash Course For Absolute Beginners\nhttps://www.youtube.com/watch?v=yfoY5...
\nJAVASCRIPT
\n(Paid) The Complete JavaScript Course 2019: Build Real Projects!\nhttps://www.udemy.com/the-complete-ja...
\n(Free) Learn JavaScript - Full Course for Beginners\nhttps://www.youtube.com/watch?v=PkZNo...
\nREACT
\n(Paid) The Complete React Web Developer Course (with Redux)\nhttps://www.udemy.com/react-2nd-edition/
\n(Free) React JS Crash Course - 2019\nhttps://www.youtube.com/watch?v=sBws8...
\n🔔 SUBSCRIBE 🔔
\nhttps://www.youtube.com/channel/UCvHK...
\n👋 FOLLOW US 👋
\nINSTAGRAM: https://instagram.com/skillthrive/
\nFACEBOOK: https://facebook.com/skillthrive/
","timeToRead":4}}},"allContentfulCategory":{"nodes":[{"title":"Google Tag Manager","slug":"google-tag-manager","id":"d0a285b4-b818-5612-8fdc-5f325aa48eb4"},{"title":"Axios","slug":"axios","id":"36071d22-d950-5e0e-8832-52a4f31016bf"},{"title":"Redux","slug":"redux","id":"89dcb61e-1b22-5795-9618-daa15e889512"},{"title":"Express","slug":"express","id":"eff898c7-be39-553c-a199-a8b67af03038"},{"title":"Node.js","slug":"node-js","id":"0c5ec24f-7db8-5e3c-bf01-d8dc8b8c4273"},{"title":"Git","slug":"git","id":"995d33c2-1a26-52b1-81b1-a7c5dfefbb4c"},{"title":"HTML","slug":"html","id":"368ff1b9-f81e-5748-8ea5-5c257ed913f9"},{"title":"GraphQL","slug":"graphql","id":"8101a2c8-2d15-5297-bfd1-d213d77b9ce8"},{"title":"Javascript","slug":"javascript","id":"c5c3bf5b-ef37-5b26-af84-dfb083fecabf"},{"title":"styled-components","slug":"styled-components","id":"f8aeb8c8-4780-5b97-a787-f278af851268"},{"title":"Material UI","slug":"material-ui","id":"9002ca9c-ae85-58b1-abd4-d467f490bec8"},{"title":"CSS","slug":"css","id":"334376eb-4c45-5412-8b19-80f1a16d19e5"},{"title":"Gatsby","slug":"gatsby","id":"8d653418-2491-59d6-a2ef-367d1a6d0a28"},{"title":"React","slug":"react","id":"0bdfb3a0-b67b-5b9a-802a-7182aa70702b"}]}},"pageContext":{"slug":"design-and-create-a-website-using-adobe-xd-jamstack-css-react-gatsby-contentful-netlify","title":"Design and Create a Website Using Adobe XD / JAMStack / CSS / React / Gatsby / Contentful / Netlify"}}}