Integration Testing
Lectures 73 • 40 slides
Narration
Slide 1, Episode 6: Responsive Design + padding/margin/border
Today's Theme
"Practical Responsive Design and Box Model"
Review of Last Time (Episode 5)
Layout Techniques
- Flexbox: 1-Dimensional Layout
- CSS Grid: 2-Dimensional Layout
Specificity
- Inline > ID > Class > Element
- Understanding the calculation method
Basic Box Model
- content / padding / border / margin
- box-sizing: border-box
What We'll Learn Today
mindmap
root((Lecture 06))
Responsive Design
Media Queries
Mobile First
Device Support
Box Model
padding
margin
border
box-sizing
Previous Review
Flexbox
CSS Grid
Specificity
Goal
Device Support
Margin Design
Part 1: Responsive Design
Media queries and mobile-first design
Part 2: padding/margin/border
Box model details and practical techniques
Today's Goal
To be able to support various devices and design beautiful margins
1/40