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:
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:
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:
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:
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:
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:
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:
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:
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:
Upload your solution to your server. Enter the URL below.
(Log in to enter your solution to this exercise.)