Submitted over 1 year ago

FAQ Accordion Card | HTML and CSS - no Javascript!

Elijah•320

@taco-neko

Preview site View code

This is a solution for...FAQ accordion card

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

Solution retrospective

This was a tough challenge for me, because I usually don't work with absolute and fixed positioning, but to get what I wanted in this challenge, I had to. I still think it came out much better than I anticipated.

I have a question about media queries, is it better for me to add a media query when it seems like things are breaking, or stick to a fixed set of breakpoints? I do the former right now, and it's much more convenient for me, but I don't know if it's the best practice.

Community feedback

Vanza Setia•27,775
@vanzasetiaPosted over 1 year ago
Hi, Elijah! 👋

Your website is responsive. You have chosen the right way to use media query which is to use it when the website is broken or change the layout when it has enough space.

I recommend writing the CSS using the mobile-first approach (using min-width media queries). The mobile layout is simple. So, you only need to add more complex styling for larger screen sizes.

If you use the desktop-first approach, then you need to write more CSS to simplify the layout (usually into a one-column layout).

The mobile-first approach often results in smaller CSS. As a result, the website loads faster.

Learn more — Responsive design ground rules | Polypane

A couple of suggestions:

Remove font-size: 100%. It is already the default styling.

Prefer unitless zero for any zero values because 0px is the same as 0.

I hope this helps. Keep up the excellent work! 👍
Marked as helpful
1
Elijah•320
@taco-nekoPosted over 1 year ago
@vanzasetia Thank you for the feedback! I've tried to use a mobile-first workflow previously, but I honestly found it more difficult than desktop-first. I find it easier to remove things than to add them, and I prefer to tackle the difficult parts of sites first. I will try to do a few more challenges with a mobile-first approach.
0
Vanza Setia•27,775
@vanzasetiaPosted over 1 year ago
@taco-neko

You are welcome!

I was struggling with the mobile-first approach because I wrote the HTML markup with the mobile-first approach. I should not do that. I should write the HTML with a desktop layout and then write the styling with a mobile-first approach.

After that, I found that I wrote less code than with the desktop-first approach because I did not need to make a two-column layout into a one-column layout. All I needed to do was to make the one-column layout—the default browser layout—into a two-column with a min-width media query.
Marked as helpful
1
Elijah•320
@taco-nekoPosted over 1 year ago
@vanzasetia That makes a lot of sense! I'll try that on my next project.
0
Vanza Setia•27,775
@vanzasetiaPosted over 1 year ago
@taco-neko

Good! 👍
0

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord