Exercises: A Web page with text

You should do the four recommended exercises. Do the optional exercises if you want more practice.

Exercises in the Explore section are more challenging. You may need to use HTML and CSS we haven’t covered yet. Get ready to Google!

Recommended

Exercise: Product description

Create a page that looks like this, using CSS styles:

Solution

Upload your solution to your server. Put the URL below.

(Log in to enter your solution to this exercise.)

Exercise: Cats and dogs

Create a page that looks like this, using CSS styles:

Cats and dogs

Upload your solution to your server. Put the URL below.

(Log in to enter your solution to this exercise.)

Exercise: Metaphor

Create a page that looks like this, using CSS styles:

Metaphor

Upload your solution to your server. Put the URL below.

(Log in to enter your solution to this exercise.)

Exercise: Bar jokes

Create a page that looks like this, using CSS styles:

Bar jokes

Upload your solution to your server. Put the URL below.

(Log in to enter your solution to this exercise.)

Optional

Exercise: Studying advice

Create a page that looks like this:

Study tips

Match the colors approximately. Use any sans serif font. Use at least one CSS class (I used more in my solution).

I made my browser narrow to make the screenshot above, so I could fit it in this page. You don’t need to have this width.

Upload your solution to your server. Put the URL below.

(Log in to enter your solution to this exercise.)

Explore

These challenging exercises may use HTML and CSS that you haven’t seen yet. Get ready to Google!

Exercise: Friendly formulas

Make a page that looks like this:

Friendly formulas

Upload your solution to your server. Enter the URL below.

(Log in to enter your solution to this exercise.)

Exercise: Text shadow

Make a page like this:

Text shadow

Do not use a graphics program! Use HTML and CSS only.

Upload your solution to your server. Enter the URL below.

(Log in to enter your solution to this exercise.)

Exercise: Backwards text

Make a page like this:

Backwards text

Type the text into your HTML in the normal way! Copy-and-paste this into your solution:

Hey!
This is reversed!
Flip it around, willya, buddy?

Upload your solution to your server. Enter the URL below.

(Log in to enter your solution to this exercise.)

Exercise: Ticking noise

Make a page showing the YouTube video, “Potter Puppet Pals: The Mysterious Ticking Noise.” Your page should look like this:

Ticking noise

Upload your solution to your server. Enter the URL below.

(Log in to enter your solution to this exercise.)


How to...

Lessons

User login

Log in problems? Try here


Dogs