Submitted 20 days ago

Blog card using HTML & CSS

Justina-R• 20

@Justina-R

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Blog preview card

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

I’m most proud of my progress and how I’ve effectively utilized resources. Next time, I’ll focus on continuous improvement to keep growing even more.

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

I wanted to try different methods for adding fonts and creating a more responsive design without relying heavily on media queries. It was challenging since I didn’t have much knowledge in that area, but with some research, I was able to solve it.

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

As I mentioned in other challenges, my biggest concern is with responsive design and whether I’m applying it correctly. I’d appreciate help in that area.

Community feedback

Illia Liashko• 70

@Illia-L

Posted 20 days ago

Well done!

Seems, like everything is ok with fonts and colors.

The ways to improve:

check component behavior in different screen sizes, I noticed some issues;
consider using meaningfull html tags for headers and paragraphs instead of <div>, remember, some people use assistive technologies to read web sites.

Marked as helpful

Justina-R• 20

@Justina-R

Posted 19 days ago

Thank you for your comment! It's super helpful for improving my code, I'll implement your ideas right away.

Derik Boghozian• 190

@psychederik

Posted 20 days ago

The design looks great but there are a few issues on the live site. First, the size is changing for every stretch of the window size and second, there are no hover effects. I like your code, it is well structured and easy to read. I think it will be best for you to learn how to make the size remain consistent with window size and also add the hover effects (check Figma files and hit the play button on top right to view the functional prototype).

Marked as helpful

Justina-R• 20

@Justina-R

Posted 19 days ago

Thank you so much for your comment! I had forgotten to add the hover effects, I'll do that right away. Also, I'll keep studying to make sure the sizes remain consistent with window resizing. It's a new topic for me, so your help is really appreciated.

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