FreeCodeCamp: The redesign nobody asked for

1

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

FreeCodeCampLight
FreeCodeCampLight1931×1553 449 KB

Full size here

Dark version

FreeCodeCampDark
FreeCodeCampDark1931×1553 456 KB

Full size here

1 Like
2

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

image
image900×529 77.3 KB

3

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
4

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

5

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).

6

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
7

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.
8

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

9

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