@ratsagi
Posted
Greetings Mohammed. Good job on completing the challenge!
I have some suggestions for you to improve your solution.
- You don't have to wrap your image with div to center it because you already did it with "main-container".
- for qoutes there is a special tag like "blockquote" use it instead of paragraph. This helps screen readers to recognize "Front-end Developer and avid reader." this sentence is actually a quote not a paragraph.
- in main-content you used to center vertically by using flexbox property "align-items: center" but to center horizontally you choose to use "margin: 0 auto" instead of it you could use "justify-content: center" By looking at your solution I find out the difference between them. If you use margin it automatically assigns margin to the main-content however if you use justify content it does not so I think the best way to center horizontally is justify-content for your solution. -From the responsive point of you, avoid using fixed units like px instead use rem. I noticed that you used them but try to be consistent because if you don't in small sceen sizes you notice unreadable content. I think for font-sizes clamp is not necessary just rem is enough.
I hope you find it useful!
Happy coding!
@MajdMohammed
Posted
@ratsagi Hello sir, Thank you so much for your feedback, it's really valuable for me.
I noticed that everyone is advising me to not use fixed units like px. I know that it's bad because it makes content unreadable in some screen sizes. But I am wondering when should I use it and when not.
For clamp() I was just have learned it so I was proud to use lol, but yea I noticed now that sometimes only rem is enough, especially when you calc() it with vw for better responsivity.