Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
10
Comments
31

Deepak Parmar

@deepak-parmar490 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!

I’m currently learning...

exploring React

Latest solutions

  • Interactive Rating Component using Svelte

    #svelte

    Deepak Parmar•490
    Submitted over 3 years ago

    0 comments
  • Base Apparel Coming Soon (using Tailwind CSS)

    #tailwind-css#accessibility

    Deepak Parmar•490
    Submitted about 3 years ago

    0 comments
  • Order Summary Component (using Tailwind)

    #tailwind-css

    Deepak Parmar•490
    Submitted over 3 years ago

    1 comment
  • Four Card Feature Section using Flexbox (with Tailwind)

    #tailwind-css

    Deepak Parmar•490
    Submitted over 3 years ago

    0 comments
  • Advice Slip Generator (Tailwind x Next.js)

    #fetch#next#tailwind-css#react

    Deepak Parmar•490
    Submitted over 3 years ago

    0 comments
  • Profile Card Component (using Tailwind CSS)

    #tailwind-css

    Deepak Parmar•490
    Submitted over 3 years ago

    0 comments
View more solutions

Latest comments

  • Zaid Ansari•100
    @zaidansari42
    Submitted about 3 years ago

    QR code component

    #accessibility
    1
    Deepak Parmar•490
    @deepak-parmar
    Posted about 3 years ago

    @zaidansari42, for best practice I suggest...

    • You should use figure/figcaption tag for the image and the paragraph, caption tag is specifically used for table.
    <figure>
          image
          h1
          <figcaption>
               p
          </figcaption>
    </figure>
    

    This would improve accessibility and won't change the design. Hope this helps 👍

    Marked as helpful
  • Kohsey•40
    @KohseyPower
    Submitted about 3 years ago

    Achieved I think

    2
    Deepak Parmar•490
    @deepak-parmar
    Posted about 3 years ago

    @KohseyPower,

    You can apply multiple classes on an element by separating them with space like this, <div class="column Luxury"></div>, but you cannot add more than one class= attributes to an element like this <div class="column" class="Luxury"></div>

    Marked as helpful
  • Gaël•30
    @glg-dev
    Submitted about 3 years ago

    CSS Flexbox

    1
    Deepak Parmar•490
    @deepak-parmar
    Posted about 3 years ago

    @glg-dev, Nice work on the challenge, your design has no flaw at all.

    You've used radio input for rating buttons, which I find the best way to implement this component; so kudos to that. 👏

    • Your page reloads right after clicking the submit button and .thanks section is briefly visible before the page reloads. For that I suggest you use submit event-listener instead of click and prevent submission of the form by using preventDefault( ) method of event object and them call the submitForm( ) function
    submitButton.addEventListener("submit", (event) => {
        event.preventDefault();
        submitForm()
    }
    
    • Next, for accessibility of the component wrap .container and .thanks elements using main tag and .attribution element using footer

    Hope these helps, keep coding! 👍

    Marked as helpful
  • ArslanJ9•150
    @Arslanj9
    Submitted about 3 years ago

    Interactive rating component

    #sass/scss
    2
    Deepak Parmar•490
    @deepak-parmar
    Posted about 3 years ago

    @Arslanj9,

    • Your path to main.js is not working, remove / from the beginning of it. It should be just js/main.js or add . in front on it for best practice like this, ./js/main.js

    • Submitting a form reloads the page, so after clicking the submit button the page reloads and returns to its original states; to prevent that use submit event-listener

      submitBtn.addEventListener("submit", (event) => {
        event.preventDefault()
        btnClick()
      })
    

    event.preventDefault() will stop the submission process of the form.

    • For accessibility issue, wrap your header using main tag

    I hope this work out. keep coding 👍

    Marked as helpful
  • Nguyễn Huỳnh Anh•50
    @anhhuynh1506
    Submitted about 3 years ago

    Order Summary Component

    2
    Deepak Parmar•490
    @deepak-parmar
    Posted about 3 years ago

    @anhhuynh1506, Visually your work looks so great.

    You just have resolve some accessibility issues...

    • Document should have one main landmark: for this wrap your whole section element using main tag.
    • Page should contain a level-one heading: heading elements (h1-h6) should always be in order and should always start from the level-one heading h1. For your "Order Summary" heading use h1 instead of h2. You already have font-size property set for the heading, so you'll just have to make a few changes there.

    The design won't change a bit, but these changes will improve the accessibility of your component. Again nice work on the challenge. Keep coding! 👍

  • Lauris•170
    @lauriselvijs
    Submitted about 3 years ago

    Advice Generator App using React Query

    #react#tanstack-query#sass/scss#typescript#axios
    1
    Deepak Parmar•490
    @deepak-parmar
    Posted about 3 years ago

    @lauriselvijs, Your work looks amazing, nice work on theme switching!

    • The dice button and the divider becomes hard to spot in light mode. Applying filter: invert(1) to both will work just nicely.
    • and also add cursor: pointer to dice button and theme-switching button for better UI feedback.
    Marked as helpful
View more comments
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