freeCodeCamp Redesign: Command Line Chic

<%= @topic_view.topic.title %>
<%= @topic_view.topic.average_rating %> <%= @topic_view.topic.posts.count { |p| !!p.custom_fields['rating'] } %>

@abdolsa, yes I was referring to the buttons (white on the blue-grey).

And I really like the screenshot in your last post with the darker blue. Nice colours, easy to read for me, even with a small font.

1 Like

I also like the darker blue. Thank so much for considering the contrast.


I think the idea is great, and the following comment is in no way some kind of put down because I think FCC does a wonderful job of making learning accessible.

Being as FCC is trying to look more like an editor, why not just use an editor locally? There’s nothing more authentic than using a local editor, and saving and running the programs on a users own computer. So, would it also be useful to use the code that is used for testing the projects’ code, in the challenges as well? That way, learners can learn and use all of the code (boilerplate, etc) in their own editor with live preview rather than utilising some hidden code inside the online editor that makes things work. They can also use an authentic web console for troubleshooting and exploring. And, of course, any code would be saved locally rather than have to be downloaded at the end of each challenge.

I think I’m in love… :slight_smile:
Love the idea of font size 18 (I’m always zooming in).
I like the darker blue; my preference is black in somewhat a muted tone (kind of like FCC’s current night mode).

As for “why not just use an editor locally?”; I suspect that maybe a big reason why FCC has it’s own editor is that many people may be using others’ computers or going to the library if they don’t have their own desktop/laptop/etc. I use my own editor for the projects and sometimes do just copy the lessons and save to my files (so I can refer to them while I continue to learn :slight_smile: ) but it’s nice to have instant access via FCC’s editor plus easier to see if something passes according to what is put forth in the lesson- I’ve seen some instances where it may work on the local machine but not in FCC’s environment or vice versa.

1 Like

Great question. There are edit and command-line based tools that help you learn locally on your own computer, such as Node School.

Some people have built implementations of freeCodeCamp that run inside Atom and other tools, but they’ve never really caught on.

Since freeCodeCamp is a web app, people can work through the curriculum on any device with a browser, and it’s convenient to just jump in and solve some challenges without worrying about syncing a bunch of packages and installing a bunch of dependencies locally.

Once our open API is live, it will be easier for people to build tools to use freeCodeCamp’s curriculum locally, but we will probably continue to focus mostly on the web app experience.

Thank you for all your efforts @abdolsa , this adjustment was fine when I first looked at it, but it is heating my eyes and brain more than a normal black screen while trying it only for few minutes.

1 Like

Thanks for your valuable feedback. We are evaluating other background options at the moment.
If you have a moment, could you rate the following screen shots in the order preference. (they are numbered from top to bottom, 1-3).

Note: number three has the same contrast with our current background color but has less blue saturation. I am wondering if it is easier on your eyes.

1 Like

Ah, yes, the mobile users. That makes sense now with the mobile device audience included.
Thanks, Quincy.

1 Like

Looks really well. Especially switching the logo and search. I wonder if it’s possible to have a button that auto-hides/shows the description for the challenge and then have the “run the tests, reset all codes, etc…” somewhere else (possibly in between the output console and the code).

1 Like

Hey @QuincyLarson can I do a mockup redesign with the brand guidelines for my school ux design project?

1 Like

I appreciate all your works, first option is great at its first look and I think everyone will love it, but for work- after double checking all the options I personally found the last one (3) is very soft to my eyes for it did not irritate my eyes and brain even for a single moment. Thank you.


Hey guys, it’s my first time commenting, sorry, if I do something wrong. :slight_smile:

Thank you so much for this redesign! I like it better, than the previous version. Happy you’ve found time to enhance our experience with this.


I remember being told that one of the best designs for readability was an old powerpoint font combo: navy background, yellow texts. It’s what we were required to use by our Principal Investigator when presenting 100-200 slides in a 6-minute powerpoint at a conference, as is reinforced by this PPT design document guide from U. Illinois Springfield

I’ve created a little pen to illustrate:


#1 is my vote, followed by #3, then #2


I vote screenshot 3, then 2, then 1.

1 Like

Thanks for joining the freeCodeCamp community. I hope to see you commenting more on here :slight_smile:

And thanks for the feedback.


Sure - it’s all open source so feel free to dig in and repurpose it :+1:


I love the first one for looks, but I’d prefer the third one for work. It’s much easier on the eyes.


In order-- #2, then 3 then a distant third 1 lol.

I consider myself “low vision” (complicated…) so something muted and softer as someone mentioned is much easier on my eyes.

I also have a tendency to use yellow text on black background when I can (or green or cyan text sometimes) on computers and closed captions… just a lot easier on my eyes.

This is money! Love the color and aesthetic of it. I recently finished my Javascript Algorithms cert, looking forward to doing the Responsive Design cert.