root
/
public
mirror of https://github.com/01-edu/public.git
14
27
Fork 0
Code Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
4307 Commits
90 Branches
11 Tags
349 MiB
 
 
 
 
 
 
Tree: 51c804a135
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '51c804a135'
${ noResults }
public/subjects/nesting-organs-dom
Clement Denis 8573f049f2
Create a copy of the dom tests to js image 		2 years ago
..
README.md Create a copy of the dom tests to js image 2 years ago
nesting-organs.png Create a copy of the dom tests to js image 2 years ago

README.md

Nesting organs

Instructions

Bravo! You displayed the global shape of your entity, but now it's time to populate each division ; let's add up some organs! To do so, we're going to introduce you the concept of nesting elements inside others.

So far, you just have a unique layer in your <body>: face, upper-body & lower-body are all at the same level. But as you know, on a face, there are 2 eyes, a nose, and a mouth - and inside that mouth, a tongue, etc. ; any element can potentially be a container for other elements.

Let's add new elements and wrap them in different layers ; convert this list of organs in a HTML structure with the corresponding given tags!

  • face: section tag with id face
    • eyes: div tag with id eyes
      • eye left: p tag with id eye-left
      • eye right: p tag with id eye-right
  • upper body: section tag with id upper-body
    • arm left: div tag with id arm-left
    • torso: div tag with id torso
    • arm right: div tag with id arm-right
  • lower body: section tag with id lower-body
    • left leg: div tag with id leg-left
    • right leg: div tag with id leg-right

Modify your CSS file to add rulesets to section tags: display at "flex" and justify-content at "center" (this is to turn the section tags into flex containers, so the elements inside will be centered)

Add also the following CSS to your CSS file to see the freshly-added nested elements:

div,
p {
  border: solid 1px black;
  padding: 10px;
  margin: 0;
  border-radius: 30px;
}

#face {
  align-items: center;
}

#eyes {
  display: flex;
  background-color: yellow;
  justify-content: space-between;
  align-items: center;
  border-radius: 50px;
  width: 200px;
}

#torso {
  width: 200px;
  background-color: violet;
}

Code examples

Nest several elements:

<div id="first-element">
  <span id="second-element"></span>
  <div id="third-element">
    <p id="fourth-element"></p>
  </div>
</div>

Expected output

This is what you should see in the browser:

Notions