Skip to content
Submitted over 2 years ago

work-it responsive landing page (flex & grid)

arogersrenee•330
@arogersrenee
A solution to the Workit landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

This was a hard challenge for me. Any feedback would be extremely helpful.

  1. How do you do curved divs? I don't think the solution I found is the best. It creates a horizontal scroll that I don't know how to fix.

  2. I also know that I need to read into positioning and how to move elements. I found a solution that I was able to play with but any advice in that area is welcome.

Was positioning the best choice to use for the phone and the bottom section with the founder image and the text-box?

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Grace•32,130
    @grace-snow

    This looks pretty good I think.

    A few issues:

    • all the main page content needs to go inside main. The about section cannot be outside
    • If this was a real site you wouldn't want the h1 inside header. Header is meant for repeating content on every page of a site but h1 is for the individual page title. I think its fine for this because it's just a landing page but worth being aware of for future projects
    • Make sure you set a max width for the page content. Zoom right out on a desktop browser and you will see how the design breaks
    • An alternative (and arguably better) way to do those curved sections would be with absolutely positioned pseudo elements and svgs or clip path etc.
    • "Mobile phone mockup" is not a proper description of that image. If you think it's meaningful and needs a description, then it needs to be a good enough description for someone to be able to picture the image from reading it. If it's decorative, the alt can be blank
    • I recommend using an ordered list for the 3 numbered sections
    • For the numbers, they should still be in paragraphs. You could even use the css counter to display them maybe.
    • "Workit logo" is not good label for a home link. For this I think you need the alt to be WorkIt - Home and the href should be "/"
    • The social logos definitely need to be anchor links and their alt needs to only be the name of the platform (remove the word 'button')
    • ⚠️ NEVER do this: font-size: 16px; This one is really important. I wrote about why
    Marked as helpful
  • Chanda•820
    @Chanda-Abdul

    Hello 👋🏽,

    • for a curved <div> add border-radius: 32px to the css selector
    • to fix the horizontal scroll add overflow-x: hidden to the parent’s css selector. You may also want to set the width or max-width of the parent, or the entire page, to 100vw so that child elements cannot overflow the parents container.
    • for positioning look into absolute and relative positioning. Use position: relative on the parent element’s css selector and position: absolute; top:0; left: 0; on the child element’s css selector. Adjust the top , bottom , left , right values on the child element to position it relative to the parent element.
    • To position layers use z-index
    • For the numbered list, use an ordered list with list items. https://www.w3schools.com/html/html_lists_ordered.asp

    I hope that helps!

    Marked as helpful
  • Josh•400
    @burrijw

    Nice job! 👏🏻

    Here are a couple suggestions:

    • I'd make sure those social media icons at the bottom are links. Wrap the images in anchors and make sure they have accessible labels. You can hide the label with an 'sr-only' or 'visually-hidden' class.

    • The numbered sections are decorative, meaning they should also be hidden from screen readers. Consider adding an 'sr-only' class on those as well.

    • I think you can get rid of some of the hacky margin and positioning stuff if you use an SVG for the curved section backgrounds instead. Consider adding an ::after pseudo-element to those sections with a curved SVG as the content or background-image.

    • Hiding overflow on the body and/or HTML can be tricky. It won't work on mobile without some special care. I'd recommend avoiding it if you can.

    Good luck!

    Marked as helpful
  • arogersrenee•330
    @arogersrenee

    @grace-snow @Chanda-Abdul @burrijw

    Thanks for feedback. It was truly helpful! I ended up restarting and I took into account as much as I could figure out.

    I tried the svg route on one section and the clipping path on the other. I'll have to play around with them more to figure out when which is better than the other.

    I also did the same for the coils. A couple are background images and the other added to the html. Positioning these was a challenge.

    Overall, there's much more that I need to figure out. As a beginner (1 month of learning html & css) this was much harder than I thought it would be!

  • Chanda•820
    @Chanda-Abdul

    oh, and for a full curved bottom/top border on a <div> or <section> you could use clip-path or radial-gradient

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