This module provides a comprehensive overview of responsive web design, tailored for learners with a foundational understanding of web development. Starting with the basics, it introduces the core concept of responsive design and offers practical examples to analyze.
For those looking to refine their skills, the Level Up content digs deeper into specialized topics such as creating a hamburger menu with pure CSS and learning new CSS math functions for more adaptive design. This module is essential for anyone looking to create more flexible, device-friendly websites.
- Intro to HTML
- Intro to CSS
| Lesson | Video Time | Video | Skills |
|---|---|---|---|
| Setup | 3 min | Link | Setting up the development environment. |
| Concepts | 2 min | Link | Intro to the concept of responsive web design. |
| Implementation Examples | 4 min | Link | Examining real-world examples of responsive design. |
| Accounting for Mobile Devices | 4 min | Link | Mobile-first design philosophy, viewport meta tag for mobile. |
| Media Queries | 14 min | Link | Using media queries and breakpoints to create responsive pages. |
| Nav Bar Media Query | 6 min | Link | Implement a responsive hamburger navbar using media queries. |
| Best Practices | 5 min | Link | Testing on different devices in the browser, progressive design. |
| Total content | 38 min | -- |
| Lesson | Video Time | Video | Skills |
|---|---|---|---|
| Functional Hamburger Nav Walkthrough | 17 min | Link | Create a fully functional hamburger menu in pure CSS. |
| Product Cards Flexbox Walkthrough | 13 min | Link | Using flexbox for product card layout; inserting and attributing icons; adding and styling HTML elements. |
| A Media Query Free Future | 2 min | Link | Limitations of media queries; introduction to CSS math functions like clamp(), min(), max(), and minmax(). |
| Total Level Up content | 32 min | -- |
📦 Repo
Find a 👾 bug 👾 or have suggestions? Let us know!