Art of Code Front-end Web Development Training Program
Pre-work (5 weeks)
Codecademy HTML5/CSS3 and JavaScript tracks
HTML/CSS (7 hours): http://www.codecademy.com/en/tracks/web JavaScript (10 hours): http://www.codecademy.com/tracks/javascript
Class Textbook: Eloquent JavaScript, 2nd Edition, written by Marijn Haverbeke Book URL: http://eloquentjavascript.net/
Mozilla JavaScript Reference: https://developer.mozilla.org/en- US/docs/Web/JavaScript/Reference
Course Lesson Plan (12 Weeks) Week 1 – Language Basics
Session 1: Variables, Types & Operators
Learning objectives: Students should be able to explain and use variables. They should also understand the main types in JavaScript and should be able to explain the difference between primitives and objects. Students should also be able to use logical operators and without running code know how to identify the output of complex logical expressions.
Students should be able to understand how JavaScript stores primitive and complex types in variables. They should also be able to explain how the JavaScript interpreter works and what dynamic typing is.
Homework assignment: Students will receive a problem set where they will have to answer questions that test their understanding of the topics covered in this session.
Session 2: Control flow, Arrays, Iteration
Learning objectives: Students should be able to write simple programs using if
statements combined with variables and operators. They should also be able to explain what arrays are and how they are used. Students should know the common methods that exist on the Array prototype and how to use them to manipulate or retrieve data stored in arrays. Students should be able to use for and while loops to perform actions for a
specified number of times. They should also know how to use looping constructs to iterate through arrays.
Homework assignment: Students will receive a problem set where they will have to answer questions that test their understanding of the topics covered in this session.
Problem Set 1 - TBD
Week 2 – Object-oriented JavaScript
Session 1: Functions and Objects
Learning objectives: Students should understand how to use functions to enforce code reuse. They should understand conceptually that functions are objects and can be used to create objects by returning them. Students should be able to understand how objects are used and why they are useful. They should be able to articulate when to use objects instead of arrays. They should understand how to iterate through objects using the “for in”
loop and should understand the inherent problems associated with using this construct.
Homework assignment: Based on what was taught in class students will be required to write a function that takes several arguments and returns an object.
Session 2: Constructor Functions, Prototype, Protoypal Inheritance
Learning Objectives: Students will understand how to use functions in JavaScript. They should be able to explain JavaScript concept of prototype and how prototypal inheritance works. Students should also be able to explain the specifics of the prototype chain.
Homework assignment: Students will receive a coding challenge that will test their understanding of the topics covered during this session.
Problem Set 2 – TBD
Week 3 – Code organization
Session 1: Closures and Scope
Learning objectives: Students should be able to explain how scope works in JavaScript and how scope is created by functions. Students should be able to understand and explain the concept of lexical scope. They should know what happens to variables declared in functions after the function is called. Students should understand how to use functions to create private variables. They should also understand the concept of closures and should be able to identify when variables defined in functions will remain stored in memory even after the function that declared them has been called.
Homework Assignment: Students will receive a problem set that will test their understanding of closures and scope in JavaScript.
Session 2: Code organization
Learning Objectives: Students should understand how to use the module, revealing module and factory patterns to organize and share code. Students should understand the concept of the global namespace and why it is bad to clutter it. They should understand how to use modules, byway of functions, to keep the global namespace clean.
Homework Assignment: Students will receive will receive a problem set that will test their understanding of the different ways code can be organized.
Problem Set 3 – TBD
Week 4 – Document Object Model
Session 1: The DOM
Learning objectives: Students should be able to explain the Document Object Model.
They should be able to use native JavaScript methods as specified by the DOM to query for and manipulate HTML elements. Students should be able to identify the most efficient way to query for elements in the DOM.
Homework assignment: Students will be given a HTML markup and will have to use JavaScript to change.
Session 2: jQuery
Learning objectives: Students should be able to use jQuery to perform DOM manipulation.
They should understand that jQuery is simply a utility library and show understand that vanilla JavaScript is actually working behind the scenes to manipulate the DOM.
Homework assignment: Students will refactor their code from the previous assignment to use jQuery instead of native JavaScript.
Problem Set 4 – TBD
Week 5 – Events
Session 1: Event Handling
Learning objectives: Students should be able to explain what events are and demonstrate proficiency in using them. They should be able to identify and describe how to use events to add interactivity to a website. Students should also understand the concept of callback functions and how to use them to handle events.
Homework Assignment: Students will be tasked with building a simple website that uses events.
Session 2: Event Bubbling
Learning objectives: Students should be able to explain the concepts of event bubbling and event capturing. They should understand the benefits and limitations of using these two techniques.
Homework assignment: Students will receive a problem set that will test their understanding of event capturing and bubbling.
Midterm (take home) – students will receive an example that will ask 20 questions testing their understanding of the material. They will also have to create a simple quiz game using HTML, CSS and JavaScript.
Week 6 – Asynchronous JavaScript
Session 1: AJAX and JSON
Learning Objectives: Students should be able to explain how AJAX works and use jQuery to make AJAX requests to an API to receive data. They should be able to explain how JSON maps to a database and should be able to write programs that will post data to a server. In addition, they should have the ability to display this data.
Homework assignment: Students will receive a coding challenge that will test their understanding of the topics covered during this session.
Session 2: Node.js
Learning Objectives: Students should be able to explain how JSON can be created from database data. They should be able to explain the major concepts behind Node.js
including the event loop, asynchronous callbacks. Students should also be able to explain MVC and how MVC frameworks can be used to create RESTful applications.
Homework Assignment: Students will be asked to create a simple REST API using Node.js and Express.js
Project 1 – Students will take what they learned during the first half of class and build a simple website that has interactivity.
Week 7 – Advanced Asynchronous JavaScript
Session 1: HTTP, REST
Learning Objectives: Students should understand HTTP and HTTP actions. They should understand what rest is and how it relates to HTTP.
Homework assignment: Students will receive a problem set that will test their understanding of the topics covered during this session.
Session 2: Promises
Learning Objectives: Students should understand how data can be returned from the server out of order thus causing bugs in our programs. Students should understand how to use promises to ensure that these kind of bugs do not occur.
Homework assignment: Students will receive a coding challenge that will test their understanding of the topics covered during this session.
Problem Set 5 – TBD
Week 8 – JavaScript Gotchas!
Session 1: Gotchas Part I
Learning Objectives: Students will learn several “gotchas” in the JavaScript programming language and how to avoid them.
Homework assignment: Students will receive a coding challenge that will test their understanding of the topics covered during this session.
Session 2: Gotchas Part II
Learning Objectives: Students will learn about more “gotchas” in the JavaScript programming language and how to avoid them.
Homework assignment: Students will receive a coding challenge that will test their understanding of the topics covered during this session.
Problem Set 6 – TBD
Week 9 – Browser Performance
Session 1: Cross Browser Compatibility Issues
Learning Objectives: Students will learn about the different bugs in JavaScript and HTML/CSS across the browsers maintained by different vendors.
Homework assignment: Students will receive a problem set that will test their understanding of the topics covered during this session.
Session 2: Memory Management Cycle
Learning objectives: Students should understand how memory is managed in JavaScript.
They should be able to explain how garbage collection works and how items are signaled to be cleaned up by the garbage collector.
Homework assignment: Students will receive a problem set that will test their understanding of the topics covered during this session.
Problem Set 7 – None. Work on Project 2.
Week 10 – Build Tools
Session 1: Students will receive a short lecture on the different build tools that can be used to automate development tasks (i.e. Grunt, Gulp, Bower) followed by open office hours for help with projects.
Homework: Work on projects.
Session 2: Students will receive a short lecture on the different plugins they can use in their build tasks to minify and test code quality (i.e. Uglify, JSHint, ) followed by open office hours for help with projects.
Homework: Work on projects
Problem Set 8 – None. Work on Project 2.
Week 11 – Open Session 1: TBD
Learning Objectives: TBD Homework Assignment: TBD
Session 2: TBD
Learning Objectives: TBD Homework Assignment: TBD
Problem Set 9 – None. Work on Project 2.
Week 12 – Open Session 1: TBD
Learning Objectives: TBD Homework Assignment: TBD
Session 2: TBD
Learning Objectives: TBD Homework Assignment: TBD
Project 2 Due – Students will take what they’ve learned during the first half of the course and build a more complex web application that sends to and receives data from an API that was created using Express or a cloud computing platform.
Final Examination and Projects
Written Final Exam (Cumulative) – The final written example will be closed book and will focus on testing student’s understanding of the course material. The example will consist of approximately 50 multiple choice and essay questions.
Oral Exam/Interview – The oral examination will take approximately 30 minutes and will consist of basic JavaScript questions in addition to several white-boarding exercises. This will take place one month after class ends and will be administered before they present their final project.
Final Projects – Students will have one month after class to work on and submit their final projects. Students can pick any idea/website they would like to build. Ideas for final
projects are due on the last day of class. Students will have to demo their projects and walk through the code that they have written to produce them. Students will be
encouraged to explore and use third-party libraries and frameworks that were not covered in class as this is often what developers will have to do in the real world.
Additional Course Materials
Sublime Text 2 Google Chrome
LINUX Operating System Laptop Computer
Soft Skills
The soft skills that will be taught to students are basic interviewing skills. These skills include knowing their resume, having stories that explain how they work in teams, solved problems or acted under pressure to accomplish a goal or meet a deadline. Students will be taught how to read the interviewer and try to find things they may have in common to make the interview go much smoother.
In addition to learning how to interview well students will learn how to work on teams through team-building exercises in addition to training on public speaking and presenting.
