Not Found
Not Found
Request failed with status code 502
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

WorkIt landing page

@codingbeary

Desktop design screenshot for the Workit landing page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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! :)

Community feedback

Tushar Biswas 4,080

@itush

Posted

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

1

Please log in to post a comment

Log in with GitHub
Discord logo

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