Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
54
Comments
4

abizmo

@abizmo990 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Browser extension manager ui with Astro

    #astro#preact

    abizmo•990
    Submitted about 2 months ago

    0 comments
  • Conference ticket generator

    #astro#preact#zod

    abizmo•990
    Submitted about 2 months ago

    0 comments
  • Mortgage repayment calculator with React

    #react#tailwind-css#vite#shadcn

    abizmo•990
    Submitted 3 months ago

    1 comment
  • Crowdfundig product page with react, tailwindcss and shadcn

    #react#shadcn#tailwind-css#zod#react-hook-form

    abizmo•990
    Submitted 3 months ago

    0 comments
  • Ecommerce product page with AstroJs

    #astro#react#bem

    abizmo•990
    Submitted 4 months ago

    0 comments
  • Coding bootcamp testimonials slider with Astro

    #astro#bem

    abizmo•990
    Submitted 5 months ago

    0 comments
View more solutions

Latest comments

  • wait4ndbleed•140
    @wait4ndbleed
    Submitted almost 2 years ago

    Responsive landing page using CSS Grid Flexbox React

    #next#react#tailwind-css
    1
    abizmo•990
    @abizmo
    Posted 5 months ago

    Overall, the structure is solid, and the code is clean and readable. Main areas to improve:

    • Enhance accessibility (better alt texts, focus states, and ARIA attributes).
    • Improve image responsiveness for larger screens.
    • Refine mobile menu behavior to ensure it works seamlessly.
  • samsimsan•50
    @samsimsan
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I wasn't really happy with the default UI in the challenge, So searched through pinterest for ideas and completed this challenge.

    Main thing I wanted to showcase here was the ability to use Zod for form validation.

    Contact form with a new ui!

    #react#typescript#zod#tailwind-css
    1
    abizmo•990
    @abizmo
    Posted 5 months ago
    • Check responsiveness on smaller screens—ensure margins and padding adjust well for readability.
    • Consider adding client-side validation and error messages for better user experience and accessibility.
    • Consider adding 'aria-label' or 'title' attributes to buttons for screen reader users who may need additional context.
  • Kauê Lima•290
    @KaueACLima
    Submitted over 1 year ago

    FAQ Accordion

    #accessibility#angular-material#astro#bootstrap#chart-js
    1
    abizmo•990
    @abizmo
    Posted 5 months ago

    Great use of HTML structure, responsive design, and semantic elements! Improvements to make it even better:

    • Enhance accessibility with aria-expanded, aria-hidden, and keyboard navigation.
    • Use <h2> instead of <button> for the question titles:
    <h2>
      <button class="accordion-btn" aria-expanded="false" aria-controls="answer-1">
        O que é Frontend Mentor e como ele me ajudará?
      </button>
    </h2>
    
    • The answer <div> should have aria-hidden="true" by default and be toggled when expanded.
    • Fix duplicate id (accordion-btn) attributes for the accordion buttons.
  • Robbie Tambunting•150
    @rtambunt
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I tried to focus on small accessibility improvements in this project:

    • Writing descriptive, concise alt tags
    • Semantic HTML

    There weren't many optimizations for a small project like this, but it was a good first exposure to accessibility

    What specific areas of your project would you like help with?

    I'm vaguely familiar with aria-labels. When exactly should I use them and how?

    Interactive Rating Component | React ⚛️ + Tailwind

    #react#tailwind-css
    1
    abizmo•990
    @abizmo
    Posted 5 months ago

    You're very close to a polished, high-quality solution! The main areas for improvement are:

    • Semantic improvements: Replace <div> rating buttons with <button>.
    • Accessibility: Add aria-labels and improve focus styles.

    You should use aria-label when an element's purpose or function isn't clear to screen readers based on its text content or structure. Examples:

    • When an Icon Represents an Action
    • When the Visible Text is Not Descriptive
    • When There’s No Visible Text
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