Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
26
Comments
29
Jax Teller
@piushbhandari

All comments

  • P
    Glenda Joyce Reed•1,410
    @Glenda9031
    Submitted over 1 year ago

    Faq_Accordion_Main

    1
    Jax Teller•670
    @piushbhandari
    Posted over 1 year ago

    i had a rough look at your JS and styles.

    make sure to:

    1. display:none; to your .accordion-text element to hide it when the accordion is not opened.
    2. in your JS, the class that's being added to the accordion button isn't doing anything. when checking if the element has .title__click, add .title__click to the button AND to the .accordion-text. in your css make sure to have this .title__click{display: block;} this is so that when the class gets added to both elements you'll be showing the .accordion-text element too. then when you click again you can use JS to remove .title__click

    BTW:

    • you can remove the input:checkbox and label. convert the label to a button instead, so <label for="section1" class="accordion__label title__click" id="title"> will be <button type="button" class="accordion__label title__click" id="title">
    • instead of having the svg +/- icons as an :after element, just put them into their own <img/> element instead inside the <button> element when you convert it from your label. use css to hide the - icon. when you attach the .title__click class to your button element use css to show the - icon and hide the + icon. then do the opposite when the .title__click class gets removed. right now when i click on your accordion buttons the + disappears and no - icon.
    • for you background image pattern, you can leave the alt attribute as alt="" since this is for decorative purposes only. i would also set the image to be width: 100%; so that when you zoom out your layout doesn't look cropped out

    hope this helps

    Marked as helpful
  • Sebastian•290
    @SebBudynski
    Submitted over 1 year ago

    Accordion flexbox JS

    4
    Jax Teller•670
    @piushbhandari
    Posted over 1 year ago
    • use .questions:last-child{} to remove the border + bottom margin/padding from the last question
    • any reason why <div class="question"> isn't a button element? right now i can't use your component with my keyboard. using semantic elements is always a good thing. there are more accessible things you can do but replacing it with a button element is a good start
    • assign classes instead of setting inline styles. i.e add active to the answer and give it display:flex;
    • if this <div class="title"> is being used as your main title replace the the div with <h1>
    Marked as helpful
  • P
    Daniel 🛸•44,810
    @danielmrz-dev
    Submitted over 1 year ago

    Age Calculator - SASS and (a lot of) JavaScript 😅

    #accessibility#sass/scss#tailwind-css#lighthouse
    5
    Jax Teller•670
    @piushbhandari
    Posted over 1 year ago

    nice work.

    some suggestions:

    • i would make these <h2 class="text-day" style="color: rgb(113, 111, 111); transition: all 0.2s ease 0s;">Day</h2> into a label and hook it up to the number inputs. like so: <label for="day" class="text-day" style="color: rgb(113, 111, 111); transition: all 0.2s ease 0s;">Day</label> then add in name/id attributes that have the same value as the for attribute to the input. this way when you click on the label it auto focuses on the input. this is good for accessibility

    • your .text-day element has an inline style. is there a reason why it's not in a separate stylesheet?

    • it's best practice + good for accessibility if you add type="button" on your button elements

    • you can set the alt tag from the icon inside the button to be empty "" as it's useless information for screen reader users. when you have icons, having alt="" is good enough as it's being used as a decorative image

    • im not sure if there's a tablet design, but when you start to scale the design, the component starts hugging the edges of the screen. i would add side paddings ie. padding-left: 24px; padding-right: 24px; on the body element for example.

    • may need a 2nd opinion on this but those years/months/days text can just be regular <p> tags instead of <h2>s

  • ife-codes•90
    @ife-codes
    Submitted over 1 year ago

    css flexbox and Javascript validation

    #sass/scss
    1
    Jax Teller•670
    @piushbhandari
    Posted over 1 year ago

    form validation needs to be stronger. i was able to get to the next screen with this: ggggsdff@com (no '.' after the @)

    by the way, i wouldn't use cursor: pointer; for the input and instead use the default style on browsers

    Marked as helpful
  • Dipesh•130
    @ddkogit
    Submitted over 1 year ago

    FAQ Page using html and css with js

    2
    Jax Teller•670
    @piushbhandari
    Posted over 1 year ago
    • toggling class to show/hide content via javascript is a good approach and you'll see this as being best practice.

    • BTW, when i zoom out on your page, your layout gets messed up. i would change your styles on your body element to background-repeat: repeat-x; background-size: contain;. FYI, i would have the background image as a separate element

    • i would change <div class="question"> to <button type="button" class="question">. it's good to use semantic markup + as it stands right now your component is not accessible via keyboard and that's a no no. likely will need to update styles

    Marked as helpful
  • Obi Faith•210
    @ObiFaith
    Submitted over 1 year ago

    Newsletter

    1
    Jax Teller•670
    @piushbhandari
    Posted over 1 year ago
    • i would avoid using cursor: pointer; for inputs and instead use the browser default
    • you have a label but it's not hooked up to your email input. since your for attribute on your label is 'email' i would add attributes id="email" name="email". this is for accessibility. when you click on a label, it should then focus on the input it's associated to
    • you have a second label that i think you can just use the <p> element instead
    • right now, after entering a valid email, when i tried to submit your page leads to a 404 page. it looks like you're submitting the form with no url. i would either remove the outer form or use javascript to prevent the form submitting and instead you controlling what it does via code.

    let me know if you need help with the last one. essentially what i did in my markup was attach this onsubmit="return false;" to my form element which blocks the form from doing its native action

    Marked as helpful
  • GiovanniPereira05•70
    @GiovanniPereira05
    Submitted over 1 year ago

    3 column preview card component main html css

    4
    Jax Teller•670
    @piushbhandari
    Posted over 1 year ago

    for border-radius, you can set it like this: border-radius: 10px 11px 12px 13px; top left, top right, bottom right, bottom left in that order

    FYI: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

    so in your code for mobile, you can set the first card to be, for example, border-radius: 5px 5px 0 0;, border-radius: 0; for the middle one, then border-radius: 0 0 5px 5px for the last one

    Marked as helpful
  • Ayoub EL Bouasri•90
    @AyouubElb
    Submitted over 1 year ago

    Responsive Newsletter Signup with Html Css & JS

    1
    Jax Teller•670
    @piushbhandari
    Posted over 1 year ago
    • the form accepts my email before i can even finish it. it auto accepts instead of me clicking the submit button

    • the dismiss button doesn't work. i would assume this would just take you to the first screen

  • Luis De Freites•180
    @luismadf
    Submitted over 1 year ago

    FAQ accordion

    #react#vite#bem
    1
    Jax Teller•670
    @piushbhandari
    Posted over 1 year ago

    you should look into changing your markup to be more semantic. for example <div class="accordion-item__title"><h3>How can I get help if I'm stuck on a challenge?</h3><img src="/assets/icon-plus.svg" alt="toggle view button"></div> can be converted to <button type="button" class="accordion-item__title"><h3>How can I get help if I'm stuck on a challenge?</h3><img src="/assets/icon-plus.svg" alt="toggle view button"></button> then adjust your styles.

    the reason why is because right now your component is not accessible - it's not reachable for keyboard users. add hover/focus states too

    also change your max-height to be 100%. take a look what happens on mobile when there's more text than what you have currently. (it overflows)

  • Fluffyboiiiiii•50
    @Fluffyboiiiiii
    Submitted over 1 year ago

    Blog Card, using Flexbox

    1
    Jax Teller•670
    @piushbhandari
    Posted over 1 year ago

    surround your h3 into a link like so: <a href="#"><h3>HTML &amp; CSS Foundations</h3></a> likely will need to do style updates. no JS required

    this way the title is focusable. if this was on a real web page, this should also be taking you to a different page hence the link.

    if you want the box shadow to increase on hover/focus, play with the property on dev tools to get what you want. not sure if i would go this route because this would assume that the whole card would be surrounded with an <a></a> element, and that's bad for screen reader users. but i suppose if you just want a hovering effect, you can do something like .card:hover { box-shadow: 17px 17px black;} then of course add a transition to it to make it smooth on hover

  • Loretta•50
    @lucky-lore
    Submitted over 1 year ago

    [NextJS, Tailwind CSS] - Order Summary Component

    #next#react#tailwind-css
    2
    Jax Teller•670
    @piushbhandari
    Posted over 1 year ago
    • for that wavy pattern, i would suggest that instead of having background-repeat: no-repeat, change it to background-repeat: repeat-x;. this is because the pattern looks awkward when you scale your component to screen widths larger than 1440px

    • the proceed to payment and cancel order need to be converted to more semantic elements i.e <button> or <a> because presumably, depending on the need of this on a web page, these are going to be doing something

    • for all interactive elements, make sure to have hover/focus states to indicate that these can be interacted with

    • i would suggest adding side paddings on your main/body element so that your component isn't hugging the edges.

    • add an alt attribute to your image

    Marked as helpful
  • KonradK•470
    @KKonsur
    Submitted over 1 year ago

    Newsletter signup form

    #sass/scss#react
    1
    Jax Teller•670
    @piushbhandari
    Posted over 1 year ago

    i would make the form validation stronger.

    when testing i was able to get to the next screen with fxccxvxc@gasd which is obviously not formatted right for an email

    Marked as helpful
  • Serah Nderi•450
    @MundiaNderi
    Submitted over 1 year ago

    HTML3, Tailwind CSS

    1
    Jax Teller•670
    @piushbhandari
    Posted over 1 year ago
    • the background image (the wavy pattern) gets messed up above 1440px screen width. i would suggest changing your styles for .card to be background-repeat: repeat-x; instead of no-repeat

    • add an alt attribute to your img element

    • cancel order shouldn't just be a text. presumably on a web page this would be an anchor/button element with hover/focus states

    • i would apply the div styles to the proceed to payment link. observe what happens when the link is focused/hovered on. likely the surrounding div can then be removed

    Marked as helpful
  • Tim Avidon•300
    @timavidon
    Submitted over 1 year ago

    Social proof section w/ (HTML + CSS)

    #accessibility
    1
    Jax Teller•670
    @piushbhandari
    Posted over 1 year ago

    nice work.

    just one small change: i would make my markup more accessible for screen reader users.

    i would change your testimonials into a list like so <section class="feedbacks"> to <ul class="feedbacks"></ul> and then <blockquote class="user"> to <li class="user"></li>

    would likely need some small styling changes.

    Marked as helpful
  • AmroGFarghali•50
    @AmroGFarghali
    Submitted over 1 year ago

    faq-accordion

    2
    Jax Teller•670
    @piushbhandari
    Posted over 1 year ago

    i looked through your script and the reason why you have to click twice to get the accordions to open is because of your if statement.

    the reason it's not working is because your script is checking if the element has an INLINE style attribute of display: none. it doesn't check if the element has that style in your stylesheet.

    i would change your markup/styles/scripts to instead write class names i.e active and give the active class display: block. then in your if condition you can check if the element has the 'active' class. if it has the class, remove the active class, but if it doesn't then add the 'active' class.

    i did this in my project, you can look at my code here as an example of what i wrote above: https://github.com/piushbhandari/faqaccordion/blob/main/script.js

    let me know if you have any questions

    Marked as helpful
  • AmroGFarghali•50
    @AmroGFarghali
    Submitted over 1 year ago

    faq-accordion

    2
    Jax Teller•670
    @piushbhandari
    Posted over 1 year ago
    • either use an <img/> for the pattern bg or a separate element inside the body tag for the pattern bg and set it via background-image. then set width: 100%; and make sure to set the height to what you see on the graphics. the reason i say this is because your whole layout gets ruined once you start going above the 1440px screen width

    • set cursor: pointer; to the button styles so that it's made clear those are buttons. then make sure to set hover/focus states to indicate that these are interactable

    • to improve on accessibility, you can add html attributes aria-expanded="true/false" on buttons and aria-hidden="true/false" for content depending on if the accordion is opened. this is for screen reader users so they'll have a better time interacting with your component

    hope this helps

    Marked as helpful
  • AkshayDev•10
    @Akshoo
    Submitted over 1 year ago

    Responsive Card using basic CSS

    2
    Jax Teller•670
    @piushbhandari
    Posted over 1 year ago

    i would stay away from centering this with position absolute and instead use display:flex, align-items: center; justify-content: center; min-height: 100vh; on the body element.

    also, you'll see this component on a lot of web pages, so presumably it's going to link somewhere. since the title is hoverable/focusable, i would surround the h2 element in a link <a href="#"><h2>HTML & CSS foundations</h2></a>

    also i would change the <h5> tag to just a <p> element. when creating your markup, your heading tags need to be structured.

    Marked as helpful
  • Cheosphere•1,040
    @Cheosphere
    Submitted over 1 year ago

    FAQ accordion (HTML | CSS | Vue JS Composition API + Vite )

    #vue#vite
    10
    Jax Teller•670
    @piushbhandari
    Posted over 1 year ago

    had a quick look at your markup:

    • i would change .faqs-header to a button instead of a div for semantic/accessibility reasons. additionally you can look into adding attributes aria-hidden for accordion content and aria-expanded for accordion buttons so screen readers will announce these.
    • h3 to h2 since you have h3 right after h1
    • because the accordion buttons are not actual <button> elements, your component is not accessible for keyboard users. hope this helps
    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