Skip to content
OverviewSolutions
2
Comments
3

Selina Lavery

@SelinaLaveryDevScotland40 points

Junior Software Developer

Latest solutions

Latest comments

  • Ahsan•110
    @ahsanmaSubmitted 16 days ago
    What challenges did you encounter, and how did you overcome them?

    I tried to use variable fonts it didn't resonate with the design. Then I tried to use it locally using @font-face, it also didn't come up right. Finally, I tried using google fonts, which went along with the design.

    I had problems with making the tag Learning as an inline element, without taking the whole container width, but finally, found the solution using align-self.

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

    It would be great, if I can get input on arears where I can improve my code, both in my HTML as well as CSS

    Blog Preview Card Using Responsive Typography And CSS Flexbox

    2
    P
    Selina Lavery•40
    @SelinaLaveryDevPosted 16 days ago

    Hey @ahsanma,

    You mentioned challenges using @font-face - you were actually doing everything right, you were just missing "" quotes around the url. So here:

    /* font-family: "Figtree", sans-serif; */
/* src: url(./assets/fonts/Figtree-VariableFont_wght.ttf)
    format("ttf-variations");

    change it to:

    src: url("./assets/fonts/Figtree-VariableFont_wght.ttf")

    That should work for you now! I hope that helps :)

    Marked as helpful
    0
  • P
    Mihailo Sparic•260
    @MihailoSparic01Submitted 16 days ago
    What challenges did you encounter, and how did you overcome them?

    None

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

    None

    Blog Card

    1
    P
    Selina Lavery•40
    @SelinaLaveryDevPosted 16 days ago

    Hey, your design is looking great, especially the spacing and overall sizing. And semantic html and css looks good. I did notice a couple of small things that could help make the design even closer to the original:

    • The container is missing a border and box-shadow, which would add a nice touch to match the design.
    • The author image at the bottom could be resized to the correct width and height to align with the design specs. Overall, awesome job👌
    0
  • P
    Selina Lavery•40
    @SelinaLaveryDevPosted 23 days ago

    Your solution looks fantastic—very close to the actual design! Looking at your code, it's well-structured and very readable. Here are a few small suggestions that might help improve it even further:

    You could use a <section> instead of a <div> to improve semantic HTML. I noticed some slight differences in sizing compared to the Figma design—for example, the width is 320px, the height is 499px, and the border radius is 20px. Adjusting these could make your solution an even more precise match! Adding an alt attribute to your <img> element would improve accessibility. Great job overall! Keep up the awesome work. 🚀

    0