Week 9: 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 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 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 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 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 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 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 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 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 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 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 12
Below the subheading and above the first paragraph, create an unordered list with these list items in it.
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 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 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 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 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 18
Add some meta tags for description and keywords to the head of the page.
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 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.
Upload the following by midnight of our next class day:
Complete all 20 challenges described to the left. Zip up your site folder and submit it.