Blog preview card Challenge using only HTML & CSS

Community feedback

• 

  MrLanter•220

  @MrLanterPosted about 1 month ago

  Hi, I hope you are doing well. Congratulations for the effort put into the project!

  I could give you some suggestions:

  • Text sizes should be in rem and not in px because some people enlarge the size in their browser. Putting in px would not respect their preferences. Here is a detailed guide

  • The text font is not the right one, yet it has been imported into your CSS. I think this is because you should put this line of code at the very top of the file, before any style: @import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

  • You use a figure tag to put the image directly in the index.html. I would recommend instead to replace it with the img tag and import the svg that is in the project assets. Here is an example: <img class="img-article" src="./assets/images/illustration-article.svg" alt="Article illustration"> And you can now change the image size in CSS, for example with width: 100%.

  • Use more descriptive class names than "p1" or "p2". In this context you can replace them with "date-publication" and "description".

  These tips will help you improve SEO, accessibility, readability and code maintenance. I hope it helped you, have a nice day!

  Marked as helpful

  1