COURSE SCHEDULE

(Last Revised: September 19, 2019)

Disclaimer: The instructor reserves the right to make changes in the course schedule.

Date
Online Reading / Videos
In Class Exercises / Projects

Aug 15 - Aug 29

 

 

Introduction to HTML
Sep 3

LESSON OBJECTIVES - CSS

  1. HTML Assessment
  2. CSS1: Go to w3schools.com - CSS Basics
  3. Click on CSS Introduction
  4. Click on CSS Syntax
  5. Click on CSS Selectors
  6. Click on CSS How To
  7. Click on CSS Background
  8. Click on CSS Text
  9. Click on CSS Font
  10. Click on CSS Links
  11. Click on CSS Lists
Go to the W3Schools CSS Tutorial website, scroll down and Click on:

IN-CLASS CSS Exercises: - COMPLETE the following:

  1. Complete the CSS Selectors Exercises 1 - 4
  2. Complete the CSS How To Exercises 1 - 4
  3. Complete the CSS Background Exercises 1 - 4
  4. Complete the CSS Text Exercises 1 - 4
  5. Complete the CSS Font Exercises 1 - 4
  6. Complete the CSS Links Exercises 1 - 4
  7. Complete the CSS Lists Exercises 1 - 4

WATCH THE FOLLOWING ADDITIONAL VIDEO:

  1. LearnCode academy YouTube Video - HTML + CSS Tutorial for Beginner's
Sep 5

LESSON OBJECTIVES - CSS

  1. CSS2: Go to w3schools.com - CSS Properties
  2. Click on CSS Tables
  3. Click on CSS Box Model
  4. Click on CSS Borders
  5. Click on CSS Outline
  6. Click on CSS Margins
  7. Click on CSS Padding
  8. Click on CSS Display
  9. Click on CSS Max-width
  10. Click on CSS Position
  11. Click on CSS Overflow
  12. Click on CSS Float
  13. Click on CSS Inline-block
    • To create Navigational Links
  14. Click on CSS Align

 

 Go to the W3Schools CSS Tutorial website, scroll down and Click on:

IN-CLASS CSS Exercises: - COMPLETE the following:

  1. Complete the CSS Table Exercises 1 - 6
  2. Complete the CSS Box Model Exercises 1 - 4
  3. Complete the CSS Border Exercises 1 - 4
  4. Complete the CSS Outline Exercises 1 - 3
  5. Complete the CSS Margin Exercises 1 - 4
  6. Complete the CSS Padding Exercises 1 - 3
  7. Complete the CSS Display and Visibility Exercises 1 - 4
  8. Complete the CSS Positioning Exercises 1 - 5
  9. Complete the CSS Align 1 - 2

 

CSS Project 1- (Due by Tuesday, September 10, 2019 by 4:00 pm)

  1. Click on Link for Instructions
Sep 10

LESSON OBJECTIVES - CSS

  1. CSS3: Go to w3schools.com - CSS Layout
  2. Click on HTML Layout
    • HTML Layout Example
    • HTML Layout Elements
      • <header>, <nav>, <section>, <article>, <aside>, <footer>, <details>, <summary>
    • HTML Layout Techniques
      • HTML tables (not recommended)
      • CSS float property
      • CSS flexbox
      • CSS framework
      • CSS grid
  3. Click on CSS Website Layout
    • Header
    • Navigation Menu
    • Content
    • Footer
  4. Click on CSS Examples - Click on CSS Templates
    • Header, equal columns and footer
    • Header, unequal columns and footer
    • Topnav, content and footer
    • Sidenav and content

 

CSS Project 2- (Due by Tuesday, September 17, 2019 by 4:00 pm)

  1. Click on Link for Instructions

WATCH THE FOLLOWING ADDITIONAL VIDEO:

  1. LearnCode academy YouTube Video - Easy HTML + CSS Layout
Sep 12

LESSON OBJECTIVES - CSS

  1. CSS4: Go to w3schools.com - CSS Images
  2. Use an Image as a Link
  3. Click on CSS Image Gallery
  4. Click on CSS Style Images
 Continuing Working on CSS Project 2 - (REMINDER: Due by Tuesday, September 17, 2019)

WATCH THE FOLLOWING ADDITIONAL VIDEOS:

  1. LearnCode academy YouTube Video - Ways to Code the Images
Sep 17

LESSON OBJECTIVES - CSS

  1. CSS5: Go to w3schools.com - CSS How To - External CSS
  2. External CSS

CSS Project 3 - Travel Website (Due Tuesday, September 24, 2019 by 4:00 pm)

  1. Click on Link for Instructions

EXAMPLES

  1. Example: Zozor Travel Diaries web site
  2. Example: Magazine web site - Two page layout
  3. Example: W3Schools - 2 Equal, Unequal, Responsive Column Layouts
  4. Example: W3Schools - 3 Equal, Unequal, Responsive Columns Layouts
  5. Use the Internet to search for other examples of Travel web sites.

 
Sep 19

YouTube Travelersy Media Video - CSS Crash Course For Absolute Beginners

  1. Scroll Down to kiD for Time Stamps for parts of the Video
 Continuing Working on CSS Project 3 - (REMINDER: Due Tuesday, September 24, 2019 by 4:00 pm)

© 2019 Yvonne C. Flores, Guam Community College