FreeCodeCamp: The redesign nobody asked for

I’ve never been happy with the UI/UX of the curriculum, so I designed one myself. Welcome to FreeCodeCamp: The redesign nobody asked for!

Light version

Full size here

Dark version

Full size here

1 Like

Why don’t you contribute this to their github repository?

is this some kind of style?
careful, it can make css tests fail, many users have this difficulty when using things that change the colours

also browsing in the github repository I have noticed there is a redesign going on, maybe you want to contribute there too?

1 Like

I’m not sure what the problem is. Are you talking about the UI layout?

it can make css tests fail

Which ones? This isn’t an all in one solution, I’ve not tested for accessibility. The code highlighting is pretty also random (It’s just a plugin I use).

if it changes css properties in the web page being created in the right hand side, then the tests can fail - it happens a lot to users that use a dark mode extension

1 Like

Here are a few improvements I’ve made:

  • Added more spacing for improved readability. (Ideally, font size would be a setting in the user settings)
  • ‘Run all tests’ is now the center of attention. This encourages people to try and figure out the answer for themselves.
  • The challenge tests now have more visual indicators whether you have passed or not. These are also above the other buttons for the same reason in the previous point.
  • Buttons are now half-width with more spacing for increased readability. They are also last in the page hierarchy for the same reason as the second point.

Oh, it’s just a design. I’ve not coded anything :slight_smile:

I would suggest giving feedback and suggestions for UI/UX on the GitHub repo. I will PM you something.