Hello! The project was made using a mobile-first approach. Any Feedback on tips, erros, or how to improve, would help me learn a lot! Thanks!
Hey, everything looks nice and good, good job.
looks like you need to take more complicated and hard problems XD.
Good luck.
Marked as helpful
@YanBaetas
Posted
@hardy333 Thank You, for your encouraging words!
I'm doing these challenges, because there's always room for improvement and I feel the need to keep on practicing the basics.
@pikapikamart
Posted
Hey, great work on this one. The layout in desktop is good and the mobile state as well. The transition point from desktop to mobile could have used less breakpoint since it is too early to make it mobile layout.
Some suggestions would be:
body tag, it would be better if you replace the height: 100vh by min-height: 100vh. Using height: 100vh you are applying a fixed height to the element which is relative to the viewport's height. If you try to inspect in dev tools at the bottom, your layout is unscrollable and cut. min-height: 100vh takes whole height but expands if it needs to.header element is not advisable in your usage. Since there are no content inside it, it doesn't really help user navigate, but if the image has used img you could use header with a descriptive alt attribute.ul since those could basically be a list of informations.padding to the body tag, to prevent layout from touching the screen.Still, great work on this one.
Marked as helpful
@YanBaetas
Posted
@pikamart Thank you for the precious feedback!
I made some changes on the code based on your suggestions, these helped me a lot! If you would be so kind, could you see what I changed?
Again, thank you so much!
@pikapikamart
Posted
@YanBaetas Hey, glad to be back at you again. Also, thank you for considering what I suggested above.
Looking the structure again, you used now the img but why did you remove the header hehe I said you can use the header if you used the img inside it, why did you replace it with div :>> but hey, it will still work just fine.
alt text on the img should used more descriptive alt value. Also, when using alt avoid using words like "image, graphic, icon, illustration" basically, do not add words that relates to "graphic". Assistive tech will handle those for you okay.::before or ::after won't work with replaced elements, one of those is img. That is why, you will see that your overlay inside the ::after of the img is not working, because those selectors doesn't work for those. Replaced elements are these elements that you can't add element inside them, like img since it is a self enclosing element<img /> # self enclosed
<input /> # self enclosed
<div> </div> # I don't know what these called but you can use before and after on elements like this.
padding to the body tag :>>But like before, it is really good. If any query, just drop it here okay.
Marked as helpful
@YanBaetas
Posted
@pikamart Thank you! I'm gonna address these issues in a while!
The ::after completely passed through me actually, but your explanation on why they can't be used is super useful!
I put a padding: 0 1rem; on the body tag (line 23). Wasn't that it? Or should I got for top and bottom as well?
I'm glad you took your time to share your knowledge with me! Thank you again!
@pikapikamart
Posted
@YanBaetas Well that's what we do in FEM, just giving back to the community right :>
Also yes, you need to add the top and bottom:
padding: top right bottom left like padding: 2rem 1rem
Marked as helpful
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord
