Skip to content
Submitted about 2 months ago

Blog card using HTML & CSS

Justina-R•20
@Justina-R
Preview site (opens in new tab)View code (opens in new tab)
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?

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-LPosted about 2 months 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
    0
    Justina-R•20
    @Justina-RPosted about 2 months ago

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

    0
  • Derik Boghozian•230
    @psychederikPosted about 2 months 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
    0
    Justina-R•20
    @Justina-RPosted about 2 months 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.

    1

Please log in to post a comment

Log in with GitHub

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