Blog Preview using Flexbox and Hover properties

Community feedback

• 

  MatiasTs•50

  @MatiasTsPosted 28 days ago

  Hello AMaraza, good job!

  Here is some feedback

  HTML

  • Instead of using so many <div> elements, use semantic HTML tags like <main> and <section> for better accessibility.

  • The image needs an alt text that briefly describes the image's content to make it accessible to visually impaired users who use screen readers. It also improves SEO by helping search engines understand the image's content.

  CSS

  • Make a habit of including a modern CSS Reset at the top of the stylesheet.

  • On the container, change height to min-height: 100svh—this way, the content will not be cut off if it grows beyond the viewport.

  • It is not recommended to set a fixed size for the #background container, as it could become too small when the screen is enlarged. Instead, it is better to set a max-width of 384px. This allows the container to adapt to the screen size without exceeding that limit, preventing it from growing too much on larger devices.

  • Use the colors given by the style-guide since the background is not completely white and the shadows are not completely black.

  • You can align elements inside the .usercontainer using only flexbox on the container. There is no need to put display: inline and position: relative on each element.

  Optional

  • Consider using variables with the style guide data to start getting used to them for future larger projects.

  • Consider using a CSS structure like BEM to organize the code (this project is small, but for larger ones, it's better to start getting used to it).

  0
• 

  Graciecreatives•30

  @GraciecreativesPosted 29 days ago

  Such a nice work

  0