Jan 10 - Jan 29

Introduction to HTML

LESSON OBJECTIVES - CSS

1. HTML Assessment
2. CSS Introduction
3. CSS How To
4. CSS Syntax
5. VIDEO: W3Schools CSS Syntax Tutorial (Click to Watch)

IN-CLASS Exercise: SAVE AS: inlinecss.html & internalcss.html

Go to the W3Schools CSS Tutorial website

READ and COMPLETE the following:

1. READ the section on CSS Introduction
2. READ the section on CSS How To
3. READ the section on CSS Syntax
4. Inline CSS: Click on CSS Examples
   • Under CSS Colors
     • Set the background color of an element.
     • Set the Text Color
     • Set the Border Color
5. Internal CSS: Click on CSS Examples
   • Under CSS Background
     • Set the background color of a page
     • Set the background color of different element
6. Complete the CSS Syntax Exercises 1 - 4
7. Complete the CSS How To Exercises 1 - 4

LESSON OBJECTIVES - CSS Selectors, Text, Fonts, Backgrounds, Box Model

IN-CLASS Exercise: SAVE AS: internalcss2.html

Go to the W3Schools CSS Tutorial website

READ and COMPLETE the following:

1. Use the <div> tag to break your page into divisions.
2. REVIEW the section on CSS Syntax
3. READ the section on CSS Text, PRACTICE with Try it Yourself
• color
• text-align
• text-decoration
• text-transform
• text-indent
• Complete Exercises 1 - 5
4. READ the section on CSS Fonts, PRACTICE with Try it Yourself
   • font
   • font-family
   • font-size
   • font-style
   • font-variant
   • font-weight
   • Complete Exercises 1 - 5
5. READ the section on CSS Backgrounds, PRACTICE with Try it Yourself
   • background-color
   • background-image
   • background-repeat
   • background-attachment
   • background-position
   • Complete Exercises 1 - 4
6. READ the section on CSS Borders, Margins, Padding, Height/Width
7. READ the section on CSS Box Model, PRACTICE with Try it Yourself
• content
• padding
• border
• margin
• height, width
• Complete Exercises 1 - 4
8. CSS Exercise (Bar Jokes)
9. TEST YOUR CSS SKILLS

LESSON OBJECTIVES - CSS

1. CSS Lists
• list-style-type, list-style-image, list-style-position, list-style
2. CSS Tables
• border, width & height, text-align, vertical-align, padding, color
3. CSS Position
   • position:static, position:relative, position:fixed, position:absolute, position:sticky
4. CSS Floats
• float property, clear property, clearfix Hack

Project 2 (Recipe - cssrecipe.html): (Click on Link): (Due by Tuesday, February 12, 2019 by 4:00 pm)

LESSON OBJECTIVES - CSS

1. CSS Links
• a:link, a:visited, a:hover, a:active, Link Button
2. CSS Pseudo-class
• highlight:hover, div:hover
3. CSS Navigation Bars
• Vertical Examples, Horizontal Examples, Active / Current / Fixed
4. CSS Website Layout
   • Header, Navigation Menu, Content in Columns, Footer, Responsive Layout

Go to the W3Schools CSS Tutorial website

READ and complete the following:

1. READ the section on CSS Links
• Review the 4 Link States and Link Button
2. READ the section on CSS Pseudo-class
   • Review how to style an element for different states.
3. READ the section on CSS Navigation Bars
• Review how to use for easy navigation on web pages.
4. READ the section on CSS Website Layout
• Review how to design different types of web page layouts.

IN-CLASS Exercise:

1. Save As: css_topnav.html --> Click on CSS Templates, create the topnav, content and footer webpage layout.
2. Save As: css_float.html --> Click on CSS Templates, create a header, equal columns, footer using float web page layout.

Research for your Next Project

1. Travel Website to an exotic Place or Movie Review Website

LESSON OBJECTIVES - CSS

1. CSS External CSS

Project 3 (Travel Website - csstravel.html, csstravel2.html): (Click on Link): (Due by Tuesday, February 26, 2019 by 4:00 pm)

1. REVIEW: Building a multiple page web site with columns example.
2. 2 Column Layout Example
3. Search for examples of Travel web site.
4. Zozor Travel Diaries web site
5. REVIEW: W3 CSS Templates - you can also use one of the W3 CSS Templates.

Class Only from (4:00 - 4:30) - Spring Festival

Work on your Travel website Project

Class Only from (4:00 - 4:30) - Spring Festival

Work on your Travel website Project