html_css_project.md

HTML / CSS Project

This project will require you to use a new tool called codepen.io. Codepen is similar to repl.it, but it allows you to write both HTML and CSS alongside your JavaScript, so that you can use JavaScript to manipulate your HTML.

Today we are going to run through several exercises, so you'll need to create a few codepens, then you can submit them here

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