Design comparison
Solution retrospective
This challenge has been very good to practice a lot, especially for me, with the mobile design, and the CSS grid, I had some delays in terms of the measures of each section, but I think I had a good result with this challenge, and you know that any improvement or any suggestion to improve my code you can tell me in the comments. Happy coding ❤
Community feedback
- @vanzasetiaPosted over 1 year ago
Hi, Ezequiel Córdova Sotomayor! 👋
Alternative text for the logo should not contain the word "logo".
"Get early access today" should be
<h2>
. It is not a sub-section of the previous section.Use
aria-label
to label the<input>
since there is no visible label on the design.I recommend writing the CSS using the mobile-first approach (using
min-width
media queries). The mobile layout is simple. So, you only need to add more complex styling for larger screen sizes.If you use the desktop-first approach, then you need to write more CSS to simplify the layout (usually into a one-column layout).
The mobile-first approach often results in smaller CSS. As a result, the website loads faster.
Learn more — Responsive design ground rules | Polypane
I hope this helps. Happy coding! 😄
Marked as helpful1 - @Tryt4nPosted almost 2 years ago
Firstly in your header navigation aria-label is not needed, because element
nav
explain itself what it is. Nice though with aria-hidden withimg
orlabel
without text. Another thing with your footer.a
elements with email phone etc. could have something like this:<a href="tel:+48123456789">+48 123 456 789</a>
<a href="mailto:[email protected]">[email protected]</a>
And with that if you click on that element it will automatically open application for phone calling or email etc. In overall it's good.
Marked as helpful1 - @FETYagencyPosted almost 2 years ago
hey, it a nice attempt , i didn't read the code but i will tell you what i can see your webpage need alignment improvements at the 800px until what's less also there are some texts are overflowing out of the containers and to solve this you can go with overflow-wrap though it is not recommended and if you want to get advaced you can use the clamp function and the @container and the container width. i wish i helped even a bit, have fun brother ;)
Marked as helpful1@3eze3Posted almost 2 years ago@FETYagency Hi, thanks for taking the time to comment, and yes you are right I will keep an eye on it to improve with that and the title alignments that broke my head a bit, have fun you too. ✔
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