The most challenging part of this project for me by far is positioning the images, so feedbacks to this aspect of my solution would be particularly appreciated.
@javascriptor1
Posted
Hi Helen ,
Nice work. The left side of the image out of the main container for desktop design should be hidden.
Keep coding !.
@helenclx
Posted
@javascriptor1 Thank you for pointing that out. I have updated my code to fix it.
@itush
Posted
Congratulations on completing the challenge! 🎉
Your solution looks nice to me :)
Yes, it is important to correctly understand CSS Position property to render HTML elements as per the requirement. Please note:
By default, all HTML elements are static (non-positioned elements).
By using top, right, bottom, left we can control the final location of an HTML element.
Top, right, bottom, left, z-index don’t have any effect on Statically positioned / non-positioned elements.
So, basically, we first need to convert a non-positioned element to a positioned element using (relative/fixed/absolute/sticky) then only (top/right/bottom/left/z-index) etc. will work for the targeted element.
In my projects:
<body>
<main>
All content
</main>
</body>
I Use relative units as much as possible and avoid absolute units whenever possible.
I remember when I started out, I made countless mistakes and spent long hours searching for solutions. But hey, you don't need to go through the same struggles! 🙌 To help you shorten the learning curve, I recommend going through the following articles. They contain valuable insights that can make your journey smoother:
📚🔍 12 important CSS topics where I discuss about css position, z-index, box-model, flexbox, grid, media queries, mobile-first workflow, best practices etc. in a simple way.
📚🔍 11 important HTML topics where I discuss about my thought process and approach to convert a design/mock-up to HTML along with other topics.
I hope you find these resources helpful in your coding adventures! 🤞
I'm eagerly looking forward to seeing the amazing projects you'll create in the future! 🚀💻
Keep up the fantastic work and happy hacking! 💪✨
@helenclx
Posted
@itush Thank you for your comment and sharing your resources.
@itush
Posted
@helenclx
You are most welcome!
Always happy to help :)
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
