@CHarvey820
Posted
I think this is a fantastic solution, excellent work!
If I were to change anything it would just be a few naming conventions and alt text.
-
Naming conventions should be used to make it as easy as possible for the developer to understand what sort of element it is referring to, while also being broad enough to cover the scope of the project's use cases. For example, your .hobbies class describes what the user wrote in this instance, but another user may write something different, it also does not inform a developer what that element is. Using phrases like "description" or "bio" in this instance would fill a larger use case, and be more useful to the developer. The #yellow-text id is also a bit misleading (in this instance the text is actually green!) and doesn't otherwise describe what that element is. Placing it inside your heading div makes it clear that this is another heading, but something like "location" would be more specific on what that header is used for.
-
Alt text is best used as a quite literal description of the image, so something like "avatar of author Jessica Randall" would help convey more information to users using screen readers.
I think your code looks great overall, but going above and beyond to assist your fellow developers and users with accessibility needs will really make your projects shine!
Marked as helpful
