Skip to content
OverviewSolutions
6
Comments
4

Nicolas Cappella

@nicocappellaBahia Blanca120 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • Nicolas Cappella•120
    @nicocappellaPosted about 1 month ago
    1. The media query should start with the width of the card.
    2. If you can't differentiate the colors you should use a drop of a color picker, you can use the one that came in the browser, drag & drop the image in the browser and you can use it with the console of the browser.
    3. The card in the mobile version doesn't have padding, so you are only viewing the card.
    Marked as helpful
    0
  • Nicolas Cappella•120
    @nicocappellaPosted about 2 months ago

    I like your solution, the use of variables and the import of the font in the CSS make it very readable and easy to work with.

    I don't know why you added a media query 920px it was in my opinion unnecessary.

    You should use the width and height in the image tag to avoid the layout shift in the page render. (https://web.dev/articles/cls)

    1
  • David Surumen•80
    @DavidSurumenSubmitted about 2 months ago
    What challenges did you encounter, and how did you overcome them?

    This was more challenging that I expected. I have tried doing mobile-first before and using media queries to do other screen sizes, but this was unexpectedly difficult. The image part was hardest for some reason, and also I don't think I perfectly matched the design at the bottom of the preview card.

    Blog preview card

    1
    Nicolas Cappella•120
    @nicocappellaPosted about 2 months ago
    1. Firts recommendation, use a page of styles for the css, its harder to read a html with the styles inside the tags.
    2. You should reset the styles of the browser, you can do it by in an
    Marked as helpful
    1
  • Nicolas Cappella•120
    @nicocappellaPosted about 2 months ago

    I think that the solution accomplish with the screenshot that was given, the only essential thing that was left is the box-shadow of the card. In code development i think you added more complexity that it was needed. But it was a good show of features that seem are in your domain. You should add an specific width and height for the image to avoid the layout shift when the web is rendering, it is a good practice.

    Marked as helpful
    1