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
HTML5 and CSS FundamentalsWorld Wide Web Consortium (W3C) via edX Build Responsive Real-World Websites with HTML and CSS
Udemy HTML5 & CSS3 Course: Build Responsive Websites from Scratch
Udemy Advanced CSS and Sass: Flexbox, Grid, Animations and More!
Udemy Modern HTML & CSS From The Beginning 2.0 (2024 Revamp)
Udemy