Design comparison
Solution retrospective
Any good practices while writing html or css that I'm not following? Any feedback would be appreciated.
Community feedback
- @grace-snowPosted almost 4 years ago
I actually think the semantic tags on this is fine. As a screenreader user, I can understand everything.
However, you definitely need to change the way you're using alt text at the moment. Meaningless images like background images should have the attribute but with no value in it. Meaningful images - like the profile image should have a meaningful description. In this case, that should probably say the person's name.
The other thing you need to address is that although this looks great on mobile in portrait orientation, it breaks really badly on landscape. Not setting height on elements that don't need it and using min- or max- values on properties like width/height usually helps these things.
I hope this is helpful feedback for you. Best of luck
1@RohitDhatrakPosted almost 4 years ago@grace-snow Hey, thanks for the feedback I have fixed the alt attribute and I have started working on the landscape layout thanks for highlighting it.
0 - @Rabin92Posted almost 4 years ago
Hey @RohitDhatrak,
Congratulations on completing your first challenge!
Currently, your site looks good but there are couple of things that needs to be added/altered:
1- Use a
semantic elements
instead of<div>
when possible because usingsemantic elements
enhances accessibility, searchability.2 -
<img>
element is missing analt
attribute. Always add a requiredalt
attribute and specify an alternate text for an image for betteraccessibility
Besides that your code looks good and it's easy to read.
Keep contributing your work in this community!
Happy Coding! 😀
1@RohitDhatrakPosted almost 4 years ago@Rabin92 Hey thanks for the feedback which semantic elements I could have used instead of the div tags?. I don't know how I forgot the alt attribute I'll fix that.
0@Rabin92Posted almost 4 years ago@RohitDhatrak
You can use the
<main>
tag to define the main content of a document and the<section>
tag to define the section.When working on a project always consider using
<semantic>
elements. Only use<div>
tags if there are no<semantic>
tags to define particular contents.Hope this helps!
0@RohitDhatrakPosted almost 4 years ago@Rabin92 yes this is helpful I'll keep this in mind when I'm working on the next challenge. Thank you.
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