- Pre-Reading:
- Git - The Simple Guide
- Atlassian Git Tutorial
- Make sure you Install Git
- Lesson Video:
- Github 1 Hour 6 Minutes
- Learning Objectives
- Students will understand and be able to use the command line for
- creating a folder
- creating a file
- editing a file
- changing directories
- Students will understand what Git and Github are and how they fit into the web app landscape
- Students will be able to clone a repo and know its purpose
- Students will be able to add, commit, and push files to github
- Students will understand basic branching
- Students will understand how to use github in a group setting
- Students be able to understand what a "Fork" is and be able to Fork a repo
- Students will be able to handle merge conflicts
- Students will be able to minimally manage vim to escape merge conflict messages
- Students will know how to make a Pull Request
- Students will understand and be able to use the command line for
- Project:
- Additional Practice:
- Additional Reading:
- Assessment
- Pre-Reading:
- Lesson Video:
- HTML Basics 2 Hours 7 Minutes
- Learning Objectives
- Students will understand the purpose of HTML
- Students will understand the purpose of CSS
- Students will from scratch, be able to create a skeleton for their html and css page
- understand and be able to use the following HTML Elements
- p
- footer
- header
- h1 - h6
- ul
- li
- div
- Understand and be able to use the following CSS properties
- id (#) vs class(.) and specificity
- width px & %
- height px & %
- background-color
- background-image
- color
- font-size
- text-align: center
- line-height
- box-model (margin, padding, border)
- float
- clear
- Project:
- Additional Reading:
- Assessment
- Pre-Reading:
- Positioning: MDN 1 Hour 45 Minutes
- Lesson Video:
- Learning Objectives
- Students will be able to use Chrome Dev Tools to inspect their HTML/CSS
- Students will understand the purpose of CSS
- Students will be able to compare and contrast fixed, relative, absolute, and static positioning in CSS
- Students will be able to compare and contrast display block, inline-block, inline, and none
- Students will be able to compare and contrast overflow hidden, auto, scroll
- Students will understand and be able to use max/min-width and max/min-height
- Projects:
- Additional Reading
- Assessment
- Pre-Reading:
- Lesson Video:
- Advanced HTML & CSS 1 Hour 52 Minutes
- Learning Objectives
- Students will understand and be able to explain the box model to someone else
- Students will understand media queries and be able to implement them
- Students will understand when and when not to use floating elements
- Project:
- Wikimedia Clone - Clone the homepage for this website
- Additional Reading:
- Assessment
- Before class:
- No video. Work on previous projects or re-watch lessons on Vimeo, or follow an online tutorial about HTML and CSS. Just make sure you do something! Keep up the momentum!!!
- Learning Objectives
- Students will understand and be able to explain the box model to someone else
- Students will understand media queries and be able to implement them
- Students will understand when and when not to use floating elements
- Project:
- Wideopen Tech Clone - Clone the homepage for this website
- Additional Reading:
- Pre-Reading:
- Lesson Video:
- Javascript Fundamentals 2 Hours 4 Minutes
- Learning Objectives
- Students will understand how the web works:
- front-end vs back-end
- the web app landscape
- Students will understand JavaScript vs jQuery
- Students will understand what the DOM is
- Students will understand conditional statements and how they’re used
- Students will understand functions:
- invocation vs definition
- parameters vs arguments
- global and local scope
- anonymous functions
- return values and how to save the returned value to another variable
- Closures
- Students will understand how the web works:
- Projects:
- Additional Reading:
- Assessments
- Pre-Reading:
- Lesson Video:
- Javascript Fundamentals II & III - This video covers content for two classes. 2 hours 22 minutes.
- Learning Objectives
- Students will understand Arrays:
- purpose
- how to get values from arrays
- array properties (length, push/pop, shift/unshift, split/join, splice/slice, reverse, indexOf)
- how to create an array
- how to loop through an array
- Students will understand Arrays:
- Project:
- Additional Reading:
- Pre-Reading:
- Lesson Video:
- Javascript Fundamentals II & III - Same video as yesterday. 2 hours 22 minutes.
- Learning Objectives
- Students will understand how Objects differ from Arrays
- Students will understand use cases for objects
- Students will understand how to create and add properties/values to objects
- Students will understand how to loop through objects
- Students will understand how to create and invoke a method
- Students will understand bracket notation vs dot notation
- Students will understand how to remove keys/props from objects (delete)
- Projects:
- Additional Reading:
- Pre-Reading:
- Lesson Video:
- JS Callbacks & Prototypes 1 Hour 11 Minutes
- Learning Objectives
- Students will understand synchronous vs asynchronous programming
- Students will be able to talk about what a callback is
- Students will understand the use cases of callbacks
- Students will be able to identify and use callbacks
- Students will understand what prototypes are in JavaScript
- Students will be able to add a method on a function’s prototype and create instances of that function that invoke the prototypes method
- Projects:
- Additional Reading:
- Assessment
- Pre-Reading:
- Lesson Video:
- JS - The "this" keyword 1 Hour 49 Minutes
- Learning Objectives
- the purpose of the ‘this’ keyword
- 4 rules for determining what ‘this’ is bound to
- Implicit Binding
- Explicit Binding
- call
- apply
- bind
- new binding
- Default Binding
- 4 rules for determining what ‘this’ is bound to
- the purpose of the ‘this’ keyword
- Projects:
- Additional Reading:
- Assessment
- Pre-Reading:
- Learning Objectives
- Students will be able to define what a closure is
- Students will be able to identify when a closure is being used
- Project:
- Additional Reading:
- Pre-Reading:
- Project:
- Pre-Reading:
- Lesson Video:
- Mini Project:
- Learning Objectives
- Students will understand the DOM
- Students will be able to make basic manipulations to the DOM
- Students will understand visual and functional purpose of the jQuery
- Project:
- Additional Reading:
- Assessment
- Pre-Reading:
- Lesson Video:
- Mini Project:
- Learning Objectives
- Students will Understand CRUD
- Students will be able to make GET and POST requests
- Students will understand why AJAX is important
- Project:
- Additional Reading:
- Pre-Reading:
- Lesson Video:
- Mini Project:
- Learning Objectives
- Students will understand the difference between jQuery and Angular and how Angular fits into the web app landscape
- Students will understand what a module, controller, directive, and service is in angular
- Students will be able to, from scratch, build a basic angular application, put data on a controller's scope, and bind that data to the view
- Students will be able to ng-repeat over data
- Students will be able to filter data
- Project:
- Weeklong Project:
- Additional Reading:
- Assessment
- Pre-Reading:
- Lesson Video:
- Mini Project:
- Learning Objectives
- Students will understand the purpose of Services in Angular
- Students will know how to inject services into their controllers
- Students will know how to call methods on their services from in their controllers and put the response on $scope
- know the difference between factories and services
- Project:
- Additional Reading:
- Assessment
- Pre-Reading:
- Lesson Video:
- Mini Project:
- Learning Objectives
- Students will be able to explain what JSON is
- Students will be able to explain was REST is
- Students will be able to explain what AJAX is
- Students will make an ajax request with angular, call .then on the promise and add that data to the $scope
- Project:
- Additional Reading:
- Assessment
- Pre-Reading:
- Lesson Video:
- Mini Project:
- Learning Objectives
- Students will be able to make $http requests to various APIs
- Students will be able to use outside directives and know how to inject those modules into their application
- Students will be able to create, return, and resolve their own promises with $q
- Project:
- Additional Reading:
- Assessment
In-class practice project : Angular Drills
- Pre-Reading:
- Lesson Video:
- Install these before class!:
- Mini Project:
- Learning Objectives
- Students will understand the methodology behind routing and templating
- Students will be able to set up a basic routing system with multiple views and controllers using UI-Router
- Students will be able to use resolve to resolve data and pass in data to their controller before theirn controller initializes
- Students will be able to use stateParams to gather data from the URL
- Project:
- Additional Reading:
- Assessment
- Pre-Reading:
- Lesson Video:
- Mini Project:
- Learning Objectives
- Students will understand how Directives fit into the Angular ecosystem
- Students will be able to create a custom directive and use it in a view
- Project:
- Additional Reading:
- Assessment
- Review Day
- Pre-Reading:
- Lesson Video:
- Learning Objectives
- Students will understand the term CRUD
- Students will be able to use Firebase in angular to persist data to a server
- Mini-Project : CarFire
- Project:
- Additional Reading:
- Learning Objectives
- Students will understand how to use Firebase's authentication system
- Students will start on their no server project
- Requirements
- At least 3 routes
- At least 2 directives
- 1 directive can be just a templateUrl for code re-use
- 1 directive needs to do some javascript (event if it's just elem.css({}) in the link function)
- [Bonus] Use Firebase or an API
- This should take a back seat to making a solid project with angular
- [Bonus 2] Make it look nice! Styling is important to employers. It's important to practice. Feel free to Google for 'inspiration' to mimic.
- Lesson Video:
- Mini Project:
- Learning Objectives
- Students understand what Node is and that it can be used as a server
- Student will understand how HTTP works to communicate between client & server
- Student will understand the need for a module like
express - Student can use
requireto import a Node module - Student will understand the basic utility of a package.json file
- Student can create a HTTP NodeJS server using express
- Students can explain endpoints and create basic ones testing them with Postman
- Project:
- Additional Reading:
- Lesson Video:
- Mini Project:
- Rewrite in Progress
- Learning Objectives
- Student can require other .js files in the project
- Student can use bodyParser to get data out of the body
- Student can use req.params
- Student is introduced to req.query
- Student understands the request response lifecycle in express including the order in which functions are called
- Student can utilize middleware
- Project:
- Additional Reading:
- Lesson Video:
- Mini Project:
- Rewrite in Progress
- Lesson Video:
- Learning Objectives
- Student can use Express to serve static files
- Student can use routing in Express to create basic API endpoints
- Student can use route params to make dynamic endpoints
- Student can build a front-end Angular application that connects to a back-end NodeJS API
- Project:
- Additional Reading:
- Lesson Video:
- Before class:
- Lesson Video:
- Mini Project:
- Learning Objectives
- Understand the DB's place in the web app landscape (MongoDB vs DBaaS like Firebase)
- Understand DBs, Collections, and Documents
- Understand CRUD operations with MongoDB
- Project:
- Additional Reading:
- Lesson Video:
- Mini Project:
- Learning Objectives
- understand what object modeling is and why it’s used
- understand the difference between Mongoose and MongoJS
- Project:
- Additional Reading:
- Lesson Video:
- Mini Project:
- Mini-Birds Related
- Learning Objectives
- Understand the concept of relationships
- Understand the different types of relationships, and when to use them
- Understand how and when to use embedded and referential schemas
- Project:
- Additional Reading:
- Lesson Video:
- Mini Project:
- Learning Objectives
- Student can distinguish between Basic Auth, Form-based Auth, Token-based Auth, and OAuth
- Student can use express sessions to restrict access to resources
- Student can use passport to authenticate users with providers like Twitter, Facebook, etc.
- Project:
- Additional Reading:
-
Pre-Reading:
-
Lesson Video:
-
Mini Project:
-
Learning Objectives
- Understand how React compares to other Front End frameworks like Angular and Ember
- Understand how to use Webpack to set up a build process for your React App
- Understand how to build a component which modifies and maintains it’s own state
- Understand how to pass data into child components as props
- Understand how to use CSS with React as well as “inline” styles CSS in React
- Understand how to keep your components state up to date as well as invoke other methods in your component.
-
Project:
-
Additional Reading:
- Pre-Reading:
- Lesson Video:
- Mini Project:
- Learning Objectives
- Understand the Life Cycle of a Components
- Understand how to use propTypes and getDefaultProps
- Understand what Mixins are and how they’re useful
- How to use React w/ jQuery and specifically to make Ajax requests
- Project:
- Additional Reading:
- Pre-Reading:
- Lesson Video:
- Mini Project:
- Learning Objectives
- Understand the purpose and benefits of Flux
- Understand how to architect a Flux app with the following
- actions
- stores
- constants
- dispatcher
- components
- Project:
- Additional Reading: