Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blog preview card Challenge using only HTML & CSS

@TonyzCataldo

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

Hello, in this challenge i try to use less "px" in images and similar things... i try use some semantic HTML... i am proud of my work... and I accept you give me tips on how to improve my codes... :)

What challenges did you encounter, and how did you overcome them?

hmmm i have difficult in manipulate the image... in my opinion, his dimensions are small... i dont know too much about

What specific areas of your project would you like help with?

every tip or recomendation... your experience can help to much beginners like me. :)

Community feedback

MrLanter 220

@MrLanter

Posted

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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord