Skip to content
Submitted about 2 years ago

WorkIt landing page

accessibility, bootstrap, webflow
Kinga Miśkiewicz•160
@codingbeary
A solution to the Workit landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Any suggestions on how I can improve (especially in terms of positioning elements because that was a bit of a struggle for me 😅) are welcome! :)

Code

Please log in to post a comment

Log in

Community feedback

  • Tushar Biswas•4,060
    @itush

    Congratulations on completing the challenge! 🎉

    Your solution looks nice to me.

    It is important to correctly understand CSS Position property to render HTML elements as per the requirement. I remember struggling in my initial projects, since I didn't understand it correctly😁 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 12 important CSS topics where I discuss about css position, z-index, box-model, flexbox, grid, media queries, mobile-first workflow etc. in a simple way.

    I hope this helps.

    Keep at it...💻 Happy hacking!

    Marked as helpful

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