Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions8Comments17

All comments

  • Mohammad Kaif Ul Majed• 20

    @KaifUlMajed

    Submitted

    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

    @abhineetkandele

    Posted

    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

    @DaoudAnas13

    Submitted

    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

    @abhineetkandele

    Posted

    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

    @abhineetkandele

    Posted

    Nicely done!!

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

    Marked as helpful

    0
  • Thibault• 205

    @thibault-barrat

    Submitted

    Hi,

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

    Thanks

    Animated FAQ accordion

    3

    Abhineet Kandele• 320

    @abhineetkandele

    Posted

    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-wdt

    Submitted

    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

    @abhineetkandele

    Posted

    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

    @rngueco

    Submitted

    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

    @abhineetkandele

    Posted

    Superb Job!!

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

    1
  • Abhineet Kandele• 320

    @abhineetkandele

    Posted

    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

    @abhineetkandele

    Posted

    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

    @mghadieh

    Submitted

    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

    @abhineetkandele

    Posted

    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

    @abhineetkandele

    Posted

    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

    @abhineetkandele

    Posted

    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

    @abhineetkandele

    Posted

    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
  • Abhineet Kandele• 320

    @abhineetkandele

    Posted

    Nicely tried.

    Few things I would suggest considering.

    • Size & alignment of the grids
    • attribution styles can also be moved from HTML file to CSS file.
    • In Why Us section, instead of 'p' tag, try using ul > li tags.
    • consider using CSS variables
    • Make sure to checkout Accessibility issues in the report
    0
  • Abhineet Kandele• 320

    @abhineetkandele

    Posted

    The solution is looking great.

    Few things I feel could be improved.

    • Size & Alignment of grids.
    • I see you have used CSS variables, that's great. But I would suggest renaming them to color-primary, color-secondary...
    • Attribution styles can also be moved to the CSS file.
    • In Last grid, instead of using multiple 'p' tags, I would recommend using ul > li tags
    0
  • Akram Moncer• 30

    @amoncer

    Submitted

    Hi guys, i just finished my second "Newbie" challenge, and i was a real pleasure to do it. I find that i'm still uncomfortable with layouts speacially grids.

    So for those who have some time the check my solution, feel free to give me same advice about layouts (or else).

    Thank you for your time

    Mobile-first solution using Grid and Flexbox

    2

    Abhineet Kandele• 320

    @abhineetkandele

    Posted

    Great work. 👍

    One thing, I would highly recommend is using CSS variables.

    Marked as helpful

    1
  • Abhineet Kandele• 320

    @abhineetkandele

    Posted

    Great work. 👍

    Only a few suggestions from my side.

    • In the last section instead of using 'p' tag and 'br' tag, try using ul & li tags
    • instead of naming the vars as primary-cyan & primary-bright-yellow, try using primary-color & secondary color.

    Marked as helpful

    0
  • Muhamad Hanif• 20

    @dontbeasalad

    Submitted

    My second challenges! feel free to comment and correct my code, i think my code is not clean enough.

    Html site using CSS

    2

    Abhineet Kandele• 320

    @abhineetkandele

    Posted

    Great work.

    Only a few suggestions that I could think of.

    • Try using CSS variables in the app. So that if you want to change it in future, it can be changed in just 1 place.
    • Try using HTML semantics like header, main, section, etc. instead of divs.

    Marked as helpful

    1