Design comparison
Solution retrospective
Hello everyone!! Liked how this landing page looked and decided to push my comfort zone and really challenge myself. What knowledge I knew of flex and grid positioning was completely wrong and had to start from scratch but, would't want it any other way!
What did you find difficult while building the project?
- Getting the positioning down of the mobile state and desktop state of the images and using relative and absolute was a nightmare.
Which areas of your code are you unsure of?
- My absolute and relative positioning I feel are shoddy but need to start somewhere.
Any feedback on how to structure my code better or better CSS rules to get the functionality is welcomed!!
Community feedback
- @itushPosted over 1 year ago
Congratulations on completing the challenge! 🎉
It is important to correctly understand CSS Position property to render HTML elements as per the requirement. I also faced difficulties with position property in my initial projects. 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.
You may checkout the following👇 where I discuss about css position, z-index, box-model, flexbox, grid, Media Queries, Mobile-First Workflow etc. in a simple way.
CSS Position Property in Hindi
I hope this helps.
Keep at it...💻 Happy hacking!
1 -
Please log in to post a comment
Log in with GitHub
Join our Discord community
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