Creating Simple Layouts - Comparing Flexbox and Grid Approaches
Offered By: Kevin Powell via YouTube
Course Description
Overview
Explore various approaches to creating a simple layout in this insightful video tutorial. Analyze the strengths and weaknesses of different techniques submitted by a Discord community, including flexbox, grid, and even tables. Discover how to effectively use flex and grid for main layouts and card arrangements, and learn about innovative solutions like using flex with margin adjustments and creating two-column card layouts. Compare multiple flex solutions, examine a grid approach, and delve into the grid vs. flexbox debate. Gain valuable insights on subgrid implementation and look forward to future layout challenges. Perfect for web developers seeking to enhance their CSS layout skills and understand the nuances of different design approaches.
Syllabus
- Introduction
- Flex or grid for the main layout
- Flex or grid for the layout of the cards
- Using flex on top and a margin-left on the bottom
- Using flex to make two columns inside the card
- Comparing the two flex solutions
- A grid solution
- Grid vs. Flexbox discussion
- Subgrid solution
- More challenges coming
Taught by
Kevin Powell
Related Courses
User Experience for the WebOpen2Study Writing for the Web
Open2Study Web-Engineering I: Grundlagen der Web-Entwicklung
iversity Human-Computer Interaction Design
University of California, San Diego via Coursera Ruby مدخل إلى برمجة مواقع الإنترنت باستخدام لغة
Rwaq (رواق)