Skip to content
OverviewSolutions
10
Comments
6
kasey
@kaseyvee

All comments

  • kasey•320
    @kaseyveePosted over 1 year 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
    1
  • Fahim Shakeel•20
    @Eclipse175Submitted over 1 year ago

    I just tried a challenge, im not sure how well i did but any feedback is appreciated!

    WEB 3.0 BLOG SITE

    1
    kasey•320
    @kaseyveePosted over 1 year 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!

    0
  • Kure-ru•120
    @Kure-ruSubmitted over 1 year ago

    Hi there! 👋

    I had a lot of fun doing this challenge, however I cannot figure out why the hover effect doesn't work on my button.

    I would be very grateful if you had any insight about this problem.

    Thanks

    Results summary component 【 React & TypeScript 】

    2
    kasey•320
    @kaseyveePosted over 1 year 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
    0
  • Mirm•80
    @Missteeme31Submitted over 1 year ago

    I challenged myself by collecting the data from the JSON provided rather than hardcoding it. It was hard but I learned a lot. I'm also still having issues with media queries, but I'm getting better at it. All constructive feedback is appreciated!

    Results Summary Component

    1
    kasey•320
    @kaseyveePosted over 1 year 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
    0
  • kasey•320
    @kaseyveePosted over 1 year 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!

    0
  • kasey•320
    @kaseyveePosted over 1 year 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!

    0