Roast my CSS

I have recently started creating a website, and I usually prioritise the backend, instead of the frontend. This is why my knowledge in CSS isn’t that great.

Can you give me tips and advice on how to make this page much better (CSS-wise)? The website is below.
Discipulis

Comments

[Samuel Collier]

The website is looking great! I just have a few practical frontend critiques:

1. discipulis.vulcanwm.repl.co/all_verbs each card element should have cursor: pointer;
2. When you click on a word, the button style on the page (e.g. discipulis.vulcanwm.repl.co/verb/amo) isn't consistent and doesn't look that great, personally I like the style that you use with the cards on discipulis.vulcanwm.repl.co/all_verbs, less border radius, softer border and gray edges.
3. I would add spacing between the principle parts of the verbs, e.g. "amo, amare" not "amo,amare"
4. The hover effect on "Click to reveal" is distracting since it distorts the text. I like the flip animation, but I just find the hover animation a bit much.
5. I would add a bit more padding between the verb charts, along with the between the start of the charts and the headings & buttons.

[Medea]

i'll work on all of these thanks!
for the 3rd point, I usually store the verbs and nouns like that, do you want me to add spacing in the way I format it and use .split(", ") instead of .split(",")?

[Samuel Collier]

Yes, I just think that .split(", ") just looks more aesthetically pleasing, along with it being more grammatically correct.

[Medea]

ill do that then, thanks for your advice!

[Neha Sharma]

This looks fine. A few places you can improve your code:

1. class names: use BME

2. consistency: have consistency in units of font-size. Eg: em, rem, or px

3. shorthand: use shorthand css commands eg: do this - padding: 10px 5px;

4. HTML : order of elements for accessibility is important. As of now, NAV is coming as first element in the code. However in the design it is last

Do check this in future dev.to/hellonehha/css-for-large-pr...

[Medea]

I’ll try all these out, thanks!

[Anthony Fung]

It's hard to give advice if we don't know what you're after.

Personally, I think it looks fine - it's easy to read, and the colours look quite nice to me. The navigation bar might do better at the top from a UX point of view, though I suspect that's not CSS.

That said, I don't know what you'd like it to look like.

[Medea]

Thanks! I just want it to be easy to read as you said, and have a nice colour scheme so users will want to come back to the website.

[Anthony Fung]

I like it. I generally use dark theme and will switch to it every time if it's available. I personally find it easier on my eyes.

However, it's also important to keep in mind what type of user your site is targeting. There is a philosophy that says light themes are friendly and airy, while dark themes are a bit 'scary'.

It looks like your site is a learning resource and might be aimed at the 'casual' user. If that's the case, I might recommend considering a light theme to make it feel more 'inviting'.

If you can, I'd suggest making the colour scheme switchable between light and dark themes, and default to a light one.

[Medea]

That seems like a great idea!
I’ll work on it, thanks!

[Medea]

added a light mode!

[Raseed Hassan]

I’ll suggest that for a website teaching a language, the UI should be more alluring so you might need to use some bright colors and maybe some animation to keep the user fixated.

[Medea]

added a light mode!

[Medea]

I’m definitely going to add light mode, but I’ll try adding more animations