@MelvinAguilar
Posted
Hello there ๐. Good job on completing the challenge !
I'm sorry if it's too much text. They are small details, but I tend to write a lot.
- I have to emphasize that you have used the landmarks correctly, very good!
-
Social media icons, which are often used to link to a company's social media profiles, should typically be anchor elements because anchor elements allows users to easily click on the icon and be taken directly to the company's social media profile page.
Additionally, you should improve the alt attribute of those images, having "logo" as the alt attribute repeated several times doesn't make much sense, so people with screen readers can understand where the link will lead.
<a href="#"><img src="/images/facebook.png" alt="Facebook"></a>
- The "Register" element should be an <a> tag instead of a button, since the goal of the element is to redirect the user to a registration form, the most appropriate element would be an anchor tag.
Alt text ๐ท:
Here are some guidelines to follow when writing alt text:
- Alt text should provide a clear and accurate description of the image's content or purpose.
- A logo is of a website's branding and identity, use company name as the alt attribute value for logos. The word "logo" is not necessary.
-
Use empty alt text for decorative images: If an image is used for decorative purposes only and does not convey any important information, the alt text should be left empty.
If you want to learn more about the
alt
attribute, you can read this article. ๐.
CSS ๐จ:
-
You should remove
width: 1440px;
from the body element and let it occupy 100% of the screen regardless of the device, so you could usemax-width: 1440px
to prevent the webpage from growing too much and adapt to the device.Additionally, your media breakpoint of
400px
is too small, from 1000px to 400px a horizontal scrollbar is generated that should not exist.
- You should use
max-width: 100%
anddisplay: block
to have control over the image, and to be able to resize it depending on the device.
Please don't worry if your suggestions are long, they are just details. In the end, the project is well done ๐. Hope you find those tips helpful! ๐
Happy coding!
Marked as helpful
@Pepeleeno
Posted
@MelvinAguilar Thank you very much I learnt a lot from your comment. Making a website responsive is my biggest challenge so far. "max-width" property was something missing in my journey, I guess. Now I understand why my images don't scale depending on the size of a screen, thank you๐. By the way, is it okay if mention you in the comments to seek for help if I don't understand something ?๐
@MelvinAguilar
Posted
@Pepeleeno No problem, I'm happy to help. ๐
Marked as helpful