Want to go back?
HTML (The Bones)
Tour the Existing HTML
Take a few minutes to explore the HTML code in the CodePen. Do not worry about the CSS or JavaScript yet!
Here are some guiding questions:
- What line numbers in the HTML file are responsible for the text displayed in the browser?
- There are a lot of
section
elements! What do you think each of them represents? - What do you think the difference between a
h1
and ap
element is? - What might be the purpose of the
class
that appears on some of the elements? - Anything else you notice?
Modify the HTML
Let’s make some changes to this HTML code. Be sure to click Run
after each edit to see the changes!
- Change the title of the page to include your name (i.e. “Kat’s Magic Eight Ball!”)
- Change the default response on the dice so it says something other than “Yes.”
- Add an
h2
element on line 3 (under theh1
and above themain
) with a sub-heading for the app (i.e. “Click the ball to reveal the answers you’re looking for!”)
HTML Summary
- Elements that live inside of the
body
tags will be displayed on the page. - We can nest elements inside of other elements to create structure within the HTML.
- Classes allow us to give each element a specific label so that we can reference that element later.
- The HTML determines the content of our page!