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.
6096 Commits
42 Branches
13 Tags
350 MiB
 
 
 
 
 
 
Tree: 1f5de0f26c
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '1f5de0f26c'
${ noResults }
public/subjects/AI.GO/the-skeleton
Christopher Fremond f1452b1435
fix(READMES): fixes some typo and divide a long sentence in two parts 		2 months ago
..
README.md fix(READMES): fixes some typo and divide a long sentence in two parts 2 months ago

README.md

The skeleton

Brainpower mode

Context

To craft your robot friend, you first need to build its skeleton, and that's where HTML comes in. HTML is the blueprint that sets up the structure of your robot, giving it shape and form. With HTML, you'll create the framework that holds all your amazing ideas together. Ready to start building? Let’s dive in and create the foundation of your robot buddy!

For the whole quest, the principle is to iterate over your code: when you finish an exercise, copy-paste your code to use it in the next one.

Contrary to what you will see in the videos, you don't have to run a server on your machine to use the HTML, CSS and JavaScript thanks to the integrated code editor that takes care of all that.
We've left the videos for the other educational content they provide.

Files naming

  • for the HTML files: name-of-the-exercise.html
  • for the CSS files: when you have to link one, it's named like so: name-of-the-exercise.css

Resources

We provide you with some content to get started smoothly, check it out!

Those videos are accompanying you step by step in each exercise, but if you want to check right away all the notions covered in the quest, you can watch the whole playlist throughout your next exercisesWeb - HTML, CSS & DOM JavaScript.

Your working environment may not be exactly the same as what you see in the videos or documentation, just try to adapt your work according to your research and discoveries.
Don't be afraid to try!

Instructions

Ready? Let's code!

The first step to achieve in your quest is to craft the shape of your robot ; for that, 2 things needs to be done:

To create any project, some things need to be declared in the HTML file - those are not visible elements in your page, but things cannot work without them.

The <head> part:

Choose a power that you will give to your robot from the following list and put it as a <title>:

  • invisibility
  • light-speed
  • super-strength
  • advanced-healing
  • mind-link

The <body> part:

This section contains the content of your webpage , in our case the lower body of your buddy. Define the skeleton of your robot by organizing it into three main sections: the face, the upper body, and the lower body. Inside the <body> tag of your HTML file, create three divisions using <section> tags, and place the following text content inside each one: face, upper-body, lower-body.

Don't forget to press Render again to refresh the display page when you modify your code.

Code examples

To create a div tag with hello as text content inside the body:

<body>
  <div>hello</div>
</body>

Notions