select-and-style: test and review

dom/select-and-style_test.js

@@ -1,22 +1,49 @@
 
-
 export const tests = []
 
 tests.push(async ({ eq }) => {
   // check the CSS stylesheet is linked in the head tag
 
-  return eq.$('head link', {
+  await eq.$('head link', {
     rel: 'stylesheet',
     href: 'http://localhost:9898/select-and-style/select-and-style.css',
   })
 })
 
+
 tests.push(async ({ eq }) => {
   // check the universal selector has been declared properly
 
-  return eq.css('*', {
+  await eq.css('*', {
     margin: '0px',
     opacity: '0.85',
     boxSizing: 'border-box',
   })
 })
+
+
+tests.push(async ({ eq }) => {
+  // check that the body was styled
+
+  await eq.css('body', { height: '100vh' })
+})
+
+
+tests.push(async ({ eq }) => {
+  // check that sections elements are styled
+
+  await eq.css('section', {
+    padding: '20px',
+    width: '100%',
+    height: 'calc(33.3333%)',
+  })
+})
+
+
+tests.push(async ({ eq }) => {
+  // check that the individual sections are styled
+
+  await eq.css('#face', { backgroundColor: 'cyan' })
+  await eq.css('#upper-body', { backgroundColor: 'blueviolet' })
+  await eq.css('#lower-body', { backgroundColor: 'lightsalmon' })
+})

subjects/select-and-style/README.md

@@ -1,35 +1,64 @@
-### Select & style
+## Select & style
 
-Now that you created & identified properly the different sections of your being, it's time to make it look more living-like! To achieve that, you're going to style it with [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS).
-Create a CSS file, [link it](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#including_a_stylesheet) to your `select-and-style.html`, and:
+### Instructions
 
-- target all the elements with the [universal selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors) and style them with a `margin` of 0, `box-sizing` to "border-box" and an `opacity` of 0.85
-- target the `body` tag and style it with a `height` of 100vh so it takes the viewport height
-- target all the `section` tags with the [type selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors), and style it with a `padding` of 20 pixels, a `width` of 100% and a `height` of "calc(100% / 3)" (one third of the `body` height)
-- target each following element with the [`id` selector](https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors), using the `id` you defined earlier for each section, and style it:
+Now that you created & identified properly the different sections of your being,
+it's time to make it look more living-like! To achieve that, you're going to
+style it with [CSS][0]. Create a CSS file, [link it][1] to your
+`select-and-style.html`, and:
+
+- target all the elements with the [universal selector][2] and style them with:
+  - `margin` of `0`
+  - `box-sizing` to `border-box`
+  - `opacity` of `0.85`
+
+- target the `body` tag and style it with a `height` of `100vh` so it takes the
+  viewport height
+
+- target all the `section` tags with the [type selector][3], and style it with:
+  - `padding` of `20px`
+  - `width` of `100%`
+  - `height` of `calc(100% / 3)` _(one third of the `body` height)_
+
+- target each following element with the [`id` selector][4], using the `id` you
+  defined earlier for each section, and style it:
   - `face` with a "cyan" `background-color`
   - `upper-body` with a "blueviolet" `background-color`
   - `lower-body` with a "lightsalmon" `background-color`
 
-To style an element, you systematically have to declare [rulesets](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics#anatomy_of_a_css_ruleset), composed of a property and a value.
-Here is an exemple of how to set the color of `div` tags to "red":
+To style an element, you systematically have to declare [rulesets][5], composed
+of a property and a value. Here is an exemple of how to set the color of `div`
+tags to `"red"`:
 
-```div {
+```css
+div {
   color: red;
 }
 ```
 
 ### Expected output
 
-This is what you should see in the browser:
-![](select-and-style.png)
+This is what you should see in the browser: ![screenshot](select-and-style.png)
 
 ### Notions
 
-- [`link` a CSS file](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#including_a_stylesheet)
-- [CSS basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics)
-- [ruleset](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics#anatomy_of_a_css_ruleset)
-- [List of different selectors](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics#different_types_of_selectors)
-- [universal selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors)
-- [type selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors)
-- [`id` selector](https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors)
+- [`link` a CSS file][1]
+- [CSS basics][7]
+- [ruleset][5]
+- [List of different selectors][6]
+- [universal selector][2]
+- [type selector][3]
+- [`id` selector][4]
+
+[0]: https://developer.mozilla.org/en-US/docs/Web/CSS
+[1]:
+  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#including_a_stylesheet
+[2]: https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors
+[3]: https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors
+[4]: https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors
+[5]:
+  https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics#anatomy_of_a_css_ruleset
+[6]:
+  https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics#different_types_of_selectors
+[7]:
+  https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics