Learn Responsive Web Design by Building 20 Projects – a Major freeCodeCamp Curriculum Update

We just published a significant overhaul of our Responsive Web Design Certification (the first of freeCodeCamp’s 10 currently-live certifications). We also updated our code editor.

Instead of coding lessons, you’ll learn concepts and syntax through a series of 15 practice projects + 5 certification projects.

Here is the full certification, which we estimate will take most web development beginners around 300 hours to complete:

  1. Learn HTML by Building a Cat Photo App
  2. Learn Basic CSS by Building a Cafe Menu
  3. Learn About CSS Colors by Creating a Marker Set
  4. Learn HTML Forms by Building a Registration Form
  5. Certification Project: Build a Survey Form
  6. Learn the CSS Box Model by Building a Rothko Painting
  7. Learn CSS Flexbox by Building a Photo Gallery
  8. Learn Typography by Building a Nutrition Label
  9. Learn Accessibility by Building a Quiz
  10. Certification Project: Build a Tribute Page
  11. Learn More About CSS Pseudo Selectors by Building a Balance Sheet
  12. Learn Intermediate CSS by Building a Picasso Painting
  13. Learn Responsive Web Design by Building a Piano
  14. Certification Project: Build a Technical Documentation Page
  15. Learn CSS Variables by Building a City Skyline
  16. Learn CSS Grid by Building a Magazine
  17. Certification Project: Build a Product Landing Page
  18. Learn CSS Transforms by Building a Penguin
  19. Learn CSS Animations by Building a Ferris Wheel
  20. Certification Project: Build a Personal Portfolio Webpage

Note that in order to obtain the Responsive Web Design Certification, you only need to build the 5 certification projects in bold and get their test suites to pass. The rest of this coursework is optional.

We have sprinkled these certification projects throughout. They are open-ended. You start with a blank code editor and build the project line-by-line to ultimately get the entire test suite to pass. Note that currently we still use CodePen for these projects, but in early January 2022 we will move these over to our own code editor.

Also note that the 5 certification projects are the same as in the old version of this certification. Everything is fully backward-compatible, and you do not need to re-do any of these projects if you have already done them.

Also note that any older certifications you have earned will continue to remain valid going forward. You do not need to worry about broken links on your résumé or LinkedIn profile.

How the New Practice Projects Work: Our New Code Editor

I manually annotated some of the features of the new code editor. This is where you will build the practice projects line-by-line, getting tests to pass along the way.

I initially had the idea for this design in 2017. That is how long we’ve been building and iterating on this. But I am thrilled with the how this came out.

Each step in a practice project has its own tests. And we also have context-specific hints. These will help subtly point you in the right direction without completely giving away the answer.

Once you get the tests for the step to pass, you will seamlessly move to the next step, and we scroll you to the part of your codebase where you need to add your next line of code.

Our goal is for you to be able to get into a flow state and stay there. We want you to blast through dozens of these steps – or entire projects – in a single coding session.

We’ve built a multi-file editor, and you will be able to code fairly complicated front end projects inside of it.

Soon we we’ll roll out our full sandbox, and you’ll be able to use this to build your various certification projects. No more need to use CodePen or JSBin – everything will run right on freeCodeCamp.org.

We’ve incorporated tons of feedback and User Experience lessons we’ve learned over the years.

In addition to the new code editor, the main improvements we’ve added are:

More practice

The curriculum now has far more projects, which will walk you through writing thousands of lines of code.

These will keep you in a tight feedback loop – with failing tests, error messages, and hints – the entire way through.

At the beginning of each project, we also give you a preview of what you will build.

A preview of one of the projects you’ll build – a CSS penguin.

More repetition to help with retention

Our original goal was to give people broad, rapid-fire exposure to key programming concepts. But a lot of feedback we received was that we were moving too fast.

Most people seem to prefer to take things slower, and get a lot more practice with each of these technologies.

This newly updated curriculum will give you a lot more practice to help you better retain key concepts and programming syntax.

Each project has a table of steps. Completed steps are highlighted in blue. You can skip to any step at any time, but we recommend doing them in order.

Less Reading. More Coding.

It took an incredible amount of work, but we were able to restructure the curriculum to teach you “just in time” with only a few sentences of explanation at a time. Here is the general “core gameplay loop” of the curriculum:

Read a few sentences -> figure out what your next line of code should look like and type it in -> Run the tests and get them to pass -> repeat this process 1,000s of times

Here’s what a typical step looks like:

Each step will take you to the part of your code where you need to add a new line of code or change existing code. And it will have lots of tests. Depending on which tests fail, it will give you a context-specific hint to help you get unstuck and keep moving forward.

“Minibosses” sprinkled throughout the levels

There’s another major improvement we made. Before, you would do all 5 of a certification’s big projects at the end, after you’d completed all the lessons.

Now you will tackle these certification projects periodically as you learn new technologies. So after 3 or 4 practice projects, which have more guided tests, you’ll face a blank code editor and 10 or more “user story” tests. You will have to figure out how to get each of those tests passing using the skills you’ve just learned.

We are optimistic that this will smooth out the difficulty associated with earning these certifications. And it will help further reinforce your skills and your retention, by shortening the time in between when you learn them and when you have to recall them and apply them.

You can see how many steps will be in each project and how many of them you have completed. The certifications – “minibosses” – are a single step. These are essentially an empty code editor with a test suite. You have to code the entire project yourself get all of its tests to pass.

You can try the new Responsive Web Design Certification now

It is still in beta. If you get stuck, I encourage you to ask for help on the freeCodeCamp forum. Who knows – you might discover a bug. This will be under active development.

We will finish building the updated JavaScript Algorithms & Data Structures certification in 2022. And we will publish the updated Front End Libraries certification after that.

If you are ready, you can dive right into the new Responsive Web Design Certification.

Happy coding.

Posted by Contributor