Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
10
Comments
6
kasey
@kaseyvee

All comments

  • Ahmed Mohamed Zaki•70
    @ahmedzaki20
    Submitted about 2 years ago

    Advice generator app using vanilla js

    #accessibility
    1
    kasey•320
    @kaseyvee
    Posted about 2 years ago

    Hello! I notice you have accessibility tagged but unfortunately, I cannot access the dice button by keyboard :( This is where semantic HTML becomes important. It's best to just use the native button element and style to your liking so that they maintain their accessibility features.

    You can also simply add the attributes role="button" and tabindex=0 so that it is keyboard accessible and read by screen readers that it is indeed a button.

    Hope this helps!

    Marked as helpful
  • Fahim Shakeel•20
    @Eclipse175
    Submitted about 2 years ago

    WEB 3.0 BLOG SITE

    #react
    1
    kasey•320
    @kaseyvee
    Posted about 2 years ago

    Looks great so far! For your next project, try beginning with styling for mobile before moving onto bigger screens- you'll save yourself a lot of headaches and much fewer media queries!

  • Kure-ru•120
    @Kure-ru
    Submitted about 2 years ago

    Results summary component 【 React & TypeScript 】

    #react#typescript#vite
    2
    kasey•320
    @kaseyvee
    Posted about 2 years ago

    Hello! Your z-index in .summary is set to -1.

    Instead, you can remove that z-index and add z-index: 1; to .result.

    Marked as helpful
  • Mirm•80
    @Missteeme31
    Submitted about 2 years ago

    Results Summary Component

    1
    kasey•320
    @kaseyvee
    Posted about 2 years ago

    Based on your media query, I assume you took a mobile-first approach, which is great!

    Something I wish someone told me from the start was to use padding instead of margins where possible as it gets the job done with less code.

    Here, I would remove margin-top and margin-left from .summary and instead add just use padding: 20px;.

    For a smoother transition between mobile to desktop, .container width can be 100%.

    For .result and .summary to align nicely for desktop, you can remove the height from .result and add justify-content: space-between instead.

    Overall awesome job!

    Marked as helpful
  • Diego Román Guerra•10
    @Roman31X
    Submitted over 2 years ago

    Results summary component

    2
    kasey•320
    @kaseyvee
    Posted about 2 years ago

    A great way to space items without individually setting margins to children items is with flexbox!

    For example:

    .conte2 {
       display: flex; // children become in-line (in a row)
       flex-direction: column;  // this is by default row, so we set it to column
       gap: 20px;  // adds spacing only BETWEEN the children
       padding: 30px;  // adds equal spacing along the inner sides of the parent div
    }
    

    justify-content: space-between; also works great in place of gap if you have a set height for the parent div.

    Here, I think it would also be helpful to add .sub1-4 in an intermediate div within .conte2 and apply the same properties as above without padding.

    Overall great job so far!

  • Hugo8814•250
    @Hugo8814
    Submitted over 2 years ago

    my solution

    2
    kasey•320
    @kaseyvee
    Posted about 2 years ago

    A super easy way to add some visual interactivity are to add hover or active states. Here, you could use:

    con:hover {
    background-color: red;
    }
    

    to change the color of the button on hover.

    :active adds properties on clicks.

    Overall awesome job so far!

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