By @alesanchezr and other contributors at 4Geeks Academy
This tutorial is part of a bigger group of tutorials about web development, this repository focuses only on The DOM.
-
How to select elements from your website
-
Manipulate them with Javascript (change styles, add event listeners).
-
Remove elements programmaticall.
-
Change your entire website without a refresh.
I strongly recommend doing this the tutorials in this order:
- Introduction to HTML
- Introduction to CSS
- Introduction to Javascript
- Introduction to The DOM โ you are here now ๐ฅ
- Using events & The DOM
- Object Oriented Programming
- Make sure you have learnpack installed and
node.js
version v14+ and jest v27. This is the command to install the learnpack-cli and jest:
$ npm i learnpack [email protected] -g
-
Clone or download this repository. Once you finish downloading, you will find a new folder with a subdirectory "exercises" that contains all the exercises within.
-
Install the learnpack plugin to test and compile vanillajs:
$ learnpack plugins:install learnpack-dom
- Start the tutorial/exercises by running the following command from the root of the project:
$ learnpack start
Each exercise is a small vanillajs website containing the following files:
- index.js: represents the entry javascript file that will be executed when the website loads.
- index.html: represents the HTML entry for website.
- style.css: your website styles, they have to be imported from the index.html
- 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) ๐ -
Paolo (plucodev), contribution: (bug reports) ๐, contribution: (coder), (translation) ๐
This project follows the all-contributors specification. Contributions of any kind are welcome!