Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

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?

  1. Create titles that specify the individual concept that each interactive coding challenge should introduce
  2. Agree on a sequence for these challenges
  3. Designate a "topic owner" for each topic who will be responsible for overseeing its contributions
  4. Start building challenges
  5. 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
  • Applied Algorithm Design
  • 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
@tinyinkling

This comment has been minimized.

Copy link

commented Jun 25, 2016

Wow - Way to increase the awesome!
Thanks FCC!!

@Jago-Kosolosky

This comment has been minimized.

Copy link

commented Jun 26, 2016

More video challenges in the making too I hope? Really enjoyed those as well!

@ddschmitz

This comment has been minimized.

Copy link

commented Jun 27, 2016

I'm really excited to see more content related to the core computer science topics like data structures. Introducing those topics and coding problems will be a great challenge.

@IshtmeetSingh

This comment has been minimized.

Copy link

commented Jun 27, 2016

React challenges would be live too, or not?

@patrickk

This comment has been minimized.

Copy link

commented Jun 28, 2016

Looks amazing, can't wait for the new content!

@johren02

This comment has been minimized.

Copy link

commented Jun 28, 2016

Looking forward to expanded Javascript challenges. Looks like a well needed curriculum redesign.

@fooby1

This comment has been minimized.

Copy link

commented Jun 28, 2016

So good! Hope to see the React challenges with this update, it seems like a key skill to have a decent grasp on frameworks when working for companies based on those I've talked to.

@awulkan

This comment has been minimized.

Copy link

commented Jun 28, 2016

"We are also placing less emphasis on convenience tools like jQuery and Bootstrap, and more emphasis on core skills like JavaScript and CSS."
That's very good. You shouldn't be using those when learning front end in my opinion. You'll get used to it instead of learning the pretty simple and much more rewarding way of doing things yourself.

@flopywood

This comment has been minimized.

Copy link

commented Jun 28, 2016

This is impressive. Can't wait to do to the new challenges when they're up.
Congrats on the big changes!

@MindfulBell

This comment has been minimized.

Copy link

commented Jun 28, 2016

Nice!

I like how the "bonus" algorithm challenges were hands down the hardest bonfires, and now they are optional! Oh well!

@QuincyLarson

This comment has been minimized.

Copy link
Owner Author

commented Jun 29, 2016

@MindfulBell The advanced algorithms have been optional for the last 6 months ;) We are moving them down to a special section to reduce confusion.

@peteJSCode

This comment has been minimized.

Copy link

commented Jun 29, 2016

The current curriculum is really outstanding as is. I'm pretty blown away by the quality and the community you've created. I would love to see more optional algorithm problems.

@normancroan

This comment has been minimized.

Copy link

commented Jun 30, 2016

This is fantastic, big thanks to everyone who contributes to this project. I hope to count myself among you one day!

@BrunoCocco

This comment has been minimized.

Copy link

commented Jun 30, 2016

Perfect! thaks for all FCC!

@manujas

This comment has been minimized.

Copy link

commented Jun 30, 2016

Wow!!!! i

@ankur1163

This comment has been minimized.

Copy link

commented Jul 6, 2016

simply awesome.waiting for the react tuts

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.