HTML & CSS Example Exercise Files

Convert an XHTML 4 into an HTML5 file.
- Download the zip file
- Open up sample01.html
- Make appropriate changes:
  1. Convert the DTD to HTML5.
  2. Minify the meta tag
  3. Remove excess noise from the link tag
  4. Convert the DTD to HTML5.
  5. Convert everything not nested in <li>'s into HTML5 elments, removing classes and ID's that are no longer necessary
- Compare to sample02.html, which is a possible solution
Select This! Add CSS3 Selectors to style03.css to ensure that the CSS properties and values are applied to the right elements.
- Download the zip file
- Open up style03.css
- Make appropriate changes:
  1. Use a pseudo class to target the HTML element
  2. Add a media query to target the <body> when the page is viewed on large screens
  3. Use combinators to match elements only if they are direct children of other elemeents
  4. Use selectors to target the <li>s in the nav based on order
  5. Use a combinator to match the <li> than is next to the active nav <li>
- After editing style03.css to target elements based on relationships rather than on CSS, compare to style04.css, which is a possible solution
Add whistles and bells to style05.css, making it look like a native mobile application.
- Download the zip file
- Open up sample05.html
- Make appropriate changes:
  1. Create a gradient for the whole div
  2. make the header appear beveled with inset shadows, and make its text pop
  3. Add styling to the <aside> byt making the corners round, adding a shadow and creating a background effect
  4. Make the text appear a little bolder, but not a bold as font-weight: bold by giving a slight shadow in the current color.
  5. Give the nav some styling with gradients and borders
  6. give the active link a 1) gradient, 2) rounded corners of 5px, 3) a pop
- After editing File 5 to include box shadows, text shadows, rounded corners and gradients, compare to File 6, which is a possible solution

Zip file