diff --git a/stage1/README.md b/stage1/README.md index ef51c9725..66380aca6 100644 --- a/stage1/README.md +++ b/stage1/README.md @@ -152,9 +152,24 @@ #### December 12, 2023 -- [Cross-check review](https://docs.app.rs.school/#/platform/cross-check-flow) of the project ["Coffee House. Week-3"](../tasks/coffee-house/coffee-house-week3.md) -- [Module: Git Recap](modules/git-recap/) -- [Module "Algorithms and Data Structures"](modules/data-structures/) +- Cross-Check Reviews: + + - [Cross-check review](https://docs.app.rs.school/#/platform/cross-check-flow) of the project ["Coffee House. Week-3"](../tasks/coffee-house/coffee-house-week3.md) + +- Modules: + + - [Module: Git Recap](modules/git-recap/) + - [Module "Algorithms and Data Structures"](modules/data-structures/) + +- Tasks: + + - [basic-js-ds](https://github.com/AlreadyBored/basic-js-ds) + - [basic-js](https://github.com/AlreadyBored/basic-js) + +- Tests: + + - [[St1] Git & GitHub #2](modules/git-recap/) + - [[St1] Test Algorithms & Data structures](modules/data-structures/) ### Break Week diff --git a/stage1/modules/dom-api/README.md b/stage1/modules/dom-api/README.md index 52f047b10..8b37c3547 100644 --- a/stage1/modules/dom-api/README.md +++ b/stage1/modules/dom-api/README.md @@ -1,42 +1,54 @@ -# [Stage#1.](../../) DOM Api +# [Stage#1.](../../) DOM Api 🌐 -## Module Overview +## Module Overview 📚 In this segment of the course, participants will delve into the core aspects of the Document Object Model (DOM), Browser Object Model (BOM), and CSS Object Model (CSSOM). They will acquire practical skills in navigating and manipulating the DOM, understanding and applying CSS through JavaScript, and handling the intricate details of web document properties and behaviors. -## In this module students should learn: +## Learning Objectives 🎯 -- DOM, BOM, CCSOM -- [navigating the DOM](https://javascript.info/dom-navigation) -- [using selectors to find elements](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) -- [tag, type, elements' content](https://javascript.info/basic-dom-node-properties) -- [attributes and elements' properties](https://javascript.info/dom-attributes-and-properties) -- [modifying elements](https://javascript.info/modifying-document) -- [styles and classes of elements in JS](https://javascript.info/styles-and-classes) -- [sizes and scrolling of elements](https://javascript.info/size-and-scroll) -- [window sizes and scrolling](https://javascript.info/size-and-scroll-window) -- [coordinates](https://javascript.info/coordinates) +Students will learn: -## Approximate module completion time: +- The core concepts and functionalities of the DOM, BOM, and CSSOM. +- Techniques for navigating the DOM and using selectors to find specific elements. +- Methods to access and modify tag types, elements' content, attributes, and properties. +- Skills for modifying elements, applying styles, and managing classes in JavaScript. +- Approaches to handle sizes, scrolling of elements, and window sizes, and to determine element coordinates. -2 hours +## Approximate Module Completion Time ⏱️ -## Theory +- **2 hours** -**DOM** +## Theory 📖 -- https://javascript.info/document -- https://www.javascripttutorial.net/javascript-dom/ -- https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction +Students are encouraged to explore the following resources: -**BOM** +**DOM:** -- https://javascript.info/browser-environment +- [Document](https://javascript.info/document) +- [JavaScript DOM Tutorial](https://www.javascripttutorial.net/javascript-dom/) +- [Introduction to the DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) +- [Navigating the DOM](https://javascript.info/dom-navigation) +- [Using selectors to find elements](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) +- [Tag, type, elements' content](https://javascript.info/basic-dom-node-properties) +- [Attributes and elements' properties](https://javascript.info/dom-attributes-and-properties) +- [Modifying elements](https://javascript.info/modifying-document) +- [Styles and classes of elements in JS](https://javascript.info/styles-and-classes) +- [Sizes and scrolling of elements](https://javascript.info/size-and-scroll) +- [Window sizes and scrolling](https://javascript.info/size-and-scroll-window) +- [Coordinates](https://javascript.info/coordinates) -**CSSOM** +**BOM:** -- https://www.hongkiat.com/blog/css-object-model-cssom/ +- [The Browser Environment - JavaScript.info](https://javascript.info/browser-environment) -## Practice +**CSSOM:** -1. You should pass the test "[St1] DOM Api" in RS APP > Auto Test +- [CSS Object Model (CSSOM) Overview - Hongkiat](https://www.hongkiat.com/blog/css-object-model-cssom/) + +## Practice 💻 + +1. Complete the test "[St1] DOM Api" in the RS APP > Auto Test. + +## Additional Resources 📘 + +Expand your understanding with these additional readings: diff --git a/stage1/modules/events/README.md b/stage1/modules/events/README.md index 1f5f97b96..260c33bdd 100644 --- a/stage1/modules/events/README.md +++ b/stage1/modules/events/README.md @@ -2,56 +2,57 @@ ## 📚 Module Overview -In this module, students will delve into the world of browser events and event handling. They will learn the intricacies of event-driven programming and practice how to manage and utilize events within web applications. - -### Students will: - -1. Understand the concept of an **Event**. -2. Explore **Interfaces based on Events**, with a complete list referenced from MDN. -3. Discover the starting point for working with **Events**. -4. Grasp the concept of **Callbacks**: - - Comprehend the definition of asynchronous programming. - - Learn what it means to be asynchronous. - - Recognize scenarios that require callbacks (e.g., `setTimeout`, `addEventListener`, `onClick`, etc.). - - Develop skills in writing code that utilizes callbacks. -5. Master **Event Handlers** and different methods to attach them to events: - - Utilize the `on` attribute within the DOM tree. - - Assign properties to DOM objects to handle events. - - Understand the reassignment of handlers on the target and exceptions. - - Learn techniques for removing event handlers. - - Implement object handlers through `handleEvent`. -6. Dive into the **Event Object** and its properties. -7. Study **Bubbling and Capturing** mechanisms. -8. Practice **Event Delegation** to manage events efficiently. -9. Learn about **Browser Default Actions** and how to handle them. -10. Experiment with **Dispatching Custom Events** to tailor event-driven behavior. - -## ⏰ Estimated Module Duration +This module immerses students in the world of browser events and event handling, a cornerstone of interactive web development. They will learn the fundamentals of event-driven programming, understanding how to manage and utilize events within web applications effectively. + +## Learning Objectives 🎯 + +Students will: + +1. Comprehend the concept and significance of an **Event** in web programming. +2. Explore various **Interfaces based on Events**, with detailed references from MDN. +3. Identify starting points and best practices for working with **Events**. +4. Understand and implement **Callbacks** in different scenarios: + - Grasp asynchronous programming and its applications. + - Recognize scenarios necessitating callbacks (e.g., `setTimeout`, `addEventListener`, `onClick`). + - Develop and apply skills in writing code using callbacks. +5. Master **Event Handlers**, learning different techniques to attach and manage them: + - Utilize `on` attributes and properties within the DOM. + - Understand reassignment and removal of handlers, along with exceptions. + - Implement `handleEvent` for object handlers. +6. Delve into the **Event Object**, studying its properties and uses. +7. Understand **Bubbling and Capturing** mechanisms in event propagation. +8. Apply **Event Delegation** for efficient event management. +9. Examine **Browser Default Actions** and strategies to handle them. +10. Learn about **Dispatching Custom Events** for tailored event-driven interactions. + +## Approximate Module Completion Time ⏱️ - **2 hours** -## 📖 Theoretical Learning +## Theory 📖 -Webinar: [JavaScript Events 2023Q1 [RU]](https://youtube.com/live/VJEpE6DaOYo) -Materials: [Presentation](https://github.com/MikAleinik/rs-webinar/tree/events) +1. **Foundational Concepts of Events:** -Students are expected to read and understand the following topics: + - [Introduction to Browser Events](https://javascript.info/introduction-browser-events) + - [Introduction to Callbacks](https://javascript.info/callbacks) + - [Object Handlers: `handleEvent`](https://javascript.info/introduction-browser-events#obekt-obrabotchik-handleevent) + - [Bubbling and Capturing Explained](https://javascript.info/bubbling-and-capturing) + - [Mastering Event Delegation](https://javascript.info/event-delegation) + - [Handling Browser Default Actions](https://javascript.info/default-browser-action) + - [Creating and Dispatching Custom Events](https://javascript.info/dispatch-events) + - [Fundamentals of Mouse Events](https://javascript.info/mouse-events-basics) + - [Navigating Mouse Movement Events](https://javascript.info/mousemove-mouseover-mouseout-mouseenter-mouseleave) -1. [Introduction to Browser Events](https://javascript.info/introduction-browser-events) -2. [Introduction to Callbacks](https://javascript.info/callbacks) -3. [Object Handlers: `handleEvent`](https://javascript.info/introduction-browser-events#obekt-obrabotchik-handleevent) -4. [Bubbling and Capturing Explained](https://javascript.info/bubbling-and-capturing) -5. [Mastering Event Delegation](https://javascript.info/event-delegation) -6. [Handling Browser Default Actions](https://javascript.info/default-browser-action) -7. [Creating and Dispatching Custom Events](https://javascript.info/dispatch-events) -8. [Fundamentals of Mouse Events](https://javascript.info/mouse-events-basics) -9. [Navigating Mouse Movement Events](https://javascript.info/mousemove-mouseover-mouseout-mouseenter-mouseleave) + Webinar and Materials: -## 💻 Practical Application + - [JavaScript Events 2023Q1 [RU]](https://youtube.com/live/VJEpE6DaOYo) + - [Presentation Slides](https://github.com/MikAleinik/rs-webinar/tree/events) -- Complete the "[St1] DOM Events" test within the RS APP > Auto Test section for hands-on practice and validation of knowledge. +## Practice 💻 -## Additional materials +- Complete the "[St1] DOM Events" test in the RS APP > Auto Test for hands-on experience and skill assessment. -1. [JavaScript Events](https://www.javascripttutorial.net/javascript-dom/javascript-events/) -2. [Handling Events in JavaScript](https://www.javascripttutorial.net/javascript-dom/handling-events-in-javascript/) +## Additional Resources 📘 + +1. [JavaScript Events - JavaScript Tutorial](https://www.javascripttutorial.net/javascript-dom/javascript-events/) +2. [Handling Events in JavaScript - JavaScript Tutorial](https://www.javascripttutorial.net/javascript-dom/handling-events-in-javascript/) diff --git a/stage1/modules/html-form/README.md b/stage1/modules/html-form/README.md index 3d30273b5..c051204a0 100644 --- a/stage1/modules/html-form/README.md +++ b/stage1/modules/html-form/README.md @@ -1,32 +1,37 @@ -# [Stage#1](../../) HTML Forms & Validation +# [Stage#1](../../) HTML Forms & Validation 📝 -## Module Overview +## Module Overview 📚 -This module provides an in-depth exploration of HTML forms, covering their creation, validation, and event handling. Students will understand how to effectively use forms as a means of collecting user input and learn the importance of validating this input to maintain data integrity and provide a positive user experience. +This module provides an in-depth exploration of HTML forms, focusing on their creation, validation, and event handling. It aims to equip students with the knowledge to effectively use forms for collecting user input and emphasizes the importance of validating this input for maintaining data integrity and enhancing user experience. -## In this module students should get acquainted with: +## Learning Objectives 🎯 -- HTML forms -- HTML forms validation -- HTML forms events handling +Students will: -## Estimated Module Duration +- Understand the fundamentals of HTML forms and their role in web applications. +- Learn techniques for HTML form validation to ensure accurate data collection. +- Explore event handling in HTML forms for interactive user experiences. + +## Approximate Module Completion Time ⏱️ - **4 hours** -## Theory +## Theory 📖 + +Students are encouraged to study the following resources: -Students are required to read the following documentation: +1. **Understanding HTML Forms:** + - [HTML Forms on MDN](https://developer.mozilla.org/en-US/docs/Learn/Forms) + - [Form Validation on MDN](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation) -- [HTML Forms on MDN](https://developer.mozilla.org/en-US/docs/Learn/Forms) -- [Form Validation on MDN](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation) +## Practice 💻 -## Practice +- Complete the "[St1] HTML Form" test in the RS APP > Auto Test. -- Complete the "[St1] HTML Form" test available in RS APP > Auto Test. +## Additional Resources 📘 -## Additional Resources +Expand your knowledge with these additional materials: -- [Forms and Controls](https://javascript.info/forms-controls) - A guide to form elements in JavaScript. -- [Learn Forms](https://web.dev/learn/forms/) - A practical course on web form accessibility and usage. -- [RS School Webinar on Forms (RU)](https://www.youtube.com/watch?v=PhRVJC0kBGE) - Recorded session in Russian covering HTML forms. +1. [Forms and Controls](https://javascript.info/forms-controls) - A detailed guide to form elements in JavaScript. +2. [Learn Forms](https://web.dev/learn/forms/) - A practical course on web form accessibility and usage. +3. [RS School Webinar on Forms (RU)](https://www.youtube.com/watch?v=PhRVJC0kBGE) diff --git a/stage1/stream2/online-zoo/README.md b/stage1/tasks/online-zoo-ru.md/README.md similarity index 100% rename from stage1/stream2/online-zoo/README.md rename to stage1/tasks/online-zoo-ru.md/README.md diff --git a/stage1/stream2/online-zoo/online-zoo-folder-structure.jpg b/stage1/tasks/online-zoo-ru.md/online-zoo-folder-structure.jpg similarity index 100% rename from stage1/stream2/online-zoo/online-zoo-folder-structure.jpg rename to stage1/tasks/online-zoo-ru.md/online-zoo-folder-structure.jpg diff --git a/stage1/stream2/online-zoo/online-zoo-ru.md b/stage1/tasks/online-zoo-ru.md/online-zoo-ru.md similarity index 100% rename from stage1/stream2/online-zoo/online-zoo-ru.md rename to stage1/tasks/online-zoo-ru.md/online-zoo-ru.md diff --git a/stage1/stream1/shelter/README.md b/stage1/tasks/shelter/README.md similarity index 100% rename from stage1/stream1/shelter/README.md rename to stage1/tasks/shelter/README.md diff --git a/stage1/stream1/shelter/main-1280.jpg b/stage1/tasks/shelter/main-1280.jpg similarity index 100% rename from stage1/stream1/shelter/main-1280.jpg rename to stage1/tasks/shelter/main-1280.jpg diff --git a/stage1/stream1/shelter/pets.json b/stage1/tasks/shelter/pets.json similarity index 100% rename from stage1/stream1/shelter/pets.json rename to stage1/tasks/shelter/pets.json diff --git a/stage1/stream1/shelter/responsive.png b/stage1/tasks/shelter/responsive.png similarity index 100% rename from stage1/stream1/shelter/responsive.png rename to stage1/tasks/shelter/responsive.png diff --git a/stage1/stream1/shelter/shelter-folder-structure.jpg b/stage1/tasks/shelter/shelter-folder-structure.jpg similarity index 100% rename from stage1/stream1/shelter/shelter-folder-structure.jpg rename to stage1/tasks/shelter/shelter-folder-structure.jpg diff --git a/stage1/stream1/shelter/shelter-pets-1280px.jpg b/stage1/tasks/shelter/shelter-pets-1280px.jpg similarity index 100% rename from stage1/stream1/shelter/shelter-pets-1280px.jpg rename to stage1/tasks/shelter/shelter-pets-1280px.jpg diff --git a/stage1/stream1/shelter/shelter-ru.md b/stage1/tasks/shelter/shelter-ru.md similarity index 100% rename from stage1/stream1/shelter/shelter-ru.md rename to stage1/tasks/shelter/shelter-ru.md