Being a front-end web developer it's all about The DOM, in this interactive auto-graded tutorial you will understand and befomre familiar the following concept:
- Manipulating website styles from javascript.
- Manipulating website HTML from javascript.
- Updating the website without refresh.
- Selecting elements from The DOM using document.querySelector and updating their code using innerHTML.
- Event oriented programing: listening to user and system events.
- Programmatically Creating website elemnts and tags using
createNode()
- Practicing user oriented events like: onClick, onMoseHover, etc.
- Event Listeners and Events Handlers.
- Make sure you have the breathecode-cli installed and
node.js
version 8+
This is the command to install the breathecode-cli
$ npm i breathecode-cli -g
- Download the react exercises in the current directory run:
$ bc start:dom-exercises -r
Note: Once you finish downloading, you will find a "exercises" folder that contains all the exercises within.
- Start the tutorial/exercises by running the following command from the root of the project:
$ npm i [email protected] -g
$ bc run:exercises
Each exercise is a small react application containing the following files:
- index.js: represents the entry file for the entire app.
- README.md: contains exercise instructions.
- test.js: you don't have to open this file, it contains the testing script for the exercise.
Thanks goes to these wonderful people (emoji key):
- Alejandro Sanchez (alesanchezr), contribution: (coder) ๐ป (idea) ๐ค, (build-tests)
โ ๏ธ , (pull-request-review) ๐ (build-tutorial) โ (documentation) ๐
This project follows the all-contributors specification. Contributions of any kind are welcome!