The challenge: https://www.frontendmentor.io/challenges/bento-grid-RMydElrlOj?via=kevinpowell

🔗 Links
✅ Get the starting and finished code here: https://github.com/kevin-powell/bento-grid-frontend-mentor-challenge-tutorial
✅ Frontend Mentor: https://www.frontendmentor.io/?via=kevinpowell
✅ I have free and premium CSS courses: https://kevinpowell.co/courses
✅ NPM for absolute beginners: https://youtu.be/UYz-9UaUp2E
✅ Learn about @layer: https://youtu.be/NDNRGW-_1EE
✅ Alignment and justification with Grid: https://youtu.be/WvoYYok1Ddo
✅ MDN on Overflow clip: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#clip

Some of the links in this description may be affiliate links, and I may earn a small commission if you make a purchase through them, at no additional cost to you. Your support through these links helps me continue creating content for this channel. Thank you!

⌚ Timestamps
00:00 - Introduction
00:20 - What we’re going to be creating
02:20 - Starting point
04:05 - Creating the grid
05:15 - Setting up the styling to make easy changes to the card
23:30 - Quick image fix using filter
26:45 - Image order and sizing
32:00 - Quickly going through the basic setup of the other cards
40:11 - Organizing our grid at larger screen sizes
47:00 - Adjusting the cards at the larger sizes
59:00 - Be careful reordering with CSS
1:01:50 - Fixing the layout at medium screen sizes

#css

✉ Keep up to date with everything I'm up to  https://www.kevinpowell.co/newsletter
💬 Come hang out with other devs in my Discord Community https://discord.gg/nTYCvrK
⭐ Are you a beginner? HTML & CSS for absolute beginners is for you: https://learn.kevinpowell.co
🎓 Start writing CSS with confidence with CSS Demystified: [https://cssdemystified.com](https://cssdemystified.com/)
🚀 Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/

---

Help support my channel
👨‍🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://cottonbureau.com/people/kevin-powell
💖 Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@kevinpowell/join

---

🧑‍💻 My editor: VS Code - https://code.visualstudio.com/

🌈 My theme: One Dark Pro Var Night
🔤 My font: Cascadia Code

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel:

Bluesky: https://bsky.app/profile/kevinpowell.co
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Kevin Powell

The post is a detailed CSS tutorial on creating responsive Bento grids, inspired by a Frontend Mentor challenge. It explains the setup, including creating a GitHub repository for code sharing, handling the grid layout for both desktop and mobile versions, and managing various CSS properties such as order, colors, padding, and unique styling approaches. The tutorial also covers practical tips for maintaining clean code and adjusting elements dynamically.

Responsive Bento Grid | CSS Tutorial | Frontend Mentor Challenge

<p>I actually watched that. Your newsletter actually made me watch that… Hats off to you, good sir</p>
