Apply Today to our Front End or Back End Programs & check out our scholarships!

Back to Setup Page

Modifying the HTML

Tour the Existing HTML

  • Information between the <head> tags does not show in the browser. It is only background information for the webpage.
  • Elements that live inside of the <body> tags will be displayed on the page (lines 13-39).
  • The <div> tags define a division or a section in an HTML document. These allow us to group important elements together and nest elements to create structure and organization.

Explore to Learn:

  • Where do you see the text displayed in the browser reflected in the code?
  • What organizational structures do you notice?
  • Try commenting out a line of code using cmd + / and then click the green Run button. What happens? Use the same keyboard shortcut to undo it!
  • What might be the purpose of the classes on some of the elements?

Breakouts: Modify the Existing Code

Now that we're getting to know HTML and this specific project a bit better, let's modify it!

  • Add two more single cards, each with a card title and card text.
  • Decide what content you would like for your webpage. If you're not feeling creative, make it a glossary of terms we are learning today!
    • CSS: Short for Cascading Style Sheets, this language controls the look and feel of a webpage. It can change the layout of items on a page, colors, fonts, and even animate elements!
    • JavaScript: This programming language is responsible for user interaction. For example, when the user clicks a button and sees a change in the browser, this action is controlled by JavaScript.

If you would like to check your work at this point, you can compare with this replit.

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 number of elements and the content inside of the elements in the HTML file usually have a 1-to-1 correlation with what we see in the browser

Next Section: CSS