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:

  • What line numbers in the HTML file are responsible for the text displayed in the browser?
  • What organizational structures do you notice?
  • Try commenting out a line of code! Highlight a section of the code and use cmd + / to comment out that line. Then click the green Run button. What happens? Highlight it again and use the same keyboard shortcut to undo it!
  • What might be the purpose of the class that appears 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