2️⃣

1.2 Basic elements of a Webpage

Inspect Element

Want to see and even edit existing HTML/CSS on a real-life website? Use Inspect Element on your browser! On most browsers, you can right-click and select Inspect or Inspect Element to view the code that’s “under the hood” of the website you’re currently viewing. If you right-click that code, you can even edit it and see how it changes!

The code might look a bit overwhelming at first. Don’t worry, you don’t have to understand everything in it. Just have fun playing around with it for now.

The elements of a Webpage

By now, you’ve probably seen many different webpages in your life. You probably know that while all webpages are unique, they usually share common features that all basic webpages should have. These include:

  • Title
  • Navigation bar
  • Header
  • Body of a webpage
    • Images
    • Text
    • Other media
  • Footer

The diagram below shows a wireframe for a typical website. Don’t worry about all the different terms; just try to identify the parts listed above on the diagram to familiarize yourself with them, what they look like, and where they are located on a webpage.

image

By the end of this course, you will be able to make a basic webpage like this one using HTML and CSS — in fact, that’ll be your final project!

⚖️

Copyright © 2021 Code 4 Tomorrow. All rights reserved. The code in this course is licensed under the MIT License. If you would like to use content from any of our courses, you must obtain our explicit written permission and provide credit. Please contact classes@code4tomorrow.org for inquiries.