├── overflow ├── http-html-css │ └── visible │ │ ├── visible.md~ │ │ ├── visible.md │ │ ├── visible1.html │ │ └── assets │ │ ├── todo.js │ │ └── style.css ├── chrome-dev-tools │ ├── change-variable-value │ │ ├── assets │ │ │ ├── style.css │ │ │ └── rock-paper-scissors.js │ │ ├── rock-paper-scissors.html │ │ └── rock-paper-scissors.md │ ├── breakpoint1.md │ └── breakpoint1.html ├── git.md ├── scope-exercises.md ├── overflow-lesson-plans.md ├── basic-programming-practice-problems.md └── github.md ├── .DS_Store ├── README.md ├── unit1-intro-to-programming-in-javascript ├── .DS_Store ├── awesome-computer-tips.md ├── javascript-fundamentals-arrays-deep-dive.md ├── intro-to-html.md └── README.md ├── unit2-apis-and-advanced-javascript ├── oo-challenges.md ├── closure-challenges.md └── README.md ├── LICENSE ├── unit7-final-project └── README.md ├── unit6-final-assessment └── README.md ├── LESSON-TEMPLATE.md ├── overflow-lesson-plans.md ├── unit5-professional-full-stack-applications └── README.md ├── unit3-server-mvc-with-node-express-and-sql └── README.md └── unit4-full-stack-web-apps-in-javascript └── README.md /overflow/http-html-css/visible/visible.md~: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /overflow/chrome-dev-tools/change-variable-value/assets/style.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joinpursuit/ac-curriculum-web/HEAD/.DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Access Code Curriculum: Full Stack Web 2 | 3 | The full-stack web curriculum! 4 | -------------------------------------------------------------------------------- /unit1-intro-to-programming-in-javascript/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joinpursuit/ac-curriculum-web/HEAD/unit1-intro-to-programming-in-javascript/.DS_Store -------------------------------------------------------------------------------- /unit1-intro-to-programming-in-javascript/awesome-computer-tips.md: -------------------------------------------------------------------------------- 1 | https://docs.google.com/presentation/d/1ZUYwxJzXCNsvC7x_tiwVRCIGVljh5EFzanV1U9WJl18/edit#slide=id.gb45c0768b_17_0 2 | 3 | - Alfred 4 | - Spectacle 5 | - iTerm 6 | - oh-my-zsh 7 | - Dash 8 | - Sublime Package Manager 9 | - Change mouse speed 10 | - Quiver 11 | - Evernote 12 | - Bartender 13 | - Flux 14 | - Sip -------------------------------------------------------------------------------- /overflow/http-html-css/visible/visible.md: -------------------------------------------------------------------------------- 1 | - author: Lev 2 | - language: JavaScript 3 | - topics: Chrome DevTools 4 | - difficulty: 5 | - format: 6 | 7 | ### Question 8 | For this exercise, you will need to run the relevant html page on a Chrome browser. After entering an input, open `Chrome Developer Tools` on the tab `elements`. 9 | 10 | 1. There a hidden "Add" button. Un-hide it and add some items. 11 | 2. Add a some new elements to the list by going to the tab `Resources` **->** `Local Storage`. You may need to refresh the page. 12 | 13 | Advanced CSS: 14 | 15 | 16 | ### Answer 17 | 18 | 1. The id of the button is "add". Erase the CSS `visibility` attribute or change it to **visible**. (body->center -> section -> form) 19 | 20 | 21 | -------------------------------------------------------------------------------- /overflow/chrome-dev-tools/breakpoint1.md: -------------------------------------------------------------------------------- 1 | - author: Lev 2 | - language: JavaScript 3 | - topics: Chrome DevTools 4 | - difficulty: 5 | - format: 6 | 7 | ### Question 8 | For this exercise, you will need to run the relevant html page on a Chrome browser. First, Open `Chrome Developer Tools` on the tab `sources` and put a break point inside the function **func2**. Next, enter an input and click on the **click here** button. Then follow the variable **followMe**. Note the value of this variable before the function returns. 9 | 10 | Note the value of **followMe** for inputs 2, 3, 4. 11 | 12 | ### Answer 13 | 14 | The value of **followMe** is as follows: 15 | 16 | |input | followMe | 17 | |:----:|:-----:| 18 | | 2 | 12 | 19 | | 3 | 6 | 20 | | 4 | 6 | 21 | -------------------------------------------------------------------------------- /overflow/git.md: -------------------------------------------------------------------------------- 1 |

Author: Alex

2 |

Language: JavaScript

3 |

Topics: for-loop, continue

4 |

Difficulty: 4

5 |

Format: coding

6 | 7 | 8 |

Question

9 |

Write a `for` loop that counts down from 100 to 10 by 10, and then from 10 to 1 by 1. The loop should print a single number on each line. Use a single loop; do not use multiple loops.

10 | 11 |

Answer

12 | 

13 | 	for(var i = 100; i >= 1; i -= 1) {
14 | 		if(i > 10 && i % 10 === 0) {
15 | 			console.log(i)
16 | 		} else if(i <= 10){
17 | 			console.log(i)
18 | 		}
19 | 	}
20 |
-------------------------------------------------------------------------------- /overflow/chrome-dev-tools/change-variable-value/rock-paper-scissors.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 |
14 | 15 |
16 |

Rock-Paper-Scissors

17 |
18 |
19 | 24 | 25 | 26 | 27 |

28 | 29 |
30 | 31 |
32 | 33 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /overflow/http-html-css/visible/visible1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |

Task List

