freeCodeCamp Redesign: Command Line Chic

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

@thecodingaviator, I think part of the nav got cut off in the screen shot - you can see the search box border is missing on the top. The words on the nav look fine to me, perhaps the search box could use slightly more space on top and bottom.

I don’t think I have a problem with the light blue text on the blue background like @Tirjasdyn mentioned. I sort of have the opposite problem with the white text in left panel, it’s too much contrast. Especially around and between the “run the test”, “reset all code”, etc. buttons. I think the text in that panel should be a little less white.

That’s really my only concern. Overall, it looks real good - nice job @abdolsa!

I specifically like how the text in code tags stays the same color as the rest of the description and just gets the added background… The same background color across the panels look great. Everything just looks way cleaner. :+1:

How about this… move the console to the bottom of the preview panel? The preview is often not filled vertically, and it would free up some more space for the editor.

1 Like

Love this, I agree with @moT01 about the white text in left panel. Next is only about the icon below ask for help button, we could use some fcc green :slight_smile:.

I think it looks slick. Looking forward to having more space. I have 2 questions:

  • Will it be possible to change the font size? Ideally between 12 and 18

  • I’m not crazy about the blue background in the console. I’d love a dark gray :slight_smile:


@Tirjasdyn, I agree that the color combination is hard on the eye. mainly because both colors basically have the same hue(base color).

all colors in the editor have above 7 contrast ratio, which is the web standard. but because other colors are warmer, they stand out better.

We are basically experimenting with going darker in the editor.(as dark as the navbar) Please see the following screenshot and let me know what you think. Thank you for your feedback.


Thanks for the feedback. Just to clarify, you are referring to the buttons (white on the blue-grey)? we are experimenting with higher contrast for all backgrounds to texts.

@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