Skip to content
OverviewSolutions
22
Comments
14
Tomi
@Tomi-pter

All comments

  • Tomi•565
    @Tomi-pterPosted over 2 years ago

    Hi Danilo, a suggestion:

    • As @denielden pointed out to me, to use the name as the href parameter you have to parse it to string url. Refer to this article on URL parsing for more info.

    Hope this helps 👍🏾

    1
  • Luka•820
    @LukaKobaidzeSubmitted almost 3 years ago

    I added 'settings' button on the bottom left corner, from there you can change game mode. Also, a score and game mode is saved in local storage.

    If you have any suggestions, let me know

    Rock Paper Scissors | React, TypeScript, SCSS

    2
    Tomi•565
    @Tomi-pterPosted almost 3 years ago

    Hi, I absolutely love your solution. It looks excellent 👏🏾. It has inspired me to improve my own solution. Kudos 👍🏾

    0
  • Tomi•565
    @Tomi-pterPosted almost 3 years ago

    I'll suggest the following resources for responsive images.

    1. Freecodecamp's article on image responsiveness
    2. MDN's article on images for different screen sizes.

    Hope this helps 👍🏾

    Marked as helpful
    1
  • Ediongsenyene Joseph I.•1,675
    @IEdiongSubmitted almost 3 years ago

    Hello Frontender 🌟😎, I used this particular challenge to teach someone how to go about using this platform to practice frontend development.

    What do you think about the hover state of the Sign Up call-to-action on desktop? You can suggest any nice animation for the hover state.

    Shalom!!

    Responsive Single Price Grid Using Flexbox

    2
    Tomi•565
    @Tomi-pterPosted almost 3 years ago

    Nice hover animation 👍🏾

    1
  • Tomi•565
    @Tomi-pterPosted almost 3 years ago

    Looks very good. I suggest you look into the accessibility issues highlighted in your solution report 👍🏾

    0
  • Tomi•565
    @Tomi-pterPosted almost 3 years ago

    I noticed you didn't apply the validation process the challenge required. if you're having trouble with client-side validation refer to this mdn article on client-side validation or this mdn article on constraint validation for help.

    Hope this helps 👍🏾

    1
  • Tomi•565
    @Tomi-pterPosted almost 3 years ago

    I'll suggest you should add transform: scaleY(0) and transition: transform 250ms ease-in-out to the details p selector and transform: scaleY(1) to the details[open] p selector to create a drop down animation and smoothing the opening. And also check out your solution report for accessibility issues.

    Hope this helps 👍🏾

    1
  • Tomi•565
    @Tomi-pterPosted almost 3 years ago
    1. Consider reducing your media query condition to around 900px-1050px and decreasing the size of the elements on the page.
    2. Also check out your solution report for the accessibility issue generated
    Marked as helpful
    0
  • Tomi•565
    @Tomi-pterPosted almost 3 years ago

    Looks good. You forgot to add the hover states for the buttons and the toggle button.

    As for making the toggle button work with the keyboard I used the onkeyup event listener and e.key === 'Enter' to enable that functionality.

    Hope this helps 👍🏾

    Marked as helpful
    1
  • Tomi•565
    @Tomi-pterPosted almost 3 years ago

    Really nice solution. Some suggestions:

    1. I noticed your media query condition starts at 1270px. Maybe between 850px and 1269px you could make it into a 2 column design as there's a lot of real estate being unused and make it into something of a tablet layout.
    2. In your grid-template-rows styling on .main you forgot to add a comma in the repeat function.

    Hope this helps 👍🏾

    0
  • Victor•510
    @therealmaduanusiSubmitted almost 3 years ago

    ClipBoard Landing page. Any feedback would be great THANKS.

    HTML and CSS

    2
    Tomi•565
    @Tomi-pterPosted almost 3 years ago

    Looks okay, but some few corrections I'd suggest:

    1. for the hover states of the social icons, I suggest you use the filter function to change the actual color of the icons. Check out this article on svg filter for more help
    2. In the mobile view, you should add some inline padding to the sections to give them some space from the edges.
    3. Check out your solution report for accessibility and html issues.

    Hope this helps 👍🏾

    0
  • BADHRI KESAVA RAJA S M•515
    @BadhrikrSubmitted almost 3 years ago

    Any kind of feedback is useful 🤗.This is my first attempt in creating a landing page 😅. Can anyone suggest me on how to create a perfect hover effect on svg.

    HTML,CSS,VS CODE

    2
    Tomi•565
    @Tomi-pterPosted almost 3 years ago

    Notable points

    1. You need to decrease the min-width on the media query from 1400px as it is larger than the average desktop size
    2. For the desktop view you'll need to decrease the size of the images so they can fit the cards with the text
    3. Reduce the inline (left and right) padding set on the text beside the images
    4. Add some opacity on the box shadow of the cards as they're too dark
    5. Add box shadow to the card that contains the button above the footer
    6. For the hover effect on the svg, use the "filter" function for that. Refer to https://css-tricks.com/almanac/properties/f/filter/ for more help
    7. Also check out the html issues highlighted in your solution report.

    I hope this helps 👍🏾

    Marked as helpful
    0