@ahmedcharfeddine013
Submitted
I need feecbacks to improve so ill welcome every comment!
Said Shahrokh
@shahrokh0796
All comments
- Said Shahrokh• 300
@shahrokh0796
Posted
Hello, I glanced over your code and would like to add a few points to improve and make it more user-friendly. 1. For font sizes, relative units like rem or em work well. 2. Logical CSS attributes provide a technique to construct CSS that is contextual, hence they should be used. 3. You shouldn't use (height:100vh) because it will cause your content to spill over the edge of the container if the content is more then 100vh. Instead, use max/min height,%, or whatever works best for you. 4. If an image in your HTML code isn't only for decoration, it should have an alt description; otherwise, it's acceptable to leave the alt attribute empty.
0 - Murilo Silva• 20
@xmurilo
Submitted
During the creation of the card using HTML and CSS, I encountered a problem trying to transition the image to the top of the card. Initially, I tried using the <picture> tag, but was unsuccessful. So, I decided to place the perfume image through CSS, using the background-size, background-repeat, and background-position properties. When adjusting the width and height of the image, I noticed it was disappearing on smaller screen sizes. After some testing, I discovered that I was using percentages instead of fixed width, causing the issue. I fixed this by adjusting the width to 400px and height to 300px for the image class on smaller screens.
Said Shahrokh• 300@shahrokh0796
Posted
1- Read MDN’s guide to responsive images. You will want to use the picture element on this. 2- This should only have one heading element in it. Perfume is a paragraph tag not a heading. Even if there were multiple headings in a design it’s essential they are ordered correctly. 3-Always include a modern css reset at the start of a stylesheet. Andy bell and Josh Comeau have good examples with explainer blogs. 4-Style mobile first every time. 5-Never ever write font size in px. Extremely important to use rem so that the users size is honoured.
Marked as helpful
0
