New Card Design

[wiktoriavh]

As a visitor,
I want to see the recommended path of learning,
so that I can learn the right things in the right order,
and see the different categories and topics

---

One card will represent a specific topic of choice, and then contain different links to different recources, that fit that topic, so someone can learn about that topic. The cards will also display the path, which are numbered starting with 0. They will also contain a tag that shows the difficulty of this topic, ranging from Beginner (circle), Intermediate (triangle) and Advanced (rectangle).

[Mafrans]

I'm unsure about the listing of items in this design, it is not clear that each item is its own topic. Similarly, the difficulty of each card is not communicated clearly enough. Perhaps the cards could display one item each and be sorted according to difficulty? I think using color to show the difficulty could also be a useful idea.

One option could be https://play.tailwindcss.com/zgyJsq7Lr1. It introduces the possibility of several different card types, such as "Pick one" cards, which could solve some of the confusion caused by the current list system.

[wiktoriavh]

I like your design a lot more @Mafrans, I will implement it.
I am in the process of moving the app to SvelteKit. You should be able to find it here: https://github.com/Braweria/learn-web-dev-svelte

As of writing this comment, I have no created that repository and pushed the code, but that will happen soon.

[wiktoriavh]

The current status of the card design:

Sadly there will be issues for the "Pick One" cards, as they span 2 or 3 columns, it will destroy the flow. This is an issue that will have to be brainstormed in a future iteration.