Submitted 2 months ago

Blog Preview Card in HTML and CSS

Sean Chen•140

@chenmeister

Preview site View code

This is a solution for...Blog preview card

HTML
CSS

1newbie

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•200
@Fbeye04Posted 2 months ago
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

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