Design comparison
Solution retrospective
This was a hard challenge for me. Any feedback would be extremely helpful.
-
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.
-
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?
Community feedback
- @grace-snowPosted over 1 year ago
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 helpful0 - @Chanda-AbdulPosted over 1 year ago
Hello 👋🏽,
- for a curved
<div>
addborder-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 andposition: absolute; top:0; left: 0;
on the child element’s css selector. Adjust thetop
,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 helpful0 - for a curved
- @burrijwPosted over 1 year ago
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 helpful0 -
- @arogersreneePosted over 1 year ago
@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!
1 - @Chanda-AbdulPosted over 1 year ago
oh, and for a full curved bottom/top border on a
<div>
or<section>
you could useclip-path
orradial-gradient
0
Please log in to post a comment
Log in with GitHubJoin 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