DEV Community

Medea
Medea

Posted on

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

Top comments (14)

Collapse
 
stcollier profile image
Samuel Collier • Edited

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.
Collapse
 
vulcanwm profile image
Medea • 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(",")?

Collapse
 
stcollier profile image
Samuel Collier

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

Thread Thread
 
vulcanwm profile image
Medea

ill do that then, thanks for your advice!

Collapse
 
hellonehha profile image
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...

Collapse
 
vulcanwm profile image
Medea

I’ll try all these out, thanks!

Collapse
 
ant_f_dev profile image
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.

Collapse
 
vulcanwm profile image
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.

Collapse
 
ant_f_dev profile image
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.

Thread Thread
 
vulcanwm profile image
Medea

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

Thread Thread
 
vulcanwm profile image
Medea

added a light mode!

Collapse
 
rashdowdev profile image
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.

Collapse
 
vulcanwm profile image
Medea

added a light mode!

Collapse
 
vulcanwm profile image
Medea

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