CBTE 162: Fall 2017 : Exercise Demos

All Demos in Order of Complexity

1. Exercise 1 : Basic HTML & Text Styles

• Demo 1a
• Demo 1b
• Demo 1c
• Demo 1d
• Demo 1e

2. Exercise 2A : Using Lists

• Demo 2a
• Demo 2b
• Demo 2c

2. Exercise 2B : Adding Simple CSS Styles

• Demo 2d
• Demo 2e

3. Exercise 3 : Linking Things Together

• Demo 3a
• Demo 3b
• Demo 3c
• Demo 3d

4. Exercise 4 : Images & Graphics

• Demo 4a
• Demo 4b
• Demo 4c
• Demo 4d
• Demo 4e

EXTRA DEMO: Using a DIV to Contain Content

• Loose Content Page
• Contained Content Page

Extra Demo: Using Google Fonts

• EXTRA: Adding Google Fonts

Project One: Simple Website

• Use Demos 1 - 4

5. Exercise 5 : Forms

• Demo 5a
• Demo 5b
• Demo 5c
• Demo 5d
• A Simple Form

6. Exercise 6 : Padding, Margin, Borders and Simple Navigation

• Demo 6a
• Demo 6b
• Demo 6c
• Demo 6d
• Demo 6e
• Demo 6f

7. Exercise 7 : Page Layout

• Demo 7a
• Demo 7b
• Demo 7c
• Demo 7d
• Demo 7e
• Demo 7f

8. Exercise 8 : Getting Responsive

• Natural Flow
• Fixed Design
• Flexible Design
• Max Width
• Simple Responsive

Project Two: Simple Responsive Business Website

• Use All Demos