3-column preview card component using HTML and CSS

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted about 1 year ago

  Hi. Here are some suggestions.

  HTML:

  • The icons are decorative, so should have empty alt text.

  • There should only be one h1 on a page. Replace them with h2s.

  • "Learn More" should be a link.

  CSS:

  • Use margin-top: auto on the links to align them horizontally
  • You are setting the border on the links twice; it should be either or.

  Marked as helpful

  0

  ---

  

  Roraima Lugo González•510

  @roraima1986Posted about 1 year ago

  @Islandstone89 Thank you very much for your suggestions, I didn't realize I wrote the border twice. 😅

  1

  

  P

  Øystein Håberg•10,710

  @Islandstone89Posted about 1 year ago

  @roraima1986 😄🙂

  0
• 

  Petrit Nuredini•2,860

  @petritnurediniPosted 10 months ago

  Congratulations on completing your project! Here are some quick recommendations to enhance your code:

  1. Accessibility: Ensure all images have appropriate alt text for screen readers by providing descriptive information about the image content.
  2. CSS Variables: Consider using CSS variables more extensively for colors, fonts, and other reusable styles to maintain consistency and ease of updates.
  3. Semantic HTML: Use semantic HTML elements like <section>, <article>, or <aside> where appropriate to improve the structure and accessibility of your code.
  4. Responsive Design: Test your design thoroughly on various devices to ensure it looks and functions well across different screen sizes.

  Keep up the fantastic work! Continuous learning and improvement are key to becoming an even better developer.

  For further learning, check out these resources:

  • Web Accessibility Basics
  • Using CSS Variables
  • Semantic HTML5 Elements
  • Responsive Web Design Fundamentals

  0