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
Flexbox
Objectives
Agenda
Lab: Relaxr Blog
Flexbox Overview
Flexbox Terminology
Flex Container Properties
Flex Items Properties
Exercise
Flexbox with Floats
Code Along
Lab
07
Intro to Programming
Objectives
Agenda
Final Projects
What is Programming?
Pseudocode
Class Exercise
Group Exercise
Javascript Overview
Code Along
Lab
Final Project Deliverable #1
08
Intro to jQuery
Objectives
Agenda
Programming Protips
Intro to the DOM
Intro to jQuery
Adding jQuery to your projects
$() function
Document Ready Function
jQuery in Action
Code Along
Lab
09
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
Homework
10
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
Single Responsibility Principle
Code Along #2
Lab
11
Javascript Lab
Objectives
Agenda
Last Class Review
Lab Overview
Milestone #1
Milestone #2
Milestone #3
Bonus Milestone
Homework
12
Arrays & Advanced Javascript
Objectives
Agenda
Array Overview
Anonymous Functions
Looping through Arrays
Code Along
$(this)
Lab
13
Javascript Objects
Objectives
Agenda
Object Overview
Using Objects with Arrays
Code Along
Final Project Deliverable #2
14
Responsive Design
Objectives
Agenda
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
Lab
15
Responsive Design Lab
Objectives
Agenda
Bootstrap Overview
Lab Overview
Bootstrap Grid
Milestone #1
Milestone #2
Milestone #3
Bonus Milestone
Homework
Code Along
16
Forms
Objectives
Agenda
Form Overview
Form Elements
Styling Forms
Code Along
17
Working with APIs
Objectives
Agenda
JSON
API Overview
Making API Requests with jQuery
API Example
Code Along
18
Final Projects Lab
Objectives
Agenda
Code Along
Lab
21
Class Resources
Videos
Flexbox
Lab
Lab
Lab: Magazine Layout using Flexbox & Floats
Work individually or in teams to recreate the magazine layout depicted in
layouts_challenge/layouts.pdf
file (found within the
starter_code
) in html