Lessons

lesson 1 - Get Organized and Explore HTML editors

• check into class
• establish "student" account download FTP software
• create a "homework" page
• review concepts found in CS 50.11A course
• create a homework page
• review HTML editors

Read the Editor Lesson - Step by Step Instructions

Use this as a starting pont for your homework page

lesson 2 - box properties

• read textbook - chapter 7 (160-165), chapter 6 (134-139)
• the box model
• padding, border, margin
• background basics
• explore border options

Box Properties Lesson - Step by Step Instructions

lessons 3 / 4 - CSS layout

We will spend 2 weeks on this lesson - the reading and concepts are divided into 2 parts.

part 1

• read textbook - chapter 8 (184--195)
  
• normal flow
• overflow
• position property - static, relative, absolute, fixed
• float property
• clear a float
• 2 column layout - create wireframe

part 2

• read textbook - chapter 8 (196 - 201)
• 2 column layout - add my web page content
• hyperlinks in an unordered list
• horizontal navigation with an unordered list
• CSS ineractivity with pseudo classes
• Practice with a 2 column layout :: navigation on the right
• Optional lesson, using CSS to create the look of buttons

Read the Step by Step Instructions for the CSS Layout Lesson

lessons 5 - Structural Elements

• read textbook - chapter 8 (202 - 215)
• <figure> and <figcaption>
• structural elements (header, nav, footer)
• more structural elements (section, article, aside, time)
• header, h1, hgroup
• CSS for screen and print

Read the Step by Step Instructions for the Structural Elements Lesson

lesson 6 - tables

• read textbook - chapter 9 (218-235)
• table basics
• caption and summary
• style the table
• border collapse
• span rows and columns
• table color

Read the Step by Step Instructions for the Table Lesson

lesson 6 - forms

Read the Step by Step instructions for the Forms lesson

Advanced forms

Read the Step by Step instructions for the Advanced Forms lesson