15 |
16 |
17 |
18 |
19 |
20 | 21 | 22 | 23 |
24 |
25 | 26 |
27 |
28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /overflow/chrome-dev-tools/change-variable-value/rock-paper-scissors.md: -------------------------------------------------------------------------------- 1 | - author: Lev 2 | - language: JavaScript 3 | - topics: Chrome DevTools 4 | - difficulty: 2.5 5 | - format: Project 6 | 7 | ### Question 8 | 9 | Anaximander would like to play a game of rock-paper-scissors, but the computer always seems to win. Help Anaximander win a game, or at least get a tie! Use Chrome DevTools and do not change any JavaScript or HTML code. Hint: there is a .js file located under the `Sources` tab, inside the `assets` folder. Use breakpoints. 10 | 11 | 12 | ### Answer 13 | 14 | The function getRandomChoice() checks the user's choice (since userChoiceString is a global variable) and is not really random. In order to get the player to win, the value of either userChoiceString or computerChoiceString need to be modified at runtime. This can be done at different points after getting the value for computerChoiceString from the getRandomChoice function. 15 | -------------------------------------------------------------------------------- /unit2-apis-and-advanced-javascript/oo-challenges.md: -------------------------------------------------------------------------------- 1 | # Object Oriented Challenges 2 | 3 | ### Instances and instance methods: 4 | 5 | Given a class called Square and two instances of this class, s and t, how would you define `calcArea()` and `calcPerimeter()` methods such that _they can be called_ on the two instantiated instances, s and t? 6 | 7 | ### Creating instances dynamically: 8 | 9 | How would you reimplement jQuery from scratch using objects? (ie: `$('..')` gets us an object with methods such as `.css()`. How would you define this class such that it doesn't require a `new` keyword *but still* consoles 'jQuery' when `console.log( $('...') instanceof jQuery )` 10 | 11 | ### Using Prototypes: 12 | 13 | How would you extend you jQuery class such that it supports the creation of "plugins" (ie: a new method called `.fooPlugin()` that works seamlessly on all current and future instances of your jQuery obejct) _without touching your_ original jQuery class implementation source code -------------------------------------------------------------------------------- /overflow/http-html-css/visible/assets/todo.js: -------------------------------------------------------------------------------- 1 | window.onload = function(){ 2 | 3 | 4 | var todo = document.querySelector( '#todolist' ), 5 | form = document.querySelector( 'form' ), 6 | field = document.querySelector( '#newitem' ); 7 | 8 | if ( localStorage.todolist ) { 9 | todo.innerHTML = localStorage.todolist; 10 | } 11 | 12 | form.addEventListener( 'submit', function( ev ) { 13 | todo.innerHTML += '
  • ' + field.value + '
    • '; 14 | field.value = ''; 15 | field.focus(); 16 | storestate(); 17 | ev.preventDefault(); 18 | }, false); 19 | 20 | todo.addEventListener( 'click', function( ev ) { 21 | var t = ev.target; 22 | if ( t.tagName === 'LI' ) { 23 | if ( t.classList.contains( 'done' ) ) { 24 | t.parentNode.removeChild( t ); 25 | } else { 26 | t.classList.add( 'done' ); 27 | } 28 | storestate(); 29 | }; 30 | ev.preventDefault(); 31 | }, false); 32 | 33 | 34 | 35 | function storestate() { 36 | localStorage.todolist = todo.innerHTML; 37 | }; 38 | 39 | } 40 | -------------------------------------------------------------------------------- /overflow/http-html-css/visible/assets/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | footer, section, header, aside, figure { 6 | display: block; 7 | } 8 | body { 9 | padding: 2em; 10 | font-size: 15px; 11 | font-family: helvetica, arial, sans-serif; 12 | } 13 | form { 14 | width: 280px; 15 | background: #999; 16 | color: #fff; 17 | border-radius: 5px; 18 | padding: 5px 10px; 19 | } 20 | #newitem { 21 | width: 160px; 22 | } 23 | #todolist { 24 | width: 280px; 25 | margin: 10px 10px; 26 | } 27 | #todolist li { 28 | border-radius: 2px; 29 | list-style: none; 30 | background: #eee; 31 | padding: 5px 10px; 32 | margin-bottom: 5px; 33 | position: relative; 34 | } 35 | #todolist li:nth-child(2n) { 36 | background: #ccc; 37 | } 38 | #todolist li:hover:after, 39 | #todolist li.done:after { 40 | content: '✔'; 41 | color: #060; 42 | position: absolute; 43 | right: 5px; 44 | } 45 | #todolist li.done:hover:after { 46 | content: 'x'; 47 | font-weight: bold; 48 | color: #c00; 49 | position: absolute; 50 | right: 5px; 51 | } 52 | #add{ 53 | visibility:hidden; 54 | } 55 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /unit2-apis-and-advanced-javascript/closure-challenges.md: -------------------------------------------------------------------------------- 1 | # Closure example problems 2 | 3 | ```js 4 | // write a function that allows a function to only be called N times 5 | function callNTimes( funcToCall, N ) {} 6 | function get10() { return 10; } 7 | var call3Times = callNTimes( call3Times, 3 ); 8 | 9 | call3Times(); // 10 10 | call3Times(); // 10 11 | call3Times(); // 10 12 | call3Times(); // "Error! Already called 3 times"; 13 | ``` 14 | 15 | ```js 16 | // write a function that applies default values 17 | function applyDefaults( funcToCall, argsArr ) {} 18 | function getN( N ) { return N; } 19 | var get10 = applyDefaults( getN, [10] ); 20 | 21 | get10(); // 10 22 | get10( 11 ); // 11 23 | ``` 24 | 25 | ```js 26 | // what happens when the user clicks on a button? 27 | var i = 0; 28 | var body = document.querySelector('body'); 29 | for( i = 0; i <= 10; ++i ) { 30 | var button = document.createElement('button'); 31 | button.innerHTML = "Click me!"; 32 | button.addEventListener('click', function() { 33 | alert(i); 34 | }); 35 | body.appendChild(button); 36 | } 37 | 38 | // ...having identified the issue in the code block above, can you explain *why* the code behaves this way? 39 | // how would you fix this problem? 40 | ``` -------------------------------------------------------------------------------- /unit1-intro-to-programming-in-javascript/javascript-fundamentals-arrays-deep-dive.md: -------------------------------------------------------------------------------- 1 | Title | Tags 2 | --- | --- 3 | JavaScript Fundamentals: Arrays Deep Dive | arrays, javascript 4 | 5 | ## Objectives 6 | * Learn how arrays work under the hood 7 | * Get comfortable with important array methods 8 | 9 | ## TODO: Structure 10 | * 10:00 - 10:40 - Challenge problem 11 | * 10:40 - 10:45 Break 12 | * 10:45 - 11:30 Lecture part 1 13 | * 11:30 - 1:00 Exercise 1 14 | * 1:00 - 2:00 Lunch 15 | * 2:00 - 2:55 Lecture part 2 16 | * 2:55 - 3:00 Break 17 | * 3:00 - 4:55 Exercise 2 18 | * 4:55 - 5:00 Break 19 | * 5:00 - 6:00 - Review 20 | 21 | ## Resources 22 | - [Five Array Methods You Should Use Today (indexOf, forEach, map, filter, reduce)](http://colintoh.com/blog/5-array-methods-that-you-should-use-today) 23 | - [W3 JavaScript Array Methods] (http://www.w3schools.com/jsref/jsref_obj_array.asp) 24 | 25 | ##Lecture 26 | ###How arrays work 27 | 28 | ###Mutability vs Immutability 29 | 30 | **Discussion** What’s are the advantages of using arrays over other data types? 31 | 32 | ###Demo 33 | - `slice` / `splice` 34 | - `push` / `unshift` 35 | - `pop` / `shift` 36 | - `concat` 37 | - `join` 38 | - `indexOf` 39 | - `forEach` / `filter` / `map` / `reduce` 40 | - `sort` / `reverse` -------------------------------------------------------------------------------- /overflow/chrome-dev-tools/breakpoint1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
    5 |

    Chrome DevTools Ex 1

    6 |

    Insert a number below. Follow the javaScript execution with DevTools.

    7 | 8 | 9 |
    10 |

    Mystery output

    11 |
    12 |
    13 |
    14 | 15 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /unit7-final-project/README.md: -------------------------------------------------------------------------------- 1 | # Unit 7: Final Project and Career Fair 2 | 3 | ### Week 1 4 | 5 | - Final project milestone 1: 5 days 6 | - Mockup UX ready 7 | - Data model written and tested 8 | - App skeleton ready with MVP components connected at every level of the stack (client, server, db) 9 | - Testing plan written, first set of tests written, CI integration complete 10 | - Month roadmap checkin with mentors/volunteers/instructor 11 | - Opportunity for students to retake the final assessment (likely at end of week) 12 | 13 | 14 | ### Week 2 15 | 16 | - Final project milestone 2: 5 days 17 | - UX implemented in CSS 18 | - URL routing complete 19 | - DAL mostly complete 20 | - Some controllers complete, the rest stubbed out 21 | - Some client behavior completed, the rest stubbed out 22 | - Some tests passing, additional tests written 23 | 24 | ### Week 3 25 | 26 | - Final project work: 4 days 27 | - Project complete! 28 | - Excellent "final-push" Hackathon opportunity 29 | - Features/pages/views cut given the time constraint 30 | - All controllers completed 31 | - All pages completed 32 | - Significant test coverage with CI integration 33 | - No new features after this week! 34 | - Resume prep work: 1 day 35 | - Organizing and detailing a quality resume 36 | - Putting final project content onto resume 37 | 38 | 39 | ### Week 4 40 | 41 | - Final project work: 2 days 42 | - Final polish and iterations 43 | - Demo setup, data seeded, code cleanup, GitHub cleanup (nice README.md) 44 | - Final project internal presentations: 1 day 45 | - Practice pitch, product story 46 | - Iterate on resume 47 | - Career fair: 1 day 48 | - Party! Final project complete: 1 day -------------------------------------------------------------------------------- /unit6-final-assessment/README.md: -------------------------------------------------------------------------------- 1 | # Unit 6: Final Assessment and Final Project Launch, PLUS How Software Actually Works 2 | 3 | ### Week 1 4 | 5 | - Unit 5 Assessment review: 1 day 6 | - Give assessment back to students 7 | - Go over solutions to ever problem as a class 8 | - Go through other examples of the most-failed problems 9 | - Seed final project ideas and teams: 1 day 10 | - Explain final project parameters, requirements 11 | - Dynamic web page 12 | - AJAX 13 | - Server side data 14 | - Integration with external API 15 | - Is consumable by mobile apps using a mobile API 16 | - ??? what else? 17 | - Create brainstorming sessions on great ideas 18 | - Begin process of choosing teammates 19 | - Review for Final Assessment: 3 days 20 | 21 | 22 | ### Week 2 23 | 24 | - Review for Final Assessment: 5 days 25 | 26 | 27 | ### Week 3 28 | 29 | - Final Assessment: 2 days 30 | - Final Project launch: 2 days 31 | - Choose teams 32 | - Choose projects 33 | - Begin roadmap planning and scheduling Agile process 34 | - Final Assessment review: 1 day 35 | - Give assessment back to students 36 | - Go over solutions to ever problem as a class 37 | - Go through other examples of the most-failed problems 38 | - Schedule re-take for students who failed 39 | 40 | 41 | ### Week 4 42 | 43 | - Computer Science and Operating System Structures: 3 days (but not full days) 44 | - Memory management, Stack, Heap, Code 45 | - Binary, signed and unsigned integers, two's complement, floats 46 | - Compilers and Assembly 47 | - Threading, mutexes, event/run loops 48 | - Final project work: 2 days (plus rest of time on CS fundamentals days) 49 | - Bring in design and product volunteers to help teams with non-technical pieces of the product development process 50 | 51 | -------------------------------------------------------------------------------- /LESSON-TEMPLATE.md: -------------------------------------------------------------------------------- 1 | Title | Tags 2 | --- | --- 3 | Lesson plan template | template, lesson plans 4 | 5 | ## Objectives 6 | * Outline what the students should take away from the lesson 7 | * For example: ‘Learn how to use Github to collaborate with a team’ 8 | 9 | ## Structure 10 | * *This is just an example structure, feel free to change* 11 | * 10:00 - 10:40 - Challenge problem 12 | * 10:40 - 10:45 Break 13 | * 10:45 - 11:30 Lecture part 1 14 | * 11:30 - 1:00 Exercise 1 15 | * 1:00 - 2:00 Lunch 16 | * 2:00 - 2:55 Lecture part 2 17 | * 2:55 - 3:00 Break 18 | * 3:00 - 4:55 Exercise 2 19 | * 4:55 - 5:00 Break 20 | * 5:00 - 6:00 - Review 21 | 22 | ## Resources 23 | Add links for slides, live coding examples, helpful resources, etc. 24 | 25 | ##Intro - High level overview 26 | **Discussion**: What does the class currently know about the topic? Why do we care about this topic? 27 | 28 | Give a high level overview of the topic 29 | - and 30 | - add 31 | - some 32 | - insightful 33 | - bulletpoints 34 | 35 | ##An example workflow 36 | Go over an example workflow and code examples 37 | - more 38 | - incredible 39 | - bulletpoints 40 | 41 | ```javascript 42 | function(){ 43 | console.log("Also include some code examples") 44 | } 45 | ``` 46 | 47 | ## Exercise 1 48 | Describe the exercise and link to any necessary github repos/documents/links etc. 49 | 50 | ##Another topic/more examples/etc. 51 | - Continue the lecture 52 | - expand/change this however you'd like 53 | 54 | ## Exercise 2 55 | Describe the exercise and link to any necessary github repos/documents/links etc. 56 | 57 | 58 | ## Review and Wrapup 59 | Review and check progress 60 | * What was easy? What was challenging? 61 | * What made sense? What didn’t make sense? 62 | 63 | ## Further Reading 64 | * Add links to further reading 65 | 66 | 67 | -------------------------------------------------------------------------------- /overflow-lesson-plans.md: -------------------------------------------------------------------------------- 1 | - [Git & GitHub](https://github.com/C4Q/ac-curriculum-web/blob/master/unit1-intro-to-programming-in-javascript/git.md): 2 days 2 | - Basic Command Line navigation: `cd`, `ls`, `.`, `..`, `~`, `pwd`, `mkdir`, `touch`, `open` 3 | - Command Line Git: `clone`, `commit`, `pull`, `push` 4 | - Branching and merging 5 | - GitHub pull request UX, how to converse on a PR 6 | - **Learning outcome**: Put simple personal site on GitHub, push to GitHub pages using GitBot.co 7 | - **Learning outcome**: Can talk shop about PRs, commits, branches, and sound informed in an interview setting 8 | 9 | - Scope & Closures: 2 day 10 | - Hoisting 11 | - Investigating the scope chain, the true power of the `var` keyword 12 | - What are closures and how/when/why to create them 13 | - **Learning outcome**: Be able to answer common "what does this code output" tricky JS questions involving hoisting, scope. Examples can be seen here: https://www.sitepoint.com/5-typical-javascript-interview-exercises/ 14 | - **Learning outcome**: Solve tricky problems involving closures, [Examples here](https://github.com/C4Q/ac-curriculum-web/tree/master/unit2-apis-and-advanced-javascript/closure-challenges.md) 15 | 16 | - HTTP 17 | - What HTTP is, headers, content, envelope metaphor 18 | 19 | - CSS 20 | - CSS Layouts crash course: display flex, flex-direction, align-items, justify-content, etc 21 | - External libraries and stylesheets (bootstrap) 22 | 23 | - CS Fundamentals 24 | - What is a program, what is an algorithm? 25 | 26 | - Debugging using Chrome developer tools: 1 day 27 | - Breakpoints and stepping through code 28 | - Parsing call stack and watched variables 29 | - **Learning outcome**: Given a broken JavaScript program in a js file, use the Chrome Developer tools to identify where the bug is, and how to fix it 30 | 31 | -------------------------------------------------------------------------------- /overflow/scope-exercises.md: -------------------------------------------------------------------------------- 1 | # Variable Scope Exercises 2 | 3 | 4 | What is logged in each of these code blocks? Answer it **without** actually running the code on a computer. 5 | 6 | #### 1 7 | 8 | ```js 9 | (function() { 10 | baz = 5; 11 | var bar = 10; 12 | })(); 13 | 14 | console.log(baz); 15 | console.log(bar); 16 | ``` 17 | 18 | #### 2 19 | 20 | ```js 21 | var x = 11 22 | y = 66 23 | (function() { 24 | x = 77 25 | var y = 22 26 | console.log("x: " + x) 27 | console.log("y: " + y) 28 | }) 29 | console.log("x: " + x) 30 | console.log("y: " + y) 31 | ``` 32 | 33 | #### 3 34 | 35 | ```js 36 | var favoritePizzaPlaces = ["Lombardi's", "Ray's", "Joe's", "John's", "Paulie Gee's"] 37 | 38 | var addThePlace = function(newPizzaPlace) { 39 | favoritePizzaPlaces.push(newPizzaPlace) 40 | } 41 | 42 | var addMyFavoritePizza = function(newPizzaPlace) { 43 | var favoritePizzaPlaces = ["Dave & Jukay's", "Sunnyside"] 44 | addThePlace(newPizzaPlace) 45 | console.log("I have " + favoritePizzaPlaces.length + " favorite pizza places") 46 | } 47 | 48 | addMyFavoritePizza("Benno's") 49 | ``` 50 | 51 | #### 4 52 | 53 | ```js 54 | var favoritePizzaPlaces = ["Lombardi's", "Ray's", "Joe's", "John's", "Paulie Gee's"] 55 | 56 | var addMyFavoritePizza = function(newPizzaPlace) { 57 | var favoritePizzaPlaces = ["Dave & Jukay's", "Sunnyside"] 58 | 59 | var addThePlace = function(newPizzaPlace) { 60 | favoritePizzaPlaces.push(newPizzaPlace) 61 | } 62 | 63 | addThePlace(newPizzaPlace) 64 | console.log("I have " + favoritePizzaPlaces.length + " favorite pizza places") 65 | } 66 | 67 | addMyFavoritePizza("Benno's") 68 | ``` 69 | 70 | #### 5 71 | 72 | ```js 73 | x = 1; 74 | var a = 5; 75 | var b = 10; 76 | var c = function(a, b, c) { 77 | var x = 10; 78 | console.log(x); 79 | console.log(a); 80 | var f = function(a, b, c) { 81 | b = a; 82 | console.log(b); 83 | b = c; 84 | var x = 5; 85 | } 86 | f(a,b,c); 87 | console.log(b); 88 | } 89 | c(8,9,10); 90 | console.log(b); 91 | console.log(x); 92 | ``` 93 | 94 | 95 | -------------------------------------------------------------------------------- /unit1-intro-to-programming-in-javascript/intro-to-html.md: -------------------------------------------------------------------------------- 1 | Title | Tags 2 | --- | --- 3 | Intro To HTML | html 4 | 5 | ## Objectives 6 | * Learn important HTML tags 7 | * Get comfortable building a basic HTML page 8 | 9 | ## TODO: Structure 10 | * 10:00 - 10:40 - Challenge problem 11 | * 10:40 - 10:45 Break 12 | * 10:45 - 11:30 Lecture part 1 13 | * 11:30 - 1:00 Exercise 1 14 | * 1:00 - 2:00 Lunch 15 | * 2:00 - 2:55 Lecture part 2 16 | * 2:55 - 3:00 Break 17 | * 3:00 - 4:55 Exercise 2 18 | * 4:55 - 5:00 Break 19 | * 5:00 - 6:00 - Review 20 | 21 | ## Resources 22 | TODO: Add links for slides, live coding examples, helpful resources, etc. 23 | 24 | ##Lecture 25 | ###What is HTML? 26 | At its simplest a web page can just be plain text, just like you would type into a text editor. However, that’s pretty boring… The true power of the web comes from being able to easily link web pages together in a structured format. 27 | 28 | **Discussion** What’s the importance of having a standardized structure for web pages? What types of elements (e.g. headers, paragraphs) do we see repeatedly across different web pages? 29 | 30 | ###Demo 31 | - Start with a plain text document 32 | - Add in `p` and `h1` tags 33 | - Add an `a` tag 34 | 35 | ###Exercise 1 36 | - What does HTML stand for? 37 | - When was HTML invented? 38 | - Why do we use a `p` tag instead of just plain text? 39 | - Which tags can we use to make headers of different sizes? 40 | - How would we embed a link to facebook.com in our web page? 41 | - What do we put in the `body` tag? How is it different than the `head` tag? 42 | - What is the `script` tag used for? How is it different than the `link` tag? 43 | - What is the `div` tag used for? 44 | - What tag can we use to group together HTML elements? 45 | - What tags can we use to make a list? 46 | - How do we include images in HTML pages? 47 | - What is the `span` tag used for? 48 | - What are some other examples of HTML tags? 49 | - What is an HTML attribute? 50 | - What is the `class` attribute used for? 51 | 52 | ###Exercise 1 Review 53 | - Review answers to each question 54 | - What was confusing? 55 | - Other questions? 56 | 57 | ###TODO: COMPLETE Exercise 2 58 | Work in pairs. Use Codepen to create a basic HTML page. 59 | 60 | ## Review and Wrapup 61 | * What was easy? What was challenging? 62 | * What made sense? What didn’t make sense? 63 | 64 | ## Further Reading 65 | * TODO: Add links to further reading -------------------------------------------------------------------------------- /overflow/chrome-dev-tools/change-variable-value/assets/rock-paper-scissors.js: -------------------------------------------------------------------------------- 1 | window.onload = function() { 2 | 3 | const ROCK = "rock", 4 | PAPER = "paper", 5 | SCISSORS = "scissors", 6 | ERROR = "---", 7 | COMPUTER = "computer", 8 | PLAYER = "player", 9 | TIE = "---", 10 | NONE = "none"; 11 | 12 | var submitButton = document.getElementById("submitButton"); 13 | var userChoiceString; 14 | 15 | /* 16 | * Function when user clicks the 'submit' button 17 | */ 18 | submitButton.addEventListener('click', function() { 19 | var outputText; 20 | var userChoice = document.getElementById("userChoice"); 21 | userChoiceString = userChoice.selectedOptions[0].value; 22 | 23 | // Generating a random choice for computer 24 | var computerChoiceString = getRandomChoice(); 25 | 26 | // Evaluating who won 27 | var winner = whoWon(userChoiceString, computerChoiceString); 28 | 29 | document.getElementById("winner").innerText = "You chose " + userChoiceString + "\n" + 30 | "Computer chose " + computerChoiceString + "\n" + 31 | "The winner is: " + winner; 32 | 33 | }); 34 | 35 | /* 36 | * Get a random string with value "rock", "paper" or "scissors" 37 | */ 38 | function getRandomChoice() { 39 | // The computer is cheating 40 | var notRandomChoice; 41 | 42 | // This wouldn't be possible if userChoiceString was a local variable 43 | switch (userChoiceString) { 44 | case ROCK: 45 | notRandomChoice = PAPER 46 | break; 47 | case PAPER: 48 | notRandomChoice = SCISSORS 49 | break; 50 | case SCISSORS: 51 | notRandomChoice = ROCK 52 | break; 53 | default: 54 | notRandomChoice = ERROR; 55 | } 56 | 57 | return notRandomChoice; 58 | } 59 | 60 | function whoWon(userChoiceString, computerChoiceString) { 61 | var winner; 62 | 63 | if (computerChoiceString == ERROR) { 64 | return ERROR; 65 | } 66 | 67 | if (userChoiceString == ROCK) { 68 | if (computerChoiceString == PAPER) { 69 | winner = COMPUTER; 70 | } else if (computerChoiceString == SCISSORS) { 71 | winner = PLAYER; 72 | } 73 | } else if (userChoiceString == PAPER) { 74 | if (computerChoiceString == SCISSORS) { 75 | winner = COMPUTER; 76 | } else if (computerChoiceString == ROCK) { 77 | winner = PLAYER; 78 | } 79 | } else if (userChoiceString == SCISSORS) { 80 | if (computerChoiceString == ROCK) { 81 | winner = COMPUTER; 82 | } else if (computerChoiceString == PAPER) { 83 | winner = PLAYER; 84 | } 85 | } else { 86 | winner = TIE; 87 | } 88 | 89 | return winner; 90 | } 91 | 92 | 93 | 94 | } 95 | -------------------------------------------------------------------------------- /unit5-professional-full-stack-applications/README.md: -------------------------------------------------------------------------------- 1 | # Unit 5: Professional Full-Stack Web Applications 2 | 3 | 4 | ### Week 1 5 | 6 | - Unit 4 Assessment review: 1 day 7 | - Give assessment back to students 8 | - Go over solutions to ever problem as a class 9 | - Go through other examples of the most-failed problems 10 | - Responsive CSS Design: 1 Day 11 | - Building UIs that look good at all screen sizes 12 | - Designing a mobile-friendly UI 13 | - Using Chrome Developer Tools 14 | - **Learning outcome**: Able to implement a responsive web page given a set of wireframes 15 | - Professional Full Stack Web Application: 3 Days 16 | - Example project idea: A social network (Twitter clone) 17 | - Data stored in SQL or Mongo 18 | - Business and security logic in server-side MVC 19 | - Search (using Elastic Search?) 20 | - Personalized content 21 | - User specific read and writes with appropriate permissions/security 22 | - Responsive UX with many dynamic requests 23 | - Use React.js for client side rendering 24 | - Use jQuery for AJAX requests 25 | - **Learning outcome**: Practice building applications at all levels of the stack 26 | 27 | 28 | ### Week 2 29 | 30 | - Socket.io: 1 Day 31 | - TODO @nmadd 32 | - Professional Full Stack Web Application: 4 Days 33 | - Example project idea: CRM 34 | - Data stored in SQL or Mongo 35 | - Business and security logic in server-side MVC 36 | - Different "roles" with different sets of permissions like data-visibility, read/write privs 37 | - Data changes trigger updates for different users 38 | - Integrations with various external APIs 39 | - Seeded data for testing 40 | - Use Socket.io 41 | - Remote CI integration (Travis, Circle, or other) 42 | - Simple UX 43 | - **Learning outcome**: Practice building applications at all levels of the stack 44 | - **Learning outcome**: Understand user role systems 45 | - **Learning outcome**: Experience with seeded data and continuous integration 46 | 47 | 48 | ### Week 3 49 | 50 | - SQL Migrations: 1 Day 51 | - Add and remove some columns from CRM project in a non-breaking way 52 | - Update seeded data, tests, and ORM to handle new schema 53 | - **Learning outcome**: Experience with data migration of a continuously integrated application 54 | - Team up to iterate on CRM or Social Network: 2 Days 55 | - Add new external API integrations (Email, Twilio, APNS, etc.) 56 | - Creating an API for other developers to leverage 57 | - Add testing for all new features, and ensure regression testing keeps previous features running 58 | - Good opportunity for a Hackathon 59 | - **Learning outcome**: Experience joining someone else's existing project and adding features to it 60 | - **Learning outcome**: Experience with major code changes of a continuously integrated application 61 | - Data structures and algorithms practice: 2 days 62 | - What is the best datastructure to use for situation S? 63 | - What datastructure has performance P for operation O? 64 | - What is the performance of operation O on datastructure D? 65 | - Whiteboard coding & software design 66 | - Mock Interviews with targeted feedback and a personalized game plan for improvement 67 | - **Learning outcome**: Be able to pass mock interviews with volunteer industry professionals focused on whiteboard coding and DS&A problems 68 | - **Learning outcome**: Able to complete majority of Cracking the Coding Interview practice problems 69 | 70 | 71 | 72 | ### Week 4 73 | 74 | - Data structures and algorithms practice: 2 days 75 | - Implementation of personalized game plan for improvement 76 | - Review: 2 days 77 | - Final Assessment: .5 days 78 | - Project presentations: .5 days 79 | -------------------------------------------------------------------------------- /unit3-server-mvc-with-node-express-and-sql/README.md: -------------------------------------------------------------------------------- 1 | # Unit 3: Server Side MVC Application Development using Node.js, Express, and PostgreSQL 2 | 3 | ### Week 1 4 | 5 | - Unit 2 Assessment review: 1 day 6 | - Give assessment back to students 7 | - Go over solutions to ever problem as a class 8 | - Go through other examples of the most-failed problems 9 | - Serverside MVC with Express: 3 days 10 | - Why MVC for server side development: Separation of concerns 11 | - Routing & (simple) regular expressions 12 | - Controllers 13 | - Views using a templating engine (Jade) and ViewModels 14 | - Middleware for session, error handling 15 | - **Learning outcome**: Given a small existing website, add new URLs, add content to existing URLs, create a new URL with a new controller that reuses an existing view 16 | - **Learning outcome**: Create a website with over 4 unique URL routes with both HTML and JSON responses, user state stored in sessions, and an interactive set of client pages using AJAX to hit at least one JSON endpoint 17 | - Recursion: 2 days (Carries over into the next week) 18 | - Recursive mult, fibonnaci, sum 19 | - Translating iterative functions into recursive ones, and vice versa 20 | - **Learning outcome**: Read and write recursive implementations of math and other common functions 21 | - **Learning outcome**: Understand runtime complexity and be able to explain the app's time complexity 22 | 23 | 24 | ### Week 2 25 | 26 | - Databases, SQL, and PostgreSQL: 3 days 27 | - What a database is, what "relational" means in the context of databases 28 | - How to set up PostgreSQL locally 29 | - How to insert, update, delete, and query using SQL syntax 30 | - **Learning outcome**: Be able to write a filtered select query given a schema, be able to write a simple join 31 | - Trees & Graphs: 2 days (Carries over into the next week) 32 | - Binary trees: BSTs, Min/Max Heaps, logarithmic runtime; how to implement using structures with pointers, or for Heaps with arrays 33 | - N-ary trees: Tries, B-Trees 34 | - In order, pre-order, post-order traversals 35 | - Graphs: Modeling social network, modeling subway trains; how to implement a graph 36 | - **Learning outcome**: Build a binary or n-ary tree node 37 | - **Learning outcome**: Identify the performance charateristics of a given implementation of a tree (insert, delete, lookup) 38 | 39 | 40 | ### Week 3 41 | 42 | - Databases, SQL, and PostgreSQL: 2 days 43 | - How to configure Express to interact with SQL 44 | - Examples of ORMs, incl nano, micro, and full size ORMs 45 | - **Learning outcome**: Build a user login system in Express using PostgreSQL 46 | - **Learning outcome**: Be able to translate SQL queries to ORM and vice versa, and be able to write ORM classes in code given a schema 47 | - Recursion and BFS/DFS: 2 days 48 | - Common problems that map to BFS: Find the shortest path to a node, find if two nodes are connected at all 49 | - Common problems that map to DFS: Find the value of the largest ancestor, 50 | - Understanding the call stack and being able to step through recursive implementations to understand current state 51 | - **Learning outcome**: Read and write recursive and iterative implementations of DFS 52 | - **Learning outcome**: Read and write an iterative implentation of BFS 53 | 54 | 55 | ### Week 4 56 | 57 | - Sorting (Divide and Conquer Algorithms): 2 days 58 | - Quicksort & Merge sort, Insertion Sort, Bubble Sort, Radix/Bucket sort 59 | - Runtime analysis 60 | - **Learning outcome**: Given an implementation, understand which sort it is 61 | - **Learning outcome**: Know the runtime of every common sort algorithm 62 | - **Learning outcome**: Implement Quicksort recursively 63 | - Review: 2 days 64 | - Final Assessment: .5 days 65 | - Project presentations: .5 days 66 | -------------------------------------------------------------------------------- /overflow/overflow-lesson-plans.md: -------------------------------------------------------------------------------- 1 | - [Git & GitHub](https://github.com/C4Q/ac-curriculum-web/blob/master/unit1-intro-to-programming-in-javascript/git.md): 2 days 2 | - Basic Command Line navigation: `cd`, `ls`, `.`, `..`, `~`, `pwd`, `mkdir`, `touch`, `open` 3 | - Command Line Git: `clone`, `commit`, `pull`, `push` 4 | - Branching and merging 5 | - GitHub pull request UX, how to converse on a PR 6 | - **Learning outcome**: Put simple personal site on GitHub, push to GitHub pages using GitBot.co 7 | - **Learning outcome**: Can talk shop about PRs, commits, branches, and sound informed in an interview setting 8 | 9 | - Scope & Closures: 2 day 10 | - Hoisting 11 | - Investigating the scope chain, the true power of the `var` keyword 12 | - What are closures and how/when/why to create them 13 | - **Learning outcome**: Be able to answer common "what does this code output" tricky JS questions involving hoisting, scope. Examples can be seen here: https://www.sitepoint.com/5-typical-javascript-interview-exercises/ 14 | - **Learning outcome**: Solve tricky problems involving closures, [Examples here](https://github.com/C4Q/ac-curriculum-web/tree/master/unit2-apis-and-advanced-javascript/closure-challenges.md) 15 | 16 | - HTTP 17 | - What HTTP is, headers, content, envelope metaphor 18 | 19 | - CSS 20 | - CSS Layouts crash course: display flex, flex-direction, align-items, justify-content, etc 21 | - External libraries and stylesheets (bootstrap) 22 | 23 | - CS Fundamentals 24 | - What is a program, what is an algorithm? 25 | 26 | - Debugging using Chrome developer tools: 1 day 27 | - Breakpoints and stepping through code 28 | - Parsing call stack and watched variables 29 | - **Learning outcome**: Given a broken JavaScript program in a js file, use the Chrome Developer tools to identify where the bug is, and how to fix it 30 | 31 | 32 | # Variable Scope Exercises 33 | 34 | 35 | What is logged in each of these code blocks? Answer it **without** actually running the code on a computer. 36 | 37 | #### 1 38 | 39 | ```js 40 | (function() { 41 | baz = 5; 42 | var bar = 10; 43 | })(); 44 | 45 | console.log(baz); 46 | console.log(bar); 47 | ``` 48 | 49 | #### 2 50 | 51 | ```js 52 | var x = 11 53 | y = 66 54 | (function() { 55 | x = 77 56 | var y = 22 57 | console.log("x: " + x) 58 | console.log("y: " + y) 59 | }) 60 | console.log("x: " + x) 61 | console.log("y: " + y) 62 | ``` 63 | 64 | #### 3 65 | 66 | ```js 67 | var favoritePizzaPlaces = ["Lombardi's", "Ray's", "Joe's", "John's", "Paulie Gee's"] 68 | 69 | var addThePlace = function(newPizzaPlace) { 70 | favoritePizzaPlaces.push(newPizzaPlace) 71 | } 72 | 73 | var addMyFavoritePizza = function(newPizzaPlace) { 74 | var favoritePizzaPlaces = ["Dave & Jukay's", "Sunnyside"] 75 | addThePlace(newPizzaPlace) 76 | console.log("I have " + favoritePizzaPlaces.length + " favorite pizza places") 77 | } 78 | 79 | addMyFavoritePizza("Benno's") 80 | ``` 81 | 82 | #### 4 83 | 84 | ```js 85 | var favoritePizzaPlaces = ["Lombardi's", "Ray's", "Joe's", "John's", "Paulie Gee's"] 86 | 87 | var addMyFavoritePizza = function(newPizzaPlace) { 88 | var favoritePizzaPlaces = ["Dave & Jukay's", "Sunnyside"] 89 | 90 | var addThePlace = function(newPizzaPlace) { 91 | favoritePizzaPlaces.push(newPizzaPlace) 92 | } 93 | 94 | addThePlace(newPizzaPlace) 95 | console.log("I have " + favoritePizzaPlaces.length + " favorite pizza places") 96 | } 97 | 98 | addMyFavoritePizza("Benno's") 99 | ``` 100 | 101 | #### 5 102 | 103 | ```js 104 | x = 1; 105 | var a = 5; 106 | var b = 10; 107 | var c = function(a, b, c) { 108 | var x = 10; 109 | console.log(x); 110 | console.log(a); 111 | var f = function(a, b, c) { 112 | b = a; 113 | console.log(b); 114 | b = c; 115 | var x = 5; 116 | } 117 | f(a,b,c); 118 | console.log(b); 119 | } 120 | c(8,9,10); 121 | console.log(b); 122 | console.log(x); 123 | ``` 124 | 125 | 126 | -------------------------------------------------------------------------------- /overflow/basic-programming-practice-problems.md: -------------------------------------------------------------------------------- 1 | # Basic Programming Practice Problems 2 | 3 | 4 | ### Find min & max within an array 5 | 6 | Given an array, write a program that returns the largest element. Then try the smallest element. Hint: this will require variables, loops, and conditionals! 7 | 8 | ```js 9 | var arr = [25, 101, 66, 10, 99] 10 | // for the array above, expect: 11 | // largest element => 101 12 | // smallest element => 10 13 | ``` 14 | 15 | 16 | ### Detect if an element is within an array 17 | 18 | Given an array and a target value, write a program that returns whether or not the target value exists within the array. Hint: what type will the result value be? What should its default value be? 19 | 20 | ```js 21 | var result; // what should this be set to by default? 22 | var arr = [25, 101, 66, 10, 99] 23 | var target = 66 // result should "true" 24 | var target = 77 // result should be "false" 25 | ``` 26 | 27 | ### Build a simple array 28 | 29 | Given an integer size, write a program that builds an array of that size where each element is its own index. 30 | 31 | ```js 32 | var integerSize = 10; 33 | // expect array to be: [0,1,2,3,4,5,6,7,8,9] 34 | ``` 35 | - Try with each element value being double its own index? Or triple? 36 | - What about if all the odd indices are double while all the even indices are quadruple? 37 | 38 | ### Range of numbers 39 | 40 | Given two integers less than 1000, make an array with all the numbers between the two integers (inclusive). 41 | 42 | ```js 43 | // Example input: 44 | var lowerBound = 20 45 | var upperBound = 25 46 | 47 | // Expected Output: [20,21,22,23,24,25] 48 | ``` 49 | 50 | **CS/Math Question**: How large will the array be with a lowerBound of X and an upperBound of Y? 51 | 52 | ### Average value 53 | 54 | Given an array of numbers, find the average (mean) value. You can do this by adding up all the numbers and then dividing by how many you added together. 55 | 56 | ```js 57 | // Example input: 58 | var inputArray = [5, 15, 10, 30, 25] 59 | // Expected Output: 17 60 | ``` 61 | 62 | 63 | ### Largest gap between consecutive elements in an array 64 | 65 | Write a function that takes as input an array, and returns the largest difference between any two adjacent elements. 66 | 67 | ```js 68 | // Example input: [4, 8, 11, 5, 9, 12] 69 | // Returns: 6 (difference between 5 and 11) 70 | 71 | // Example input [10, 7, 11, 8, 4, 9, 10] 72 | // Returns: 5 (difference between 4 and 9) 73 | ``` 74 | 75 | 76 | ### Largest gap between any two elements in an array 77 | 78 | Write a function that takes as input an array, and returns the largest difference between any two elements. 79 | 80 | ```js 81 | // Example input: [4, 8, 11, 5, 9, 12] 82 | // Returns: 8 (difference between 12 and 4) 83 | 84 | // Example input [10, 7, 11, 8, 4, 9, 10] 85 | // Returns: 7 (difference between 11 and 4) 86 | ``` 87 | 88 | 89 | ### What does this function do? 90 | 91 | If you want to practice understanding how programs execute, do NOT copy paste this into repl.it. Instead, run through it in your head! 92 | 93 | ```js 94 | var MysteryFunction = function(input) { 95 | if (input.length > 2 && input[0] < 2) { 96 | input[1] = 3 97 | } 98 | for(var i = input.length - 1; i >= 0; i--) { 99 | if (MysteryHelperFunction(input[i]) > input[i]) { 100 | return 0; 101 | } 102 | } 103 | return -1; 104 | } 105 | 106 | var MysteryHelperFunction = function(input) { 107 | if (input % 3 == 0) { 108 | return input * 3 109 | } else if (input % 3 == 1) { 110 | return input / 3 111 | } 112 | return input - 3; 113 | } 114 | 115 | // Call 1 116 | console.log(MysteryFunction([1, 2, 3, 4])) 117 | // Call 2 118 | console.log(MysteryFunction([4, 3, 2, 1])) 119 | // Call 3 120 | console.log(MysteryFunction([5, 10, 20, 40])) 121 | // Call 4 122 | console.log(MysteryFunction([])) 123 | ``` 124 | 125 | 126 | ### Fibonacci Array 127 | 128 | Write a function that takes in an integer and returns an array of that size filled with the Fibonacci sequence. Hint: use push() to build up an array item by item. Fibonacci numbers can be created from adding the two preceding numbers. 129 | 130 | ```js 131 | // Example call: 132 | CreateFibArray(4) 133 | // Returns: [1, 1, 2, 3] 134 | CreateFibArray(10) 135 | // Returns: [1, 1, 2, 3, 5, 8, 13, 21, 34, 55] 136 | ``` -------------------------------------------------------------------------------- /unit4-full-stack-web-apps-in-javascript/README.md: -------------------------------------------------------------------------------- 1 | # Unit 4: Building Full Stack Web Applications 2 | 3 | ### Week 1 4 | 5 | - Unit 3 Assessment review: 1 day 6 | - Give assessment back to students 7 | - Go over solutions to ever problem as a class 8 | - Go through other examples of the most-failed problems 9 | - Revisit Agile processes and methodology: 1 day 10 | - Daily standups 11 | - Weekly sprints, sprint planning and sprint retrospectives 12 | - Stories, story points, and tickets 13 | - Bug duty and backlog grooming 14 | - Quarterly planning and KPIs 15 | - **Learning outcome**: Can speak the corporate speak about "moving the needle for the business", sound informed in an interview setting 16 | - **Learning outcome**: First mock interview including DS&A technical questions as well as behavioral questions 17 | - Automated testing: 3 days 18 | - Jasmine (or better?) framework for executing unit tests 19 | - Dependency injection and mocks, concept and frameworks 20 | - Selenium (or better?) framework for executing full stack browser tests 21 | - [TestPyramid](http://martinfowler.com/bliki/TestPyramid.html): Knowing it and understanding why 22 | - Continuous integration (and delivery) theory and common systems (Jenkins, TeamCity, TravisCI, CircleCI, etc.) 23 | - **Learning outcome**: Given some code, extract its external dependencies via DI and implement some unit tests with mocks 24 | - **Learning outcome**: Can talk shop about CI, understand and explain the value of adding CI to a release workflow, can argue convincingly for the inclusion of tests and CI into the development process 25 | 26 | 27 | ### Week 2 28 | 29 | - Pair programming with automated testing: 1 day 30 | - Alternate between one partner writing tests and the other partner getting them to pass 31 | - Give specific, actionable, and kind feedback to pairing partner 32 | - Shamelessly copied from [Turing.io](https://github.com/turingschool/lesson_plans/blob/master/ruby_01-object_oriented_programming_with_ruby/pairing_patterns.markdown) 33 | - **Learning outcome**: Have a successful ping-pong session writing both tests and code that passes the tests 34 | - Full stack web application large solo project: 4 days 35 | - E-commerce platform [Turing.io's Black Thursday](https://github.com/turingschool/curriculum/blob/master/source/projects/black_thursday.markdown) 36 | - Break down a project into components 37 | - Use tests to verify correctness, and text fixtures and test data to iterate quickly 38 | - Leverage the agile process 39 | - Use some of the DS&A we have learned so far (autocomplete with a Trie, removing duplicates using HTs, anagram search for full-text-product search, etc.) 40 | - Good opportunity for a Hackathon 41 | - **Learning outcome**: Professional feeling, significantly complicated, dynamic website with server side data that simulates e-commerce 42 | 43 | 44 | ### Week 3 45 | 46 | - Readable Code, Debugging, and Refactoring: 2 days 47 | - Distinguish between "readable" and "unreadable" code 48 | - Exercises in refactoring messy, disorganized, poorly written code 49 | - Exercises in debugging and then refactoring broken code across the full stack 50 | - Language surrounding "maintainable" code 51 | - **Learning outcome**: Able to comment up a pull request professionally, identifying places for improvement, pointing out inconsistencies, and suggesting improvements 52 | - Writing good APIs and consuming external APIs: 3 days 53 | - Create server side application APIs that serve JSON 54 | - The challenges associated with versioning 55 | - Consume multiple external APIs (Twilio, Maps, MTA, etc.) 56 | - Handling remote failures, high latency, inconsistent behavior, the "Circuit Breaker" design pattern 57 | - **Learning outcome**: Given a set of actions for a client (web or mobile), write a clean and clear API. Given adjustments to those actions, write a backwards compatible update 58 | - **Learning outcome**: Given a flakey remote API, write a client that handles failures and timeouts gracefully 59 | 60 | ### Week 4 61 | 62 | - Data structures and algorithms practice: 2 days 63 | - What is the best datastructure to use for situation S? 64 | - What datastructure has performance P for operation O? 65 | - What is the performance of operation O on datastructure D? 66 | - Build an autocomplete system on the server and fetch results as the user types on the client (trees) 67 | - Implement BFS and DFS (using a queue and recursion respectively) 68 | - Whiteboard coding 69 | - Whiteboard software design 70 | - **Learning outcome**: Be able to pass mock interviews with volunteer industry professionals focused on whiteboard coding and DS&A problems 71 | - **Learning outcome**: Able to complete majority of Cracking the Coding Interview practice problems 72 | - Review: 2 days 73 | - Final Assessment: .5 days 74 | - Project presentations: .5 days 75 | 76 | -------------------------------------------------------------------------------- /unit1-intro-to-programming-in-javascript/README.md: -------------------------------------------------------------------------------- 1 | # Unit 1: Intro to programming in Javascript 2 | 3 | 4 | ### Week 1 5 | 6 | - **Intro to Access Code** (1 day) 7 | - Program intro 8 | - Icebreakers 9 | - Quick group introctions 10 | - [Marshmallow challenge] (http://www.tomwujec.com/design-projects/marshmallow-challenge/) 11 | - Growth mindset / trusting the process 12 | - Installfest 13 | - Sublime Text (basic tour, tips, and tricks) 14 | - Homebrew 15 | - iTerm 16 | - Github account 17 | - Intro to Github? 18 | - How to Google 19 | - Tips for effectively finding answers to common problems 20 | - Differentiating between good and bad resources 21 | - How to read and contribute to StackOverflow 22 | - Pair programming 23 | - Understand and explain the purpose of pairing 24 | - Apply simple pairing patterns like Driver/Navigator and ping-pong 25 | - Shamelessly copied from [Turing.io](https://github.com/turingschool/lesson_plans/blob/master/ruby_01-object_oriented_programming_with_ruby/pairing_patterns.markdown) 26 | - **Learning outcome**: Ready and able to participate in daily pairing sessions baked into all future lesson plans 27 | 28 | - **JavaScript Fundamentals: Workshop Review** (1 day) 29 | - Variables 30 | - Control structures, conditionals, and loops 31 | - if...else, for, while, switch 32 | - Arrays 33 | - Functions 34 | - **Learning outcome**: Be able to confidently answer all wkshp assessment questions (ex: find second largest element in an input array) 35 | 36 | - **JavaScript Fundamentals: Types, Strings, and Numbers** (1 day) 37 | - Intro to different JavaScript types 38 | - Strings: concat, substrings, iterating, searching, indexing 39 | - Numbers: basic math, modulo, parsing strings to ints 40 | 41 | - **JavaScript Fundamentals: Arrays Deep Dive** (1 day) 42 | - Common array methods, properties 43 | - How arrays work 44 | 45 | - **Intro to HTML & CSS: Part 1** (1 day) 46 | - What is HTML? Why do we use it? 47 | - Intro to tags: head, body, a, div, p, h1+, img, span, button, li 48 | - Loading an HTML file in your browser 49 | - Inspecting HTML using Chrome developer tools 50 | - **Learning outcome**: Able to build HTML page with basic text and links 51 | - **Learning outcome**: Able to use the Chrome developer tool to inspect webpage structure 52 | 53 | 54 | ### Week 2 55 | 56 | - **JavaScript Fundamentals: Functions Deep Dive** (1 day) 57 | - Why functions? Intro to reusability 58 | - Deeper dive into functions: anonymous inline definitions 59 | - Inspecting functions using Chrome developer tools: 60 | - Breakpoints / debugger 61 | - Stepping through code 62 | - Function call stack 63 | 64 | - **JavaScript Fundamentals: Intro to Objects** (1 day) 65 | - What are objects and why we use them 66 | - Basic object syntax 67 | 68 | - **Intro to HTML & CSS: Part 2** (1 day) 69 | - Attributes: class, name 70 | - More tags: script, link, style 71 | - Common CSS Properties: margin, padding, position, color, font-size, bg-color, etc. 72 | - CSS selectors: element, class, id, nested elements 73 | - Chrome Developer Tools: Inspector, CSS live editing 74 | - **Learning outcome**: Build a simple personal site with multiple pages and non-trivial layout 75 | 76 | - **Review / work on project** (1 day) 77 | - Exercises covering concepts from first two weeks 78 | - Small group project reinforcing concepts 79 | - More Chrome Dev tools 80 | 81 | - **Assessment** (1 day) 82 | 83 | 84 | ### Week 3 85 | 86 | - JavaScript and the DOM using jQuery: 4 days 87 | - Using CSS Selectors to select jQuery DOM elements 88 | - Manipulating jQuery DOM elements with `.text()`, `.hide()`, `.show()`, `.attr()`, `.css()` 89 | - Creating new DOM elements with `.append()` and `.prepend()` 90 | - Reading and validating form content with `.val()` 91 | - Interacting with sets of jQuery DOM elements with `.each()` 92 | - Browser Events 93 | - Event handlers and the concept of callbacks (+ brief intro to asynchronous nature of javascript) 94 | - Event propagation: bubbling vs capture. 95 | - jQuery event handling methods: `.click()` vs `.on()` 96 | - Using event propagation to efficiently bind to dynamic elements ie: `.on('click', '.child-selector', cb)` 97 | - **Learning outcome**: Create a web page with multiple buttons with independent click event listeners 98 | - **Learning outcome**: Create a web page with a form that validates the input and has different behavior for valid and invalid input. 99 | - **Learning outcome**: Single webpage project ideas: Madlibs, Hangman, Math Quiz, Choose your own adventure game 100 | - Big O notation, software performance analysis and optimization: 2 days (carries over into next week) 101 | - Understand O(1), O(n), O(n2), and how to combine by taking only the largest 102 | - Learn how to analyze functions for their runtime complexity, including calling other functions 103 | - Write programs to match runtime complexity and improve a given program's runtime complexity 104 | - Under the hood: List VS Arrays in non-JS context, performance characteristics of each 105 | - Linked List C-style implementation (structs with pointers) and the performance implications 106 | - Array C-style implementation (fixed size contiguous memory) and the performance implications 107 | - **Learning outcome**: Analyze a moderately complicated program to identify its runtime complexity (only with O(1), O(n), O(n2)) 108 | - **Learning outcome**: Be able to identify the superior data structure in various situations, and be able to identify the performance of all operations on both datastructures (ex: which datastructure has contant time update of an index? Which has constant time insert at the front? Which to use when building up an unknown number of items from empty? etc.) 109 | 110 | 111 | ### Week 4 112 | 113 | - Agile process for building software: 1 day 114 | - Project pre-broken up into many small deliverable iterations 115 | - Code reviews, pull requests, design reviews 116 | - Sprint planning, sprint retrospective, daily standups, story point sizing 117 | - **Learning outcome**: *TODO:* Using the agile process and closures, build a reasonably sized project (what should it be?) 118 | - Review: 2 days 119 | - Final Assessment: .5 days 120 | - Project presentations: .5 days 121 | 122 | -------------------------------------------------------------------------------- /overflow/github.md: -------------------------------------------------------------------------------- 1 | Title | Tags 2 | --- | --- 3 | Intro to GitHub | github, git 4 | 5 | ## Objectives 6 | * Learn GitHub basics 7 | * Launch a GitHub pages project 8 | 9 | ## TODO: Structure 10 | * *This is just an example structure, feel free to change* 11 | * 10:00 - 10:40 - Challenge problem 12 | * 10:40 - 10:45 Break 13 | * 10:45 - 11:30 Lecture part 1 14 | * 11:30 - 1:00 Exercise 1 15 | * 1:00 - 2:00 Lunch 16 | * 2:00 - 2:55 Lecture part 2 17 | * 2:55 - 3:00 Break 18 | * 3:00 - 4:55 Exercise 2 19 | * 4:55 - 5:00 Break 20 | * 5:00 - 6:00 - Review 21 | 22 | ## TODO: Resources 23 | Add links for slides, live coding examples, helpful resources, etc. 24 | 25 | ##Lecture 26 | ### Github Overview 27 | 28 | Github is a platform for hosting git repositories online. You certainly don't need Github to use git (alternatives include BitBucket and GitLab), but its popularity and dominance, especially within the open source community, have made the 2 somewhat synonymous for many users. 29 | 30 | Github basically lets us create a ‘remote’ repository that GitHub hosts in the cloud. This remote repository makes it possible for a bunch of people to work together collaboratively on the same project. Whenever anyone makes a change on their local computer they can push that change up to GitHub, which will then update the remote repository. The other people working on the project can then pull down those changes to their own computer, and everyone can stay in synch. 31 | 32 | As you progress through becoming a more practiced git user, don't forget that these 2 are really distinct things -- `git` provides the core technology for tracking and managing local changes, while GitHub provides a shared location for hosting git projects. 33 | 34 | 35 | ### Cloning and forking 36 | GitHub makes it easy to copy a remotely hosted repository to our local computer. We can then make changes to that copy of the project and submit those changes to the original owner of the project, who can decide whether they want to include those changes in the original version. This makes it very easy for large teams to collaboratively work together on a single project. To clone a project to your local computer do the following: 37 | 38 | - `git clone ` 39 | - Clones a git repository locally to your computer (aka creates a copy of the project on your comp). 40 | - you can find repository URLs by going onto the project’s github page and clicking the green “Clone or download” button, then copying and pasting the link. 41 | - For example, `git clone https://github.com/C4Q/ac-curriculum-web.git` will copy the project found at https://github.com/C4Q/ac-curriculum-web.git to your local computer 42 | 43 | We can also ‘fork’ a repository, which remotely copies a repository to our GitHub account. In other words, if you fork someone else’s repository, you will have an exact copy of that project hosted on your own GitHub page. Forking is great if you want to use someone else’s project as a starting point, or if you want to contribute code to someone else’s project. 44 | 45 | To fork a repository do the following: 46 | - In your browser, go to the GitHub page that you’d like to fork 47 | - Click the ‘Fork’ button in the upper right 48 | 49 | ### Pulling and pushing 50 | After you’ve cloned a repository to your computer you’ll need to be able to update your local copy if the remote repository changes. Additionally, you’ll need to be able to push changes from your local copy up to the remote copy, in order to update the project on GitHub. You can do this using the following commands: 51 | - `git pull ` 52 | - will check for changes on our GitHub repository and pull down any new changes to our computer and merge them with our local files. For example, `git pull origin master` 53 | - `git push ` 54 | - Will push all of our local changes to our remote GitHub repository and merge them with our remote files. For example, `git push origin master` 55 | 56 | ### Setting up a remote repository 57 | 58 | There are a few things we'll need to do to use GitHub to host a remote repository: 59 | - Create a new repository on GitHub by going to GitHub.com, clicking the ‘+’ icon in the upper right corner of the page, and selecting “New repository” 60 | - In your command line: `git remote add origin ` 61 | - You can find the origin url on your github page by clicking on the repository after you’ve created it 62 | - This will link our local repo to our remote repository 63 | - For example, `git remote add origin https://github.com/user/repo.git` 64 | - We can then “push" changes from our local repository to the remote copy that Github is tracking for us 65 | 66 | ### Pull request basics 67 | Pull requests (commonly called PRs) are a crucial tool for collaboratively writing code. A pull request lets us submit a proposed change to someone else’s repository, which they can then review and merge into their project (if they like the changes). Here are the steps for creating a pull request: 68 | 69 | - On GitHub, navigate to the main page of the repository that you want to merge your code into. 70 | - In the "Branch" menu, choose the branch that contains your commits. 71 | - To the right of the Branch menu, click New pull request. 72 | - On the Compare page, click Create pull request. 73 | - Type a title and description for your pull request. 74 | - Click Create pull request. 75 | 76 | You can view PRs by going to the github repo, clicking on the “Pull Requests” tab, then clicking on the specific PR. You can conveniently view the changes by clicking the “Files Changed” tab. After a PR is made, the team will review the code and add comments. Typically there will be one team member (or a group of team members) who are in charge of reviewing and merging PRs. If everything looks good the PR will then be merged and closed. 77 | 78 | ### TODO: GitHub pages and GitBot.io intro 79 | 80 | ### TODO/WORK IN PROGRESS: Exercise 81 | 82 | Two students work together to create really simple website that they’ll put on github and push to github pages using gitbot 83 | - Most of the code for the website will be provided in a github repo. They will just need to go in and change a few details to customize it 84 | - Students will first have to clone the repo to their local comp 85 | - First student will make a new branch, make a change, commit it (and put in a PR? - maybe each make a few local changes first before trying to do first PR) 86 | - Other student will review PR and leave a test comment 87 | - Students will then switch roles 88 | - After site is completed they will deploy it using github pages 89 | 90 | ## Review and Wrapup 91 | * What was easy? What was challenging? 92 | * What made sense? What didn’t make sense? 93 | 94 | ## TODO: Further Reading 95 | * Add links to further reading -------------------------------------------------------------------------------- /unit2-apis-and-advanced-javascript/README.md: -------------------------------------------------------------------------------- 1 | # Unit 2: Advanced JavaScript using APIs and frameworks 2 | 3 | ### Week 1 4 | 5 | - Unit 1 Assessment review: 1 day 6 | - Give assessment back to students 7 | - Go over solutions to ever problem as a class 8 | - Go through other examples of the most-failed problems 9 | - Package / Dependency Management with NPM: 1 day 10 | - Why we use it 11 | - How to find packages online and read their documentation 12 | - How to make your own packages 13 | - **Learning outcome**: Pull in a never-before-seen npm package and consume it 14 | - **Learning outcome**: Create a new npm package and publish it to npm. Pull a peer's new module and consume it 15 | - Building frontend javascript with Gulp: 1 days 16 | - What is Gulp? 17 | - How does Gulp transform the way we write frontend javascript? What does the file structure look like? 18 | - Set up your first gulpfile 19 | - How are tasks added to gulp? How are tasks composed with gulp? 20 | - **Learning outcome**: Create a new project folder set up with Gulp and a gulpfile. 21 | - **Learning outcome**: Add tasks to gulpfile such as: browserify, uglify, live-reload, babel (optional) 22 | - Multiline, Multifile JavaScript apps: 2 days 23 | - How to leverage multiple packages (either from NPM or self created) to write maintainable code 24 | - **Learning outcome**: Take the tic-tac-toe implementation from the previous unit and refactor into smaller modules in multiple files. The new modules should be self contained, reusable and extensible. 25 | - **Learning outcome**: Ability to, as a group, break apart a sizable webpage into smaller modules and distribute work among the team through individual modules. Collaboration is done through GitHub and Gulp is used for building js files. 26 | 27 | 28 | ### Week 2 29 | 30 | - Objects / HashTables: 1 day 31 | - Syntax for JS objects 32 | - Common uses for key-value mappings 33 | - Big O performance 34 | - Common problems solved with Key-Value Objects: Uniques, Lookups, Maps, Caching, etc. 35 | - HashTable C-style implementation (array of linked lists) and the performance implications 36 | - **Learning outcome**: Write a JavaScript function that takes an input an array and returns a new array with only the unique elements from the input. This should be O(n) time and preserve the order of the input array 37 | - **Learning outcome**: Create a vehicle lookup implementation that lets users lookup vehicles by name and display the different features of the vehicle on the page. 38 | - **Learning outcome**: Able to implement hashtable in JS (we will provide an "array" object and a "linked list" object with the appropriate methods) 39 | - Prototypes, the prototype chain, and inheritance: 2 days 40 | - constructor vs `Object.create()` 41 | - creating base classes and extending them via inheritance 42 | - OOP, Prototypical OOP VS traditional class-based OOP, non-JS OOP (Interfaces, Abstract Classes) 43 | - **Learning outcome**: Be able to discuss OOP interview questions (how to design games like chess, model animal species, etc.) and understand how to discuss the talking points for non-JS OOP 44 | - **Learning outcome**: Design and implement classes in JS, create instances manually and dynamically, and utilize protypical inheritance to augment existing classes on the fly. [Examples here](https://github.com/C4Q/ac-curriculum-web/tree/master/unit2-apis-and-advanced-javascript/oo-challenges.md) 45 | - APIs via AJAX and JSON: 2 days 46 | - What is AJAX? 47 | - jQuery's AJAX methods (ajax, get, post) & under-the-hood JavaScript's pure AJAX methods (only for educational reasons) 48 | - Handling success and failures with callbacks 49 | - Firebase (or some other competitor) configuration and consumption 50 | - Promises: definition, usage, etc 51 | - How to perform multiple, ordered asynch calls using promises (Firebase DB reads and/or writes can be used here as example) 52 | - **Learning outcome**: Update the tic-tac-toe implementation from Unit 1 to store game state in Firebase, maintain leaderboards, have user accounts that users can log in to (insecurely) from any client 53 | - **Learning outcome**: Consume an existing API (http://jsonplaceholder.typicode.com/ or http://pokeapi.co/) and allow for the client to control different queries on the API which display different results 54 | 55 | 56 | ### Week 3 57 | 58 | - Promises: 1 day 59 | - TODO @nmadd fill this out 60 | - Nested Loops and 2D Arrays: 1 days 61 | - Interacting with 2D matrices: indexing, searching, building 62 | - Scanning 2D matrices in different orders 63 | - Initializing the inner loop using values from the outer loop 64 | - **Learning outcome**: Return the unique elements of an input array in O(n2) time 65 | - **Learning outcome**: Find the difference between the diagonals of a square matrix in O(n) time 66 | - **Learning outcome**: Using Agile processes, create a tic-tac-toe implementation that allows two players to play the game on a board by clicking on elements with correct win and lose conditions as well as restart buttons and local state keeping track of wins/losses 67 | - Introduction to ReactJS: 2 days 68 | - React lifecycle methods: `render()`, `componentDidMount()`, `componentWillRecieveProps()`, `componentDidUpdate()`, etc 69 | - JSX and the benefits of writing HTML markup in javascript 70 | - Adding a reactjs task to your `gulpfile` 71 | - _Light_ introduction to ES6 (most of ReactJS + ReactJS documentation is written in es6) 72 | - classes, extend keyword, arrow functions, spread operator, promises 73 | - **Learning outcome**: Create simple To Do list using ReactJS 74 | - **Learning outcome**: Understand the difference between state and prop 75 | - Queues & Stacks: 1 day 76 | - Queues: First in, First out. Waiting in line, scheduling systems 77 | - Stacks: First in, Last out. Stack of plates, books, browser back button, function call stack 78 | - How to build either using linked list. How to build a fixed-sized Queue using an array (c-style) 79 | - **Learning outcome**: Understand which real-life situations map to which DS; Given a DS what are the operations it supports? Given some code, what is the state of the DS after some push/pop operations? 80 | 81 | ### Week 4 82 | 83 | - Redux: 1 day 84 | - Principles of redux: minimize state mutations, single source of truth, functional programming 85 | - Actions, Reducers, Stores, etc 86 | - **Learning outcome**: Build a Trello API based blog using ReactJS and Redux 87 | - Major React Project using D3.js: 1 day 88 | - Data fetched via AJAX from an API provided by us 89 | - Controls on the page to select different views of the data 90 | - Page has multiple graphs that be controlled independently and a graph who's behavior is dependent on the state (content and selection) of other graphs on the page 91 | - **Learning outcome**: Given a d3.js component (either fully or mostly provided by us) and in groups of two: design and implement a react.js app that has many d3 graphs whose state is managed by Redux 92 | - Review: 2 days 93 | - Final Assessment: .5 days 94 | - Project presentations: .5 days 95 | --------------------------------------------------------------------------------