Responsive Grid of Products with CSS Grid - Ecommerce on the Jamstack

Published: 12 August 2021
on channel: Colby Fayock

5,599

Learn how to build a responsive grid of products using CSS Grid. We'll walk through how we can dynamically add products from a JSON file, use those products to create a grid in our UI, and how we can add some styles to make it look like an online store!

This is a preview of my new course Ecommerce on the Jamstack!
https://spacejelly.dev/levelupecommerce

🧐 What's Inside
00:00 - Intro to Responsive Grid of Products with CSS Grid
00:08 - Preview of Ecommerce on the Jamstack
00:29 - What to expect and tools we'll use like CSS Grid
01:16 - Updating the header and footer of the store
05:50 - Creating a grid of products with CSS Grid
11:33 - Adding products dynamically from a static JSON source
15:59 - Styling and creating a custom button component for the product grid
21:13 - Debugging Next.js linting error on Netlify
22:11 - Using Next.js image for product images
23:55 - Outro

🛍 Ecommerce on the Jamstack
Ecommerce is a critical component of how the world works and as developers, we have all the tools to build our own online stores! Want to learn how?

In my course, I walk you step-by-step through building an online store with Next.js, Snipcart, and WordPress including adding products, adding a shopping cart, and taking payments along with a lot of other learning opportunities in between like using React Context to create a global state, Sass, and search with Fuse.js.

Get the course today over at Level Up Tutorials!
https://spacejelly.dev/levelupecommerce

🔔 Subscribe for more tech and developer videos
https://www.youtube.com/colbyfayock?s...

🐦 Get updates straight to your Twitter @colbyfayock
/ colbyfayock

📸 Catch the next stream live on Twitch @colbyfayock
/ colbyfayock

✉️ Or a newsletter right to your inbox!
https://www.colbyfayock.com/newsletter/

💝 Sponsor me for more free content like this!
GitHub: https://github.com/sponsors/colbyfayock
Other: [email protected]

👨‍🚀 Brought to by colbyfayock.com
https://www.colbyfayock.com

🎥 Want to know what A/V equipment I use?
https://www.colbyfayock.com/what-i-use

🧰 More Resources

CSS Grid
https://developer.mozilla.org/en-US/d...

#colbyfayock #cssgrid #responsivewebsite #css #course #preview #ecommerce #jamstack #leveluptuts #webdevelopment

Watch video Responsive Grid of Products with CSS Grid - Ecommerce on the Jamstack online, duration hours minute second in high quality that is uploaded to the channel Colby Fayock 12 August 2021. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 5,599 times and liked it 90 visitors.

3,605

128