Front-End 101

Phase 1 - One Page Websites

• Lesson 1
  • One Page Websites: Nav Bar
  • Designing and Developing for the Responsive Web
• Lesson 2
  • Grid Systems
  • Image Gallery with Bootstrap Grid System
  • Fancybox
  • Terminal Basics
  • Git Basics
• Lesson 3
  • CSS Transitions, Transforms, & Animations
  • Card Flip
  • Github Basics
  • Deploying your site with Github
• Lesson 4
  • One Page Website Workshopping
  • JavaScript Variables*

Phase 2 - JavaScript and jQuery

• Lesson 5
  • One Page Website Workshopping
  • JavaScript Variables*
  • JavaScript Variables Exercises*
• Lesson 6
  • JavaScript Functions*
  • JavaScript Functions Exercises*
• Lesson 7
  • JavaScript Conditionals*
  • JavaScript Conditionals Exercises*
  • Put a hat on a pug! demo, code
• Lesson 8
  • JavaScript Loops*
  • JavaScript Loops Exercises*
  • JavaScript Arrays Exercises
• Lesson 9
  • Intro to jQuery*
  • jQuery Basics
  • Exercise - jQuery Selectors
• Lesson 10
  • More jQuery*
  • Exercise - jQuery Practice
• Lesson 11
  • jQuery DOM Manipulation
  • Exercise - jQuery DOM Manipulation
• Lesson 12
  • JavaScript Objects*
  • Exercises - Objects 1*
  • Exercises - Objects 2*

Phase 3 - Build Cool Stuff!

• Lesson 13
  • AJAX and JSON
• Lesson 14
  • Modal Dialogs
  • Final Project Workshopping
• Lesson 15
  • Mini-Lesson: Class Choice
  • Final Project Workshopping
• Lesson 16
  • Mini-Lesson: Class Choice
  • Final Project Presentations

Code

Visit the course Github page to view all code from class.

Style Guides

Please make sure all code you submit in this class adheres to the following guides:

• HTML & CSS: codeguide.co (Just the "Syntax" sections - the rest of the guide is optional for this course, though worth looking at!)
• JS: Laboratoria JavaScript Style Guide

Resources

• Animation Library - Velocity.js (like jQuery animations, but faster)
• Color Schemes - Adobe Color CC
• Contact Form - Formspree
• Development Tools
  • "Spell checking" for your JS - ESLint installation instructions
  • Sublime HTML Autocompletion - Emmet
  • Chrome Extension for JSON Files - JSONView
  • Online JavaScript Editor - repl.it
  • Launch Sublime 3 from the Command Line - Tutorial
• Icons
  • Font Awesome
  • The Noun Project
• jQuery Cheat Sheet
• Placeholders
  • Placeholder Images - Lorem Pixel
  • Placeholder Text - Hipster Ipsum
• Scrolling Nav - One Page Nav
• Special Effects
  • Parallax Effect - Stellar.js
  • CSS Animations - Animate.css
  • CSS Animations on Scroll - wow.js

Additional Topics

• Bootstrap
• Scope
• More Objects
• Anonymous Functions
• Prototypes
• Git Branching
• Recursion, Exercises

More Practice

• Free Code Camp - *Lots* of Practice Problems!
• Codecademy - interactive lessons.
• Udacity - courses with video lectures. I recommend the Object Oriented JavaScript course as a good follow-up to this class.
• Project Euler - very mathy practice problems.
• Khan Academy - a different perspective on JavaScript. Has some fun drawing lessons, as well as computer science fundamentals.
• Stanford Web Programming Fundamentals - awesome lecture slides. Starts w HTML & CSS, then front-end JS, then back-end.

Projects

• FE101 Project Gallery
• NYCDA Project Gallery