Skip to content
OverviewSolutions
5
Comments
5
Jason Limas
@jasonlimas

All comments

  • Jackson-zablon15•330
    @Jackson-zablon15
    What are you most proud of, and what would you do differently next time?

    I'm proud to make the card responsive to both mobile view and desktop view

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

    I had a problem on changing the image on desktop preview in the @media and i overcome it by using content: url()

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

    I would like help on squeezing the header to make it align exactly as in design, i tried using right padding but didn't work. I would like help on removing the scroll bar on mobile preview, i tried to set the height of body to fit content but didn't work

    Product-preview-card

    4
    Jason Limas•50
    @jasonlimas

    Hey! Awesome work! It looks really good! However, I think you are having a minor problem with the desktop version. There's a little gap at the bottom of the picture. I had this problem too. I fixed it and the fix might work for you too.

    Here's how you can do it: by setting display: block on either your .image class or your img selector. This might be the solution to the little gap at the bottom of the image.

    Good luck for your future Frontend development journey! Hope you are having a lot of fun!

  • Jason Limas•50
    @jasonlimas

    Hey great work! You did really well. One thing is that you forgot about the title font. Other than that, awesome work! I hope you keep going on your front end development learning journey as I believe you have the potential to keep improving. Don't give up!

  • Jason Limas•50
    @jasonlimas

    It's close to the required look. However, there are some differences such as the hover effect, font sizes, font weight, image size, and some spacing. Good try & effort, though!

  • manzii07•40
    @manzii07
    What are you most proud of, and what would you do differently next time?

    I'm most proud of successfully creating a clean, interactive blog preview card that closely matches the design. It was a great opportunity to practice my skills in semantic HTML and CSS Flexbox. Next time, I would like to explore adding some animations or shadows to enhance the overall structure of the blog card. Additionally, I would use a CSS preprocessor like Sass to streamline and organize my styles more efficiently.

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

    One of the main challenges I encountered was ensuring the blog card looked good on all screen sizes. Initially, the layout didn't scale well between different devices. I overcame this by adopting a mobile-first workflow and using CSS Flexbox to create a flexible, centred layout. Additionally, I made extensive use of media queries to adjust the styling for various screen widths, ensuring a consistent and responsive design across all devices.

    Interactive Blog preview card using HTML and CSS

    1
    Jason Limas•50
    @jasonlimas

    Looks clean. I'm happy that you're proud of your work. I don't see any problem except for how it looks compared to the solution. There are minor differences such as the shadow, card length, text line height, and publish date text color. Other than that, looks great! Have fun on your journey doing front end challenges! :)

  • Jason Limas•50
    @jasonlimas

    Looking good. The only problem is that the bottom text color doesn't match as the preview.