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, 2 nd 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. 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. 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. 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. 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. 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. Session 2: Gotchas Part II Learning Objectives: Students will learn about more gotchas in the JavaScript programming language and how to avoid them. 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. 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. 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 Session 2: TBD Problem Set 9 None. Work on Project 2. Week 12 Open Session 1: TBD Session 2: 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.