Skip to content
Submitted about 1 year ago

Workit Landing Page

sass/scss, accessibility
P
Kamran Kiani•2,780
@kaamiik
A solution to the Workit landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

This challenge was a landing page that has different parts and using media query properly is really important in this challenge.

What challenges did you encounter, and how did you overcome them?
  • Aligning the images on this page was very tough for me.
What specific areas of your project would you like help with?

  • First, is my HTML structure correct? Could it be improved? I’d appreciate any suggestions.

  • Regarding the alignment of the phone image, I used negative margins and adjusted visibility with a media query. Is this approach correct?

  • In general, can I write my CSS code more concisely? Which parts should I consider removing?

  • Do you have any recommendations for better coding structure in this challenge?

  • Additionally, for added convenience, I’ve created some functions using Sass mixins. Is this a good practice?

Code

Please log in to post a comment

Log in

Community feedback

  • matbac85•600
    @matbac85

    It seems to me that you've done a great job! I remember doing this challenge and it was deceptively simple.

    I see in your CSS code that you write your media queries at each stage, I imagine that's because you're thinking about the three screen sizes and how the elements evolve as you go along, but isn't it safer to put your media queries at the very end?

    I've seen that you've liked all my challenges. Thank you for your support!

    Keep up the good work!

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