COURSE SCHEDULE

(Last Revised: February 20, 2020)

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

Date
Online Reading / Videos
In Class Exercises / Projects

Jan 9 - 23

 

 

Introduction to HTML
 
  1. Online Tutorial - w3schools.com The World's Largest Developer Site
  2. Learncode Academy YouTube Videos -
  3. w3schools.com CSS YouTube Videos -
Jan 28 LESSON OBJECTIVES - CSS
  1. CSS1: Go to w3schools.com - CSS Basics
  2. Click on CSS Introduction
  3. Click on CSS Syntax
    • 3 Components
      • Selectors
      • Properties
      • Values
    • /* CSS Comments */
  4. Click on CSS How To
    • Inline (highest precedence)
    • Internal - use <style> </style> tags, nested inside the <head> </head> tags.
    • External - use <link> tag
  5. Click on CSS Selectors
    • Simple Selectors
    • Grouping Selectors
  6. Click on CSS Background
    • background-color, background-image, background-repeat, background-attachment, background-position
    • CSS background - Shorthand (use after more practice)
  7. Click on CSS Text
    • color, text-align, text-decoration, text-transform, text-indent
  8. Click on CSS Font
    • font, font-family, font-size, font-style, font-variant, font-weight
  9. Click on CSS Lists
    • list-style-type, list-style-image, list-style-position, list-style
  10. Click on CSS Links
    • Links can be styled with any CSS property (e.g. color, font-family, background, etc.
    • 4 Link States
      • a: link, a: visited, a: hover, a:active

 

COMPLETE the following IN-CLASS CSS Exercises (Click on Link)

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

WATCH THE FOLLOWING VIDEOS: Learncode Academy YouTube channel

  1. VIDEO: 3/11 HTML CSS Tutorial for Beginners
  2. VIDEO: 4/11 EASY! Hand-code an HTML + CSS layout
Jan 30

LESSON OBJECTIVES - CSS

  1. CSS2: Go to w3schools.com - CSS Properties
  2. Click on CSS Selectors
    • #id Selector
    • .class Selector
    • *universal Selector
  3. <div> Container for an Element
  4. Click on CSS Borders
  5. Click on CSS Margins
  6. Click on CSS Padding
  7. Click on CSS Height/Width
 CSS Project 1- Biography (To Be Graded In Class)
  1. Go to your CS211 Folder in Google Drive:
    • OPEN your CSS folder,
    • Create a CSS Biography sub folder.
  2. Click Here to view the Project Briefs
    • CALL ME for grading.
  3. DRAG cssbio.html to your Shared CS211 / CSS / CSS Biography sub folder.

 

HTML Assessment

 
Feb 4

LESSON OBJECTIVES - CSS

  1. CSS3: Go to w3schools.com - CSS Properties and CSS Layout
  2. Click on CSS Box Model
  3. Click on CSS Outline
  4. REVIEW: Click here for HTML Layout tags
  5. CSS Layout
    • Click on CSS Display
    • Click on CSS Max-width
    • Click on CSS Position
    • Click on CSS Overflow
    • Click on CSS Float
    • Click on CSS Inline-block
    • Click on CSS Align

COMPLETE the following IN-CLASS CSS Exercises (Click on Link)

  1. Complete the CSS Border Exercises 1 - 4
  2. Complete the CSS Margin Exercises 1 - 4
  3. Complete the CSS Padding Exercises 1 - 3
  4. Complete the CSS Height/Width Exercises 1 - 2
  5. Complete the CSS Box Model Exercises 1 - 4
  6. Complete the CSS Outline Exercises 1 - 3
  7. Complete the CSS Display/Visibility Exercises 1 - 4
  8. Complete the CSS Positioning Exercises 1 - 5
  9. Complete the CSS Overflow Exercises 1 - 3
  10. Complete the CSS Align Exercises 1 - 2
  11. Click Here to view the In-Class Exercise

WATCH THE FOLLOWING VIDEOS: Learncode Academy YouTube channel

  1. VIDEO: 5/11 Build an HTML + CSS Layout with Flexbox
  2. VIDEO: 6/11 HTML CSS Tutorial for Beginners - multiple pages
Feb 6

LESSON OBJECTIVES - CSS

  1. CSS4: Go to w3schools.com - CSS Properties
  2. Click on CSS Website Layout

CSS Project 2 - CSS Magazine (To Be Graded in Class)

  1. Go to your CS211 Folder in Google Drive:
    • OPEN your CSS folder,
    • Create a CSS Magazine sub folder.
  2. Click Here to view the Project Briefs
  3. Download the 2 Files Here
  4. CALL ME for grading.
  5. DRAG cssmagazine.html to your Shared CS211 / CSS / CSS Magazine sub folder.

 

WATCH THE FOLLOWING VIDEOS: Learncode Academy YouTube channel

  1. VIDEO: 7/11 CSS Selectors Made Easy
  2. VIDEO: 8/11 HTML & CSS Tutorial - Ways to code images
Feb 11

LESSON OBJECTIVES - CSS

  1. External CSS - creating an external .css file
  2. CSS5: Go to w3schools.com
  3. Click on CSS Image Gallery
  4. Click on CSS Templates (towards the bottom)
    • Read Header, equal columns, and footer (Click on Try It (using Float))
    • Read Header, unequal columns, and footer (Click Try It (using Float))
    • Read Topnav, content and footer (Click Try It Yourself)
    • Read Sidenav and content (Click Try It Yourself)
  5. Examples

COMPLETE the following IN-CLASS CSS Exercise

  1. Create a CSS Gallery folder for the following:
  2. Create an Image Gallery:
    • You will need to find 4 images, save them in your folder.
    • Use the HTML code provided, Save As: index.html
    • Cut and Paste the CSS in index.html into a new file, Save As: style.css
      • Remove the <style> </style> tags.
    • In your index.html file, in the <head>, enter the <link> to reference the CSS file.
  3. PRACTICE: CSS Quiz
  4. DRAG index.html, style.css and the 4 images to your Shared CS211 / CSS / CSS Gallery sub folder.
Feb 18

LESSON OBJECTIVES - CSS

  1. CSS Assessment

CSS Project 3 - Travel Website (Due Thursday, February 20, 2020 by 5:30 pm)

  1. Create a CSS Travel folder for the following:
    • HTML file save as: index.html
    • CSS file save as: style.css
    • Create a images subfolder. Place all images inside the sub folder.
  2. Click on Link for CSS Travel Project Instructions
Feb 20   Continuing Working on CSS Travel Project - (REMINDER: Due Thursday, February 20, 2020 by 5:30 pm)

© 2020 Yvonne C. Flores, Guam Community College