Apply Today to our Software Engineering Program & check out our scholarships!

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 a p 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 the h1 and above the main) 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!

Up Next