Skip to main content

Intro to HTML Homework

Welcome! These are homework exercises to accompany the Intro to HTML Curriculum

Class 1

For this week's homework assignment, create a website to show off your new skills.

Core HTML5 skills you should be able to include on your page(s):

  1. A nav bar with a few links that either navigate to other pages or act as anchor tags.
  2. A heading to signal something important or declare a new section/paragraph.
  3. A couple paragraphs describing the amazing things you want to share. Remember to use emphasis on key words!
  4. A list of key things to know about something in your paragraph. Why not do an ordered list and unordered list?
  5. An image of something relevant and visually appealing. You can store your image as an asset in your project folder or link back to the source on the web. The link should be clickable, but the image doesn't need to be.
  6. A footer at the bottom of the page declaring your copyright on such a wonderful write-up, and make sure you use the copyright symbol!
  7. Your page should validate in this at this link: W3 Validator.
  8. Keep your code readabable and maintanable for your future self and future contributors.

You can always check the Class 1 slides for help.

Class 2

For this week's homework assignment, we will style our homework1.html file with a new homework2.css file.

Here is what I would like to see at minimum on each lovely page:

  1. Create a style sheet and link to it from your HTML
  2. I like borders on images, add borders to all images you have. (Hint: border properties look like this 'border: 1px solid black;'.) Experiment!
  3. Your Headings should be in Georgia font.
  4. Your paragraphs should be in Helvetica.
  5. Footers are probably meant to be centered.
  6. Extra points for finding a nice background image.
    Hint: you're going to want to use the url() function to set up a background. If your text becomes hard to read, extra EXTRA points for setting a background color on your text-based elements.
  7. Center those images using CSS!
  8. Try to make your borders have rounded corners. Google a bit. CSS3!
  9. Your page should still validate in this at this link: W3 Validator.

You can always check the Class 2 slides for help.

Class 3

For this week's homework, we are going to use advanced CSS to style our homework1.html. Save your homework2.css file as homework3.css and have at it!

Here are this week's homework activities:

  1. Create several divs of various widths, heights, and colors. Use margin to push them around the page.
  2. Make some of the <div>'s into links (anchors). Then, make the background color of the div change on mouse over.
  3. Try to position some of the <div>'s relative-ly in a vertical line down the middle of the page.
  4. Create a class that you can use with <span> tags to make certain text twice the default size.
  5. Extra credit: Use images as links and change them on mouseover. This one is challenging BUT VERY FUN! Try searching fro "Turn links into images CSS".

You can always check the Class 3 slides for help.