Andrew in Week 5

Week 5 - MidTerm Challenges

MidTerm Challenges

Complete the challenges found below. Zip up and submit the files via the appropriate dropbox. The challenges, cumulatively, are worth 100 points. Completing them in 30 minutes or less will earn you an additional 20 bonus points. Yay for bonus points! :)

1. Create a blank HTML5 document and link a stylesheet. Put them both in a folder. [5 pts]

2. Add the Eric Meyer's CSS Reset to the top of the CSS file. [5 pts]

3. Add the appropriate code in the head of the html file to get the HTML5 shiv working. Be sure to include the html5 shiv in the project folder and that it is properly linked. [10 pts]

4. Write the HTML structure necessary to create the design shown on the midterm challenge 4 design start file. Be sure to use HTML5 tags and make sure everything is properly closed. [15 pts]

5. Add CSS to the stylesheet file that gets the page to display as it does in the midterm challenge 4 design start file. Note that the colors are not important, and the height of elements is not important, but the width is important. Use min-height to get the elements to display even if there is no content. [15 pts]

6. Create the horizontal navigation shown in the midterm challenge 6 design file. Note that the color to the right of the navigation links should show. Also, the navigation links should have 2px wide left and right borders. The colors of the links do not matter, but the width and height of each link should match the design. Text inside the links should be vertically and horizontally centered. [20 pts]

Create the HTML and CSS for the sidebar navigation as seen in the midterm challenge 7 design file. The border and spacing are important. Be sure you are using proper HTML tags for the navigation. [20 pts]

8. Add content to the main area of the site so that it looks like the midterm challenge 8 design file. The padding and font size, line height, and color are important, as is the margin on the bottom of the paragraphs. [10 pts]

9. Demonstrate that you can correctly complete all the above challenges within 30 minutes and get 20 bonus points! [20 pts]


Center for the Arts Site

Complete the assignment found in the Presentation file below. Once you are finished, zip up and submit the files via the appropriate dropbox.

Downloads

Code Snippets

/************ Main Nav Anchor Rule ***********/

#mainnav ul li a {
	display:block;
	text-align:center;
	font-family:FuturaStdMedium;
	color:#fff;
	width:180px;
	height:40px;
	line-height:40px;
	text-decoration:none;
	text-transform:uppercase;
	font-size:120%;
	letter-spacing: .1em;
}

/********* Sub Navigation Rules ***********/

#subnav {
	float:left;
	width:180px;
	margin: 50px 0;
	min-height: 250px;
	padding: 15px 0;
	background:url(images/sidebar-home.gif) repeat-y left;
}

#subnav ul li {
	background:url(images/dot.png) left no-repeat;
	padding-left:45px;
	height:26px;
	line-height:24px;
	margin-left:10px;
	margin-bottom: 20px;
}

#subnav ul li a {
	font-family:FuturaStdLightCondensedObliqu;
	color:#666;
	text-decoration:none;
	font-size:110%;
}

/**************** Content rule **********/

#content {
	width:720px;
	float:right;
	min-height:250px;
	margin: 50px 0;
	font-family:FuturaStdBook;
	line-height:1.5em;
	color:#666;
	font-size:85%;
}
            

Extra Credit: Desktop Repainter Site

For extra credit, make an attempt at coding the Desktop Repainter website prior to our next class section. (In other words, this must be submitted prior to the beginning of class in week 6.) How far can you get? Where did you get stuck? Respond to these questions in the dropbox comments section when you submit the zip file.

Downloads