00
Course Introduction & Tools
Objectives
What Is front-end Development?
Class Logistics & Materials
Course Tools
Folder Organization
Keys to Success
01
HTML Basics
Objectives
Agenda
HTML Structure
HTML Tag Anatomy
HTML Attributes
Tag Overview
Body, Head & Title
Text
Lists
Links
Images
Tables
Block & Inline Elements
Divs & Spans
Other Tags
Code Along - GA Press Release
Lab - Cookie Recipe
Reading Assignment
02
Git & Github
Objectives
Agenda
Git Overview
Code Along: Working with Github
Exercise: Working with Github
03
Relative Paths
Objectives
Agenda
Overview
Example
Code Along - Relative Paths
04
CSS Basics
Agenda
Thinking in Boxes
Intro to CSS
Adding CSS to your website
Code Along - About Me
Lab - Portfolio page
05
CSS Selectors
Agenda
Classes and Ids
CSS Selectors
CSS Selectors Examples
Exercise - CSS Diner
06
CSS Box Model
Agenda
CSS Cascading Guidelines
Last Rule
Specificity
!important
Inheritance
CSS Box Model
Margin
Padding
Border
Code Along - Tags and Boxes
Code Along - Notifications
Lab - Fashion Blog
07
Page Layout with Flexbox
Agenda
Block and Inline Elements
Containing Elements
Semantic Elements
Flexbox
Flexbox Terminology
Flex Container Properties
Display
Flex Direction
Flex Wrap
Flex Flow Shorthand
Justify Content
Align Items
Align Content
Flex Property Examples
Flex Items Properties
Align Self
Order
Flex Basis
Flex Grow
Flex Shrink
Flex Shorthand
Flexbox Tips
Exercise - Flexbox Froggy
Code Along - Layout Challenge
Lab - Layout Challenge
08
CSS Positioning, Colors, Background Images
Agenda
CSS Colors
Color Names
Hex codes
RGB
RGBa
HSL
HSLa
CSS Positioning
Static Positioning
Relative Positioning
Absolute Positioning
z-index
Fixed Positioning
Background Images
Background Image
Background Repeat
Background Position
Background Image Examples
Background Size
Lab - Fashion Blog II
09
Intro to Programming
Agenda
What is Programming?
Pseudocode
Class Exercise - Smart Thermostat Pseudocode
Group Exercise - Rock, Paper, Scissors
What is Javascript?
Code Along - Color Scheme Switcher
Lab - Traffic Light
10
Intro to jQuery
Agenda
Programming Protips
Document Object Model
jQuery Overview
What is jQuery?
Benefits of jQuery
Adding jQuery to your projects
jQuery syntax using $() function
Document Ready Function
jQuery in Action
Selecting Elements
Reading and Writing Content
.text()
.val()
.html()
Adding New Elements using Append/Prepend
Code Along - Color Scheme Switcher using jQquery
Lab - jQuery DOM Selector Practice
11
Javscript Fundamentals
Agenda
Code Along - FAQ
Variables
What are Variables?
Declaring Variables
Updating Variables
Naming Rules for Variables
let vs var
const
Data Types
Strings
Numbers
Booleans
Arrays
Objects
Arithmetic Operators
Code Along - Score Keeper
Comparison Operators
Logical Operators
Conditionals
Code Along - Compare That
Code Along - Blackout
12
Functions
Agenda
Defining Functions
Calling Functions
Working with Parameters
Code Along - Geometry Calculator
Single Responsibility Principle
Code Along - HiLo
Lab - HiLo
13
Arrays and Loops
Agenda
Arrays
Looping through Arrays
Using Objects with Arrays
Code Along - Arrays Exercise
Lab - Rock, Paper, Scissors
14
Javascript Lab
Agenda
Anonymous Functions
$(this)
Lab Overview
Lab Milestone #1
Lab Milestone #2
Lab Milestone #3
Bonus Milestone
15
Responsive Design
Agenda
Fixed Width Layouts
Responsive Design Overview
What Is Responsive Design?
Responsive Design Examples
Responsive Design Components
Implementing Responsive Design
Viewport Meta Tag
What is the Viewport?
Viewport Meta Tag
Media Queries
Media Query Overview
Media Query Parts
@media
Media Features
Media Types
Breakpoints
Recommended Breakpoints
Progressive Enhancement
Relative Measurements
EMS
REMs
Percentages
Setting Up Font Size for Responsive Projects
Responsive Images
Rules of Thumb
Code Along - Responsive Marketing Layout
16
Responsive Design Lab
Agenda
Lab Overview
Milestone #1
Milestone #2
Milestone #3
17
Forms
Agenda
Form Overview
Form Elements
Text Input
Password Input
Text Area
Radio Button
Checkbox
Select
Submit Button
Label
Styling Forms
Code Along - Contact Us Form
18
Final Projects Lab
Agenda
Code Along - Host Final Project on Github Pages
Lab - Final Projects
19
Final Project Presentations
Presentation Script
Student Projects
A.
Course Materials
Lesson Files
Classwork & Lab Solutions
Homework Solutions
Code Demos & Examples
Maps with MapBox
Carousels with Slick
Fancy Filtering & Sorting with MixitUp
Getting Data from Other Services
iTunes Search API
Giphy Search API
Pinterest-style layout with Masonry
B.
Homework Assignments
Assignments
HW #1 - Online Travel Guide
HW #2 - Relaxr Project
HW #3 - jQuery Traffic Light
HW #4 - Citipix
C.
Final Projects
Overview & Requirements
Milestones & Due Dates
I.
Submit Project Ideas
II.
Get Idea Approved
III.
Create Github Repository for Final Project
IV.
Create & Submit Wireframes
V.
Create Project Plan
VI.
Host Final Project using Github Pages
VII.
Submit Final Project
D.
Class Resources
Github HW Submission Instructions
Documentation
Keyboard Shortcuts
Recommended Atom Editor Settings
Working with Atom Themes
Wireframes to HTML
Running a Local Server
MacOS Instructions
Windows Instructions
FEWD
>
Responsive Design
>
Responsive Design Overview
> Responsive Design Examples
Examples of Responsive Design
Responsive Design Examples
Examples of Responsive Design
World Wild Life Fund
Etsy
Boston Globe
Shopify
Slack