AI-powered learning
Save this course
Modern CSS Layout: Decking Zombies with Style
Gain insights into advanced and modern CSS concepts with a humorous twist. Explore direction-agnostic layouts, columns, flexbox, and grid, with engaging challenges at each stage.
21 Lessons
4h
Updated 2 weeks ago
Join 3 million developers at
Join 3 million developers at
LEARNING OBJECTIVES
- Analyze how web layout methods evolved from flow, tables, floats, and positioning to columns, flexbox, and grid
- Apply block and inline display concepts to build direction-agnostic layouts across writing modes
- Use CSS logical sizing and spacing properties to create responsive, direction-agnostic page structure
- Build responsive multi-column layouts using column properties, breaks, widows, and orphans
- Implement Flexbox layouts using wrapping, alignment, ordering, and flex sizing to handle variable content
- Design responsive CSS Grid layouts with templates, fr units, minmax/repeat, item placement, and alignment
- Evaluate and choose columns, flexbox, or grid based on layout needs, complexity, and responsiveness
Learning Roadmap
2.
Zombie Inline Block Heads
Zombie Inline Block Heads
Unpack the core of CSS layout properties to create flexible, responsive web designs.
3.
Dividing the Horde (into Columns)
Dividing the Horde (into Columns)
4 Lessons
4 Lessons
Go hands-on with dividing content into columns, managing text flow, and styling columns.
4.
Weird Flexbox, but Okay, Zombie
Weird Flexbox, but Okay, Zombie
5 Lessons
5 Lessons
Apply your skills to master Flexbox properties for dynamic and adaptable layouts.
5.
CSS Gridiron Zombies
CSS Gridiron Zombies
5 Lessons
5 Lessons
Enhance your grid layout skills with CSS properties, content placement, and challenging exercises.
6.
Conclusion
Conclusion
2 Lessons
2 Lessons
Implement appropriate CSS techniques and feedback to enhance and strengthen web design skills.
Certificate of Completion
Showcase your accomplishment by sharing your certificate of completion.
Complete more lessons to unlock your certificate
Developed by MAANG Engineers
ABOUT THIS COURSE
In this course, you will learn advanced and modern CSS using zombies, silliness, and a sense of humor. If you’re looking for a course that’s accessible to those without technical training or inclination and/or don’t mind laughing a bit while learning, this course is for you.
You will start by learning some basic concepts of inline and block direction along with how they are used to style direction-agnostic layouts. Then, you will move towards learning CSS columns, followed by flexbox and finally grid. You will face a challenge at the end of each chapter that will test your learning.
ABOUT THE AUTHOR
John Rhea
John is a storyteller with design and development skills. By day he designs and builds websites. By night he counts his words carefully at with his 8 word stories and helps you kill zombies while learning web development with books and courses.
Trusted by 3 million developers working at companies
A
Anthony Walker
@_webarchitect_
E
Evan Dunbar
ML Engineer
S
Software Developer
Carlos Matias La Borde
S
Souvik Kundu
Front-end Developer
V
Vinay Krishnaiah
Software Developer
Built for 10x Developers
No Passive Learning
Learn by building with project-based lessons and in-browser code editor
Personalized Roadmaps
The platform adapts to your strengths & skills gaps as you go
Future-proof Your Career
Get hands-on with in-demand skills
AI Code Mentor
Write better code with AI feedback, smart debugging, and "Ask AI"
MAANG+ Interview Prep
AI Mock Interviews simulate every technical loop at top companies
Free Resources
