Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
22
Comments
9
cat-script
@cat-script

All comments

  • Richard Emmanuel Zaramson•130
    @Xaramson
    Submitted 21 days ago
    What are you most proud of, and what would you do differently next time?

    This was a really challenging one, spent a long time on it, im proud that ifinishe my first javascript project

    article-preview-component

    1
    cat-script•250
    @cat-script
    Posted 20 days ago

    Well done!

  • nunu114•100
    @nunu114
    Submitted 23 days ago
    What are you most proud of, and what would you do differently next time?

    I learned how to use Flexbox on multiple occasions. Responsive design is one of my weaknesses, so I tried my best to implement it through this challenge.

    I tried my best to use rem and vh instead of px (rem still confuses me every time).

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

    I had a hard time using Flexbox. Sometimes I'm still confused between justify-content and justify-items. I was trying to put the element in the center horizontally and vertically. I successfully centered it horizontally, but for some reason, it sticks on top of the document. Then, after some googling and trial and error, I wrapped the container in another container, set the height to 100vh, then set the display to flex. After that, I can finally center it not only horizontally but also vertically.

    Another thing that I'm still not comfortable yet is adding a box shadow to a container.

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

    I wanted to be comfortable using rem units and flexbox. Rem units still confuse me, even though I have already taken many lessons on them.

    QR code component solution using Flex box

    1
    cat-script•250
    @cat-script
    Posted 23 days ago

    You can use px units first then divide that px by 16 to get your rem units (e.g. 12px/16 = 0.75rem). It's kind of strange at first but you'll soon get used to it! Just keep it up!

  • Kyle Parsotan•140
    @Kyl67899
    Submitted 24 days ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of being able to use grid box properties using mdn website on grid box and using the different properties. I find it was easy to use flex box but wanted to challenge myself using grid box instead.

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

    Overall, grid box properties and using grid box to code this challenge was quiet difficult.

    To help me with coding the grid box, I used the mdn document often because it was hard to find the numbers to be able to create the boxes. Using grid-row and grid-column properies made it easy to create each box section and align it where it sees fit.

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

    I would like to continue practicing and working on grid box and flexbox. I plan on using froggy game for practicing grid box usage so when I am coding a complex grid layout it would be easy to understadn with the grid properties that were taught in the game and the mdn document.

    Responsive Testimonial Section

    1
    cat-script•250
    @cat-script
    Posted 23 days ago

    If you change the values of src attributes inside the <img> tags, images will render properly.

  • Andrés R.W.•440
    @amporabipo
    Submitted 3 months ago

    Four card feature section

    1
    cat-script•250
    @cat-script
    Posted about 1 month ago

    Great work! 🎉

  • gok786•50
    @gok786
    Submitted about 1 month ago

    Product preview card component

    1
    cat-script•250
    @cat-script
    Posted about 1 month ago

    You can watch this video by Kevin Powell for this challenge solution. You did the layout really well, a few minor fixes and it would be so much better. 🎉

  • Sheyon565•90
    @Sheyon565
    Submitted about 2 months ago

    Responsive Recipe Page

    1
    cat-script•250
    @cat-script
    Posted about 2 months ago

    Looks great! I have the white space at the bottom as well, although it doesn't appear in the preview site.

    Marked as helpful
  • Bisi-sina•130
    @skellynb
    Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    setting up the click and hover buttons really took my time but its an added knowledge.

    social links profile using HTML and CSS

    1
    cat-script•250
    @cat-script
    Posted about 2 months ago

    You can do better! 👏

  • tonydevtech•20
    @tonydevtech
    Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I will do more better

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

    Got through anyways

    Blog Preview card

    1
    cat-script•250
    @cat-script
    Posted about 2 months ago

    Keep it up! 🎉

  • C1SLR•160
    @C1SLR
    Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    this is my first challenge in frontend mentors i completed my QR code project easily with extra grip on flex box i want rating on my code in out of 10 also i want to know where should i improve my self

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

    main challenge was to face was center a div for that i used youtube and some help from https://w3schools.com after all i am still facing some problems to naming css classes

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

    as beginner idk about that

    CSS Flex Box and semantic html 5

    1
    cat-script•250
    @cat-script
    Posted about 2 months ago

    I'm a beginner too but here something easy that I think you can fix:

    • The image is distorted and missing the rounded corners
    • The font included in the style-guide.md is Outfit
    • Some spacing around the text
    • The box-shadow in the preview image is more subtle
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

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