@RayaneBengaoui
Posted
Hello Nofar Aviv,
Congrats for completing the challenge ! 🙂
I'd like to suggest :
-
Add
cursor: pointer
to your buttons so they look clickable. -
Add
min-height: 100vh
to yourbody
to make sure it covers the area of the entire viewport. Then it will be easier for you to put your container in the middle of the page. -
Look at CSS resets and the box model. There is initial padding and margin default, so usually people use CSS resets to remove those default behaviors. A good start is to use
*{margin: 0; padding: 0; box-sizing:border-box }
. You can also take a look at the MDN documentation on the box-model which is something very important to understand for CSS (https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing). -
You can make your classes more generic. You use
left-side
,middle
andright-side
but those classes share a lot of common properties. So creating acard
class that contains all shared properties and then creating more specific classes for colors could be a way.Thus, we would have something like :card orange
,card lightgreen
andcard darkgreen
. -
There is no need to add
border-radius
to the cards as you can directly declare it on the container. I saw that you did it, but also on the cards, so you can remove it on cards and let it only on the container. However, it will not work directly because the edges of the container will be rounded, but cards will overflow it and we won't see the change. To avoid this, you can also addoverflow: hidden
to yourcontainer
that will not display everything that overflow the container. -
You are using
float: left
but here there is no need to use it so it can be removed. Generally, you won't have to use float ever. Nowadays, withflex
,grid
, ... You have all the necessary modern functionalities to make layout and positioning. Knowing of float works can still be useful if you have to work with older code bases. -
When using a
flex
container it's better to useflex-basis
property thanwidth
because it will be easier for flex items to resize if the container width changes. Here is a good article to understand what's the difference betweenwidth
andflex-basis
(https://mastery.games/post/the-difference-between-width-and-flex-basis/). -
Add
line-height
property to your<p>
tag to add spacing between lines. -
Take a look at semantic HTML tags for better readability. Instead of using
<div>
elements only, there are plenty of other tags that describe your code better.
Overall, well done for the challenge and good luck in making it responsive !
Happy coding ! 😃
@nofaraviv
Posted
Thank you very much for all your suggestions! I'll apply it :)