-
Notifications
You must be signed in to change notification settings - Fork 4.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
c5596f3
commit 3c93954
Showing
2 changed files
with
48 additions
and
32 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,22 +1,36 @@ | ||
# [Stage#1](../../) Media Queries | ||
# [Stage#1](../../) Media Queries π±π» | ||
|
||
## In this module students should: | ||
## Module Overview π | ||
|
||
- learn the basics of media queries | ||
- understand key operators | ||
- understand the purpose of the viewport meta tag. | ||
This module is centered around the basics of media queries, a crucial aspect of responsive web design. It aims to equip students with the knowledge to create adaptable web layouts that cater to various devices. The module covers the key operators in media queries and the significance of the viewport meta tag. | ||
|
||
## Estimated Module Duration | ||
## Learning Objectives π― | ||
|
||
2,5 hours | ||
Students will: | ||
|
||
## Theory | ||
- Learn and understand the fundamentals of media queries. | ||
- Grasp key operators used in media queries. | ||
- Understand the purpose and implementation of the viewport meta tag. | ||
|
||
## Approximate Module Completion Time β±οΈ | ||
|
||
- **2.5 hours** | ||
|
||
## Theory π | ||
|
||
Students are encouraged to review the following resources: | ||
|
||
1. [A Complete Guide to CSS Media Queries](https://css-tricks.com/a-complete-guide-to-css-media-queries/) - 30 minutes | ||
2. [Viewport meta tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag) - 15 minutes | ||
3. [Learn CSS Media Query in 7 minutes](https://www.youtube.com/watch?v=yU7jJ3NbPdA) - 7 minutes | ||
4. [Make a website responsive for all devices](https://www.youtube.com/watch?v=UUjNEMXZA-k) - 30 minutes | ||
2. [Understanding the Viewport Meta Tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag) - 15 minutes | ||
3. [Learn CSS Media Query in 7 Minutes](https://www.youtube.com/watch?v=yU7jJ3NbPdA) - 7 minutes | ||
4. [Making a Website Responsive for All Devices](https://www.youtube.com/watch?v=UUjNEMXZA-k) - 30 minutes | ||
|
||
## Practice π» | ||
|
||
1. Complete the "[St1] Media Queries & Responsive" test in the RS-App > Auto Test. | ||
|
||
### Additional Resources π | ||
|
||
## Practice | ||
Expand your knowledge and skills in responsive web design with these supplementary materials: | ||
|
||
1. You are required to complete the "[St1] Media Queries & Responsive" test in RS APP > Auto Test. | ||
1. [Media Queries for Standard Devices](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,34 +1,36 @@ | ||
# **Responsive Web Design** | ||
# [Stage#1](../../) **Responsive Web Design** π | ||
|
||
## Module: Responsive Web Design | ||
## Module Overview π | ||
|
||
### Objective: | ||
This module delves into the principles and practices of Responsive Web Design, a vital skill in modern web development. It focuses on educating students about the basics of Responsive Web Design and guiding them through the process of crafting layouts that adapt seamlessly across a range of devices and screen sizes. | ||
|
||
### Objective π― | ||
|
||
Students should familiarize themselves with: | ||
|
||
- Basics of Responsive Web Design. | ||
- The process of designing a responsive layout. | ||
- The fundamentals of Responsive Web Design. | ||
- Techniques and strategies for designing responsive layouts. | ||
|
||
### Duration: | ||
## Approximate Module Completion Time β±οΈ | ||
|
||
Approximately 6 hours. | ||
- **6 hours.** | ||
|
||
### Theory: | ||
### Theory π | ||
|
||
#### **Responsive Web Design Introduction**: | ||
#### **Introduction to Responsive Web Design**: | ||
|
||
1. [What is responsive web design?](https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/) | ||
2. [Webinar by Victoria Vorozhun. Part 1 RU](https://www.youtube.com/watch?v=ZAde-IJAHzo&feature=youtu.be) - 2.5 hours. | ||
3. [Webinar by Victoria Vorozhun. Part 2 RU](https://www.youtube.com/watch?v=BJENQIX2e2o&feature=youtu.be) - 2.5 hours. | ||
4. [Responsive_Design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design) | ||
1. [What is Responsive Web Design?](https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/) | ||
2. [Webinar by Victoria Vorozhun, Part 1 (RU)](https://www.youtube.com/watch?v=ZAde-IJAHzo&feature=youtu.be) - 2.5 hours | ||
3. [Webinar by Victoria Vorozhun, Part 2 (RU)](https://www.youtube.com/watch?v=BJENQIX2e2o&feature=youtu.be) - 2.5 hours | ||
4. [Responsive Design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design) | ||
|
||
### Practice: | ||
### Practice π» | ||
|
||
1. Students should take the "[St1] Media Queries & Responsive" test in RS APP > Auto Test. | ||
1. Students are required to complete the "[St1] Media Queries & Responsive" test in the RS-App > Auto Test. | ||
|
||
### Additional Materials: | ||
### Additional Materials π | ||
|
||
1. [Webinar by Victoria Vorozhun. Part 3 RU](https://www.youtube.com/watch?v=fooyYgIuZe8&feature=youtu.be) - 3 hours. | ||
2. [Webinar by Victoria Vorozhun. Part 4 RU](https://www.youtube.com/watch?v=Qk2UGlFNKPE) - 3 hours. | ||
1. [Webinar by Victoria Vorozhun, Part 3 (RU)](https://www.youtube.com/watch?v=fooyYgIuZe8&feature=youtu.be) - 3 hours | ||
2. [Webinar by Victoria Vorozhun, Part 4 (RU)](https://www.youtube.com/watch?v=Qk2UGlFNKPE) - 3 hours | ||
3. [Responsive Layouts](https://css-tricks.com/responsive-layouts-fewer-media-queries/) | ||
4. [The guide to responsive web design in 2023](https://webflow.com/blog/responsive-web-design) | ||
4. [The Guide to Responsive Web Design in 2023](https://webflow.com/blog/responsive-web-design) |