Skip to content
OverviewSolutions
3
Comments
3
Gavin Fenton
@GavinF17

All comments

  • Gavin Fenton•70
    @GavinF17

    Nice work Filip!

    The only things I was able to spot are that your card is a pixel or two lower, and that Github should be GitHub in your links.

    I tried digging to find something more constructive but you did a really good job with it!

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

    This came together fairly quickly and looks very similar to the example. I did it without the Figma, which makes it harder to tell if I've got the sizing/spacing right.

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

    Main issue, like with the first challenge, was getting the size/spacing right. It's key to making these designs look decent and it's not something I've an eye for yet. It ended up being trial and error, essentially. I also couldn't tell from the preview design what font size difference there was meant to be between the desktop and mobile experience.

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

    Open to any guidance in general but in particular any practical tips on typography.

    Blog preview card using vanilla CSS

    1
    Gavin Fenton•70
    @GavinF17

    Hey! Nice work!

    I haven't gotten my own solution perfect, so might not be able to give full feedback - but a few things I noticed are:

    • missing an outline or border on the card
    • no border-radius on your tag
    • the size of the author image is too large, should be 32px
    • font weights should be 500 or 800 from the style guide but the tag is using 700
    • the line-height on the text should be set to 150% or 1.5
    • the date color should be --grey-950 instead of --grey-500
    Marked as helpful
  • P
    skhbabez•400
    @skhbabez
    What are you most proud of, and what would you do differently next time?

    Next time, I would change my approach to reviewing. Although I did review some of the topics beforehand to refresh my memory, I plan to revisit the guides on CSS and HTML before starting each project as a way to find more areas I have deficiencies in. For now, I’ve identified CSS inheritance as a topic I want to review, since there still seem to be some aspects I don’t fully understand.

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

    I struggled a bit with styling the text and getting it just right. I also had to look up how to import the font family again, as it didn’t work the first time. Fortunately, I was able to resolve it quickly by referring to the official Google Fonts documentation.

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

    Overall, I think the structure works, but I'm not sure if I relied too heavily on Flexbox. I’d be interested to know if there are more efficient or cleaner layout options I could have used.

    Starter QR Code Project using basic HTML and CSS

    1
    Gavin Fenton•70
    @GavinF17

    Nice work!

    I couple of things I noticed are that for your card-text:

    .card-text {
  font-weight: 400px;
  line-height: 22px;
}
    • font-weight should simply be 400, though this style is redundant as it is also set on .card and inherited anyway
    • line-height seems a little larger, from the Figma I think it should be 140% - though I also didn't get mine pixel perfect so might need to double check
    Marked as helpful