Design comparison
Solution retrospective
Hello!
This is my third challenge and I selected this one because of the curved sections and to try using SVG. I initially tried to copy the SVG tag and paste it on the HTML file however there was a whitespace below for the upper curves. I tried to check if it was a border, padding or margin but it did not worked. I've also searched about it and some says you need to change the orientation which I tried however it only changed the size of the curve. I then used img tag to refer to the SVG files and the whitespace disappeared. If anyone encountered the same issue and was able to remove it with the SVG tag in the HTML file, please let me know and I will highly appreciate it.
Thank you :)
Community feedback
- @VCaramesPosted almost 2 years ago
👾 Hey there! 👋 Here are some suggestions to help improve your code: 👾
Best practice, before moving on to the next challenge, always check your FEM report, to see what is incorrect and update your code with it so that you would not make the same mistake over again. This something that should be done right after submitting your challenge.
- The illustrations/icons serve no other purpose than to be decorative. Their
alt tag
should left blank and have anaria-hidden=“true”
to hide them from assistive technology.
More Info:📚
https://www.w3.org/WAI/tutorials/images/
- Do not capitalize "newsletter" (footer) in HTML as it is not accessible friendly. Instead you will want to style it in CSS.
- Your
email input
andbutton
needs to be wrapped inside aform
and have a visibly hiddenlabel
attached to it for improved accessibility.
More Info:📚
- The company info inside the
footer
needs to be wrapped inside anaddress
element. While each individual information needs to wrapped in ananchor
element.
More Info:📚
- For improved accessibility 📈 for your content, it is best practice to use
em
formedia-queries
. Using these unit gives users the ability to scale elements up and down, relative to a set value.
- Your CSS Reset is extremely bare and being underutilized. To fully maximize your CSS reset, you want to add more to it.
Here are few CSS Resets that you can look at and use to create your own or just copy and paste one that is already prebuilt.
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding!🎄🎁
Marked as helpful0 - The illustrations/icons serve no other purpose than to be decorative. Their
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