HTML

1. BASIC HTML TEMPLATE (0:00)

2. HEADINGS (1:27)

3. PARAGRAPHS (2:37)

4. LINE BREAK (3:17)

5. COMMENTS (4:07)

6. LINKS (5:17)

7. LISTS(7:52)

   • Create an unordered list with at least three list items inside. Each list item should represent a fruit of your choice.

   • Build an ordered list which lists the steps required to make a peanut butter and jelly sandwich.

   • Create a nested list. Start with an unordered list that contains three list items. Inside one of those list items, create an ordered list with three list items. Come up with information to put in your nested lists that makes sense.

   • Create an ordered list with three list items and use different types of markers (e.g., Roman numerals, uppercase letters, lowercase letters) for each list item.

TABLES (9:37)

1. • Create a simple HTML table with two rows and three columns. Populate the table with some sample data (anything you want).

   • Improve your table from Task #1 by adding a table caption and headers.  Then, create header rows to label your columns.  You can use the <caption>, <thead>, and <th> elements for this.

   • Use cell spanning by merging cells in your table.  Merge two adjacent cells in the second row to create a single cell that spans two columns.  Use the colspan attribute to achieve this.

   • Create a more complex table by nesting one table inside another.  Create a table with two rows and two columns, and then insert another table within one of the cells. 

DIV & SPAN (12:47)

1. • Create an HTML page a few paragraphs (add your own content). Wrap each paragraph in a <div> element, and give each <div> a different background color. Use basic CSS to style the text within the <div> elements.

   • Design a simple three-column layout for a webpage. Use three <div> elements to represent the left, middle and right columns.  Add some text or images inside each column for content.

   • Create a paragraph inside the div.  Select a few words or phrases within the paragraph. Wrap each of these selected words or phrases with a <span> element.  Apply different inline styles to each <span>, such as changing the text color.

1. Nested Table (15:30)

2. IFRAME (16:35)

3. FORMS (18:00)

   • Your task is to create a "Contact Us" form using all the HTML tags we've explored in the prior lesson. As you create your contact form, make sure that each tag serves a meaningful purpose. By this I mean that you must make the radio, select, text area and input forms make sense asking appropriate questions for your user to fill out. Your goal is to create a user-friendly form that guides visitors to fill it out with the information you'd like to collect. Include the following:

     1. Form

     2. Input

     3. Label

     4. Textarea

     5. Select

     6. Button

     7. Radio

     8. Select

1. IMAGES (22:12)

2. FONT AWESOME (website) (23:55)

   • Create a webpage with at least three different Font Awesome icons of your choice.

   • Change the size of one of the icons to be twice as large as the others.

   • Change the color of another icon to green.

BOOTSTRAP (website) (26:30)

1. • Create a simple webpage that uses Bootstrap. Your website should contain; at least 1 layout from the Bootstrap docs,  at least 3 components from the Bootstrap docs and at least 2 utilities from the Bootstrap docs