Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
4
Comments
4

hopefulobject

@hopefulobject80 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

  • Recipe page using lots of rems and flexbox.


    hopefulobject•80
    Submitted 9 months ago

    What is the best way to measure distances on my browser window? This would be helpful as I would be able to compare these distances with the distances in the design file.


    1 comment
  • Social links webpage using CSS Flexbox.


    hopefulobject•80
    Submitted 9 months ago

    How do I use rems and ems if the font-sizes are not nice multiples of each other. Specifically, in the case of this project, they were 24px and 14px, both of which are not nice multiples of 16. And 24 is not a nice multiple of 14. I could use rems and ems but it would look ugly (by ugly I mean if the root font size is 14px, then 24px would be around 1.714rem). Should I still use them in this case? Or is there a better way to go about this issue?


    2 comments
  • Blog preview card solved using vanilla CSS and HTML.


    hopefulobject•80
    Submitted 9 months ago

    Could you please give me tips as to what is an efficient way to center the card on the screen in this specific project?


    2 comments
  • QR code using absolute positioning and vanilla CSS


    hopefulobject•80
    Submitted 9 months ago

    What are the best practices for aligning a div to the center of a webpage?


    1 comment

Latest comments

  • P
    thibault.deverge•310
    @thibault-deverge
    Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    I'm quite proud of how this project turned out, as it was a significant step up from the last challenge in the learning path. While there was nothing particularly difficult, there were a lot of details to take care of, and I'm happy to say that the pixel-perfect integration is very close to perfect. I feel that I handled the project with good organization, breaking it down into manageable steps. For now, I wouldn’t do anything differently, as this methodical approach worked well.

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

    This design had much more content compared to the previous one, which was just a card. To avoid making a mess, I had to stay organized from the start. One of the main challenges was creating reusable components and classes to minimize duplication. I also had to balance this with finding appropriate class names while sticking to the BEM method, which was a bit tricky but worthwhile. Another challenge was working with lists—getting a small gap between the bullet and the text took some extra care. Additionally, using utility classes to control padding on the first and last elements in a table posed another challenge, but I managed to find a solution that worked well.

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

    There's nothing specific that stands out, but I’d appreciate any feedback on how to further reduce repetition in my code, particularly when it comes to creating reusable components. Any general advice or tips would also be helpful as I continue to refine my skills.

    These answers provide clear reflections on your work and where you’re seeking improvement. Let me know if you'd like any adjustments! 😊

    Recipe Page - Solution

    1
    hopefulobject•80
    @hopefulobject
    Posted 9 months ago

    Under the instructions heading, the text is off.

    Other than that, it looks absolutely amazing. Great job!

  • sarvdavoudi•150
    @sarvdavoudi
    Submitted 9 months ago

    social-links-profile

    1
    hopefulobject•80
    @hopefulobject
    Posted 9 months ago

    Looks good, albeit the colors and sizes are off which I guess is the result of you not having access to the figma files.

    Nevertheless, nice work!

  • Wasaanyi•60
    @Wasaanyi
    Submitted 9 months ago

    Responsive Blog Preview Card Using CSS Flexbox

    1
    hopefulobject•80
    @hopefulobject
    Posted 9 months ago

    Add a border to the card.

    Fix the subheading "learning". It is overflowing.

    The padding on the bottom of the card is off.

    The rest looks all good!

    Marked as helpful
  • lucasterencio•10
    @lucasterencio
    Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    The html semantic and, for sure, all correct gaps between elements. Next time, i wish improve the project structure.

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

    i confess that the filters in css was a new knowledge! I enjoy it.

    QR Code | Component

    1
    hopefulobject•80
    @hopefulobject
    Posted 9 months ago

    I don't notice any landmarks in your HTML code which you may want to add to make your HTML more semantic.

    The layout looks great on a variety of screen sizes. Good job!

    The code is readable in my opinion.

    Nice solution!

    Marked as helpful
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

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