Week 2

HTML Quiz

Instructions
  1. Create a new directory in your projects folder named html-quiz.
  1. Inside this directory create a file named index.html. Make sure this is a valid HTML5 document.
  1. Complete the quiz by adding your answers to the index.html file.
  1. At the end of the quiz, link back to it on your class portfolio.

You have 30 minutes to complete the quiz. You may use the internet to help answer the questions if necessary, but don’t share or copy code between students. Feel free to pick and choose which questions you answer first. Try to answer as many as possible, and move on if you get stuck.

Questions
  1. Using all of the HTML heading tags, list your 6 favorite months in order of your preference.
  1. Create a link to your favorite website, and add a paragraph describing why you like it so much.
  1. Insert an image of your choosing to the page. Make sure the image includes ALT text that describes the image.
  1. Nest the following series of HTML tags inside each other, where each >represents a new level. Make sure to maintain proper indentation.
main > section > div > p > span
  1. Create an ordered list of the top 3 countries you’d like to visit. Within each country, create another ordered list of the top cities you’d like to visit in that country. Maintain proper indentation and make sure you nest your ordered lists properly.
  1. Write an HTML comment that is hidden from the browser, but displays in the code.
  1. Create an unordered list of at least 6 musical artists you like to listen to. 
  1. What do all HTML documents have in common? Answer in a paragraph.
  1. Create a relative link that links to your repository’s home page.

Check Your Work
You can always check your work by pasting your HTML file into an online HTML validator.

View the source of this website and see how you did!

Did you remember to indent properly? In case you didn’t, you can use an online tool to reformat your code quickly.

CSS Introduction

HTML
CSS
Javascript
Content
Style
Behavior
What it says
What it looks like
What it does

CSS stands for Cascading Style Sheets. CSS is used to give style and change the appearance of your structured HTML. CSS can be added to HTML in 3 ways:
  1. Inline - by using the style attribute in HTML elements
  1. Internal - by using a <style> element in the <head> section
  1. External - by using an external CSS file, which is what we’re doing in our Student Survey

It’s best practice to store your styles in an external stylesheet, linked to from your HTML document’s head. For the purpose of this class, all your styles will be stored using the external method.

This is how you link to an external style sheet:
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="assets/css/main.css">
</head>