HTML & CSS

Create a static HTML site with 1 or more external CSS stylesheets linked to from a CSS subfolder. Your HTML files should contains all of the items listed below. It should be made up of a minimum of 4 pages. It does not need to be pretty in any way shape or form, but should be functional. You may not use any prefabricated assets or frameworks with the exception of "normalize.css" which is permitted. For images in your page use the placeholder service "http://placehold.it" For text on your page use "Lorem ipsum" text (http://littleipsum.com). For video on the site, use both a .webm video and an .mp4 video. You may use the files located at: http://codecore.ca/video.

HTML5 elements

<header> 
<nav>
<section>
<main>
<article>
<aside>
<footer>
<audio>
<video>
<source>

Bonus points will be given for the integration of a fallback for browsers which do not support HTML5 elements.

Tables

Create a table with 6 columns and 20 rows and populate it with text. Using CSS ensure the following criteria is met.

Utilize colspan and rowspan

Contains a table header row with bold uppercase text and a unique background color.
All text in all table cells should be rendered as lower case with a leading capital letter regardless of entry.
The first column on each row should be bold.
Bonus points for making each alternating row have a different background color.

Floats

There are several methods that can be used to "Clear a float" we will use the empty div method because it's both the safest choice for cross browser compatibility, and the easiest to implement.

Demonstrate your knowledge of floats by floating several elements within another element and clearing the float. For example place 4 small styled divs or images, floated left, within a styled div box thats height is undefined.

As above do the same with item's float changed to the right.

Combine left and right floated rows of elements within the same container box with an undefined height.

Bonus points for demonstrating the float assignment with other float clearing methods in addition to the empty div.

Forms

Create a one or more complex forms that include the following elements and field types. Do not use tables for laying out your form. The form does not need to be functional.

<form>
<fieldset>
<legend>
<label>
<input>

Form Types

 text
 textarea
 radio
 checkbox
 select
 submit
 reset
 url
 tel
 email
 search
 number
 color
 date
 time
 week
 month

Form should include

A dropdown dialog (select) utilizing <datalist>
Utilize the autofocus attribute on an input
Utilize the placeholder attribute on one or more inputs

ogryzek/week1_html_and_css.md