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://www.leveluptutorials.com/tutorials/ecommerce-on-the-jamstack-with-snipcart-next-js-and-wordpress
🧐 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://www.leveluptutorials.com/tutorials/ecommerce-on-the-jamstack-with-snipcart-next-js-and-wordpress
🔔 Subscribe for more tech and developer videos
https://www.youtube.com/colbyfayock?sub_confirmation=1
🐦 Get updates straight to your Twitter @colbyfayock
https://twitter.com/colbyfayock
📸 Catch the next stream live on Twitch @colbyfayock
https://twitch.tv/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: hello@colbyfayock.com
👨🚀 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/docs/Web/CSS/CSS_Grid_Layout
0 Comments