Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
6
Comments
5
sfschiavetto
@sfschiavetto

All comments

  • Abdullah Abdurazaq•290
    @Ayyubiy90
    Submitted 11 months ago

    Using CSS custom properties for consistent styling

    1
    sfschiavetto•100
    @sfschiavetto
    Posted 11 months ago

    Great job!

    Marked as helpful
  • P
    Carson Haskell•120
    @Carson-Haskell
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    Not over-relying on flex box, and creating/styling the table (I know that's not really a big deal, but I try and avoid tables because I hate them so much for some reason). Also, using more semantic HTML instead of throwing divs all over the place, and finally, how comfortable I've gotten implementing Figma designs.

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

    The mobile layout of the Card, I had trouble implementing the image change, specifically getting it fixed to the top of the page with full width. I thought it would be straightforward, but the I kept running into issues (the image would not take up the full width, instead it would just make the entire card smaller, things like that, etc.). I tried position absolute, but then it ignored the content below it. Finally, I got it working by setting position: absolute; top: 0; left: 0 and then moving the card content down like 300px to be below the image, but 1) that didn't feel right, and I'm sure it's the wrong way to do it, but 2), most importantly, I just didn't like the way it looked. Of course if this was an actual company I would stick to their design, but since this is going in my projects I went with what I thought looked best (image still has padding around it).

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

    Even though I don't like the way it looks so I went another route, I do want to know: what is the best way to implement the correct styling for the image for the mobile layout (fixed to the top, full width)?

    Responsive Recipe Card using CSS media queries

    1
    sfschiavetto•100
    @sfschiavetto
    Posted 11 months ago

    Great job!

  • naufaluqh•90
    @naufaluqh
    Submitted 11 months ago

    "Responsive Blog Preview Card with HTML, CSS, and Google Fonts"

    1
    sfschiavetto•100
    @sfschiavetto
    Posted 11 months ago

    Good job!

  • P
    Purnama S Rahayu•250
    @catreedle
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    I think I did better with positioning the elements than the previous challenge. I also use semantic HTML and use variables for colors this time! I did not accomplish reducing the font size for a smaller screen, unfortunately. I will fix this when I get a grasp of it.

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

    To reduce font size for smaller screens. I need to grasp an understanding of viewport, calc, em, and rem before I can overcome this.

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

    How to reduce font size for smaller screens. It would be helpful if you could walk me through for this challenge. Also, some feedbacks on my HTML and CSS structure would be appreciated.

    Blog Preview Card with HTML and CSS

    1
    sfschiavetto•100
    @sfschiavetto
    Posted 11 months ago

    Great job, I like the use of hover style! The layout is good too!

    Marked as helpful
  • Zorbiks•210
    @Zorbiks
    Submitted 11 months ago

    QR code component with Bootstrap

    #bootstrap
    1
    sfschiavetto•100
    @sfschiavetto
    Posted 11 months ago

    Great job!

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub