From 3c939547ebbe42719aa47cad19cc09a17bae0cc7 Mon Sep 17 00:00:00 2001 From: Valery <57412523+valerydluski@users.noreply.github.com> Date: Mon, 20 Nov 2023 09:35:51 +0100 Subject: [PATCH] feat: update week-4 (#1345) --- stage1/modules/media-queries/README.md | 40 +++++++++++++------ .../modules/responsive-web-design/README.md | 40 ++++++++++--------- 2 files changed, 48 insertions(+), 32 deletions(-) diff --git a/stage1/modules/media-queries/README.md b/stage1/modules/media-queries/README.md index 6d6730fb6..8f396be50 100644 --- a/stage1/modules/media-queries/README.md +++ b/stage1/modules/media-queries/README.md @@ -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/) diff --git a/stage1/modules/responsive-web-design/README.md b/stage1/modules/responsive-web-design/README.md index c99a13ca3..c869b93a2 100644 --- a/stage1/modules/responsive-web-design/README.md +++ b/stage1/modules/responsive-web-design/README.md @@ -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)