rolling-scopes-school · valerydluski · Nov 18, 2023 · Nov 18, 2023
@@ -1,31 +1,38 @@
-# [Stage#1.](../../) CSS grid layout
+# [Stage#1.](../../) CSS Grid Layout 🌐
 
-## In this module, students need to:
+## Module Overview 📚
 
-Learn basics of CSS Grid layout:
+This module is dedicated to mastering the CSS Grid Layout, an essential tool for creating responsive and complex web layouts. Students will learn the basics of CSS Grid, including responsive grid design, nesting grids, aligning items, creating shapes, layering, and positioning elements.
 
-- responsive grid
-- nesting grids
-- aligning
-- shapes
-- layering items
-- positioning
+## Learning Objectives 🎯
 
-## Approximate time to complete this module:
+Students will:
 
-4 hours
+- Understand the fundamentals of responsive grid design.
+- Learn how to create and manipulate nesting grids.
+- Explore techniques for aligning grid items.
+- Create various shapes using grid layout.
+- Understand layering and positioning of items within a grid.
 
-## Theory
+## Approximate Module Completion Time ⏱️
 
-- [Basic concepts of grid layout](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout) - 2h
+- **4 hours**
+
+## Theory 📖
+
+Students should review the following resources:
+
+- [Basic Concepts of Grid Layout](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout) - 2h
 - [A Complete Guide to CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) - 2h
 
-## Practice
+## Practice 💻
+
+- Complete the "[St1] CSS Grid" test in the RS APP > Auto Test.
 
-1. You need to take the test "[St1] CSS grid" in RS APP > Auto Test
+## Additional Resources 📘
 
-## Additional sources
+Expand your knowledge with these supplementary materials:
 
