Why it worked
The video effectively uses clear, concise on-screen text and visual examples to explain a common web development concept. The breakdown into distinct methods (Grid and Media Queries) with corresponding code snippets makes it easy for viewers to understand and apply the information.
Summary
The video displays three different screen layouts: desktop, tablet, and mobile. It then shows two methods for achieving responsive layouts in CSS: using Grid and using Media Queries, with accompanying code snippets for each.
Structure
- 1Introduction to responsive layout
- 2Desktop layout example
- 3Tablet layout example
- 4Mobile layout example
- 5Method 1: Using Grid with code
- 6Method 2: Using Media Queries with code
On-screen text
2 Ways for
Responsive Layout
DESKTOP
style.css
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 10px;
}
1. Using Grid
TABLET
style.css
@media only screen and (max-width: 600px) {
/* Your CSS styles for size smaller than 600px */
}
@media only screen and (min-width: 600px) and (max-width: 900px) {
/* Your CSS styles for size between 600px and 900px */
}
@media only screen and (min-width: 900px) {
/* Your CSS styles for size larger than 900px */
}
2. Using Media Queries
MOBILE
@learnwithhassan
