Updated UI for landing page

[jdwilkin4]

Describe the Issue

On main, I can see there have been updates to better show the progression for the core curriculum. And I think it looks like nice.

But when it comes to the other courses, like the C# courses and the interview prep section, I feel like it would be better to remove the circles. At first I thought I was supposed to click on these circles because they looked like buttons to me.

Affected Page

http://localhost:8000/

Steps to Reproduce

These changes are only available on the localhost. So you will need to run it locally to see what I am referring to.

1. Go to http://localhost:8000/
2. scroll down to the extra courses outside of the core curriculum and see what I am referring to

Expected behavior

For courses, like odin project, interview prep, C#, etc, I don't think these circles need to be here

It would be better to leave it to the original like this

As for the english curriculum, if new courses will be added there then maybe it works to have progression like is shown for the core curriculum.

Screenshots

No response

System

• Device: [e.g. iPhone 6, Laptop]
• OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04]
• Browser: [e.g. Chrome, Safari]
• Version: [e.g. 22]

Additional context

No response

[gikf]

This seems to be related with #54656

[deeseeker]

I would like to give this a shot. Please assign the task to me.

[moT01]

A couple things to note here...

The circles have four states. Empty, all challenges completed (filled-in), certification earned (ribbon added), both (filled-in and certification earned). See some images here.

I agree that they look a little goofy beyond the core curriculum, but we kept them because the buttons become full width if we remove them - and that looks a little goofy too. I think it would look good enough, but the C# (and soon English), have certifications to claim, as well as some of the legacy. So it's nice to show the circles or something on those so people can see that they earned the cert - as well as have something to motivate them.

I definitely think there's room for improvement here. I'm not sure what the solution is though. I would probably be fine removing all the circles that aren't the core curriculum if we want - but maybe we could play around with a few other designs. Maybe make all the circles gray or something, so they don't look clickable? Add an icon in the circles without a number?

If anyone wants to come up with some mocks or play with some designs and share - that could help.

[jdwilkin4]

Hi @deeseeker !

This issue has not been opened up for contribution.
Issues marked with help wanted or first timers only are available for contribution.
You can read about the contributing process here

[jdwilkin4]

@moT01

The circles have four states. Empty, all challenges completed (filled-in), certification earned (ribbon added), both (filled-in and certification earned)

Ok cool. Thanks for clarifying that.
Looking at the image I like the final result there.

[AdityaRaj150]

why can't the odin project-coding interview prep -so on all have numbers 1,2- so on insider their circles just like the other courses and can have same animation then. since a circle having number inside definitely doesn't look clickable but a task to complete and filling it with colours does show that the task has been completed.

[deeseeker]

@jdwilkin4 Thanks for the feedback. I will check it out