freecodecamp/curriculumexpansion

freeCodeCamp.org's Project based Curriculum

This repo is for the staff to add project prototypes for the new project based JavaScript and frontend libraries curriculum.

Where can I read more about the new curriculum?

You can read all about it in Quincy's announcement.

You can also see the new Responsive Web Design course on the freeCodeCamp learn page.

curriculumexpansion's Issues

Redux Challenges

@alayek is in charge of coordinating the creation of these challenges, but he needs your help.

Here's a potential list of challenges:

• Actions
  • Must have a type
  • Action emitted by user interaction
  • Example of Action payload as a JS object
• Reducers
  • Using Object.assign()
  • Switch statement to parse relevant action
  • (state, action) => state, must not modify state
  • Reducers can rollback state
• Store
  • Source of truth for all application state
  • Combine various root level reducers with combineReducer()
  • Access state with getState()
  • Update state with dispatch(action)
  • Register listener via `subscribe(listener)
  • Unregister listener
• One Way Data Flow
  • Dispatching action with store.dispatch(action)
  • Reducer provides the next state
  • Store combines all root level reducers
  • Store saves a snapshot of application state
• Advanced section: Async [TODO]

Source: Redux Docs

Thanks @EliBei for helping with finalizing these.

Here are the challenges we have currently planned:

For each challenge, please reply to this GitHub issue with:

1. Challenge description text
2. Test suite (using the assert method)
3. The seed code, which is prepopulated in the editor at the beginning of the challenge
4. A working solution that makes all tests pass

Add some sort of challenge that requires using cookies and the cookie-parser module (Backend)

I think that something that people should be getting taught, either with a lesson, or with an expansion upon learnyounode or expressworks, is how to work with cookies in node.js. This is something that becomes more important if they want to have content locked behind a custom authentication service (Not using oauth) and need persistence of identity

Automated Testing Challenges

We are seeking a camper to be in charge of coordinating the creation of these challenges.

For each challenge, please reply to this GitHub issue with:

1. Challenge description text
2. Test suite (using the assert method)
3. The seed code, which is pre-populated in the editor at the beginning of the challenge
4. A working solution that makes all tests pass

We still need to come up with a list of concepts to cover, where each topic can be taught interactively, then translate these concept into the names of the challenges.

Basic JavaScript Challenges

@alayek is in charge of coordinating the expansion of these challenges, but he needs your help.

For each challenge, please reply to this GitHub issue with:

1. Challenge description text
2. Test suite (using the assert method)
3. The seed code, which is pre-populated in the editor at the beginning of the challenge
4. A working solution that makes all tests pass

Here are the challenges we have currently planned (these can be further expanded):

• 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
• Invert Regular Expression Matches with JavaScript
• 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
• Using the Conditional(Ternary) Operator
• Using multiple Conditional(Ternary) Operators
• Using the parseInt() function
• Use the parseInt() function with radix

How should we solve the CORS issue when testing API Projects?

The problem

API project apps need to have CORS-headers enabled for the freecodecamp.com site to allow the FCC project pages to run tests.

This could be solved by using JSONP for the API-calls, but it's overly complicated for these simple projects. Additionally, CORS seems to be a more modern solution so we'd suggest to go with that.

Solutions

1. User stories

• explain CORS to the campers, show links
• tell them to implement the CORS headers - to allow us to test their API

2. Provide a boilerplate for the API project which enables the CORS headers by default

/*
Example of comment provided in project boilerplate
Uncomment this middleware to make you API testable by Free Code Camp

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*")
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept")
  next()
})
*/

3. Add challenges to FCC explaining working with APIs (ping #27)

• Explain JSONP
• Explain CORS
• JSONP vs CORS - Explain when to use which solution

4. Use JSONP (harder to implement + requires updated user stories)

Suggestion

Go with 3 - this is a fundamental web concept so it's important to know when doing frontend development.

Sass challenges

@AkiraLaine is in charge of coordinating the creation of our Sass challenges.

For each challenge, please reply to this GitHub issue with:

1. Challenge description text
2. Test suite (using the assert method)
3. The seed code, which is pre-populated in the editor at the beginning of the challenge
4. A working solution that makes all tests pass

Here are the challenges we have currently planned:

• 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

Functional Programming Challenges

@alayek is in charge of coordinating the expansion of these challenges, but he needs your help.

For each challenge, please reply to this GitHub issue with:

1. Challenge description text
2. Test suite (using the assert method)
3. The seed code, which is pre-populated in the editor at the beginning of the challenge
4. A working solution that makes all tests pass

Here are the challenges we have currently planned (these can be further expanded):

• Imperative hazards ⚡
  • Some showcasing of imperative bugs => Imperative Hazards
• Declarative beauty 💃
  • Intro to non-mutating discipline => It's not the same
  • Declare your dependencies => Show me what you got
  • Some pure Array manipulation => Brave new world
• Mapping 👥
  • Introduction to Array.prototype.map() => Less Talk, More Action: Map
  • Closer look at map() => I Wanna Map It Map It
• Functional filtering ⛽
• Slicing 🔪
  • Introduce Array.prototype.slice()
  • Rewrite code which has splice() over slice()
• Con-catting 💞
  • Introduce Array.prototype.concat()
  • Replace push() with concat()
• Reducing to ashes 🔥
  • Introduce Array.prototype.reduce()
  • Teach them how to think of problem solution using reduce()
  • Implement map(), filter() etc. with reduce()
• Sort Arrays with Array.prototype.sort()
  • Have the camper write a non-mutating version of sort()
• String problems in the form of Array processing
  • Split Strings with .split
  • Join Strings with .join
  • Some sample String processing problem where previously learned lessons are used.
• Check Positive ➕
  • Strictly Positive 💪
  • Lenient Positive 🍰
• Intro to partial and currying
• Function composition 🌀
• Refactor imperative code-base to a functional one

... and a lot of challenges that practice and recombine these functions. Currently, many of these can be solved by copying and pasting from the description. We should make sure that's not possible.

User Experience Design Challenges

We are seeking a camper to be in charge of coordinating the creation of these challenges.

For each challenge, please reply to this GitHub issue with:

1. Challenge description text
2. Test suite (using the assert method)
3. The seed code, which is pre-populated in the editor at the beginning of the challenge
4. A working solution that makes all tests pass

We still need to come up with a list of concepts to cover, where each topic can be taught interactively, then translate these concept into the names of the challenges.

Regular Expressions Challenges

We are seeking a camper to be in charge of coordinating the creation of these challenges.

For each challenge, please reply to this GitHub issue with:

1. Challenge description text
2. Test suite (using the assert method)
3. The seed code, which is pre-populated in the editor at the beginning of the challenge
4. A working solution that makes all tests pass

We still need to come up with a list of concepts to cover, where each topic can be taught interactively, then translate these concept into the names of the challenges.

Draft Regex Outline

• Using .test
• Match Literal String (Literal Matches 1 - abc)
• Match Literal String with Different Possibilities (Literal Matches 2 - ab|cd)
• Ignore Case While Matching (Flags - i - Case Insensitive)
• Extract Matches (Introduce .match() method)
• Find More Than First Match (Flags - g- Global)
• Wildcard Period (Wildcard - .)
• Match Single Character with Multiple Possibilities (Character Class 1 - [abc] - Count Vowels?)
• Match Letters of the Alphabet (Character Class 2 - [abc] ??)
• Match Numbers and the Alphabet (Character Class 3 - [a-z0-9])
• Match Single Characters Not Specified (Character Class 4 - [^abc])
• Occurs One or More Times (Quantity Specifiers 1 - +)
• Occurs Zero or More Times (Quantity Specifiers 2 - *)
• Don't Be Greedy, Be Lazy (Lazy vs greedy .* and .+)
• Checkpoint 1 Needs new name (Checkpoint 1 - Match simple literal patterns with optional followers (character class))
• Match Strings Only at the Beginning (Anchors 1 - ^)
• Match Strings Only at the End (Anchors 2 - $)
• Use Character Classes to Match Alphanumerics (Pre-Defined Character Class 1 - \w)
• Use Character Classes to Match Non-Alphanumerics (Pre-Defined Character Class 2 - \W)
• Use Character Classes to Match Digits (Pre-Defined Character Class 1 - \d)
• Use Character Classes to Match Non-Digits (Pre-Defined Character Class 1 - \D)
• Use Character Classes to Match Whitespace (Pre-Defined Character Class 1 - \s)
• Use Character Classes to Match Non-Whitespace (Pre-Defined Character Class 1 - \S)
• Specify Upper and Lower Number of Matches (Quantity Specifiers 3 - {x,y})
• Specify Only Lower Number of Matches (Quantity Specifiers 4 - {x,})
• Specify Certain Number of Matches (Quantity Specifiers 5 - {y})
• Check For All or None (Optionality - ?)
• Positive and Negative Lookahead
• Capture Groups of Patterns (Capture Groups - ( ))
• Capture Groups and Replace (Capture groups 2 - Using Replace?)
• Checkpoint 2 Needs new name (Checkpoint 2 - ??)

Draft Challenge

## Challenge Title

**Challenge Description**

> Here is a description

**Challenge Seed**
<!-- Initial code presented to the camper -->


**Challenge Tests**
<!-- either assert tests or your ideas for things to be tested -->


**Challenge Solution**
<!-- solution to this challenge -->

D3 Challenges

For each challenge, please reply to this GitHub issue with:

1. Challenge description text
2. Test suite (using the assert method)
3. The seed code, which is pre-populated in the editor at the beginning of the challenge
4. A working solution that makes all tests pass

We still need to come up with a list of concepts to cover, where each topic can be taught interactively, then translate these concept into the names of the challenges.

---

Edit:

With inputs from @EliBei, these are the topics we would like to cover under D3 [WIP]

• Chart Geometry
  • Understand how to Plot Data
  • Understand the X, Y and Z Axes
  • Understand the Process of Translation
  • Understand how to use Coordinates
• D3 Basics
  • Appending elements using D3
  • Working with Data
  • Dynamic Data
  • Styling your elements
  • Logic in your style
  • Adding classes using D3
  • Dynamically updating height
  • Clean up the bars
    • Increase bar size
    • Add margins
• SVG
  • Using SVG
  • Displaying a bar using SVG
  • Add spacing between the bars
  • Changing heights of the bars
  • Flipping the bar chart
  • Changing color of the bars
  • Adding labels
  • Styling your labels
  • Adding hover effects
  • Adding tooltips
• Scatter Plots
  • Creating circles
  • Labeling Circles
• Scales
  • Creating a Scale
  • Setting domain and range
  • d3.min() and d3.max()
  • Dynamic Scales (Setting x and y scales)
  • Using pre-defined scales
• Axis
  • Adding Axis
• Loading CSV Data
• Loading JSON Data

Applied Quality Assurance Challenges

We are seeking a camper to be in charge of coordinating the creation of these challenges.

For each challenge, please reply to this GitHub issue with:

1. Challenge description text
2. Test suite (using the assert method)
3. The seed code, which is pre-populated in the editor at the beginning of the challenge
4. A working solution that makes all tests pass

We still need to come up with a list of concepts to cover, where each topic can be taught interactively, then translate these concept into the names of the challenges.

ES6 Challenges

@alayek is in charge of coordinating the expansion of these challenges, but he needs your help.

In particular, we would like to highlight the differences between ES6 and ES5; including but not limited to

• ES6 Variable Declaration
  • Problems with var hoisting
  • Problems with var scoping
  • const is a one time assignment
  • const does not create immutable data structures
• Arrow Functions
  • arrow function introduction
  • arrow function with input parameters
  • arrow function with high order functions (map, filter, reduce)
  • lexical this in arrow functions
• how to use the default parameters
• how to use the rest operator
• how to use the spread operator
• Destructuring Array & Objects
  • basic object destructuring
  • destructuring nested objects
  • destructuring array
  • destructuring array + rest operator
  • destructuring function parameters
• string interpolation using backquote
• Simplified Object Literals
  • enhanced object literal - simple keys
  • enhanced object literal - functions
  • computed property names
• class Syntax
  • class definition
  • class getters/setters
  • class inheritance
  • base class calls
  • class static members
• Import & Export : non-browser stuff
  • import vs. require
  • import * syntax
  • export syntax
  • export default syntax
• tail call optimization
• composition with Object.assign
• immutable object structures with Object.assign
• iterating through object keys with Object.keys
• for...of syntax
• using native promise
• promise.all
• generators (a very brief introduction)

We have to keep in mind that for IE10 and older browsers; ES6 won't natively work in browser; hence we need to inject some babel in-browser polyfill for this.

Advanced Node and Express Challenges

@Em-Ant is in charge of coordinating the expansion of these challenges, but he needs your help.

We need to create a list of topics we'd like to cover. I suspect we should cover streams and advanced file system methods. Are there any Node.js enthusiasts who would like to contribute to this?

Current challenge list (these need to be converted to proper challenge names and several of these topics will require more than one challenge):

• cookies
• sessions
• make API calls in the server with the http module (or better with request)
• express.router and structure the app with modules
• the fs module to read/write files
• some basic stream/pipe concepts to handle files transmission ❓
• view engines ❓
• Authorization with passport

Finalize new challenge sequence and import into seed files

Update September 22
We now have a QA issue. @HKuz is leading our new challenge QA effort. Please message her in Gitter if you'd like to help out. #52

👍 = ready to import into seed files
🎱 = not quite ready

• imported into seed files and ready to QA

💯 = has been QA'd
💌 = intro text created
🌊 = no changes from master

So far we have made incredible progress. Look at all the 👍 below!

I look forward to recognizing all of you - and highlighting your specific contributions - in the big Medium post announcing this massive curriculum expansion.

Since we are so close to shipping all of these challenges (probably 70% of the challenges that needed to be designed have been designed), I propose that we hold out until every last challenge is designed and QA'd. This means we can introduce all the challenges at once, minimizing confusion among campers (and yes - there's a lot of confusion every time we introduce more challenges, no matter how hard we try to communicate everything).

If you have already finished designing the challenges in your current topic, you should find a topic with a 🎱 , jump in, and ask its topic owner how you can best help.

The highest priority sections right now are React, Redux, and React + Redux. These are mission-critical. They have had a "coming soon" label beside them for nearly 9 months. And now, thanks to @BerkeleyTrue's hard work, we can do React (and ES6) in FCC's code editor with Babel, so we have no excuse not to ship them. 😄

We could also use help with CSS Flexbox and Applied User Experience Design challenges. We haven't even started these. Having a dozen or two challenges for these topics is better than having no challenges. Many campers have requested that we cover these topics, and they will be grateful.

Our current goal is to get these into production by Friday, September 16.

Here's the tentative challenge map we hope to ship next week:

Responsive Web Design

This section involves just HTML and CSS - no JavaScript. It has five required projects.

• Basic HTML5 and CSS3 🌊
• Applied Visual Design 👍 💯💌
• Responsive Web Design 👍💯💌
• CSS Flexbox 👍💯💌
• Applied Accessibility 👍 💯💌
  Responsive Web Design Projects
• Tribute Page 👍 💯
• Survey Form 👍 💯
• Product Landing Page 👍 💯
• Documentation Page 👍 💯
• Portfolio Page 👍 💯

JavaScript Algorithms and Data Structures

This section involves just JavaScript - nothing that requires a browser view. It has five required projects. Only the Basic and Intermediate algorithm challenges are required.

• Basic JavaScript 🌊
• ES6 🎱
• Regular Expressions 👍💯💌
• Debugging 👍 💌 💯
• Basic Algorithm Scripting 🌊
• Object Oriented Programming 👍💯💌
• Functional Programming 🎱
• Intermediate Algorithm Scripting 🌊
• Advanced Data Structures 🎱
• Advanced Algorithm Scripting 🌊

Front End Libraries

This section teaches additional tools, such as Sass and React. The five required projects can be built using any technologies (including Angular - a popular request). We do away with consuming APIs here and instead cover it in the Data Visualization section.

• Boostrap 🌊
• jQuery 🌊
• Sass 👍💯💌
• React 🎱
• Redux 🎱
• React and Redux 🎱
  Front End Libraries Projects (required - can now be completed with any tools):
• Random Quote Machine 🌊
• JavaScript Calculator 🌊
• Pomodoro Clock 🌊
• Recipe Box 🌊
• Conway's Game of Life 🌊

Data Visualization

This section covers working with D3 for data visualization. It also covers how to consume data from APIs. These five required projects should be redesigned to involve consuming APIs.

• Data Visualization with D3 👍💯💌
• JSON APIs and AJAX 👍💯💌
  Data Visualization Projects:
• Bar Chart Visualization 🌊
• Scatterplot Graph 🌊
• Heat Map 🌊
• Force Directed Graph 🌊
• World Map Visualization 🌊

APIs and Microservices

This section covers building APIs that serve data and Microservices that perform a task. The challenges that cover server-side JavaScript are fully redesigned - we will no longer need Node School (thanks @Em-Ant and @Greenheart). There are five required projects that can be completed with any technology (though we'll strongly recommend using Node/Express running on HyperDev).

• Managing Packages with npm 👍
• Node and Express 👍
• MongoDB and Mongoose 👍
  API and Microservice projects:
• Timestamp Microservice 🌊
• Request Header Parser Microservice 🌊
• URL Shortener Microservice 🌊
• Image Search Abstraction Layer 🌊
• File Metadata Microservice 🌊

Information Security and Quality Assurance

This section will teach some practical security and testing skills. It has five required projects, which should be expanded upon with security and test-focused user stories.

• Information Security with Helmet.js 👍
• Quality Assurance and Testing with Chai 👍
• Advanced Node.js methods 🎱
  Information Security Projects:
• Voting app 🌊
• Nightlife Coordination App 🌊
• Stock Market Browser 🌊
• Book Trading Club 🌊
• Pinterest Clone 🌊

Note: Simon, Tic Tac Toe, Twitch, Wikipedia Viewer, Local Weather, Roguelike Dungeon Crawler, Markdown Previewer and Camper Leaderboard will become just some of many bonus practice projects.

Responsive Web Design Project: Pure CSS Tribute Page

We are introducing a few new front end projects to give campers more experience working just with HTML and CSS before adding JavaScript to the mix.

Here are the agile use stories for this challenge:

1. I can view a tribute page with an image and text.
2. I can click on a link that will take me to an external website with further information on the topic.

We are looking for a volunteer who can build a working demo of this on CodePen using only HTML5 and CSS (no libraries). This should be simple and unambitious. We want the result to be in line with what a camper who's new to coding can realistically achieve themselves.

Should FCC's Example API Projects be private on hyperdev?

Keep them private because...

• If they were, the hyperdev-project's code would be hidden while keeping the example apps themself public - this could keep cheaters out.

Keep them public because...

• Cheaters only cheat themselves.
• There will for example be some who benefit from reading the code to gain a deeper understanding or see different solutions

Angular Challenges

I think Angular 2.0 should be fully supported as it is a very good client side option in the MEAN stack.

MEAN & MERN should be fully supported in FCC.

I know you use MERN for FCC, but this does not mean MEAN should be left aside.

React challenges

@BerkeleyTrue is in charge of coordinating the creation of these challenges, but he needs your help.

Here are the challenges we have currently planned:

• JSX
  • Create a simple JSX element
  • Create a new element with composition
  • Add a CSS class with the className property
  • Create an element using React.createElement (demonstrates jsx turns into plain javascript)
  • Add Comments in JSX
• Rendering
  • Render an HTML element to the DOM
  • Render a component to the DOM
• Components
  • Create a functional component
  • Create a component using the class syntax
  • Render a pair of divs from a component
• Props
  • Pass a string to a component using JSX
  • Access props using this.props
  • Pass an array to a component using JSX
  • Pass an array to a component using React.createElement
  • Set the default props using the defaultProps static component property
  • Define your components shape with propTypes
• State
  • Define the initial state within the components constructor
    • Display state with this.state
  • Update state with setState
• Components, again?
  • Conditionally render elements from a component
  • componentWillMount (todo)
  • Ajax data with componentDidMount
  • Everybody cleanup with componentWillUnmount
  • Update state with componentWillReceiveProps
  • Prevent re-render with shouldComponentUpdate
  • child lifecycle order (todo)
• Rendering, node style
  • render server side with renderToString

edit(@berkeley): proptypes/defaultProps added. Some state challenges added

For each challenge, please reply to this GitHub issue with:

1. Challenge description text
2. Test suite (using the assert method)
3. The seed code, which is prepopulated in the editor at the beginning of the challenge
4. A working solution that makes all tests pass

Complete Back End Challenge Overhaul

Complete Back End Challenge Overhaul

Mission

Our goal is to create new challenges teaching npm, node, express, and mongoose. These will replace the NodeSchool modules currently in use. There are several reasons behind this decision:

• Some NodeSchool challenges are unmaintained / buggy
• The how-to-npm-challenges cover too advanced topics to fit with our curriculum (creating & publishing npm packages)
• We want to enable as much learning as possible in the browser, without requiring installations or local Dev-environment setup.

Action plan:

1. Get the npm challenges working with @Greenheart's testing tool as a proof of concept ✅
2. @Greenheart and @Em-Ant will create the remaining challenges and their tests using @Greenheart's prototype
3. Then create a version of the HyperDev boilerplate that passes all the tests to ensure they can indeed be passed
4. Make all those tests fail again by removing necessary code. This will serve as the starting project that campers fork on HyperDev
5. @QuincyLarson and @BerkeleyTrue will implement the UI for these challenges on FCC's beta branch, which hits the appropriate end points and stores the campers' project URL
6. Once @BerkeleyTrue and @QuincyLarson have finished preparing FCC, we will transfer the prototype's instructions and tests over to Free Code Camp's JSON seed files so these will replace the existing back end challenges in FCC's curriculum.

We are folding the following issues into this one:
Back End Challenges: #26
Applied InfoSec: #25
Applied QA: #24
Automated testing: #23

Challenge Structure - camper-stories

• Campers can see each topic (i. e. npm, node, express) as a section in the FCC map
• Each section on the FCC map corresponds to a base project on hyperdev, containing seed code & utility functions FCC will use to verify challenges. This base project is linked in the instructions for the first challenge of each section.
• Campers can "remix" a base project on hyperdev to create their own copy.
• Before they continue learning, they need to enter the URL to their remixed hyperdev project.
• For each challenge in each section, campers can find instructions on the corresponding FCC challenge page
• To complete a challenge, campers modify their hyperdev project.
• A button on the FCC challenge page is used to run tests
• Campers can see test results and a hardcoded error-messages of what they have failed to yet accomplish

List of Challenges

See #26

1. Manage Node.js projects and npm packages using package.json

Status:

• Challenge instructions (View them below 💯 ✨ )
• Tests for every challenge available in tests.js of the backend tester prototype
• Solutions for every challenge available in tests.js (as a property of every test-object)
• Seed Code for each challenge (N/A) - Campers start with a minimal package.json that's already in the boilerplate - then all challenges build on top of each other.
• Boilerplate HyperDev project ready to be remixed by campers

Challenges:

• Related to #45 Some kind of intro (see notes in the beginning of the npm challenges posted below)
  Teach the difference between npm in hyperdev and npm used from terminal.
  npm is whole ecosystem but we're just touching the fundamental concepts that you need to know right now like adding / removing packages
  Tests: none
• Introduction to package.json - The Core of Any Node.js Project or npm Package
  This challenge is the introduction to package.json - but has the camper adding an author-field to make it interactive.
  Tests: Author changed in JSON.parse(package.json)
• Add a Description to Your package.json
  Tests: Description changed in JSON.parse(package.json)
• Add Keywords to Your package.json
  Tests: Keywords changed in JSON.parse(package.json)
• Add a License to Your package.json
  Tests: License changed in JSON.parse(package.json)
• Add a Version to Your package.json
  Tests: Version changed in JSON.parse(package.json)
• Expand Your Project With External Packages From npm
  Use some simple library (Moment.js)
  Tests: The package is in JSON.parse(package.json)
• Manage npm Dependencies by Understanding Semantic Versioning
  Tests: whether the package is of a specific older version
• Use the Tilde-Character to use the Latest Patch Version of a Dependency
• Use the Caret-Character to Use the Latest Minor Version of a Dependency
• Remove a Package From Your Dependencies
  Tests: The package is no longer in JSON.parse(package.json)

2. Node and Express

Hello Node! ✅

Requirement : console.log('Hello World')

Basic Express setup ✅

Route: GET /
Respond with: Hello Express

Serve HTML using res.sendFile() ✅

Route: GET /
Respond with: views/index.html (it contains <h1>Hello, HTML!</h1> and has a style link in it)

Serve a Stylesheet with the express.static() middleware ✅

Route: /style.css
Respond with: the css stylesheet. It has the body {...} selector

Respond with JSON ✅

Route: GET /json
Respond with: { "message": "Hello json" }

Use the .env-file to store (secret) configuration ✅

Env var: TEXT_STYLE=uppercase
Route: GET /json
Respond with: if process.env.TEXT_STYLE === upprecase => { "message": "HELLO JSON" } else => { "message": "Hello json" }

App level Middleware - logger ✅

Description: Simple logger, for all the routes. Required format: method route - ip.
Route: all

Simple Time middleware in a route ( Time Server ) ✅

Description :Augment the req object with req.time = new Date in a route middleware
Route: /now
Respond with: {time: req.time.toString()}

The req.params object ✅

Route: GET /:word/echo
Respond with: {echo: <word>}

The req.query object ✅

Route: GET /name?first=<firstname>&last=<lastname>
Respond with: {name: '<firstname> <lastname>'}

Install and configure the body-parser module ✅

Description ideas: differences between urlencoded, json, and multipart (not handled by body-parser).

Receive a POST request and use the req.body ✅

Route: POST /name,
Body: {first: <firstname>, last: <lastname>} url-encoded,
Respond with: {name: '<firstname> <lastname>'}

3. Mongo and Mongoose

Prerequisites:

• Being able to create an mLab db instance, and get the URI

Introduction ⌛

• What is an DB?
• CRUD Operations
• SQL vs NoSQL
• What is Mongo DB?
• What is an ORM?
• What is Mongoose?

Setup ✅

• add mongodb and mongoose to package.json
• import mongoose
• connect to the DB (the url from earlier setup)

Schemas and Models ✅

• Schemas map to MongoDB collections.
• You can combine multiple schemas to create complex Models
• A Model is a Constructor that allows You to create object instance, called Documents
• Schema types (String, Number, ...)
• Basic validation (required, unique)
• default values

Create ✅

• Note: Interactions with the db cannot be in the main flow, in the server code. We need to have put code inside callbacks. done() is a callback that tells us that we can proceed after completing an async operation. It should be called as done(null, data) on success or done(err) on error, according to the Node convention.
• Create then Save - one document at time
• Create many docs - Model.create([{...},{...},..,]) (useful for seeding the db)

Read ✅

• Model.find()
• Model.findOne()
• Model.findById()

Update ✅

• Find, Edit then Save
• findOneAndUpdate() or findbyIdAndUpdate()

Delete ✅

• Delete one document : findByIdAndRemove() or findOneAndRemove()
• Delete many documents : Model.remove({criteria: ...}, cb)

Chain Query helpers ✅

• .limit()
• .sort()
• .select()
• .exec()

4. API projects (already created)

5. Information security with Helmet.js (check this comment) ✅

Helmet.js

Description

It helps to secure Express apps by setting various HTTP headers.
It is a collection of 10 middleware functions that set headers:

• contentSecurityPolicy for setting Content Security Policy
• dnsPrefetchControl controls browser DNS prefetching
• frameguard to prevent clickjacking
• hidePoweredBy to remove the X-Powered-By header
• hpkp for HTTP Public Key Pinning 🚫
• hsts for HTTP Strict Transport Security
• ieNoOpen sets X-Download-Options for IE8+
• noCache to disable client-side caching
• noSniff to keep clients from sniffing the MIME type
• xssFilter adds some small XSS protections

Challenges Structure

• We should not include hpkp because it is only applicable to https with certificates.
• For each Middleware :
  1. Introduce the vulnerability addressed,
  2. Ask the camper to mount and configure the middleware,
  3. Test the results, checking the response headers, and the middleware stack for the main route.
• At the end show how the same result can be obtained simply with app.use(helmet({<config>...}))

Note: There is a lot of information that could (should) be added about this argument, e.g. Input sanitization, CSRF, secure cookies settings, RegEx DoS, dependencies auditing (nsp). See Express Security Best Parctices.

6. Quality Assurance and Testing with Chai (check this comment)

7. Dynamic Web Apps (which have additional testable QA and InfoSec stories such as sanitization)

New endpoint for FCC cat API for posting data using AJAX.

@MayankPratap said:

I am planning to add a challenge in "JSON APIs and AJAX" challenges where campers can post data to server using AJAX. Currently FCC has no endpoint for POST. Currently what I have thought is that if user clicks on a button named "Cats" then server should return a page containing image of cats, and if the user clicks on "Dogs" then server should return a page containing image of dogs. So if an endpoint can be made to support this then this challenge can be added. Challenge is simple and has been kept in theme with the existing challenges.

Refer: freeCodeCamp/freeCodeCamp#10191

Challenges that teach debugging

Our goal with these debugging challenges is to teach campers a few tricks they can use to more effectively solve our algorithm challenges. Note that, like all our other challenges, these should be interactive and not involve using external resources - only things that they can do right in the code editor on Free Code Camp, which we can then test.

• Use console.log to Check the Value of a Variable
• Using typeof to Check the Type of a Variable
• Catch Misspelled Variable and Function Names
• Catch Unclosed Parentheses, Brackets, Braces and Quotes
• Catch Mixed Usage of Single and Double Quotes
• Catch Use of Assignment operator Instead of Equality Operator (= VS == and ===)
• Catch Missing Open and Closing Parenthesis After a Function Call (newFunction() is different than newFunction)
• Catch Arguments that are Passed in the Wrong Order when Calling a Function
• Catch "Off By One" Errors when Using Indexing
• Use Caution when Reinitializing Variables inside a Loop
• Prevent Infinite Loops with a Valid Terminal Condition

Responsive Web Design Project: Survey Form

We are introducing a few new front end projects to give campers more experience working just with HTML and CSS before adding JavaScript to the mix.

Here are the agile use stories for this challenge:

1. I can complete a survey that has various questions, and uses check boxes, radio buttons, text inputs and select inputs.
2. Some of these fields are required and some are optional.
3. Some of these fields use HTML5 form validation.
4. When I click the submit button, it redirects me to a submission page on Free Code Camp.

We are looking for a volunteer who can build a working demo of this on CodePen using only HTML5 and CSS (no libraries).

Image Search API Project - Update User Stories

Should we use pagination or a query param specifying the number of results?

It's easier to test that the response has X number of results than to test the pagination. By simplifying testing for us, we can give better and more accurate feedback to campers.

Suggested user stories:

• (Unchanged) I can get the image URLs, alt text and page urls for a set of images relating to a given search string.
• I can request a specific number of results by adding the ?results=<a-positive-integer> parameter to the URL.
• I can get a list of up to 10 of the most recently submitted search strings at the path /latest

Automated Testing Challenges

@Em-Ant is in charge of coordinating the expansion of these challenges, but he needs your help.

These challenges will walk campers through writing tests using the Mocha Chai library's Assert methods.

These challenges will run on HyperDev - not on FreeCodeCamp.com yet. @Em-Ant can fill you in on specific details of this, as he is our resident HyperDev expert.

Ideally, we'll cover all three types of tests: unit, integration, and functional. These are described here.

---

6. Automated Testing Challenges

Introduction 🎱

• Why testing is important ?
• Testing approaches (TDD vs. BDD - see this) & Interface styles
• Unit, Integration, e2e tests
• What is a Test Framework (mocha)
• What is an Assertion Library (chai.js)

Unit Tests - Basic Assertions ✅

Basic Assertions

• .isNull() - .isNotNull()
• isUndefined() - isDefined()
• isOk(truthy) - isNotOk(falsey)
• isTrue() - isNotTrue()

Equality

• .equal() - .notEqual()
• .strictEqual() - .notStrictEqual()
• .deepEquals() - .notDeepEquals()

Comparisons

• .isAbove() - .isAtMost()
• .isBelow() - .isAtLeast()
• .approximately()

Arrays

• .isArray() - .isNotArray()
• .include() - .notInclude()

Strings

• .isString() - .isNotString()
• .include() - .notInclude()
• .match() - .notMatch()

Objects

• .property()
• .typeOf()
• .instanceOf()

API Integration Tests 🚧

• Test an API endpoint 1 (using chai-http)
• Test an API endpoint 2
• Test an API endpoint 3

Functional e2e Tests 🚧

• Setup the Headless browser (Zombie.js)
• Setup the Test Suite
• Test a form on the Homepage 1
• Test a form on the homepage 2

Back End Challenges

These should replace express-works.

Proposed Challenges:

• Create an Express.js app that outputs "Hello World!" when somebody goes to / (Similar to https://github.com/azat-co/expressworks/blob/master/exercises/hello_world/problem.md)
• Using pug with views (Similar to https://github.com/azat-co/expressworks/blob/master/exercises/jade/problem.md)
• Adding static middleware (Similar to https://github.com/azat-co/expressworks/blob/master/exercises/static/problem.md)
• POST requests and forms (Similar to https://github.com/azat-co/expressworks/blob/master/exercises/good_old_form/problem.md)
• Parameters (Similar to https://github.com/azat-co/expressworks/blob/master/exercises/param_pam_pam/problem.md)
• Sending JSON (Similar to https://github.com/azat-co/expressworks/blob/master/exercises/json_me/problem.md)

Object Oriented Programming Challenges

@utsab is in charge of coordinating the expansion of these challenges, but he needs your help.

For each challenge, please reply to this GitHub issue with:

1. Challenge description text
2. Test suite (using the assert method)
3. The seed code, which is pre-populated in the editor at the beginning of the challenge
4. A working solution that makes all tests pass

Here are the challenges we have currently planned (these can be further expanded):

Objects

• Create a basic JavaScript object.
• Use dot notation to access object’s properties.
• Create a method on an object.
• Make code more reusable with “this”.

Constructors

• Define a Constructor Function
• Use a Constructor to Create Objects
• Extend Constructors to Receive Arguments
• Verify an Object's Constructor with instanceof

Prototypes

• Understand "own" properties
• Use prototype properties to reduce duplicate code
• Iterate over all properties
• Understand the "constructor" property
• Change the prototype to a new object
• Remember to set the "constructor" property when changing the prototype
• Understand where an object’s prototype comes from
• Understand the prototype chain

Inheritance

• Don’t Repeat Yourself
• Inherit behaviors from a supertype
• Use Inheritance in Constructor Functions
• Reset the Inherited Constructor Property
• Add Methods After Inheritance
• Override Inherited Methods

Other

• Use a Mixin to add common behavior between unrelated objects
• Use closure to protect properties within an object from being modified externally.
• Understand the immediately invoked function Expression (IIFE)
• Use an IIFE to create a module

Here are the challenges as we originally discussed for archival purposes:

• Declare JavaScript objects as variables #old
• Constructors
  • Construct JavaScript objects with functions #old
  • Make instances of objects with constructor functions #old
  • Use instanceof to show the type of an object created with a constructor
  • constructor property of an instance also shows the type of an object
  • Make unique objects by passing in parameters to constructor #old
• More on this
  • Every function gets a variable this ==> context in which the function was called. Illustrate with exercise.
  • this can refer to the global context. Illustrate with exercise
  • this can refer to a specific object. Illustrate with exercise
  • Explicitly set "this" with the "call", "apply", "bind" methods
  • use strict
• Prototypes
  • Convert constructor-defined methods, "setGear" and "getGear" to prototype methods. (Explain that two "Bike" instances have the exact same method "setGear" ==> duplicate code ==> prototypes can help eliminate the duplicate code.)
  • Properties defined on prototype are available to all instances. Illustrate with exercise.
  • prototype properties vs. "own" properties
  • Iterate over all properties of an object
  • Iterate over all "own" properties of an object (using hasOwnProperty)
  • Iterate over all prototype properties of an object
  • Is the "constructor" property an "own" property or prototype property? Find out.
  • If instance sets its "own" property, it overrides the prototype's property
• Prototypes with Constructors
  • Every object has a prototype property, including functions. A constructor function has its own prototype property. Illustrate with exercise.
  • When you create an object using new, the constructor's prototype property is assigned to the object instance's prototype. Exercise ==> print out the instance's "prototype" property
  • Changing a prototype affects all instances
  • Modify a built-in object's prototype, like Array. (Explain why this is not a good idea in production).
  • The constructor's prototype property is created with a "constructor" property equal to the function.
• Inheritance
  • Objects inherit behavior from other objects via prototype chaining. A prototype chain occurs when one object's prototype is set to another object. Since the prototype itself is an object, it has its own prototype.
  • Objects automatically inherit from Object
  • Introduce concepts subtype and supertype
  • Use instanceof to show that an object is an instance of subtype and supertype
  • Show example where the subtype sets its prototype equal to an instance of the supertype
  • Show that you have to manually set the constructor property to the subtype
  • Calling supertype methods ===> use [SuperTypeName].call and pass in this
  • The obj.prototype is not obj's prototype.
• Encapsulation (Data hiding)
  • Module pattern for creating private members ===> Immediately invoked function expression (IIFE)
  • Closure
  • Modules are great for single objects. Similar pattern for constructed objects. Reuse "Make object properties private" to show how to make private members within a constructor. #old
  • The underscore before name convention
• Other
  • Prototypal chaining is not the only way to inherit behavior. ===> mixins
  • Various exercises to manipulate Arrays and Strings #old

Responsive Web Design Project: Technical Documentation Page

We are introducing a few new front end projects to give campers more experience working just with HTML and CSS before adding JavaScript to the mix.

Here are the agile use stories for this challenge:

1. I can see a list of commands on a sidebar.
2. The sidebar stays in the same place when I scroll down through the documentation.
3. When I click a command link on the sidebar, the page scrolls down to that command's documentation entry.
4. The documentation has a clear visual hierarchy to emphasize important aspects of each documentation entry.
5. All code snippets are rendered using the "code" html elements

We are looking for a volunteer who can build a working demo of this on CodePen using only HTML5 and CSS (no libraries).

Applied Visual Design Challenges

@atjonathan is in charge of coordinating the expansion of these challenges, but he needs your help.

For each challenge, please reply to this GitHub issue with:

1. Challenge description text
2. Test suite (using the assert method)
3. The seed code, which is pre-populated in the editor at the beginning of the challenge
4. A working solution that makes all tests pass

Final Challenges List:

Challenges using a Bootstrap Card (consistent)

• Create visual balance using the text-align property
  • Align Text Left
  • 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 with the height of an element
• Create visual emphasis by using bold text
• Create visual emphasis by using underlining text
• Create visual emphasis by using the italic property on text
• Create visual emphasis by using the strikethrough property
• Create a Line Using the hr Element
• Create visual emphasis by adjusting thebackground-color property of text.
• Create visual emphasis by adjusting the size of a header versus a paragraph tag.
• Create visual emphasis by making a card like element stand out by adding a box-shadow.
• Create a Graphic Using CSS
• Decrease the Opacity of an Element

Challenges based on position

• Change an Element's Relative Position
• Move a Relatively Positioned Element with CSS Offsets
• Lock an Element to its Parent with Absolute Positioning
• Lock an Element to the Browser Window with Fixed Positioning
• Push Elements Left or Right with the Float Property

Challenges based on color

• Learn about Complementary 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

Challenges based on typography

• 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
• Setting the values of heading tags
  • 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 font-weight of header 1–5 tags.
• Adjust the line-height of a paragraph until the paragraph is properly spaced
• Use the text-transform property to make text uppercase.
• Using Google Fonts
  • Incorporate a Google Fonts Into your Header
  • Assign a Google Font using CSS

Ungrouped challenges

• Change the Position of an Element on its Z Axis
• Use the box-shadow z-axis and Opacity together to Animate an Element
• Create a Pattern by Reusing a Block of Elements
• Create a gradual CSS Linear Gradient
• Use a CSS linear gradient to Create a Striped Element
• Use the CSS Transform Property to Scale an Element on Hover
• Use the CSS transform Property SkewX
• Use the CSS transform Property SkewY
• Create a more Complex Shape using CSS and HTML
• Use the CSS Transform Scale Property to Change the Size of an Element.
• Create Texture by Adding a Subtle Pattern as a Background Image
• Adjust the color of an Anchor Tag
• Adjust the Hover State of an Anchor Tag

Challenges based on Animation

• Learn how CSS Keyframes and Animation Properties Work
• Create movement using CSS Animation
• Animate Elements Continually using the Infinity Property
• Make a CSS Heartbeat using the Infinity Property
• Animate Elements at Variable Rates
• Animate Multiple Elements at Variable Rates
• 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
• Create Visual Direction by Fading in an Element to the left.

Introduction Page

Add an introduction page to introduce sections of the curriculum

The Problem

• The different sections cover many topics but never give an overview of how everything fits together.
• Prerequisites - we don't state what's expected of the camper before starting the section.
• What can they expect from the section - never explicitly stated.

Proposed Solution

We think we need to add an introduction page to each section under the curriculum expansion. This page, for each section, should cover all the necessary info a camper would need to know about the section, such as:

• when they should complete it
• how important it is to their goal etc.

For example RegEx, HTML, CSS, Accessibility, ES6 etc. or another clear example: the backend challenges which cover a lot of topics but never give an overview of how the challenges fit together, what's required to know

// @Greenheart and @alayek

Similar introduction course prolgue is found on most other MOOC sites as well.

The introduction is always so hard to fit into the first challenge's content - you don't have time to explain the extremely important "general picture" that learners need before they can focus on the section's details

It should be a simple page, with text and diagram, or even a gif or a video would be fine

Probably a text since it's easier to maintain and keep up to date than a video

---

Here are the challenges for which we need intro sections :

• Front-End
  • HTML
  • CSS3
  • Basic JavaScript Challenges
  • Object-Oriented Design
  • User Experience Design Challenges
  • CSS Flexbox Challenges
  • SASS Challenges
  • Pure CSS Portfolio Project
  • Applied Visual Design
  • Accessibility
  • ES6 Challenges
  • Functional Programming
  • RegEx Challenges
  • JSON APIs and AJAX
  • React Challenges
  • Redux Challenges
  • React with Redux Challenges
  • D3 Challenges
• Backend Challenges
  • Node Modules with NPM
  • Node JS and Express
  • Mongo and Mongoose
  • API Projects
  • Information Security with Helmet JS
  • QA with Chai
  • Dynamic Web Apps
• Interview topics
  • Advanced Data Structures
  • Advanced Algorithm Design

---

@FreeCodeCamp/issue-moderators
FYI.

JSON APIs and AJAX

The "JSON APIs and AJAX" challenges have been needing an upgrade for sometime now.

@MayankPratap is in charge of coordinating the expansion of these challenges, but he needs your help.

For each challenge, please reply to this GitHub issue with:

1. Challenge description text
2. Test suite (using the assert method)
3. The seed code, which is pre-populated in the editor at the beginning of the challenge
4. A working solution that makes all tests pass

We still need to come up with a list of concepts to cover, where each topic can be taught interactively, then translate these concept into the names of the challenges.

Some places to look for content to teach:

• https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
• https://en.wikipedia.org/wiki/Ajax_%28programming%29
• http://api.jquery.com/jQuery.ajax/
• http://api.jquery.com/category/ajax/
• http://learn.jquery.com/ajax/

Here are the challenges we have planned till now :

• Trigger Click Events with javaScript
• Change Text with Click Events
• Get JSON with the javaScript XMLHttpRequest Method
• Talk is Cheap, Show me JSON.
• Convert JSON Data to HTML
• Render Images from Data Sources
• Prefilter JSON
• Get Geo-location Data
• Posting data using AJAX

You can suggest or add more challenges.

Advanced Data Structure Challenges

@koustuvsinha is in charge of coordinating the expansion of these challenges, but he needs your help.

For each challenge, please reply to this GitHub issue with:

1. Challenge description text
2. Test suite (using the assert method)
3. The seed code, which is pre-populated in the editor at the beginning of the challenge
4. A working solution that makes all tests pass

---

Current status of challenge development:

• Arrays and Sorting Algorithms
  • Typed Arrays
  • Bubble Sort
  • Selection Sort
  • Insertion Sort
  • Quick Sort
  • Merge Sort
• Stacks
  • Learning About Stacks
  • Creating a Stack Class
• Queues
  • Creating a Queue Class
  • Priority Queues
  • Circular Queues
• Sets
  • Creating a Set Class
  • Remove from Set
  • Size of Set
  • Operations
    • Union
    • Intersection
    • Difference
    • Subset
  • ES6 Sets
    • Creating and Adding to Sets
    • Removing from Sets
    • .has and .size
    • Spread and Notes on ES5 Set() Integration
• Maps
  • Create a Map
  • Create an ES6 JavaScript Map
  • Create a Hash Table
• Linked Lists
  • Working with Nodes in a Linked List
  • Creating a Linked List Class
  • Removing Elements from a Linked List
  • Searching a Linked List
  • Removing Elements by Index
  • Adding Elements at a Specific Index
  • Create a Doubly Linked List
  • Reverse a Doubly Linked List
• Trees
  • Binary Search Trees
    • Minimum and Maximum Values
    • Add an Element
    • Check if Element is Present
    • Determine Tree Height
    • Depth-First Search
    • Breadth-First Search
    • Delete a Node
      • Case 1: Leaf Node
      • Case 2: Node with One Child
      • Case 3: Node with Two Children
    • Invert a Binary Tree
  • Create a Trie Search Tree
  • Binary Heaps
    • Insert an Element into a Max Heap
    • Remove an Element from a Max Heap
    • Implement Heap Sort with a Min Heap
• Graphs
  • Directed / Undirected Graphs
  • Graph Representations
    • Adjacency list
    • Adjacency matrix
    • Incidence matrix
  • Graph traversals
    • Breadth-First Search
    • Depth-First Search
  • Shortest Path Problem
    • Dijkstra's Algorithm
    • The Floyd-Warshall Algorithm
  • Minimum Spanning Tree Problem
    • Prim's Algorithm
    • Kruskal's Algorithm

All API Projects need a strict API path naming convention

Why?

• Easier testing --> leads to more accurate test results and better feedback
• Teach a good naming convention for APIs - example.com/api/<api-version>/<some-api-route
  • API version isn't necessary for FCC - But it could be useful to explain this naming convention before pointing out that FCC doesn't require it for these projects.

Responsive Web Design Project: Product Landing Page

We are introducing a few new front end projects to give campers more experience working just with HTML and CSS before adding JavaScript to the mix.

Here are the agile use stories for this challenge:

1. When I arrive at the product landing page, I can click buttons in the navbar that will take me to the corresponding section of the landing page (features, pricing, email sign up)
2. I can watch an embedded product video
3. There is a form field where I can enter an email address.
4. The form uses HTML5 validation to confirm that the entered text is an email address
5. Upon clicking the button, it will post to a static page on FCC that confirms the email address entered (and that it posted successfully)

We are looking for a volunteer who can build a working demo of this on CodePen using only HTML5 and CSS (no libraries).

Applied Data Visualization Challenges

We are seeking a camper to be in charge of coordinating the creation of these challenges.

For each challenge, please reply to this GitHub issue with:

1. Challenge description text
2. Test suite (using the assert method)
3. The seed code, which is pre-populated in the editor at the beginning of the challenge
4. A working solution that makes all tests pass

We still need to come up with a list of concepts to cover, where each topic can be taught interactively, then translate these concept into the names of the challenges.

CSS Flexbox Challenges

@atjonathan and @alayek are charge of coordinating the expansion of these challenges, but they need your help.

For each challenge, please reply to this GitHub issue with:

1. Challenge description text
2. Test suite (using the assert method)
3. The seed code, which is pre-populated in the editor at the beginning of the challenge
4. A working solution that makes all tests pass

We still need to come up with a list of concepts to cover, where each topic can be taught interactively, then translate these concept into the names of the challenges.

---

List of challenges:

• Flexbox is about positioning
  • Explain we are using sass and not normal CSS (Refer them to our SASS Challenges)
• display: flex
  • Using display: flex with our two boxes
  • Adding Flex superpowers to our tweet embed
• flex-direction: row
  • Using flex-direction: row with our two boxes
    • Mention that default direction is row
  • Aligning our header and footer horizontally
• flex-direction: column
  • Using flex-direction: column with our two boxes
  • Aligning our header and footer vertically
• justify-content
  • Justifying content with relative alignment using justify-content
  • Aligning .profile-name using justify-content
    • Let camper decide which property to use
• align-items
  • Aligning items with respect to baseline using align-items
  • Using align-items with our .follow-btn, h3 and h4 elements
• flex-wrap
  • Using flex-wrap on our boxes
    • How it works (kinda like bootstrap grid)
    • nowrap, wrap, wrap-reverse
  • Duplicating our tweet embed and wrapping them
• Other useful flex properties
  • flex-shrink
  • flex-basis
• Address Browser Support (autoprefixer?)

Here's the final thing we would be building throughout the course:

https://jsfiddle.net/5epums9j/16/

Add QA and Security User Stories to Manage a Book Trading Club project

Here are the current user stories for the project:

User Story: I can view all books posted by every user.
User Story: I can add a new book.
User Story: I can update my settings to store my full name, city, and state.
User Story: I can propose a trade and wait for the other user to accept the trade.

We want to add some testing and security-related stories to this challenge (and perhaps remove some of the existing challenges to keep this project from becoming too time consuming).

Once we add these stories, we need a working demo with stories that require tests like those taught in our QA section (#24) and stories that cover at least one security concern covered in our upcoming security section (#25)

Applied Information Security Challenges

@Greenheart is in charge of coordinating the expansion of these challenges, but he needs your help.

For each challenge, please reply to this GitHub issue with:

1. Challenge description text
2. Test suite (using the assert method)
3. The seed code, which is pre-populated in the editor at the beginning of the challenge
4. A working solution that makes all tests pass

We still need to come up with a list of concepts to cover, where each topic can be taught interactively, then translate these concept into the names of the challenges.

full page map view has independently scrolling sections

The freecodecamp.com/map view has two independently scrolling sections. See screenshot below.

• As a user, when I scroll down - with mouse anywhere in the view - the map should scroll. Currently, I have to mouse over the central column.
• As a user, the top map navigation component should always remain fixed at the top (and not be scrollable like in the above picture).

Add QA and Security User Stories to Voting App Project

Here are the current user stories for our voting app project:

User Story: As an authenticated user, I can keep my polls and come back later to access them.
User Story: As an authenticated user, I can share my polls with my friends.
User Story: As an authenticated user, I can see the aggregate results of my polls.
User Story: As an authenticated user, I can delete polls that I decide I don't want anymore.
User Story: As an authenticated user, I can create a poll with any number of possible items.
User Story: As an unauthenticated or authenticated user, I can see and vote on everyone's polls.
User Story: As an unauthenticated or authenticated user, I can see the results of polls in chart form. (This could be implemented using Chart.js or Google Charts.)
User Story: As an authenticated user, if I don't like the options on a poll, I can create a new option.

We want to add some testing and security-related stories to this challenge (and perhaps remove some of the existing challenges to keep this project from becoming too time consuming).

Once we add these stories, we need a working demo with stories that require tests like those taught in our QA section (#24) and stories that cover at least one security concern covered in our upcoming security section (#25)

Add QA and Security User Stories to Chart the Stock Market project

Here are the current user stories for the project:

User Story: I can view a graph displaying the recent trend lines for each added stock.
User Story: I can add new stocks by their symbol name.
User Story: I can remove stocks.
User Story: I can see changes in real-time when any other user adds or removes a stock. For this you will need to use Web Sockets.

We want to add some testing and security-related stories to this challenge (and perhaps remove some of the existing challenges to keep this project from becoming too time consuming).

Once we add these stories, we need a working demo with stories that require tests like those taught in our QA section (#24) and stories that cover at least one security concern covered in our upcoming security section (#25)

Add QA and Security User Stories to Pinterest Clone App Project

Here are the current user stories for our Pinterest clone app project:

User Story: As an unauthenticated user, I can login with Twitter.
User Story: As an authenticated user, I can link to images.
User Story: As an authenticated user, I can delete images that I've linked to.
User Story: As an authenticated user, I can see a Pinterest-style wall of all the images I've linked to.
User Story: As an unauthenticated user, I can browse other users' walls of images.
User Story: As an authenticated user, if I upload an image that is broken, it will be replaced by a placeholder image. (can use jQuery broken image detection)

We want to add some testing and security-related stories to this challenge (and perhaps remove some of the existing challenges to keep this project from becoming too time consuming).

Once we add these stories, we need a working demo with stories that require tests like those taught in our QA section (#24) and stories that cover at least one security concern covered in our upcoming security section (#25)

Responsive Design Challenges

@atjonathan is in charge of coordinating the expansion of these challenges, but he needs your help.

For each challenge, please reply to this GitHub issue with:

1. Challenge description text
2. Test suite (using the assert method)
3. The seed code, which is pre-populated in the editor at the beginning of the challenge
4. A working solution that makes all tests pass

Here are the challenges we have currently planned (these can be further expanded):

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

HTML5 and CSS3 challenges

This topic needs an owner.

For each challenge, please reply to this GitHub issue with:

1. The feature/concept being introduced/reinforced (challenge description)
2. What the camper is presented with (challenge seed)
3. How we might test for it (assert tests)

Please copy and paste this template for your idea

**Challenge**

<!-- challenge title your idea is for -->

**Challenge Description**

<!-- your challenge description --> 

**Challenge Seed**

<!-- Initial code presented to the camper -->

**Challenge Tests**

<!-- either assert tests or your ideas for things to be tested -->

**Challenge Solution**

<!-- solution to this challenge -->

Here are the challenges we have currently planned (these can be further expanded):

Introduction to FreeCodeCamp’s Development Environment

• Ready

Challenge Description:

This is FreeCodeCamp’s in-browser development environment. This is where we will build our web pages with HTML (Hyper Text Markup Language), and style them with CSS (Cascading Style Sheets). Don’t worry if you have never heard of HTML and CSS before, we will got into more detail as you progress through the FreeCodeCamp curriculum.

Quick tour through the IDE - need to know what it will look like to complete this section

To move on to the next challenge, please click the ‘Run Tests’ tests button.

Challenge Seed:
‘’

Challenge Tests:
assert(code == ‘’);

Challenge Solution

Say Hello to HTML Elements

Add Content with the Paragraph Element

Comment out HTML

Fill in the Blank with Placeholder Text

Delete HTML Elements

Introduction to HTML5 Elements

• Ready

Challenge Description

HTML5 introduces more descriptive HTML tags. These include <code><header>, <footer>, <nav>, <video>,<article></code> and so-on.

These tags not only make your HTML easier to read, it also helps with Search Engine Optimisation (SEO).

The <code><main></code> HTML5 tag helps search engines (google etc...), and other deveplopers, find the main content of your page.

Wrap your paragraph with a opening and closing lt;code><main></code> tag.

Challenge Seed

<h2>CatPhotoApp</h2>

<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>

Challenge Tests

assert(code.match(/<main>\s*?<p>/), message:"Add an opening &lt;code&gt;main&lt;/code&gt; tag before your paragraph");
assert(code.match(/<\/p>\s*?<\/main>/), message:"Add a closing &lt;code&gt;main&lt;/code&gt; tag after your paragraph.");

**Challenge Solution**
```html
<h2>CatPhotoApp</h2>

