Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
13
Comments
136
MikevPeeren
@MikevPeeren

All comments

  • Zofia Dobrowolska•90
    @zofiadob
    Submitted over 3 years ago

    Flexbox, CSS Gridm, JS

    1
    MikevPeeren•2,100
    @MikevPeeren
    Posted over 3 years ago

    Hey 👋

    Try not to add alt text to meaningless icons like the Facebook icon, a screenreader has no use for that.

    Also try to diversify your html elements, for example using headers and using lists for the different data.

    Other than that good job 👏

    Marked as helpful
  • Ali Radmanesh•60
    @AliRadmanesh
    Submitted over 3 years ago

    Solution for profile-card-component challenge (w/ flexbox)

    1
    MikevPeeren•2,100
    @MikevPeeren
    Posted over 3 years ago

    Hey 👋

    Good job 👏

    Try to keep in mind when using alts text if it adds any value to a screenreader for example the background images do not. In that case you can use alt="" as that would be better.

    Also as a improvement you could've used a ul list instead of divs for the footer section.

  • Ben Andrew Merritt•345
    @b-a-merritt
    Submitted over 3 years ago

    React.js with Hooks

    #react
    1
    MikevPeeren•2,100
    @MikevPeeren
    Posted over 3 years ago

    Hey 👋

    Looks good to me, the only thing I can think about is that you could perhaps have predefined arrays with key value pairs this way you can just select your element for example for the housselection like:

    Sethouse = Array[num]

    And perhaps it would be cleaner to have two states one for the name and image.

    Also useStates should always be ordered at the top so the function in between is a no go.

    I would also have maybe a custom hook for your localstoragd to handle that.

    But for the rest good job

    Marked as helpful
  • xcrisx•40
    @xxxcrisxxx
    Submitted over 3 years ago

    Social Proof Section Challenge

    #accessibility
    3
    MikevPeeren•2,100
    @MikevPeeren
    Posted over 3 years ago

    Hey 👋

    Good job finishing this one 👏

    My only comment would be to not skip headings as you are now going from h1 to h3 you should try to use h2 in that case.

  • xs30snw•110
    @xs30snw
    Submitted over 3 years ago

    Time Tracking Dashboard w/ Tailwind, Webpack, PostCSS and json-server

    #tailwind-css#webpack#sass/scss
    1
    MikevPeeren•2,100
    @MikevPeeren
    Posted over 3 years ago

    Hey 👋

    Try to make use of headers instead of using paragraphs for everything. Also try to add alt text to images that require it, if they don't require it use alt="".

    For your question I personally used buttons for the interactions but a list would also be fine imo.

    Marked as helpful
  • Bence•100
    @Telrodan
    Submitted over 3 years ago

    NFT Preview Card

    1
    MikevPeeren•2,100
    @MikevPeeren
    Posted over 3 years ago

    Hey 👋

    My only comment would be to add more descriptive alt txt for accessibility a d also to remove it for non saying images like the eye icon, for those your can use alt=""

  • TuringX•150
    @ajilamoses
    Submitted over 3 years ago

    Stats Preview Card

    2
    MikevPeeren•2,100
    @MikevPeeren
    Posted over 3 years ago

    Hey 👋

    For the overlay the color is now blueish you can use something like the following:

    ​background-color​: ​hsl​(​277​, ​64​%​, ​61​%​);​ ​ background-blend-mode​: ​multiply​;

    Marked as helpful
  • Diego Briones•20
    @yaakov04
    Submitted over 3 years ago

    Order summary card

    #bem#node
    1
    MikevPeeren•2,100
    @MikevPeeren
    Posted over 3 years ago

    Hey 👋

    Try to keep in mind when to add alt text to images and if it's of use for a sxreenreader. For example for these images it isn't. Also always start with h1 and go from there.

    Marked as helpful
  • Ahmed Eid•380
    @ahmeDeid67
    Submitted over 3 years ago

    NFT preview card component

    2
    MikevPeeren•2,100
    @MikevPeeren
    Posted over 3 years ago

    Hey 👋

    Good job finishing this one 👏

    The on hover for the nft image is wider than the image as the div surrounding it triggers it resulting in that div also having the bg color.

    Furthermore I am missing alt text for the nft as that is important data to have for a screenreader.

    Marked as helpful
  • Prashant Indurkar•40
    @PrashantIndurkar
    Submitted over 3 years ago

    Profile Card Component

    1
    MikevPeeren•2,100
    @MikevPeeren
    Posted over 3 years ago

    Hey 👋

    I am missing a bit of margin at the bottom so that it isn't clamped to the bottom of the div. Also the view code is linked to your profile so it's hard to find the repo.

  • Tarık•330
    @developertarik
    Submitted over 3 years ago

    Stats-preview-card-component

    2
    MikevPeeren•2,100
    @MikevPeeren
    Posted over 3 years ago

    Hey 👋

    Good job finishing this one 👏

    Try to add the font as is the same as the design it usually is written in the style guide. You can then import it as its described on Google fonts. https://fonts.google.com/

    I am also missing the overlay over the image you can do it as follows:

    ​  ​background-color​: ​hsl​(​277​, ​64​%​, ​61​%​); ​  ​background-blend-mode​: ​multiply​;

    This needs to happen in css tho where you load the image in css.

    Marked as helpful
  • ABDULLAHI JAMAL•220
    @Abdullahi-1998
    Submitted over 3 years ago

    Responsive testimonial grid layout

    1
    MikevPeeren•2,100
    @MikevPeeren
    Posted over 3 years ago

    Hey 👋

    Good job looks good on mobile.

    However try to start with header 1 and increment it rather than starting with a header 2. Also try to double check your code as you copied your alt text to multiple images.

    Marked as helpful
  • Anthony Rosman•510
    @D3press3dd
    Submitted over 3 years ago

    Nft Card Component Solution

    5
    MikevPeeren•2,100
    @MikevPeeren
    Posted over 3 years ago

    Hey 👋

    Good job finishing this one 👏

    My only comment would be to add more descriptive text for the nft as a screenreader would like to know what they are buying.

  • mohssine96•90
    @mohssineoussama
    Submitted over 3 years ago

    Stats preview card component solution using css flex

    1
    MikevPeeren•2,100
    @MikevPeeren
    Posted over 3 years ago

    Hey 👋

    Make sure to add alt text to images if the image does not add anything anything screenreaders just add alt="".

    For the rest good job 👏

  • francis Mudzungayiri•240
    @francismudzungayiri
    Submitted over 3 years ago

    Responsive article preview compont

    #accessibility
    2
    MikevPeeren•2,100
    @MikevPeeren
    Posted over 3 years ago

    Hey 👋

    On mobile the share modal is already open. Also I can't open your github url did you add it correctly ?

    Marked as helpful
  • MichalTrubini•1,220
    @MichalTrubini
    Submitted over 3 years ago

    vanilla js, SASS, BEM notation

    #sass/scss#bem
    3
    MikevPeeren•2,100
    @MikevPeeren
    Posted over 3 years ago

    Hey 👋

    Good job, my only comment would be to add a transition to the share modal so it appears nicely in view.

    Marked as helpful
  • Leandroooh•30
    @Leandroooh
    Submitted over 3 years ago

    Responsive Card Preview using FlexBox

    3
    MikevPeeren•2,100
    @MikevPeeren
    Posted over 3 years ago

    Hey 👋

    Good job 👏 I like the hover effect on your image.

    I am seeing a double quote in your html however before a alt text. Als the alt texts are not needed for the icons and for the nft I would add a more descriptive text.

    Marked as helpful
  • Aryan Sethi•360
    @Aryan-ki-codepanti
    Submitted over 3 years ago

    Responsive solution to Stats-Preview-card-component

    #vanilla-extract
    2
    MikevPeeren•2,100
    @MikevPeeren
    Posted over 3 years ago

    Hey 👋

    I can't really find anything other than maybe the image overlay being of a different color. Other than that great job 👏

    Marked as helpful
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

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