Flexbox & CSS Grid | Master
The CSS layout nightmare is over
It was a mistake to use tables, floats and other patches that were never a real solution to build layouts. And it was a torture to even create basic structures, which also required hard to maintain code. All driving up costs in money, time and performance. But there was no better alternative.
That nightmare is over! Not only that, it's over thanks to definite solutions full of advantages. Don't lag behind and find out how these solutions can already help you in your current projects. Take a professional leap, abandoning old patches forever and easily building advanced layouts.
Enroll in a totally practical workshop, full of exercises and good practices that you can immediately apply to your projects. Without theoretical labyrinths, just facing common problems in real like scenarios and solving them with CSS Grid and Flexbox. At last, we're going to enjoy building layouts with CSS!
Example lesson
Flexbox: basis, grow and shrink.
Course Curriculum
-
PreviewContainer and items
-
PreviewDirection: row and column
-
StartDirection: row and column - CHALLENGE
-
PreviewWrap items
-
PreviewFlow: direction + wrap shorthand
-
StartFlow: direction + wrap shorthand - CHALLENGE
-
PreviewOrder
-
StartOrder - CHALLENGE
-
PreviewBasis, grow and shrink
-
StartBasis, grow and shrink - CHALLENGE
-
PreviewJustify
-
StartJustify - CHALLENGE
-
PreviewAlign: Content
-
PreviewAlign: Items
-
PreviewPlace-content: justify + align shorthand
-
StartJustify & align - GAME
-
StartJustify & align - CHALLENGE
-
StartFlexbox - QUIZ
-
StartGames: learn by playing
-
StartDownload full section: 19 MB
-
StartContainer and items
-
StartBuilding: Explicit and implicit grid
-
StartBuilding: Explicit and implicit grid - CHALLENGE
-
StartBuilding: Nested grids (basic)
-
StartBuilding: Nested grids (basic) - CHALLENGE
-
StartSizing: Fraction
-
StartSizing: Minmax
-
StartSizing: Repeat
-
StartSizing: Auto-fit and auto-fill
-
StartPlacing: Lines
-
StartPlacing: Lines - GAME
-
StartPlacing: Lines - CHALLENGE
-
StartPlacing: Areas
-
StartPlacing: Areas - CHALLENGE
-
StartPlacing: Areas via implicit names
-
StartPlacing: Areas via implicit names - CHALLENGE
-
StartAlignment & spacing: Gaps
-
StartOrdering: The order property
-
StartOrdering: Overlap items with z-index
-
StartOrdering: Overlap items with z-index - CHALLENGE
-
StartSupport and fallbacks
-
StartCSS Grid - QUIZ
-
StartGames: learn by playing
-
StartDownload full section: 30 MB
Your Instructor
FRONT-END DEVELOPMENT
- +20 years of experience designing and coding websites for private and institutional clients.
- +10 years of experience as a web design / front-end instructor.
- Certified in HTML5 by W3C.
- Adobe Certified Expert in Photoshop CC.
IT TRAINING
- 10 years of experience designing and developing high quality live classroom and self-paced online training.
- Proven capability in combining learning materials and resources: keynotes, books, team-projects, guided challenges, etc.
- Author and co-author of books published as documentation for two specialized workshops.
Full profile: linkedin.com/in/miguelsp