Skip to content
OverviewSolutions
28
Comments
37

Ahmed Ali

@qayoommunawarBahria Town Lahore, Pakistan550 points

Currently working on something..... CSS is my love.

I’m currently learning...

JavaScript, Tailwind CSS

Latest solutions

View more solutions

Latest comments

  • Ahmed Ali•550
    @qayoommunawar

    Great job, your code is amazing. here are some style suggestions to make the design more responsive and optimized.

    • adopt a mobile-first design approach. it will really decrease use of media query for responsiveness.

    • in that case you don't need to use three different media queries to give padding to the container. all you have to do is just to use only one media query for larger screen and giving it a max-width.

    Keep designing, best of luck.

    Marked as helpful
  • Jennifer Phan•50
    @jenphan
    What are you most proud of, and what would you do differently next time?

    I am most proud of my use of JavaScript for the accordion functionality. I was able to get the plus and minus icons to toggle correctly and use the ARIA attributes for aria-expanded and aria-control.

    What challenges did you encounter, and how did you overcome them?

    A challenge of mine was getting the footer to stick to the bottom of the page. I realized that I had been adding a vertical margin to FAQ rather than setting it to auto.

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

    I would like to continue using more efficient and effective CSS and JavaScript methods.

    FAQ Accordion with Semantic HTML and Vanilla JavaScript

    #semantic-ui#van-js
    1
    Ahmed Ali•550
    @qayoommunawar

    you have given a nice try to the challenge. here is the best practices if you want to make it more interactive.

    • wrap the main heading and plus icon of question in a div, add click listener to the whole dive, when user click anywhere on the question the answer should be revealed. you already did that awsome.

    • instead of applying display: none to the answers try this: hidden{ max-height: 0; opacity: 0}

    • for good animation effect on answers to show up, create a class of .active like this:

     .active{
         width: 100%;
         height: 200px;
         opacity: 1;
         transition: 0.2s ease-in-out;
 }

    It will generate a nice animation effect while you toggle it on answers to be shown, moreover you can review my solution any other's on frontendmentors to take inspiration it would help. keep designing, best of luck.

  • Ahmed Ali•550
    @qayoommunawar

    you have given a nice try to the challenge. here is the best practices if you want to make it more interactive.

    • wrap the main heading and plus icon of question in a div, add click listener to the whole dive, when user click anywhere on the question the answer should be revealed.

    • instead of applying display: none to the answers try this: hidden{ max-height: 0; opacity: 0}

    • for good animation effect on answers to show up, create a class of .active like this:

             width: 100%;
         height: 200px;
         opacity: 1;
         transition: 0.2s ease-in-out;

    It will generate a nice animation effect, moreover you can review my solution any other's on frontendmentors to take inspiration it would help. keep designing, best of luck.

  • Akiz-Ivanov•410
    @Akiz-Ivanov
    What are you most proud of, and what would you do differently next time?

    I'm proud that I took on this challenge using a modern tech stack — TypeScript, React, Tailwind CSS, Shadcn/UI, Zod, and React Hook Form. It was a great opportunity to solidify how these tools work together in a real-world project.

    What challenges did you encounter, and how did you overcome them?

    The biggest challenge was replicating the transparent shadow behind the cards, which I ended up solving using an absolutely positioned div behind the card elements. It took a bit of trial and error to get it looking right.

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

    I'd love feedback on the transparent shadow effect — is there a more effective or semantic way to achieve that look without resorting to an absolutely positioned div? If anyone has suggestions or alternative approaches, I'd be glad to hear them.

    Intro-component-with-signup-form with TS, React, Tailwind, Shadcn, Zod

    #shadcn#tailwind-css#typescript#zod#react-hook-form
    1
    Ahmed Ali•550
    @qayoommunawar

    Hi hope you are doing well, your design is doing well. For transparent shadows you can play along with box shadows changing the hsla value of red color. Give it a try. Thank you, keep designing best of luck..

  • P
    hackz101•90
    @hackz101
    What are you most proud of, and what would you do differently next time?

    I'm most proud of the fact that I was able to get the javascript out of the way relatively quickly. However, next time I would try to take into consideration how parent/child heights affect layouts.

    What challenges did you encounter, and how did you overcome them?

    I came across quite a few challenges when going through this challenge, but I will summarize a few:

    • When editing innerHTML, the parent element gets destroyed then recreated. This was causing my event listeners to disappear. I just ended up using insertAdjacentHTML instead.
    • My headings weren't focusable, so I just had to add a positive tabIndex to them.
    • My expand button would only work once. I had to set the variable that evaluates whether the section was expanded or not to within the event listener which was the closure function. This is because only the value was retained and it wouldn't reevaluate.
    What specific areas of your project would you like help with?

    I noticed that since I have a high resolution screen and I'm working fullscreen, the SVG would just cut off around the 75% mark. I ended up making it tile on the x-axis because I didn't want to stretch the image. Is this way to resolve the issue fine or is there a better way?

    Responsive FAQ Accordion Using Javascript

    2
    Ahmed Ali•550
    @qayoommunawar

    hi dude, hope you are doing well, i go through your code and really impressed by your js knowledge, anyhow you made things complicated in exploring your experience. here is my take to make interactive and optimized.

    • you can apply display: none; to your response. while you have to hard code your response rather than adding them through js.

    • simply wrap display: none into class, you can toggle it by classList.toggle('hidden') on each response by simply iterating through them.

    hope you will get the easy and efficient method i'm talking about. keep designing wish you best of luck.

    Marked as helpful
  • Ahmed Ali•550
    @qayoommunawar

    Responsiveness needs attention, and there is some sort of disruption in success message showing two types of message ????

View more comments