Skip to content
OverviewSolutions
8
Comments
17
Abhineet Kandele
@abhineetkandele

All comments

  • Mohammad Kaif Ul Majed•20
    @KaifUlMajedSubmitted over 3 years ago

    Very annoying challenge with the pixel pushing of getting images and background to line up with each other. Surely there are better ways of arranging various images within a div to paint a picture rather than using position: absolute and experimenting with various margins and paddings?

    FAQ Accordion with lots of pixel pushing

    2
    Abhineet Kandele•320
    @abhineetkandelePosted over 3 years ago

    Great Job!!

    Few suggestions from my end.

    • Font can be imported directly inside the CSS file.
    • Try building this without using JS. Use details & summary HTML tags for accordion and picture tag for different images in different breakpoints. It would be fun.
    0
  • Anas Daoud•105
    @DaoudAnas13Submitted over 3 years ago

    I tried using only CSS in this one without JS .. all in all, it's an acceptable outcome but with minor issues that i hope to fix with your help

    1 - Weird automatic scroll to the bottom of the page when clicking on the question ( tried preventDefault with JS didn't work )

    2 - Background image moving when resizing the screen

    3 - The image is also moving

    If you find any other problem to mention or tips to give please let me know :D

    Responsive FAQ accordion card using Pure CSS

    1
    Abhineet Kandele•320
    @abhineetkandelePosted over 3 years ago

    Nicely done!!

    Few comments from my end.

    • Background image is covering a lot of area even on desktop view.
    • When clicking a question, the whole card is sticking to the top of the page.
    • Font can be imported directly inside the CSS file.
    • And I would definitely recommend checking the accessibility issues in the report.

    You could check out my solution using the below link. https://github.com/abhineetkandele/Frontend-Mentor-FAQ-Accordion-Card

    It's not very great but I hope it may help.

    In case, you feel something can be improved. Please do let me know.

    1
  • Abhineet Kandele•320
    @abhineetkandelePosted over 3 years ago

    Nicely done!!

    I would definitely recommend checking out the accessibility issues in the report.

    Marked as helpful
    0
  • Thibault•205
    @thibault-barratSubmitted over 3 years ago

    Hi,

    This challenge was quite fun :) Any feedback would be appreciated

    Thanks

    Animated FAQ accordion

    3
    Abhineet Kandele•320
    @abhineetkandelePosted over 3 years ago

    Great Job!!

    Try building this without using JS. Use details & summary HTML tags for accordion and picture tag for different images in different breakpoints.

    0
  • Art•420
    @Art-wdtSubmitted over 3 years ago

    Hello everyone, this updated version. Thanks for all your previous advice. I tried to take into account most of it. These are my first steps in JavaScript and jQuery.

    I would be glad to any advice :) Any suggestions you might have! Any comments!

    Any feedback will be appreciated by me

    FAQ Accordion with jQuery, FlexBox

    1
    Abhineet Kandele•320
    @abhineetkandelePosted over 3 years ago

    Great Job!!

    Few suggestions from my end.

    • Try to make UI look as much as possible close to the designs, it would be fun. = Arrows are hanging outside in Desktop view. And are sticking to the text in mobile view. Try checking both the issues. = Also, try adding a background image to the mobile image as well. = using linear-gradient in background

    • Font can be imported directly inside the CSS file.

    • Try building this without using JS. Use details & summary HTML tags for accordion and picture tag for different images in different breakpoints.

    • Also, try to make the accessibility issues in the report to zero.

    Marked as helpful
    2
  • Riyana Gueco•495
    @rnguecoSubmitted over 3 years ago

    This was made using only HTML and CSS. The downside of this approach is that I wasn't able to implement the <detail> transition from expanded to collapsed, as there's probably no pure-CSS solution to that problem. Feedback on any part of my code is appreciated!

    FAQ accordion challenge using only HTML and CSS

    2
    Abhineet Kandele•320
    @abhineetkandelePosted over 3 years ago

    Superb Job!!

    Using all the latest HTML tags & building a accordion using only HTML & CSS. 🙌🙌

    1
  • Abhineet Kandele•320
    @abhineetkandelePosted over 3 years ago

    Great solution!!

    Few things I would suggest.

    • I feel you could spend a little more time on responsiveness.
    • Try using CSS variables.
    • And definitely, you could look at the accessibility issues in the report.
    Marked as helpful
    0
  • Abhineet Kandele•320
    @abhineetkandelePosted over 3 years ago

    Great Job!! The solution looks pretty good.

    Few things I would suggest.

    • Attribution CSS could also be moved to the CSS file.
    • Try naming your CSS variables to something like color-primary, color-secondary, etc.
    Marked as helpful
    0
  • Mohamad Ghadieh•50
    @mghadiehSubmitted over 3 years ago

    It all went well, but at the end I noticed the card wasn't centred in the desktop version, so I had to add margin-top and margin-left with trail and error to make it centred. There is probably a better way to do this but I am unaware of it. Also, my mobile version is too long, you can scroll up and down. Is there away to limit the height without scrolling?

    Mobile First - Stats Preview Card (HTML/CSS3)

    2
    Abhineet Kandele•320
    @abhineetkandelePosted over 3 years ago

    Great Job!!

    Few things I would suggest.

    • Try importing the Font family inside the CSS file itself.
    • Solution can be looked at again for more responsiveness.
    0
  • Abhineet Kandele•320
    @abhineetkandelePosted over 3 years ago

    Great Job!!

    Few suggestions from my end.

    • Font family can be imported inside the CSS file itself
    • Try using CSS variables
    • Try to code formatter to fix the indentation and make code more readable.
    • Try checking out Accessibility issues in the report
    Marked as helpful
    0
  • Abhineet Kandele•320
    @abhineetkandelePosted over 3 years ago

    Great Job!!

    Few things I would suggest considering.

    • Try moving attribution styles also to CSS file.
    • Try checking out the accessibility issues in the report.
    0
  • Abhineet Kandele•320
    @abhineetkandelePosted over 3 years ago

    Great work.

    Few things I would suggest.

    • In the Why Us section, try using ul > li tags instead of p tag
    • It's great that you have used CSS variables. Try naming them color-primary, color-secondary, etc.
    • Also, try fixing the accessibility issues in the report.
    0