Skip to content

Commit

Permalink
feat: update week-4 (#1345)
Browse files Browse the repository at this point in the history
  • Loading branch information
valerydluski authored Nov 20, 2023
1 parent c5596f3 commit 3c93954
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 32 deletions.
40 changes: 27 additions & 13 deletions stage1/modules/media-queries/README.md
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/)
40 changes: 21 additions & 19 deletions stage1/modules/responsive-web-design/README.md
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)

0 comments on commit 3c93954

Please sign in to comment.