DF2254 Fundamentals of Web Design :: Art Institute

Week 9: HTML Challenges

HTML Challenges

Each of the following HTML challenges builds on the previous one. Complete each one in turn, working with a single HTML and a single CSS file within a site folder.

HTML Challenge 1

Make a site folder called challenges. In it, create an HTML page called index.html. Give it an h1 header, an h2 subheader, and three paragraphs. It should look like this. You can get filler text here: http://www.lipsum.com/

HTML challenge 1 - headers and paragraphs

HTML Challenge 2

Create an external stylesheet in your site folder, and link to it from the HTML file. Create styles that change the look of the h1 and h2 elements; set the font family as Georgia and define their color and font size.

HTML challenge 2 - style the headers

HTML Challenge 3

Wrap all the content inside a container div. Give that div an ID and set the width to 800 pixels. Give the div a one pixel border and set the left and right margins so that it centers on the page (in Firefox and Safari.)

HTML challenge 3 - container div

HTML Challenge 4

Create a CSS rule for the body tag that sets the background color of the page, and sets the text alignment to center (this makes it center the container div in Internet Explorer.)

Add some rules to the container div that set the text alignment back to left and background color to white.

HTML challenge 4 - body and conatiner div background colors

HTML Challenge 5

Create a basic reset rule at the top of the stylesheet that sets margins and padding to zero on all elements. HINT: The selector is simply the * character.

HTML challenge 5 - reset margins and paddings

HTML Challenge 6

Set some padding on the main container div. Set its top and bottom margins to 20px. BONUS: Combine the top, bottom, left, and right margin declarations into a single declaration.

HTML challenge 6 - add paddings and margins

HTML Challenge 7

Create some bottom margins back for the other elements by updating the header selectors and creating a rule targeting paragraphs inside the main container.

HTML challenge 7 - bottom margins

HTML Challenge 8

Add some rules to the body element that set the font-family for the whole document to Verdana, and set the color of text to a dark gray. You may have to make some adjustments in other rules to make it look really good. For example, you may need to tweak the font sizes and bottom margins for the headings and paragraphs.

HTML challenge 8 - body font

HTML Challenge 9

Make some text in the document bold. Make some text italicized. Make a link. Add rules to the styles that will make those elements look good. Remember bold should stand out in some way, and italics should stand out in a different way, from regular text. For links, make rules for both the anchor tag and for the anchor tag when you hover over it.

HTML challenge 9 - strong, em and link

HTML Challenge 10

Add this goose picture to the page. Insert it as the first thing in the first paragraph. Include the descriptive text in the markup.

HTML challenge 10 - add an image

HTML Challenge 11

Give the image an class attribute called floatleft. Then create a CSS rule that applies to images with the floatleft class that makes the text wrap around the image, gives an appropriate amount of padding and margin to the image, and gives it a nice looking border.

HTML challenge 11 - float picture left

HTML Challenge 12

Below the subheading and above the first paragraph, create an unordered list with these list items in it.

HTML challenge 12 - unordered list menu

HTML Challenge 13

Wrap all the paragraphs together inside an article element. Wrap the unordered list inside an aside element.

Create a rule for the article that tells it to be 540 pixels wide and to float left, and a rule for the aside to be 200 pixels wide and to float right.

You will need to also add a rule to the container div that tells overflow to be hidden to make it contain the floated elements.

HTML challenge 13 - content and sidebar divs

HTML Challenge 14

Make each of the items in the list a link (they don't have to link to any particular page. You can just use a # symbol for the path.) Then create a rule that sets the list-style-type for unordered lists in the sidebar to none.

HTML challenge 14 - menu links

HTML Challenge 15

Create some rules for the anchor tag in the sidebar to make it look nice. Be sure to set it to display as block. I also set the text-decoration, font, font-weight, color, left-border, background-color, margins, and padding.

HTML challenge 15 - style the menu

HTML Challenge 16

Create a hover rule for the links in the sidebar that compliments the design of the non-hover view. I changed the color of the left border, the background-color and the color of the type.

HTML challenge 16 - menu link hover

HTML Challenge 17

Give the page a title such as Home.

Then make each of the links in the sidebar link to real files (which will be created in a later challenge).

This is how they should link:

home -> index.html
products -> products.html
services -> services.html
about -> about.html
ontact -> contact.html

HTML challenge 16 - title and links

HTML Challenge 18

Add some meta tags for description and keywords to the head of the page.

HTML challenge 18 - meta tags

HTML Challenge 19

Change the h1 on the index.html page to say "Home" and save the page, then save the page as about.html and change the h1 to "About". Repeat this process for each page until you have all five pages created. Go back to each page and give it an appropriate title as well.

Test the site and be sure you named everything properly. All the links should work. If they don't, figure out what is wrong and fix them.

HTML challenge 19 - heading 1

HTML Challenge 20

Get the goose-badge.png file.

Put it in your folder and then absolutely position it in the lower right corner of the home page. Hint: to do this you will need to change the rule for the container div so that it is positioned relatively.

HTML challenge 20 - absolute positioning

Dropbox go to eCompanion

Upload the following by midnight of our next class day:

Week Assignment File Name
9 HTML Challenges challenges.zip

Assignment Details

HTML Challenges

Complete all 20 challenges described to the left. Zip up your site folder and submit it.