00
Dev Tools, Git & Github
Objectives
Agenda
Tools
Git Overview
Git Tutorial
01
HTML Basics
Objectives
Agenda
HTML Structure
HTML Tag Anatomy
HTML Attributes
Tag Overview
Code Along
Lab
02
CSS Basics
Objectives
Agenda
Exercise - HTML Review
Relative Paths
Intro to CSS
Code Along
Lab
03
CSS Selectors and CSS Box Model
Objectives
Agenda
CSS Intro Review
Classes and Ids
CSS Selectors
CSS Selectors Examples
CSS Cascading Guidelines
CSS Box Model
Code Along
Lab
Homework
04
Page Layout
Objectives
Agenda
Last Class Review
Code Along #1
Block and Inline Elements
Containing Elements
Semantic Elements
CSS Floats
Code Along #2
Lab
05
CSS Positioning and CSS Colors
Objectives
Agenda
Last Class Review
Layout Challenge Review
CSS Colors
CSS Positioning
Background Images
Code Along
Lab
Homework
06
Intro to Programming
Objectives
Agenda
What is Programming?
Pseudocode
Class Exercise
Group Exercise
Javascript Overview
Code Along
Lab
07
Intro to jQuery
Objectives
Agenda
Final Projects
Programming Protips
Intro to the DOM
Intro to jQuery
Adding jQuery to your projects
$() function
Document Ready Function
jQuery in Action
Code Along
Lab
Homework
Final Project Deliverable #1
08
Variables, Datatypes & Conditionals
Objectives
Agenda
Last Class Review
Code Along #1
Console Log
Variables
Data Types
Arithmetic Operators
Code Along #2
Comparison Operators
Logical Operators
Conditionals
Code Along #3
Code Along #4
09
Functions
Objectives
Agenda
Last Class Review
Function Overview
Declaring Functions
Calling Functions
Returning Values from Functions
Working with Parameters
Functions Calling Other Functions
Code Along #1
Preventing Default Behavior of Forms
Code Along #2
Anonymous Functions
Code Along #3
10
Javascript Lab
Objectives
Agenda
Last Class Review
Lab Overview
Milestone #1
Milestone #2
Milestone #3
Bonus Milestone
Final Project Deliverable #2
Homework
11
Arrays & Advanced Javascript Lab
Objectives
Agenda
Array Overview
Looping through Arrays
Code Along
$(this)
Lab
12
Flexbox
Objectives
Agenda
Flexbox Overview
Flexbox Terminology
Flex Container Properties
Flex Items Properties
Exercise
Flexbox with Floats
Code Along
Lab
Homework
13
Responsive Design
Objectives
Agenda
Last Class Review
Fixed Width Layout
Mobile Websites
Responsive Design Overview
Viewport Meta Tag
Media Query Overview
Media Query Parts
Breakpoints
Progressive Enhancement
Grids
Responsive Grid Example
Code Along
EMS / REMS
Responsive Images
Rules of Thumb
14
Responsive Design Lab
Objectives
Agenda
Lab Overview
Milestone #1
Milestone #2
Milestone #3
Bonus Milestone
Homework
15
Forms
Objectives
Agenda
Bootstrap Overview
Bootstrap Grid
Code Along #1
Form Overview
Form Elements
Styling Forms
Code Along #2
16
Firebase
Objectives
Agenda
JSON
Firebase Overview
Real Time Database
Code Along #1
Code Along #2
17
Todo Application
Objectives
Agenda
Code Along
18
Final Projects Lab
Objectives
Agenda
Code Along
Lab
21
Class Resources
Videos
Flexbox
Objectives
Objectives
Introduce flexbox
Understand the differences between flexbox and floats