Skip to content
Submitted 8 months ago

@font-face; media queries, flexbox; custom properties

Devs-advocate•240
@Devs-advocate
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?

The two big challenges for me were the layout design, with respect to the front card and the card behind. Also the manipulation of the SVG provided, for mobile responsiveness. I'd probably need more research about SVGs for future projects, but I still think I came very close to the design version.

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

Cropping the SVG as per mobile specification was difficult. In the end I had to manipulate the container it was in, not the properties of the SVG.

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

Is there a specific technique I should've used to crop the SVG? I feel the way I achieved it was a bit of a hack.

Community feedback

  • Bryan Li•3,530
    @Zy8712Posted 8 months ago

    Hi there! Your site looks great!

    To answer your question, the way you implemented the svg is perfectly fine.

    Another way you could have do this is that you set the svg-container to the desired width and height and then used the svg as the background. Alternatively, you could have also imported the svg using an <img> tag and then just set the size of the container (or image) and the use overflow: hidden (similar to what you already did).

    Aside from that the only other things I'd change/add are:

    • using semantic tags like <main> so its better for accessibility
    • reduce the amount of divs used, as some weren't really needed
    • use <h1> instead of <h2> because header tags are meant to be used in order <h1> to <h6> without skipping. There can only be one <h1> tag per page, but multiple of the others. The tags come with default font sizes which can be modified using font-sizes in css

    Hope you find this feedback useful 👍

    Marked as helpful
    1
    Devs-advocate•240
    @Devs-advocatePosted 8 months ago

    @Zy8712 Wonderful feedback thanks. Will implement your suggestions in my next challenges.

    0

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