- 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:
- Lesson Video:
- HTML/CSS Positioning 1 Hour 45 Minutes
- 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:
- Find a video or an article that explains what the DOM is
- 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:
- No video for this lesson. Review yesterday's project, then start today's 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:
- Lesson Video
- No video for today. Continue working on the Twitter Clone project.
- Learning Objectives
- Students will understand the DOM
- Students will be able to make basic manipulations to the DOM
- Project:
- Additional Reading:
- Assessment:
- 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
- Weeklong Project:
- Additional Reading:
- Assessment
- Additional Project:
- 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
- Additional Project:
- Lesson Video:
- No video today. Continue working on the Angular project, mini-projects, or the additional projects.
- Project:
- 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
- Additional Project:
- Class Survey:
- 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:
- Project:
- Additional Reading:
- Assessment
- Class Survey:
In-class practice project : Angular Drills
- Class Survey:
- Pre-Reading:
- Lesson Video:
- Routing - 1 hour 7 minutes
- 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:
- Quiz App Repo (Use this to reference the Githun repo)
- Quiz App Project Guide - Day 1 (Use this to start and build the project)
- Additional Reading:
- Assessment
- Class Survey:
- Pre-Reading:
- Lesson Video:
- No video for today's class
- 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:
- Quiz App (Use this to reference the Github repo)
- Quiz App Project Guide - Day 1 (Use this to start and build the project)
- Additional Reading:
- Assessment
- Class Survey:
- Pre-Reading:
- Lesson Video:
- Directives - 1 hour 41 minutes
- 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:
- Quiz App (Use this to reference the Github repo)
- Quiz App Project Guide - Day 2 (Use this to start and build the project)
- Additional Reading:
- Assessment
- Class Survey:
- Pre-Reading:
- Lesson Video:
- No video for today's lesson
- 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:
- Quiz App (Use this to reference the Github repo)
- Quiz App Project Guide - Day 2 (Use this to start and build the project)
- Additional Reading:
- Assessment
- Class Survey:
- Pre-Reading:
- Lesson Video:
- Firebase - 1 hour 42 minutes
- 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:
- Quiz App (Use this to reference the Github repo)
- Quiz App Project Guide - Day 3 (Use this to start and build the project)
- Additional Reading:
- Class Survey:
- Review & Finish Quiz App
- Project:
- Quiz App (Use this to reference the Github repo)
- Quiz App Project Guide - Day 3 and BD's (Use this to start and build the project)
- Class Survey:
- Lesson Video:
- NodeJS I - 2 hours 42 minutes
- 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:
- Trello App (Use this to reference the Github repo)
- Trello App Project Guide - Day 1 (Use this to start and build the project)
- Additional Reading:
- Lesson Video:
- NodeJS II - 1 hour 55 minutes
- 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:
- Trello App (Use this to reference the Github repo)
- Trello App Project Guide - Day 2 (Use this to start and build the project)
- Additional Reading:
- Lesson Video:
- Node III - 2 hours 10 minutes
- 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:
- Trello App (Use this to reference the Github repo)
- Trello App Project Guide - Day 3 (Use this to start and build the project)
- Additional Reading:
- Lesson Video:
- Mongo I - 1 hour 41 minutes
- 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:
- Trello App (Use this to reference the Github repo)
- Trello App Project Guide - Day 4 (Use this to start and build the project)
- Additional Reading:
- Lesson Video:
- Mongo II - 1 hour 20 minutes
- Mini Project:
- Learning Objectives
- understand what object modeling is and why it’s used
- understand the difference between Mongoose and MongoJS
- Project:
- Trello App (Use this to reference the Github repo)
- Trello App Project Guide - Day 5 (Use this to start and build the project)
- Additional Reading:
- Lesson Video:
- Mongo III - 1 hour 40 minutes
- 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:
- Trello App (Use this to reference the Github repo)
- Trello App Project Guide - Day 6 (Use this to start and build the project)
- Additional Reading:
- Lesson Video:
- NodeJS Auth - Passport - 1 hour 13 minutes
- 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:
- Project:
- Project:
- Project:
- Project:
- Project:
- Project:
- Project:
- Project:
- Pre-Reading:
- Lesson Video: No video for this lesson.
- 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: No Video for Today
- 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: No video for this lesson.
- 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: No Video for Today
- 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: No video for this lesson.
- Learning Objectives
- Understand the purpose and benefits of Redux
- Understand how to architect a Redux app with the following
- actions
- components
- containers
- reducers
- Project:
- Additional Reading:
- Pre-Reading:
- Lesson Video: No Video for Today
© DevMountain LLC, 2015. Unauthorized use and/or duplication of this material without express and written permission from DevMountain, LLC is strictly prohibited. Excerpts and links may be used, provided that full and clear credit is given to DevMountain with appropriate and specific direction to the original content.