@Dudeldups
Posted
Hello! Some things I can see:
Let's start off with the scrollbar. It's nice that you know how to change its style, but this card component is so small, there shouldn't even be a scrollbar in the first place. Maybe keep your focus on the actual project and not overcomplicate it - there are many projects on Frontend Mentor where you can use this 😋
Also, you don't really need any media queries for this component. Just give it a max-width
and let padding and margin handle the rest. You're giving the container a percentage width, which ends up in weird behaviour.
Furthermore, you only need to declare a fixed height
on elements in very few cases. The regular way to go is using margin and padding inside your container or surrounding element, so all the stuff inside can just take up the width or height they need.
You're setting font-size
in rem
which is best practice for people who don't use the browser's default fonts. Also you got a <header>, <main> and <footer> inside the <body> 👍
In the HTML is one major flaw though, the 5 circles to choose the rating are supposed to be radio-inputs inside a <form>
Radio inputs have default behavior to only allow one selection if you set the same name
attribute on all 5 of them.
Hope that helps, keep practicing and happy coding 😀
@DanielKremes
Posted
Thanks @Dudeldups for the tipes. a huge hug and sucess.