This is a collaboration project with Code-with-Us group, to assit, encourage, and create something awesome together.
We will be working on the new FCC site, and assist with finding bugs in their new curriculmn.
Here is all the information for the new site Free Code Camp Rocks
Hey freeCodeCamp contributors - soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you’ll learn through building projects - step by step.
Before I get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
A brief history of the curriculum
OK - Version 7.0! Here’s a history of our curriculum versions to give you some more context:
- V1 - 2014: I launched freeCodeCamp with a simple list of 15 resources, including Harvard’s CS50 and Stanford’s Database Class.
- V2 - 2015: We added interactive algorithm challenges.
- V3 - 2015: We added our own HTML+CSS challenges (before we’d been relying on General Assembly’s Dash course for these).
- V4 - 2016: We expanded the curriculum to 3 certifications, including Front End, Back End, and Data Visualization. They each had 10 required projects, but only the Front End section had its own challenges. For the other certs, we were still using external resources like Node School.
- V5 - 2017: We added the back end and data visualization challenges.
- V6 - 2018: We launched 6 new certifications to replace our old ones. This was the biggest curriculum improvement to date.
Throughout freeCodeCamp’s history, I’ve heard the same two requests almost every day:
Please smooth out the difficulty of freeCodeCamp’s curriculum. It holds your hand for the challenges, then abruptly stops holding your hand during the projects.
Please add more repetition to the curriculum so people can better-retain what they’re learning.
Well, after years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
It wasn’t as dramatic as Doc’s revelation in Back to the Future. It just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects.
Instead of individual coding challenges, we’ll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn’t enough.)
No more walls of explanatory text. No more walls of tests. Just one test at a time, as you build up a working project.
Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals.
There is no transition between lessons and projects, because the lessons themselves are baked into projects.
And there’s plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
New and improved tests
The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text.
Old test description text: Your h1 element should have the text “Hello World”.
New test description text: HTML elements have opening tags like <h1> and closing tags like </h1>.
Find the h1 element and change the text between its opening and closing tags to say “Hello World”.
Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from “reading mode” to “coding mode”.
Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They’ll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
A screenshot of the Testable Projects people build to earn certifications. An Overview of the Version 7.0 Curriculum Each topic will be taught through building a project. Each section within each certification will have a name that follows this pattern: “Learn _______ by building a _______.”
For example, the original HTML curriculum becomes: “Learn HTML by building a cat photo app.”
To this end, I’ve modified our curriculum to make each section project-oriented.
I hope these rough ideas help you visualize what our curriculum could be like.
Learn Responsive Web Design
Learn HTML by Building a Cat Photo App
Learn CSS by Building a Picasso Painting
Learn the CSS Box Model by Building a Rothko Painting
Learn CSS Variables by Building a City Skyline
Learn CSS Animations by Building a Ferris Wheel
Learn Typography by Building a Nutrition Label
Learn Accessibility by Building a Website for Blind People
Learn Responsive Web Design by Building a Piano
Learn CSS Flexbox by Building a Photo Gallery
Learn CSS Grid by Building a Magazine
Required Project: Build a Tribute Page
Required Project: Build a Survey Form
Required Project: Build a Product Landing Page
Required Project: Build a Technical Documentation Page
Required Project: Build a Personal Portfolio Webpage
Learn Algorithms and Data Structures
Learn Basic JavaScript by Building a Role Playing Game
Learn Intermediate JavaScript by Building a Fitness Tracker
Learn Regular Expressions by Building a Spam Filter
Learn Debugging by building an Earthquake Warning System
Learn Data Structures by Building a Shopping Cart
Learn Algorithms by Building a Search Engine
Learn Functional Programming by Building a Spreadsheet
Required Project: Palindrome Checker
Required Project: Roman Numeral Converter
Required Project: Caesars Cipher
Required Project: Telephone Number Validator
Required Project: Cash Register
Learn Front End Libraries
Learn React by Building Flappy Bird
Learn Redux by Building Tetris
Learn TypeScript by Building a Poker Game
Required Project: Build a Random Quote Machine
Required Project: Build a Markdown Previewer
Required Project: Build a Drum Machine
Required Project: Build a JavaScript Calculator
Required Project: Build a Pomodoro Clock
Learn Data Visualization
Learn CSV by Building a Mailing List
Learn JSON by Building a Sports League
Learn XML by Building an RSS Feed
Learn AJAX by Building a View Counter
Lean Data Visualization by Building a Dashboard
Learn SVG by Building a Solar System
Learn D3 by Building a Map of Earth
Required Project: Visualize Data with a Bar Chart
Required Project: Visualize Data with a Scatterplot Graph
Required Project: Visualize Data with a Heat Map
Required Project: Visualize Data with a Choropleth Map
Required Project: Visualize Data with a Treemap Diagram
Learn APIs and Microservices
Learn npm by Building an npm Module
Learn Node.js by Building a Web Server
Learn Express.js by Building an Stock Trading Platform
Learn RESTful APIs by Building a Weather Service
Learn MongoDB by Building a Movie Review Database
Required Project: Metric-Imperial Converter
Required Project: Issue Tracker
Required Project: Personal Library
Required Project: Stock Price Checker
Required Project: Anonymous Message Board
Learn Information Security and Quality Assurance
Learn Information Security by Building a Credit Card Form
Learn Cryptography by Building a Password Hasher
Learn Testing by Building a Fact Checker
Learn Authentication by Building a Signup Page
Learn Websockets by Building a Chat Room
Required Project: Metric-Imperial Converter
Required Project: Issue Tracker
Required Project: Personal Library
Required Project: Stock Price Checker
Required Project: Anonymous Message Board
We’ve already started designing these projects.
For example, here’s what we the “Learn Basic JavaScript by Building a Role Playing Game” project looks like:
Here’s @beaucarnes’s CodePen implementation if you’re curious: https://codepen.io/beaucarnes/pen/BbLWpe
People will learn JavaScript by building up this game one test at a time.
Here’s what the tests for the “Learn HTML by Building a Cat Photo App” currently look like:
github.com/freeCodeCamp/freeCodeCamp beaucarnes
feat: Updated HTML curriculum - draft by beaucarnes on 10:38PM - 01 Mar 19 UTC 1 commits changed 58 files with 1698 additions and 0 deletions. It will take several months to build all these projects, their associated tests, and to QA everything. Our plan is to roll these new projects out to the curriculum as we finish them.
And that’s where you, kind person who have read this far, come in.
The last time we updated the curriculum, we had dozens of amazing contributors who helped with the process, and we are optimistic that together, we can build these projects even more quickly.
- Building the initial projects
- Taking these projects and working backward, disassembling them into a series of dozens (hundreds?) of concise test descriptions
- Once we have the test descriptions, we need to implement the tests themselves
***I’ve created a GitHub Project we can all use to track the overall progress of Version 7.0 of the curriculum here: https://github.com/orgs/freeCodeCamp/projects/10 ***
Leave a comment below, introducing yourself and sharing your thoughts on all this Join the freeCodeCamp Contributor Chatroom if you haven’t already: https://gitter.im/freecodecamp/contributors
Comment on the GitHub issues of the projects you are interested in helping with. Even the most general of ideas or prototypes will help us kick off this process. The issues for these are all located on our Curriculum Expansion repository: https://github.com/freeCodeCamp/CurriculumExpansion/issues
With your help, the millions of people who are learning to code through freeCodeCamp will have an even better resource to help them learn these fundamentals, and gain the confidence to build more ambitious projects.