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.