-1. [RU] [CSS Grid Layout](https://medium.com/@stasonmars/%D0%B2%D0%B5%CC%88%D1%80%D1%81%D1%82%D0%BA%D0%B0-%D0%BD%D0%B0-grid-%D0%B2-css-%D0%BF%D0%BE%D0%BB%D0%BD%D0%BE%D0%B5-%D1%80%D1%83%D0%BA%D0%BE%D0%B2%D0%BE%D0%B4%D1%81%D1%82%D0%B2%D0%BE-%D0%B8-%D1%81%D0%BF%D1%80%D0%B0%D0%B2%D0%BE%D1%87%D0%BD%D0%B8%D0%BA-220508316f8b) - 30 min
-2. [RU] [Video Course CSS Grid](https://www.youtube.com/watch?v=LHW_M9mf4Is&list=PLNkWIWHIRwMHlq6yOP65F_rNH5wID1U21) - 1,5h
-3. [A game for learning CSS grid](https://cssgridgarden.com/) - 1h
+1. [CSS Grid Layout (RU)](https://medium.com/@stasonmars/%D0%B2%D0%B5%CC%88%D1%80%D1%81%D1%82%D0%BA%D0%B0-%D0%BD%D0%B0-grid-%D0%B2-css-%D0%BF%D0%BE%D0%BB%D0%BD%D0%BE%D0%B5-%D1%80%D1%83%D0%BA%D0%BE%D0%B2%D0%BE%D0%B4%D1%81%D1%82%D0%B2%D0%BE-%D0%B8-%D1%81%D0%BF%D1%80%D0%B0%D0%B2%D0%BE%D1%87%D0%BD%D0%B8%D0%BA-220508316f8b) - 30 min
+2. [Video Course on CSS Grid (RU)](https://www.youtube.com/watch?v=LHW_M9mf4Is&list=PLNkWIWHIRwMHlq6yOP65F_rNH5wID1U21) - 1.5h
+3. [A Game for Learning CSS Grid](https://cssgridgarden.com/) - 1h
@@ -0,0 +1,42 @@
+# [Stage#1](../en/README.md) CSS Modules And Some CSS New Features 🎨
+
+## Module Overview 🌟
+
+In this module, students will delve into advanced CSS topics, exploring the latest features and techniques in CSS. This includes understanding the CSS Modules approach, container and style queries, CSS nesting, new viewport units, advanced selectors, and more. By mastering these concepts, students will be able to create more dynamic, responsive, and efficient web designs.
+
+## Learning Objectives 📚
+
+Students will:
+
+- Understand and apply the **CSS Modules Approach**.
+- Explore **Container Queries** and **Style Queries**.
+- Utilize **CSS Nesting** for more structured stylesheets.
+- Learn about **New Viewport Units** and their use in responsive design.
+- Implement the **:has() Selector** and understand the **nth-of Syntax**.
+- Create **Popovers** and understand **Anchor Positioning**.
+- Use **CSS color-mix()** and **Trigonometric Functions in CSS**.
+
+## Approximate Module Completion Time ⏱️
+
+- **~ 4 hours**
+
+## Theory 📖
+
+Students should review the following resources:
+
+1. [CSS Modules Overview](https://github.com/css-modules/css-modules) - ~ 30 minutes
+2. [Understanding CSS Modules](https://glenmaddern.com/articles/css-modules) - ~ 30 minutes
+3. [Guide to Container Queries](https://drafts.csswg.org/css-contain-3/#container-queries) - ~ 25 minutes
+4. [Introduction to Style Queries](https://developer.chrome.com/blog/style-queries) - ~ 20 minutes
+5. [CSS Nesting Rules](https://www.w3.org/TR/css-nesting-1/#nest-selector) - 10 minutes
+6. [Exploring New Viewport Units](https://ishadeed.com/article/new-viewport-units) - 10 minutes
+7. [Using Selector :has()](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) - ~ 20 minutes
+8. [nth-of Syntax Explained](https://developer.chrome.com/articles/css-nth-child-of-s) - ~ 25 minutes
+9. [Popover Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover)- 10 minutes
+10. [Anchor Positioning](https://drafts.csswg.org/css-anchor-position-1) - 30 minutes
+11. [Mixing Colors with CSS color-mix()](https://developer.chrome.com/blog/css-color-mix) - ~ 15 minutes
+12. [Trigonometric Functions in CSS](https://drafts.csswg.org/css-values/?c=N%3BO%3DD#trig-funcs)- ~ 15 minutes
+
+## Practice 💻
+
+- Complete the test "[St1]CSS Modules And Some CSS New Features" in the RS APP > Auto Test.
@@ -1,38 +1,54 @@
-# [Stage#1.](../../) Positioning in CSS. Flex.
+# [Stage#1.](../../) Positioning in CSS. Flex 🌐
 
-## In this module, students should:
+## Module Overview 📚
 
-- Learn and understand 'position' and 'block-model' concepts
-- Learn the basics of flexbox layout
+This module focuses on the essential aspects of CSS positioning and Flexbox layouts. It's designed to equip students with a comprehensive understanding of CSS position properties and the block-model concept. Moreover, it emphasizes the use of Flexbox for creating responsive and efficient web layouts.
 
-## Approximate module completion time:
+## Learning Objectives 🎯
 
-6 hours
+Students will:
 
-## Theory
+- Gain an in-depth understanding of CSS 'position' properties and the 'block-model'.
+- Learn both basic and advanced Flexbox layout techniques, crucial for responsive web design.
 
-1. Basics of elements positioning
-   - [EN] https://www.peterlunch.com/blog/understanding-the-css-position-property - 1h
-   - [EN] https://internetingishard.netlify.app/html-and-css/css-box-model/ - 2h
-   - [RU] https://webref.ru/course/position - 2h
-   - [RU] https://webref.ru/course/block-model - 2h
-   - [RU] https://webref.ru/course/block-inline - 1h
-2. Flexbox
-   - [EN] https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - 1h
-   - [EN] https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/ - 2h
-   - [RU] https://webref.ru/layout/flexbox-tutorial - 2h
-   - [RU] https://habr.com/ru/post/467049/ - 1h
+## Approximate Module Completion Time ⏳
 
-## Practice
+- **6 hours**
 
-1.  You need to take the "[St1] CSS Positioning & Flexbox" test in the RS APP > Auto Test
+## Theory 📖
 
-## Additional materials
+Students should explore the following resources:
 
-1. [EN] [Video lecture: Learn Flexbox the easy way](https://www.youtube.com/watch?v=u044iM9xsWU) - 30 min
-2. [EN] [CSS Position Property Tutorial for Beginners | Absolute, Relative, Fixed, Sticky](https://www.youtube.com/watch?v=zqg4A6g9GfA) - 30 min
-3. [EN] [Flexbox Playground](https://preview.webflow.com/preview/flexbox-game?preview=d1a26b027c4803817087a91c651e321f&m=1) - 1 hour
-4. [EN] [Flexbox Cheat Sheet](https://jonitrythall.com/content/flexboxsheet.pdf) - 30 min
-5. [EN] [Learning Flexbox Through Game](https://flexboxfroggy.com/#en) - 1 hour
-6. [RU] [Video lecture: Position. Floats. Flex. Semantic. CSS3](https://www.youtube.com/watch?v=iSQcOjxttNg&list=PLe--kalBDwji8WXKVjhON39X4v_Uj6T_R&index=3) - 2 hours
-7. [RU] [CSS: Flexbox](https://www.evernote.com/shard/s368/client/snv?noteGuid=4346cdea-9386-4738-bfff-f9faafc05e94&noteKey=fb6ec76312f7111b&sn=https%3A%2F%2Fwww.evernote.com%2Fshard%2Fs368%2Fsh%2F4346cdea-9386-4738-bfff-f9faafc05e94%2Ffb6ec76312f7111b&title=CSS%253A%2BFlexbox%2B%2528htmlacademy.ru%2529) - 30 min
+1. **Basics of Element Positioning**:
+
+   - [Understanding the CSS Position Property](https://www.peterlunch.com/blog/understanding-the-css-position-property)
+   - [The CSS Box Model](https://internetingishard.netlify.app/html-and-css/css-box-model/)
+   - [The Box Model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)
+   - [Positioning Types](https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/)
+   - [HTML Block and Inline Elements](https://www.w3schools.com/html/html_blocks.asp)
+
+2. **Flexbox**:
+
+   - [A Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+   - [Interactive Guide to Flexbox](https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/)
+   - [Flexbox Tutorial (RU)](https://webref.ru/layout/flexbox-tutorial)
+   - [Flexbox (RU)](https://habr.com/ru/post/467049/)
+
+## Practice 💻
+
+- Complete the "[St1] CSS Positioning & Flexbox" test in the RS APP > Auto Test.
+
+## Additional Materials 📘
+
+Enhance your skills with these supplementary materials:
+
+- [Position (RU)](https://webref.ru/course/position)
+- [Block Model (RU)](https://webref.ru/course/block-model)
+- [Block vs Inline (RU)](https://webref.ru/course/block-inline)
+- [Learn Flexbox the Easy Way (Video)](https://www.youtube.com/watch?v=u044iM9xsWU)
+- [CSS Position Property Tutorial (Video)](https://www.youtube.com/watch?v=zqg4A6g9xsWU)
+- [Flexbox Playground](https://preview.webflow.com/preview/flexbox-game?preview=d1a26b027c4803817087a91c651e321f&m=1)
+- [Flexbox Cheat Sheet](https://jonitrythall.com/content/flexboxsheet.pdf)
+- [Learning Flexbox Through Game](https://flexboxfroggy.com/#en)
+- [Position, Floats, Flex, Semantic, CSS3 (RU Video)](https://www.youtube.com/watch?v=iSQcOjxttNg&list=PLe--kalBDwji8WXKVjhON39X4v_Uj6T_R&index=3)
+- [CSS: Flexbox (RU)](https://www.evernote.com/shard/s368/client/snv?noteGuid=4346cdea-9386-4738-bfff-f9faafc05e94&noteKey=fb6ec76312f7111b&sn=https%3A%2F%2Fwww.evernote.com%2Fshard%2Fs368%2Fsh%2F4346cdea-9386-4738-bfff-f9faafc05e94%2Ffb6ec76312f7111b&title=CSS%253A%2BFlexbox%2B%2528htmlacademy.ru%2529)
@@ -1,25 +1,40 @@
-# [Stage#1](../../) CSS Preprocessors. Sass
+# [Stage#1](../../../) CSS Preprocessors. Sass 💅
 
-## В данном модуле студентам необходимо:
+## Module Overview 📚
 
-Знать и понимать:
+This module introduces students to CSS preprocessors, focusing on Sass (Syntactically Awesome Stylesheets). Students will explore the functionalities and advantages of using Sass in web development projects. The module covers a range of topics from Sass basics like variables, inheritance, and selectors to more advanced features such as mixins, placeholders, and media queries.
 
-- виды и задачи препроцессоров
-- основы SASS (переменные, наследование,
-  селекторы, операторы)
-- импорты, миксины, комментарии
-- плейсхолдеры, функции, медиа запросы
+## Learning Objectives 🎯
 
-## Приблизительное время прохождения модуля
+Students will:
 
-3 часа
+- Understand the types and purposes of CSS preprocessors.
+- Learn the basics of Sass, including variables, inheritance, and selectors.
+- Explore Sass features such as imports, mixins, and comments.
+- Get familiar with placeholders, functions, and responsive design using media queries.
 
-## Теория
+## Approximate Module Completion Time ⏱️
 
-1. [Preprocessors. SASS](https://www.youtube.com/watch?v=JO8DvVZbxDw&feature=youtu.be) - 2 часа
-   - [Слайды](https://slides.com/viktoryiavorozhun/deck)
-2. [Основы Sass](https://sass-scss.ru/guide/) - 1 час
+- **3 hours**
 
-## Практика
+## Theory 📖
 
-1. Вам необходимо пройти тест "Preprocessors. SASS" в RS APP > Auto Test
+Students are encouraged to study the following resources:
+
+1. **Understanding Preprocessors and Sass:**
+   - [Preprocessors and SASS (Video)](https://www.youtube.com/watch?v=JO8DvVZbxDw&feature=youtu.be) - 2 hours
+     - [Associated Slides (in Russian)](https://slides.com/viktoryiavorozhun/deck)
+   - [Sass Basics (Official Guide)](https://sass-lang.com/guide/) - 1 hour
+   - [Introduction to CSS Preprocessors (Article)](https://sherocommerce.com/what-is-a-css-preprocessors-why-use-them/) - 5 minutes
+   - [Overview of PostCSS tool](https://postcss.org/)
+
+## Practice 💻
+
+- Complete the test "[St1] Preprocessors. SASS." in the RS APP > Auto Test.
+
+## Additional Resources 📘
+
+Expand your knowledge and skills in CSS preprocessors and Sass with these additional materials:
+
+1. [Sass Official Documentation](https://sass-lang.com/documentation)
+2. [Advanced Sass Tutorials](https://www.tutorialspoint.com/sass/index.htm)