Feature request: Redesigning the curriculum UI

[ahmaxed]

In the curriculum, there are multiple scrollers, each scroller have different styling, additionally the columns separating the scrolling divs have different styling. Similar markdown and good use of whitespace could make the user experience more consistent and make a cleaner UI.

Current UI:

example future UI:

[vkWeb]

@ahmadabdolsaheb I think the freeCodeCamp present UI feels very user-friendly. I don't think we should prioritize right now on complete UI redesign. We definitely need to improve in some areas. I have listed some areas where we can improve, I have bolded the important ones:

• A uniform nav bar all over freeCodeCamp
• Authorized user welcome page should not be scrollable, it should be one complete page
• Search bar should be on the middle of nav
• Upcoming lessons section should be removed
• There should be just three buttons: Run tests (ctrl + enter), Reset challenge & Ask for help
• Settings page makeover from scratch
• White space between test cases
• Instead of showing profile image on nav, we should have a settings icon
• HTML, CSS and JavaScript IntelliSense should be disabled from monaco editor. Typing full commands is important to retain the syntax in mind

@QuincyLarson I would love to hear your thoughts on this. By the way, why solutions aren't saved?

[ezioda004]

@vkWeb

HTML, CSS and JavaScript IntelliSense should be disabled from monaco editor. Typing full commands is important to retain the syntax in mind

I disagree with this, IntelliSense helps with method names and reference previously created variables. It only helps with syntax to an extent which is fine. In real world, you're not required to remember obscure/less frequent used methods.
IMO, its fine the way it is right now.

[QuincyLarson]

@ahmadabdolsaheb Thanks for opening this issue.

There are little tweaks we should do like the ones @vkWeb mentioned. Especially the one about changing the current 5 buttons into 3 (the "ask for help" button can bring up a modal with the other options).

As for the scroll bars, I don't see those on Mac. But I agree the scroll bars look pretty bad on Windows. This said, we are much more concerned about accessibility and ease of use than we are about looking 'leet (couldn't help saying that since you screen-shotted Leet Code).

I'm all for improving the aesthetics of the page in subtle ways, though.

Also, I agree with @ezioda004's point about Monaco's defaults. There's no point in drilling long method names into people's heads when anyone can look them up at a moment's notice, or if they're in VS Code just hit the tab key to complete them.

I'm closing this issue. I encourage you all to create more granular issues with suggestions for UI improvements.