Layouts with CSS
Use CSS grid and flexbox to create flexible and responsive interface layous.
Agenda
- Intro to CSS Grid
- Intro to media queries and responsive layout
Exercise
Resources
CSS Grid
Responsive Design and Media Queries
See Also
Competencies
- Interaction Design Responsive Layout
- Interaction Design Interface layout
- Interface Prototyping HTML & CSS
- Visual Design Amount of Design Variations
- Visual Design Presentation Slides Design
- Visual Design Quality of Design Variations
- Visual Design Style Tile
- Visual Design Typography
Explainers
Lessons
Resources
References
- A Complete Guide to Grid
- Learn CSS Grid
- A Complete Guide to Flexbox
- Media Queries for Standard Devices
- CSS Syntax
- CSS Transition Property
- Keyframe syntax
- MDN Keyframe
- MDN Using CSS Transition
- MDN’s documentation for CSS
- CSS Reference
- CSS: Cascading Style Sheets
Tutorials
- Grid by Example
- The Experimental Layout Lab
- Grid Garden
- An Interactive Guide to CSS Transitions
- CSS Diner
- Flexbox Froggy
- Learn to Code HTML & CSS
