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

Kate

@YayoKBCape Town170 points

Hi! :) I'm a student studying Mobile Application and Web Development. I love learning new things and am always eager to expand my knowledge!

I’m currently learning...

Mobile Application and Web Development. Focusing on CSS, HTML and Javascript. Want to branch into learning more frameworks and libraries. Also want to dip my toes into back-end.

Latest solutions

  • Profile page using CSS grid and flexbox


    Kate•170
    Submitted almost 3 years ago

    1 comment
  • Article page using CSS grid, flexbox and Javascript


    Kate•170
    Submitted about 3 years ago

    0 comments
  • Responsive stats preview page using CSS grid


    Kate•170
    Submitted about 3 years ago

    0 comments
  • Responsive coming-soon page with CSS grid and Javascript


    Kate•170
    Submitted about 3 years ago

    0 comments
  • Order Summary component using CSS grid and flexbox


    Kate•170
    Submitted about 3 years ago

    0 comments
  • Responsive sign-up form using CSS grid, flexbox and JS validation


    Kate•170
    Submitted about 3 years ago

    0 comments
View more solutions

Latest comments

  • Andrew•20
    @am4188
    Submitted about 3 years ago

    Product Preview Card using HTML and CSS

    2
    Kate•170
    @YayoKB
    Posted about 3 years ago

    I've only glanced at this for a bit so forgive me if this isn't incredibly constructive or helpful. :)

    1. You're using fixed widths (pixels instead of rem / em or vh, vw etc). This decreases the levels of accessibility and responsiveness, too.
    2. I haven't come across using spans the way you did. Is there any reason you did so?
    3. For some reason, .preview does not follow the same widths as its parent. That is why your button has strange sizing - it's simply following .preview which is bigger than your .container. I could be wrong though - I'm just starting out on here too.
    Marked as helpful
  • Draco•160
    @dracowarz
    Submitted about 3 years ago

    Product Preview Card Component Main

    2
    Kate•170
    @YayoKB
    Posted about 3 years ago
    • The site is not responsive. There are two layouts, one for desktop/wider screens and one for phones/taller screens. Your site does not change the layout depending upon the screen width. Please do that.
    • Some of your colours do not match exactly. The price and button should be a different green and the description and "PERFUME" label at the top should be in grey.
    Marked as helpful

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