<main><p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p></main>

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

Prioritise 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 Accessibility Challenges

@HKuz is in charge of coordinating the expansion of these challenges, but needs your help.

For each challenge, please reply to this GitHub issue with:

1. Challenge description text
2. Test suite (using the assert method)
3. The seed code, which is pre-populated in the editor at the beginning of the challenge
4. A working solution that makes all tests pass

Here are the challenges we have currently planned (these can be further expanded):

• Add Alt Text to Images for Visually Impaired Accessibility LINK
• Know when alt text should be left blank LINK
• Jump Straight to the Content Using the Main Element LINK
• Wrap Content in the Article Element LINK
• Make Screen Reader Navigation easier with the Header Landmark LINK
• Make Screen Reader Navigation easier to access with the Nav Landmark LINK
• Make Screen Reader Navigation Easier with the Footer Landmark LINK
• Use Headings to Show Hierarchical Relationships of Content (Don't skip from H1 to H3 or leave out H1) LINK
• Improve Accessibility of Audio Content with the Audio Element LINK
• Improve Chart Accessibility with the Figure Element LINK
• Make Elements only Visible to a Screen Reader by Using Custom CSS LINK
• Improve Form Field Accessibility with the Label Element (use the "for" property) LINK
• Wrap Radio Buttons in a Fieldset Element for Better Accessibility LINK
• Add a Date Picker LINK
• Standardize Times with the Datetime HTML5 Property LINK
• Improve readability with high contrast text (WCAG requires at least a 4.5 to 1 contrast ratio) LINK
• Avoid Colorblindness Colors (using appropriate contrast) LINK
• Avoid Colorblindness Colors (using close colors to convey important information) LINK
• Give Links Meaning by using Descriptive Link Text (and not just things like "click here") LINK
• Make Links Navigatable with HTML Access Keys LINK
• Use tabindex to add keyboard focus to an element LINK
• Use tabindex to specify the order of keyboard focus for several elements LINK

I found this website quite helpful in constructing this list: http://www.html5accessibility.com

Request Header Parser API Project - How should we verify UA strings?

As @Rafase282 wrote in the CoreTeam room earlier today:

on the header parser topic, HTTP_USER_AGENT: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/51.0.2704.79 Chrome/51.0.2704.79 Safari/537.36 from there, I personally used the X11; Linux x86_64 and from HTTP_ACCEPT_LANGUAGE: en-US,en;q=0.8,es-419;q=0.6,es;q=0.4,de;q=0.2 I used en-US but besides the fact that depending on the OS the user agent looks different entirelly, there are just too many ways someone could come up with the software information.

---

Solutions to be able to verify the user agent string

1. Use external service/API to verify for us
2. Use https://www.npmjs.com/package/user-agent-parser
3. Ignore UA verification (It's the learner who lose at cheating)

Suggestion

• Go with 3 for now, maybe 2 in the future (will improve quality, but only for a single test so it's not worth too much effort at the moment)

File Metadata API Project - Should it be moved to the Dynamic Web Application Projects?

This project requires the user to work with either an HTML form or some JS in order to access the API. It's not possible to simply use an URL request.

Since this project is on the border to being a simple dynamic web application - maybe we should move it to those projects?

---

On the other hand, it's interesting to have an API where it's possible to POST to.
If we disregard the frontend parts - the backend works like an API so it could still fit after all.

Any thoughts?

React with Redux Challenges

@alayek is in charge of coordinating the creation of these challenges.

Here are the challenges we have currently planned:

For each challenge, please reply to this GitHub issue with:

1. Challenge description text
2. Test suite (using the assert method)
3. The seed code, which is prepopulated in the editor at the beginning of the challenge
4. A working solution that makes all tests pass

Applied Algorithm Design Challenges

We are seeking a camper to be in charge of coordinating the expansion of these challenges.

For each challenge, please reply to this GitHub issue with:

1. Challenge description text
2. Test suite (using the assert method)
3. The seed code, which is pre-populated in the editor at the beginning of the challenge
4. A working solution that makes all tests pass

Here are the challenges we have currently planned (these can be further expanded):

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

Responsive Web Design Project: Pure CSS Portfolio Page

We are introducing a few new front end projects to give campers more experience working just with HTML and CSS before adding JavaScript to the mix.

Here are the agile use stories for this challenge:

1. I can access all of the portfolio webpage's content just by scrolling.
2. I can click different buttons that will take me to the portfolio creator's different social media pages.
3. I can see thumbnail images of different projects the portfolio creator has built (if you haven't built any websites before, use placeholders.)
4. I can navigate to different sections of the webpage by clicking buttons in the navigation.

We are looking for a volunteer who can build a working demo of this on CodePen using only HTML5 and CSS (no libraries). This should be simple and unambitious. We want the result to be in line with what a camper who's new to coding can realistically achieve themselves.

Add QA and Security User Stories to Build a Nightlife Coordination App

Here are the current user stories for the project:

User Story: As an unauthenticated user, I can view all bars in my area.
User Story: As an authenticated user, I can add myself to a bar to indicate I am going there tonight.
User Story: As an authenticated user, I can remove myself from a bar if I no longer want to go there.
User Story: As an unauthenticated user, when I login I should not have to search again.

We want to add some testing and security-related stories to this challenge (and perhaps remove some of the existing challenges to keep this project from becoming too time consuming).

Once we add these stories, we need a working demo with stories that require tests like those taught in our QA section (#24) and stories that cover at least one security concern covered in our upcoming security section (#25)