Today's video goes in depth exploring the basics of grid and grid-template-areas and how you can use this to enhance your layout abilities. By using Frontend Mentor's Bento Grid challenge as a practical example, we illustrate the powerful possibilities that come with mastering CSS Grid, empowering you to create more dynamic and flexible web layouts.
🔗Links
Live site: https://bento-grid-main-one.vercel.app/
My code: https://github.com/Orekihotarou-k/bento-grid-main
Frontend mentor challenge: https://www.frontendmentor.io/challenges/bento-grid-RMydElrlOj/hub?share=true
✨Timestamps
1:03 Getting starter files
3:03 Setting up the work environment
6:48 Grid basics
9:08 Setting up Grid in CSS
16:34 Layout Breakdown
23:00 Styling the UI Components
24:00 Layout styles
36:02 Make the layout responsive
42:42 Filling in the content
1:12:04 Subscribe
Background music credits✨
Music track: Dreaming After Work by Lukrembo
Source: https://freetouse.com/music
Copyright Free Music for Video