Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
3
Comments
12
Developer Matusala A.
@matusalab-dev

All comments

  • Ashraful Ferdous•180
    @Fariv
    Submitted almost 2 years ago

    Age calculator app

    #react#vite
    1
    Developer Matusala A.•170
    @matusalab-dev
    Posted almost 2 years ago

    Congrats, bro. for achieving this far. at the first, I don't think react class component is best practice in 2023, it deprecated feature of React. I recommend you to use React functional components. Take the validation logic, put it into a custom hook that would be reusable.

  • integeek•10
    @integeek
    Submitted about 2 years ago

    Result summary challenge with tailwindCSS

    #react#tailwind-css
    1
    Developer Matusala A.•170
    @matusalab-dev
    Posted about 2 years ago

    congrats for achieving this far. the problem with the image is that you didn't specify the right path at the src attribute of the img tag. get the relative path of the images from the assets folder

  • Chinaza•140
    @chinaza-Sommie
    Submitted over 2 years ago

    flexbox, media queries, teniary operator, useState, eventHandlers

    #animation#axios#bootstrap#react
    1
    Developer Matusala A.•170
    @matusalab-dev
    Posted over 2 years ago

    congrats on achieving this far, I found a bug on the [learn more] cta button when you hover on the button the text will disappear. make sure the text and background are having good color contrast

  • Momin Riyadh•370
    @momin-riyadh
    Submitted over 2 years ago

    Streamlining Design with a 3-Column Preview Card Component Solution

    #accessibility#bem#sass/scss
    1
    Developer Matusala A.•170
    @matusalab-dev
    Posted over 2 years ago

    congrats for achieving this far... I've got a couple of suggestions, let's start with the animation when the cards return to their original position the overlapping of the card's transition isn't smooth. you can make the animation using a CSS property z-index. because the z-index property is animatable. the other one is responsiveness, your app is not responsive. you can make it responsive with a CSS grid or simply just use the flex-box flex-direction property from row to column at an appropriate breakpoint.

  • Ralph Waldo Taylan•70
    @Taylan0125
    Submitted over 2 years ago

    Sunnyside landing page

    1
    Developer Matusala A.•170
    @matusalab-dev
    Posted over 2 years ago

    congrats on getting this far, I've some suggestions because your layout isn't responsive. and on your CSS file, I notice that you use flexbox. keep learning Flexbox then try to make it responsive using flex properties like flex-direction and flex-wrap to make them stack one on the other at a specific breakpoint. if you can try to use CSS Grid. If You can't it's okay, just using flex-box is fine for this landing page. I highly recommend you to read Zell's blog post to build the mobile navigation bar [https://zellwk.com/blog/js-in-dom/] and others of his blog post.

  • Antonio Russo•260
    @antoru
    Submitted over 2 years ago

    Four cards section with css grid and bem

    #accessibility#bem
    1
    Developer Matusala A.•170
    @matusalab-dev
    Posted over 2 years ago

    congrats on making it this far, it's hard to find bugs or improvements on your CSS file, but, there is an accessibility issue in HTML markup by not using semantic tags. like div for everything instead, you can use h2 for the title, p for the description, and write a description of the icon in the alt tag. thanks, I hope this will help improve your accessibility issue.

    Marked as helpful
  • Ignacio Figueroa•250
    @ignaciofigueroadev
    Submitted over 2 years ago

    3 Column preview card component (HTML, SASS, Flexbox)

    #sass/scss#bem
    2
    Developer Matusala A.•170
    @matusalab-dev
    Posted over 2 years ago

    congrats for making it this far, the only bug that I found is in the layout justify content center breaks the layout at some point( tablet mode). try to use media query then set the justify content to flex-start at that break point.

    Marked as helpful
  • LiKo•320
    @yoqedo
    Submitted over 2 years ago

    FAQ Accordion Basic JS

    #accessibility
    1
    Developer Matusala A.•170
    @matusalab-dev
    Posted over 2 years ago

    I think it's better to use details and summary semantic HTML tags for better accessibility.

  • Udoh Julie•200
    @Jey223
    Submitted over 2 years ago

    Tailwind, Vanilla

    #tailwind-css
    2
    Developer Matusala A.•170
    @matusalab-dev
    Posted over 2 years ago

    I didn't solve the challenge but from my perspective, refactor the toggle section by storing the color,background, and box-shadow because they're the same. in case you want to change the value of these properties, you have to go through each individual manually. they're not reusable. the second one is the array of buttons, you don't have to set the index explicitly you can use a loop. that's it. I hope this'll help you to refactor your code.

    Marked as helpful
  • Renzorr•870
    @Renzorr
    Submitted over 2 years ago

    Single-page design portfolio (HTML + SCSS + JS + GSAP)

    #animation#bem
    1
    Developer Matusala A.•170
    @matusalab-dev
    Posted over 2 years ago

    the design and the solution aren't the same.

  • 𝗸𝗵𝗮𝗹𝗶𝘀𝗵𝗮. ♡•120
    @stkhalisha
    Submitted over 2 years ago

    NFT Preview Card Component Solution

    #accessibility
    1
    Developer Matusala A.•170
    @matusalab-dev
    Posted over 2 years ago

    it's hard to find an issue in your code. your code is readable and semantic. the only thing that I try to avoid is the overflow property.

    Marked as helpful
  • akhrib abderahmane•290
    @akhribabderahmane
    Submitted over 2 years ago

    - Very dark blue: hsl(212, 21%, 14%) - Dark grayish blue: hsl(228, 12%

    1
    Developer Matusala A.•170
    @matusalab-dev
    Posted over 2 years ago

    let's start from the semantic part: I recommend you to use a section other regioning / sectioning semantic HTML to your container, a heading tag for your "perfume name", "p" tag is perfect for description, I think using a "p" tag for the price numbers rather "span" that are non-descriptive. the other is a layout problem the container is not perfectly centered. the right section doesn't have enough space as the design, giving both the same width will help to fix. last one, stop using the position property for this layout it's overkill instead use the flexbox alignment property. and try to determine the height of container by the content of the items.hope, this will help you to improve.

    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