• Positioning Lab | Demo

• Codecast | Source
• Positioning Overview
• CSS Positioning | Demo
• Set up a directory structure and links for the positioning lab. | Starter HTML (Use this code)

• Codecast | Source

Spend today’s session experimenting styling the content we added on Thursday. At a minimum I’d  like you to try to write selectors for the table elements and and the different kinds of lists. We’ll debrief on Thursday.

• Codecast | Source
• Styling Page Elements
  • Header
    • SVG Backgrounds
  • Content
  • Articles
  • Aside
  • Footer
• Introduction to Flexbox
• Additional Elements | Sample HTML

• Codecast | Source
• Styling Page Elements
  • Header
    • SVG Backgrounds
  • Content
  • Articles
  • Aside
  • Footer
• Introduction to Flexbox
• Additional Elements | Sample HTML

• Codecast | Source
• Color and Typography
  • Take note of your Color Codes
• Styling Page Elements
  • Page Body
    • Google Fonts
    • Background
  • Header
    • SVG Backgrounds
  • Navigation
  • Content
  • Articles
  • Aside
  • Footer
• CSS Box Model – Description | Demonstration

• Codecast | Source
• Color and Typography
  • Take note of your Color Codes
• Styling Page Elements
  • Page Body
    • Google Fonts
    • Background
  • Header
    • SVG Backgrounds
  • Navigation
  • Content
  • Articles
  • Aside
  • Footer
• CSS Box Model – Description | Demonstration

• Adding style to your page: Type, Class, and ID Selectors
• Creating and attaching a Stylesheet
• Codecast | Source
• Color and Typography
  • Take note of your Color Codes

• HTML Project Q&A
• Adding style to your page: Type, Class, and ID Selectors
• Creating and attaching a Stylesheet

• What is Validation?
• Create a Repository using these instructions.
• Publishing your work to Github
• Naming Conventions, Meta Naming, Directory Structure
• Be sure to submit your git hub repository and github pages url in Blackboard via Module 3 Assignment

• Instructor Codecast – Open in new Tab to use as a reference while we code in class
• Sectioning using HTML5 Structural Elements
• Semantic and Structural Elements
• Obsolete and Redefined Elements
• What is Validation?
• Create a Repository using these instructions.
• Publishing your work to Github
• Be sure to submit your github pages URL.

• Instructor Codecast – Open in new Tab to use as a reference while we code in class
• Hyperlinks
• Inserting Images
• Tables
• Forms

• Sample Content

• Instructor Codecast – Open in new Tab to use as a reference while we code in class
• Hyperlinks
• Inserting Images
• Tables
• Forms

• Sample Content

• Instructor Codecast – Open in new Tab to use as a reference while we lcode i
• Block vs. Inline Elements
• Headings and Structural Landmarks
• Marking Up Lists
• Text Level Semantics
• Special Character Encoding: Details | Reference
• Hyperlinks
• Inserting Images
• Tables
• Forms

• Setup Codepen – Create New Pen
• Instructor Codecast – Open in new Tab to use as a reference while we lcode in
• Understanding how a web page works
• What is HTML5?
• Doctypes & DTD’s – Document Type Definition
• Declaring a Language Type
• Exploring the <head>
  • Title Attribute
  • Meta Tags

• Sample Content

• Understanding Web Related Terminology
• Structure, Content, Design, & Behavior
• Browser Overview

Course Syllabus

• View Syllabus
• Complete Start here content in Blackboard

Introduction to the Virtual Classroom

We will be using a broad array of tools to support this course this semester. If you would like to familiarize yourself with these feel free to do so. I will explain and do walkthroughs with the tools when we begin to use them.  You are welcome to go ahead and create your accounts (they are all free) but make sure to keep track of your credentials.

• Codepen.io – Codecasting Service for Lectures and Reference
• GitHub (Student Pack) – Code Versioning Repository for submitting assignments
• Pixlr – Cloud Based Image Editing Tools

Discussion

Begin Module 1 in Blackboard

• How the Web Works
• Web Related Terminology
• Structure, Content, Design, Behavior