blog-preview-card

Community feedback

• 

  P

  Fernando Falcon•220

  @ferfalconPosted 8 months ago

  Hi Anwar, I hope you're doing well.

  Your project closely aligns with the design goals, which is commendable. For an enhanced visual appeal, adjusting the padding within the .status div could provide more breathing space and balance. Additionally, consider reserving the vibrant yellow for hover states on the header to add an interactive element to your design.

  To improve responsiveness, adopting relative units for widths and incorporating a max-width can ensure your layout adapts seamlessly across devices. Don't forget to test on various screen sizes for the best user experience.

  Also, exploring more semantic HTML tags could enhance the structure and accessibility of your project. For instance, the header class used within a <div> could potentially be replaced with a semantic <header> tag for the card's header section.

  Reviewing your CSS for opportunities to reduce repetition and streamline your code can also lead to cleaner and more efficient styling. For example, the repeated use of margin-left: 24px; could potentially be streamlined by applying it to a parent element or using a utility class.

  Keep up the great work, and I look forward to seeing your project evolve!

  Marked as helpful

  0

  ---

  

  Anwar Mestycer•420

  @AnwarMestycerPosted 8 months ago

  @ferfalcon Thank you for the valuable feedback and suggestions! I'll definitely implement the adjustments.

  0
• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 8 months ago

  HTML:

  • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Wrap .card in a <main>.

  • Don't use words like "image" in the alt text, as screen readers will already announce it as an image. I would argue the top image might be mostly decorative, in case it should have empty alt text:alt="".

  • Remove <div class>.

  • Never have text in <header> alone. Remove <header>, it is used for content that repeats across many pages, like a top section with a logo and navigation. "HTML & CSS" is a heading, so change it to a <h1>.

  • Change the alt text to "Headshot of Gary Hooper".

  CSS:

  • Including a CSS Reset at the top is good practice.

  • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

  • Remove the html selector, it doesn't need any properties.

  • On the body, change height to min-height: 100vh - this way, the content will not get cut off if it grows beneath the viewport.

  • Remove justify-content: flex-start, as that is the default value.

  • Except for the profile image, remove all widths and heights in px.

  • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

  • font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

  • Remove the margin on the top image.

  • Images should have display: block and max-width: 100%.

  • On "Learning", add display: inline-block and padding: .5em 1em.

  • You do not need to declare the same font-family on every element! Set font-family on body, and remove it elsewhere. The elements will inherit the font from the body.

  Marked as helpful

  0
• 

  Anwar Mestycer•420

  @AnwarMestycerPosted 8 months ago

  Wow, thank you so much for taking the time to share your insights! I'll definitely put them into action and see how they elevate the project. Your support means the world to me!

  1