FreeCodeCamp released it’s new curriculum

And — the UI is awful — but it is in your power to make it look however you want it to

P1xt’s Blog
Published in
3 min readJun 6, 2018


My twitter feed was abuzz last week with comments about the new FCC release. It seemed, from what I read on my feed, to be a predominantly negative reception based on the UI redesign which, lets be honest, is truly awful — it’s cluttered, it’s messy, there’s no dark option, there’s scrollbars ****ing everywhere. They took an ugly UI, spent two and a half years revamping it, only to make it a far worse user experience.

The thing is — it’s in your power to fix the UI to look however you want — using skills you learned from FCC itself.

For instance, there’s a chrome extension Stylus that allows you to override the styles on any site you want. There are similar extensions for other browsers, but I use chrome, so I used the chrome one. Using stylus, all you have to do is weed into the styles being used on the page (using inspect element / chrome dev tools) then swap out the styles for whatever the heck you want.

This is what the FreeCodeCamp UI now looks like to me:

This is what I did:

  • I got rid of all the scrollbars.
  • I swapped everything to a dark theme with a nice terminal green (which is my personal preference for code).
  • I got rid of the campfire green on all the buttons/headers.
  • I got rid of the “motivational message” in between lessons.
  • I got rid of the search bar — I neither want, nor need it.
  • I removed all of the indent and matched bracket coloring in the editor.
  • I increased font sizes pretty much across the board.

In short, I made it look exactly how it should look for me personally to get the UI and all it’s annoyances out of my way so I could actually focus on the important part — the curriculum, the content.

My Point:

It is in your power to make FreeCodeCamp (or any other site) look however you want it to. Rather than complaining, take this as an opportunity to practice your CSS skills. I used Stylus for Chrome — use whatever is available on your browser of choice — and don’t be constrained by the choices I made, pick whatever looks/works best for you.

For a quick look at what I changed, to give you ideas about what you might want to target, I’ve packaged my CSS into this gist.

The point is — even without a whole lot of CSS knowledge, you could weed through that CSS there and change the colors to be whatever you want. Make the awful UI into a learning experience.


Modified the CSS to fix a couple places where I’d missed a style for links and to remove the intellisense in the code editor. I really hate having windows pop up and block half my editor trying to guess what I’m trying to type — when I already know what I want to type.

Edit — part 2:

I uploaded the theme to stylish so that anyone who wants to build off it can easily fork and modify it.