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 in HTML and CSS

@chenmeister

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?

For this project, I continued to refine my CSS skills by writing efficient CSS code and completing the task myself without relying too much from outside sources. This allowed me to break out of my comfort zone and improve my CSS skills. What I hope to do next time is to keep practicing my CSS and code it without relying on guides.

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

I've encountered some issues with aligning images and adding custom fonts. I had to refer to the MDN docs and w3schools to help me get it all set up.

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

I would like to see how I can make my CSS code more efficient and apply some advanced techniques if possible.

Community feedback

Fachrezi 140

@Fbeye04

Posted

First of all, your challenge result is good in appearance but I would like to give some suggestions such as:

  • try to use more semantic elements in html. You can use article tag to wrap the card container.
  • then, instead of float I recommend using flex because it makes it easier to organize the page layout
  • Finally, don't forget to add a media query so that it looks good on smaller screens such as smartphones.
0

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