We will be creating a website in tribute to The Fresh Prince of Bel-Air. A designer has already created the CSS styling for us; we have to create the HTML for the website.
- Learn about the different roles of HTML and CSS.
- Learn about the different HTML elements available to us, including those that create content and those that group it.
- Learn how to use the HTML validator to create valid HTML.
- Write semantic HTML that expresses the meaning of the content.
You can find the starter code for this exercise here, including an empty index.html page, a style.css page created by our designer, and an image we will insert into the page.
Try to get through as much as possible on your own, but, if you need additional help, read through this hints file.
This is what the website will look like.
If you're ever curious about how a web developer created HTML or used CSS to style a certain element on a website, you can open up Developer Tools to inspect the HTML. If you're using Chrome, you can right-click on the page and click "Inspect." From there, you will see the HTML and CSS styling for the web page. You can even delete elements, add elements, and edit the CSS styling.
Developer Tools allow us to inspect HTML elements that the browser has generated, but what if we want to access all of the page's HTML? In Chrome, you can easily do so by right-clicking on the page and then clicking "View Page Source." A new tab will open containing all of the raw HTML the developer wrote — not just what the browser generated.
Take a look at the page source of some of your favorite websites. Run their HTML code through the HTML validator. Were there any mistakes in their code?