Responsive Design + padding/margin/border
Lectures 06 • 40 slides
Narration
Slide 1 of Lecture 6: Responsive Design + padding/margin/border
Today's Theme
"Responsive Design and Practical Box Model"
Review of Last Time (Lecture 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 Will 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
Goals
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 create beautiful margin design
1/40