HTML,CSS , BOOSTRAP

Community feedback

• 

  Newton Ombese•180

  @nejidevelopsPosted 8 months ago

  Good work there, try fixing the following the suggestions and you will have the best of it.

  1. Semantic HTML: The HTML structure is somewhat semantic, as it uses appropriate tags like <header>, <footer>, <h1>, <p>, etc. However, there are some improvements that could be made. For instance, instead of using a <div> with a class of "bio" and "profession", you could use semantic HTML elements like <section>, <article>, or <aside> to represent different sections of the content.

  2. Accessibility: The accessibility of the code can be improved. The image of Jessica should have an alt attribute that describes the image. Alt text is important for users who cannot see the image, such as those using screen readers. Additionally, the buttons should have descriptive text or labels inside them, not just "Github" or "LinkedIn", to improve accessibility for screen reader users. Also, ensure there is sufficient color contrast for text elements to improve readability for users with visual impairments.

  3. Code structure, readability, and reusability: The code structure is relatively simple, but it could be improved for better readability and reusability. CSS classes could be more clearly named to reflect their purpose, making it easier for others to understand and modify the code. Additionally, consider consolidating repetitive CSS rules to enhance code reusability and maintainability.

  Here are some specific suggestions for improvement:

  • Use semantic HTML elements appropriately.
  • Provide descriptive alt attributes for images.
  • Improve color contrast for better readability.
  • Make the layout more responsive using relative units in CSS.
  • Refactor CSS classes for better readability and reusability.
  • Consider adding labels to buttons for better accessibility.
  • Consider increasing the width of the card as yours seems a little bit small
  • Consider also increasing the width of the button and make them links. You can add your links to the href.
  • Consider also adding the hover effects to the buttons and also try using the provided Hexadecimal colors you can find the color codes in the style guide markdown file.

  By implementing these suggestions, you can enhance the accessibility, responsiveness, and maintainability of your code.

  If you have any issues don't hesitate am here to help you anytime. My email is [email protected]

  Marked as helpful

  1