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
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.
Edit:
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.
