Roast my CSS

#webdev #css #startup #beginners

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

Top comments (14)

Samuel Collier • Feb 13 '23 • Edited

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

discipulis.vulcanwm.repl.co/all_verbs each card element should have cursor: pointer;
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.
I would add spacing between the principle parts of the verbs, e.g. "amo, amare" not "amo,amare"
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.
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 • Feb 14 '23 • Edited

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 • Feb 14 '23

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

Medea • Feb 14 '23

ill do that then, thanks for your advice!

Neha Sharma • Feb 12 '23

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

class names: use BME
consistency: have consistency in units of font-size. Eg: em, rem, or px
shorthand: use shorthand css commands eg: do this - padding: 10px 5px;
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 • Feb 12 '23

I’ll try all these out, thanks!

Anthony Fung • Feb 11 '23

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 • Feb 11 '23

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 • Feb 11 '23

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 • Feb 12 '23

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

Medea • Feb 14 '23

added a light mode!

Raseed Hassan • Feb 12 '23

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.