html_css_project.md

HTML / CSS Exercises

These exercises will require you to use a few new tools to write and test your code. To create and edit HTML you should use the atom editor. To test your HTML & CSS code simply open the html file in a web browser (Chrome is preferred).

Today we are going to run through several exercises, so you'll need to create a few files. I recommend making a a project folder to hold all the new files you'll be making.

Exercise 1

In this exercise we will focus entirely on HTML.

Create a page that looks like the following link:

Exercise 1 Wireframe

Remember to use ul, p and h1 tags to style your text.

Exercise 2

In this exercise we will style text, and position an image using HTML and CSS, and we'll also add an image.

Create a page so that it looks like the following link, but find your own image and quote, and pick a color to go with the image. Place your <img> tag inside of a <div> tag.

Exercise 2 Wireframe

Remember to check the documentation: MDN CSS Reference

You might find the following properties handy:

• Margin
• Padding
• Font Family
• Background-Color
• Border

Exercise 3

In this exercise, we will position blocks of text and images with CSS.

Create a page so that it looks like the following link:

Exercise 3 Wireframe

Remember to check the documentation: MDN CSS Reference

You might find the following properties handy:

• Float
• List Style
• Margin

If you're stuck, check out these tutorials, written by the makers of Firefox:

• CSS Layout Tutorial
• CSS Floats Tutorial