QuincyLarson/2016 Curriculum Refactor.md

## 2016 Curriculum Refactor.md

      
    Raw
  

              2016 Curriculum Refactor.md
            
          
    2016 Curriculum Update

Free Code Camp is expanding its challenges to better prepare campers for our project challenges.
FAQ:

Will this still be 1,200 hours of challenges + 800 hours of nonprofit projects?

Yes.
When will these new challenges go live?

We are aiming for September 1.
What percentage of the current challenges will remain?

Almost 100% of the old challenges will remain. We are just expanding them.
What are the main changes?

We are integrating more applied theory: visual design, user experience design, accessibility, testing, and security. We are also placing less emphasis on convenience tools like jQuery and Bootstrap, and more emphasis on core skills like JavaScript and CSS.
This sounds extremely ambitious. How will you finish all this by September?

First we'll focus on building coding challenges around each topic's more general concepts. Then, after we launch these new challenges, we'll gradually fill in the gaps with additional challenges that cover more specific concepts.
What is the development road map?


Create titles that specify the individual concept that each interactive coding challenge should introduce
Agree on a sequence for these challenges
Designate a "topic owner" for each topic who will be responsible for overseeing its contributions
Start building challenges
Integrate the challenges, QA, and launch them all at once in order to minimize confusion

Working list of topics and their challenges (subject to change)


 HTML5 and CSS3

 Say Hello to HTML Elements
 Headline with the h2 Element
 Inform with the Paragraph Element
 Uncomment HTML
 Comment out HTML
 Fill in the Blank with Placeholder Text
 Delete HTML Elements
 Change the Color of Text
 Use CSS Selectors to Style Elements
 Use a CSS Class to Style an Element
 Style Multiple Elements with a CSS Class
 Change the Font Size of an Element
 Set the Font Family of an Element
 Import a Google Font
 Specify How Fonts Should Degrade
 Add Images to your Website
 Size your Images
 Add Borders Around your Elements
 Add Rounded Corners with a Border Radius
 Make Circular Images with a Border Radius
 Link to External Pages with Anchor Elements
 Nest an Anchor Element within a Paragraph
 Make Dead Links using the Hash Symbol
 Turn an Image into a Link
 Add Alt Text to an Image for Accessibility
 Create a Bulleted Unordered List
 Create an Ordered List
 Create a Text Field
 Add Placeholder Text to a Text Field
 Create a Form Element
 Add a Submit Button to a Form
 Use HTML5 to Require a Field
 Create a Set of Radio Buttons
 Create a Set of Checkboxes
 Check Radio Buttons and Checkboxes by Default
 Nest Many Elements within a Single Div Element
 Give a Background Color to a Div Element
 Set the ID of an Element
 Use an ID Attribute to Style an Element
 Adjusting the Padding of an Element
 Adjust the Margin of an Element
 Add a Negative Margin to an Element
 Add Different Padding to Each Side of an Element
 Add Different Margins to Each Side of an Element
 Use Clockwise Notation to Specify the Padding of an Element
 Use Clockwise Notation to Specify the Margin of an Element
 Style the HTML Body Element
 Inherit Styles from the Body Element
 Prioritize One Style Over Another
 Override Styles in Subsequent CSS
 Override Class Declarations by Styling ID Attributes
 Override Class Declarations with Inline Styles
 Override All Other Styles by using Important
 Use Hex Code for Specific Colors
 Use Hex Code to Mix Colors
 Use Abbreviated Hex Code
 Use RGB values to Color Elements
 Use RGB to Mix Colors


 Applied Visual Design

 Create visual balance using the text-align property
 Align Text Left
 Align Text Right
 Center Text
 Justify Text
 Adjust the Width of an Element Using the Width Property
 Adjust the Height of an Element Using the Height Property
 Create a Visual Balance width and height property of an element (element initially exists out of balance among other elements).
 Adjust the Width of one Element Relative to Another Element
 Adjust the Height of one Element Relative to Another Element
 Create visual emphasis by using bold text
 Create visual emphasis by using underline text
 Create visual emphasis by using the italic property on text
 Create visual emphasis by using the strikethrough property
 Create visual emphasis by adjusting the background-color property of text and property of the foreground.
 Create visual emphasis by adjusting the size of a header versus a paragraph tag.
 Create visual emphasis by making an card like element stand out by adding a box-shadow.
 Create a Graphic Using CSS
 Learn how CSS Keyframes Work
 Create movement using CSS Animation
 Learn how Bezier Curves work
 Use a Bezier Curve to Move a Graphic
 Make Motion more Natural using a Bezier Curve
 Use CSS Animation to Change the Hover State of a Button
 Add a Box Shadow to an Element
 Use CSS animation to Raise a Card Element with a Box Shadow on Hover
 Increase the Opacity of an Element
 Change the Position of an Element on its Z Axis
 Use the box-shadow z-axis and Opacity together to Animate an Element
 Reuse a block of CSS class names to recreate an element over and over again with proper spacing in order to create pattern
 Use a CSS linear gradient to Create a Striped Element
 Create a gradual CSS Linear Gradient
 Use the CSS Transform Property to Scale an Element on Hover
 Use the CSS transform Property SkewX
 Use the CSS transform Property SkewY
 Create Proportionality by Sizing a Header Versus a Paragraph Tag.
 Create Rhythm with CSS animate Property
 Create Rhythm using the Infinity Property
 Use an the Infinity Property to Make a CSS Heart Beat with a Steady Rhythm
 Create a Varying Rhythm
 Use a Varying Rhythm to Make Stars Twinkle at Different Rates
 Observe unity by looking at sites like AprilZero. This is more of an exercise in understanding how all the different principles of design create unity.
 Create a Line Using the hr Element
 Create a more Complex Shape using CSS and HTML
 Create Visual Direction by Fading in an Element to the left.
 Use the CSS Transform Scale Property to Change the Size of an Element.
 Create Texture by Adding a Subtle Pattern as a Background Image
 Learn about Complimentary Colors
 Learn about Tertiary Colors
 Adjusting the Color of Various Elements to Complimentary Colors
 Adjust the Hue of a Color
 Adjust the Tone of a Color
 Learn the Importance of Ratios in Type
 Learn About Modular Type
 Apply Different Ratios to Type Using the font-size Property
 Create a Typographic Style Guide
 Set the value of h1 to 68px
 Set the value of h2 to 52px
 Set the value of h3 to 40px
 Set the value of h4 to 32px
 Set the value of h5 to 21px
 Set the value of h6 to 14px
 Set the value of Paragraph text to 16px
 Adjust the Color of an Anchor Tag
 Adjust the Hover State of an Anchor Tag
 Adjust the font-weight of header 1–5 tags.
 Adjust the line-height of a paragraph until the paragraph is properly spaces.
 Use the text-transform property to make text uppercase.
 Incorporate a Google Fonts Into your Header
 Assign a Google Font using CSS


 Applied User Experience Design
 Applied Accessibility

 Add Screen Reader Only Attributes to Images
 Use High Contrast Text
 Avoid Colorblindness Colors


 Responsive Design

 Create a Media Query
 Set a Responsive Breakpoint
 Create a Compound Media Query
 Make an image responsive
 Use a retina image
 Make typography responsive


 Responsive Web Design Projects

 Build a Tribute Page
 Build a Personal Portfolio Webpage
 Build a Product Landing Page
 Build a Survey Form
 Build a Technical Documentation Page


 JavaScript

 Comment your JavaScript Code
 Declare JavaScript Variables
 Storing Values with the Assignment Operator
 Initializing Variables with the Assignment Operator
 Understanding Uninitialized Variables
 Understanding Case Sensitivity in Variables
 Add Two Numbers with JavaScript
 Subtract One Number from Another with JavaScript
 Multiply Two Numbers with JavaScript
 Divide One Number by Another with JavaScript
 Increment a Number with JavaScript
 Decrement a Number with JavaScript
 Create Decimal Numbers with JavaScript
 Multiply Two Decimals with JavaScript
 Divide one Decimal by Another with JavaScript
 Finding a Remainder in JavaScript
 Compound Assignment With Augmented Addition
 Compound Assignment With Augmented Subtraction
 Compound Assignment With Augmented Multiplication
 Compound Assignment With Augmented Division
 Convert Celsius to Fahrenheit
 Declare String Variables
 Escaping Literal Quotes in Strings
 Quoting Strings with Single Quotes
 Escape Sequences in Strings
 Concatenating Strings with Plus Operator
 Concatenating Strings with the Plus Equals Operator
 Constructing Strings with Variables
 Appending Variables to Strings
 Find the Length of a String
 Use Bracket Notation to Find the First Character in a String
 Understand String Immutability
 Use Bracket Notation to Find the Nth Character in a String
 Use Bracket Notation to Find the Last Character in a String
 Use Bracket Notation to Find the Nth-to-Last Character in a String
 Word Blanks
 Store Multiple Values in one Variable using JavaScript Arrays
 Nest one Array within Another Array
 Access Array Data with Indexes
 Modify Array Data With Indexes
 Access Multi-Dimensional Arrays With Indexes
 Manipulate Arrays With push()
 Manipulate Arrays With pop()
 Manipulate Arrays With shift()
 Manipulate Arrays With unshift()
 Shopping List
 Write Reusable JavaScript with Functions
 Passing Values to Functions with Arguments
 Global Scope and Functions
 Local Scope and Functions
 Global vs. Local Scope in Functions
 Return a Value from a Function with Return
 Assignment with a Returned Value
 Stand in Line
 Understanding Boolean Values
 Use Conditional Logic with If Statements
 Comparison with the Equality Operator
 Comparison with the Strict Equality Operator
 Comparison with the Inequality Operator
 Comparison with the Strict Inequality Operator
 Comparison with the Greater Than Operator
 Comparison with the Greater Than Or Equal To Operator
 Comparison with the Less Than Operator
 Comparison with the Less Than Or Equal To Operator
 Comparisons with the Logical And Operator
 Comparisons with the Logical Or Operator
 Introducing Else Statements
 Introducing Else If Statements
 Logical Order in If Else Statements
 Chaining If Else Statements
 Golf Code
 Selecting from many options with Switch Statements
 Adding a default option in Switch statements
 Multiple Identical Options in Switch Statements
 Replacing If Else Chains with Switch
 Returning Boolean Values from Functions
 Return Early Pattern for Functions
 Counting Cards
 Build JavaScript Objects
 Accessing Objects Properties with the Dot Operator
 Accessing Objects Properties with Bracket Notation
 Accessing Objects Properties with Variables
 Updating Object Properties
 Add New Properties to a JavaScript Object
 Delete Properties from a JavaScript Object
 Using Objects for Lookups
 Testing Objects for Properties
 Introducing JavaScript Object Notation (JSON)
 Accessing Nested Objects in JSON
 Accessing Nested Arrays in JSON
 Record Collection
 Iterate with JavaScript For Loops
 Iterate Odd Numbers With a For Loop
 Count Backwards With a For Loop
 Iterate Through an Array with a For Loop
 Nesting For Loops
 Iterate with JavaScript While Loops
 Profile Lookup
 Generate Random Fractions with JavaScript
 Generate Random Whole Numbers with JavaScript
 Generate Random Whole Numbers within a Range
 Sift through Text with Regular Expressions
 Find Numbers with Regular Expressions
 Find Whitespace with Regular Expressions
 Invert Regular Expression Matches with JavaScript


 Object Oriented Programming

 Declare JavaScript Objects as Variables
 Construct JavaScript Objects with Functions
 Make Instances of Objects with a Constructor Function
 Make Unique Objects by Passing Parameters to our Constructor
 Make Object Properties Private


 Functional Programming

 Iterate over Arrays with .map
 Condense arrays with .reduce
 Filter Arrays with .filter
 Sort Arrays with .sort
 Reverse Arrays with .reverse
 Concatenate Arrays with .concat
 Split Strings with .split
 Join Strings with .join


 Advanced Data Structures

 All JavaScript Objects are Associative Arrays
 JavaScript Date Objects
 Date.now
 new Date()
 Date.parse
 Date.now
 Linked Lists
 Traversing a Linked List
 JavaScript Stacks
 JavaScript Queues
 JavaScript Deques
 ES6 Symbols
 Binary Trees
 Reversing a Binary Tree
 Binary Search Tree
 Min/Max Binary Heaps
 Trie


 Applied Algorithm Design

 Understand Time Complexity
 Greedy Algorithms
 Backtracking Algorithms
 Brute Force Search Algorithms
 Divide and Conquer Algorithms
 Dynamic Programming


 Algorithm Projects

 Get Set for our Algorithm Challenges
 Reverse a String
 Factorialize a Number
 Check for Palindromes
 Find the Longest Word in a String
 Title Case a Sentence
 Return Largest Numbers in Arrays
 Confirm the Ending
 Repeat a string repeat a string
 Truncate a string
 Chunky Monkey
 Slasher Flick
 Mutations
 Falsy Bouncer
 Seek and Destroy
 Where do I belong
 Caesars Cipher
 Sum All Numbers in a Range
 Diff Two Arrays
 Roman Numeral Converter
 Where art thou
 Search and Replace
 Pig Latin
 DNA Pairing
 Missing letters
 Boo who
 Sorted Union
 Convert HTML Entities
 Spinal Tap Case
 Sum All Odd Fibonacci Numbers
 Sum All Primes
 Smallest Common Multiple
 Finders Keepers
 Drop it
 Steamroller
 Binary Agents
 Everything Be True
 Arguments Optional


 jQuery

 Learn how Script Tags and Document Ready Work
 Target HTML Elements with Selectors Using jQuery
 Target Elements by Class Using jQuery
 Target Elements by ID Using jQuery
 Delete your jQuery Functions
 Target the same element with multiple jQuery Selectors
 Remove Classes from an element with jQuery
 Change the CSS of an Element Using jQuery
 Disable an Element Using jQuery
 Change Text Inside an Element Using jQuery
 Remove an Element Using jQuery
 Use appendTo to Move Elements with jQuery
 Clone an Element Using jQuery
 Target the Parent of an Element Using jQuery
 Target the Children of an Element Using jQuery
 Target a Specific Child of an Element Using jQuery
 Target Even Numbered Elements Using jQuery
 Use jQuery to Modify the Entire Page


 JSON APIs and Ajax

 Trigger Click Events with jQuery
 Change Text with Click Events
 Get JSON with the jQuery getJSON Method
 Convert JSON Data to HTML
 Render Images from Data Sources
 Prefilter JSON
 Get Geo-location Data


 Applied Data Visualization
 D3
 Data Visualization Projects

 Visualize Data with a Bar Chart
 Visualize Data with a Scatterplot Graph
 Visualize Data with a Heat Map
 Show National Contiguity with a Force Directed Graph
 Map Data Across the Globe


 Front End Frameworks

 CSS3 Flexbox
 Bootstrap

 Use Responsive Design with Bootstrap Fluid Containers
 Make Images Mobile Responsive
 Center Text with Bootstrap
 Create a Bootstrap Button
 Create a Block Element Bootstrap Button
 Taste the Bootstrap Button Color Rainbow
 Call out Optional Actions with Button Info
 Warn your Users of a Dangerous Action
 Use the Bootstrap Grid to Put Elements Side By Side
 Ditch Custom CSS for Bootstrap
 Use Spans for Inline Elements
 Create a Custom Heading
 Add Font Awesome Icons to our Buttons
 Add Font Awesome Icons to all of our Buttons
 Responsively Style Radio Buttons
 Responsively Style Checkboxes
 Style Text Inputs as Form Controls
 Line up Form Elements Responsively with Bootstrap
 Create a Bootstrap Headline
 House our page within a Bootstrap Container Fluid Div
 Create a Bootstrap Row
 Split your Bootstrap Row
 Create Bootstrap Wells
 Add Elements within your Bootstrap Wells
 Apply the Default Bootstrap Button Style
 Create a Class to Target with jQuery Selectors
 Add ID Attributes to Bootstrap Elements
 Label Bootstrap Wells
 Give Each Element a Unique ID
 Label Bootstrap Buttons
 Use Comments to Clarify Code


 Sass

 CSS with Superpowers
 Storing Data with Sass Variables
 Nesting your CSS
 Mixing the Cake
 Using if and else
 Continuing with for
 Expanding with each
 Wrapping up with while
 Using Sass Partials
 Extend your CSS styles


 React
 Redux
 React with Redux
 Front End Framework Projects

 Build a Random Quote Machine
 Build a JavaScript Calculator
 Build a Pomodoro Clock
 Build a Recipe Box
 Build the Game of Life


 Git

 Save your Code Revisions Forever with Git


 Node.js and Express.js

 Manage Packages with npm
 Start a Node.js Server
 Continue working with Node.js Servers
 Finish working with Node.js Servers
 Build Web Apps with Express.js


 MongoDB

 Store Data in MongoDB


 API and Micorservice Projects

 Get Set for our API and Microservices Projects
 Timestamp Microservice
 Request Header Parser Microservice
 URL Shortener Microservice
 Image Search Abstraction Layer
 File Metadata Microservice


 Automated Testing
 Applied Quality Assurance
 Applied Information Security
 Dynamic Web Application Projects

 Build a Voting App
 Build a Nightlife Coordination App
 Chart the Stock Market
 Manage a Book Trading Club
 Build a Pinterest Clone


We will also offer a growing list of bonus projects


 Portfolio Building

 Bonus Algorithms and Data Structures Practice

 Validate US Telephone Numbers
 Symmetric Difference
 Exact Change
 Inventory Update
 No repeats please
 Friendly Date Ranges
 Make a Person
 Map the Debris
 Pairwise


 Bonus Projects

 Build a Markdown Previewer
 Build a Camper Leaderboard
 Show the Local Weather
 Build a Wikipedia Viewer
 Use the Twitch.tv JSON API
 Build a Tic Tac Toe Game
 Build a Simon Game
 Build a Roguelike Dungeon Crawler Game