Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: update week-4 #1345

Merged
merged 2 commits into from
Nov 20, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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)
Loading