-
Notifications
You must be signed in to change notification settings - Fork 4.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
9ec36fd
commit 0d300f6
Showing
14 changed files
with
123 additions
and
90 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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: |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) |
File renamed without changes.
File renamed without changes
File renamed without changes.
File renamed without changes.
File renamed without changes
File renamed without changes.
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes.