Submitted 2 months ago

FAQ accordion

Anja Teisman• 130

@Dubbelteis

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

FAQ accordion

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm proud of how fast I'm learning HTML and CSS. I really need to learn more JavaScript. That is still like abracadabra to me.

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

I overcame the JavaScript challenge by asking my son for help. So I need more practice in that area. Does anyone know a good online coarse to study JS, besides w3schools?

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

Q1: I have no clue in how to get the background image to fit the width of the page. As you can see it isn't wide enough now. Q2: I can't get the line between the questions the right color. I tried the next codes but it doesn't work: ''border-top: 1px solid rgb(250, 236, 250);'' this is how it now is by recommendation of chatGPT. I also tried: "border-top: 1px solid rgba(250, 236, 250, 0.1);" this didn't do anything. Changing rgb to hsl and hsla didn't work. I've put all the questions and answers in their own div and gave the div a border-bottom and color: didn't work.

Community feedback

Mahmood• 1,070

@MahmoodHashem

Posted 2 months ago

Hey,

Well done on finishing the challenge!

Your project is really impressive.

You can make the background image fit the whole page or its container by using the background-size property set to contain. And It seems like the hr color is working as intended.

Keep up the great work!

Marked as helpful

Ehsan• 210

@Ehsan-eslami

Posted 2 months ago

@MahmoodHashem I think the best solution is put the background image into an img tag and give it position absolute. i've done this project in this way and it works properly

Mahmood• 1,070

@MahmoodHashem

Posted 2 months ago

@Ehsan-eslamiYes, you are correct that it works, but it is not semantically recommended.

Krushna Sinnarkar• 1,080

@krushnasinnarkar

Posted 2 months ago

Hi @Dubbelteis,

Congratulations on successfully completing the challenge!

Your solution looks nice, though there are a couple of things you can improve which I hope will be helpful!

Background Image: To address the background image issue, you can use:
```
background-size: contain; 
```
or
```
background-size: 100%;
```
This will help ensure that the image displays correctly across different screen sizes.
Horizontal Rule (<hr>): The <hr> element is working fine on Edge and Chrome, so it might be a browser compatibility issue. Could you let me know which browser you are using? It may help in identifying the problem.
Semantic Tags: It’s important to use semantic tags for better accessibility and SEO. If you're not familiar with them, I suggest learning about semantic HTML elements. Here are some advantages of using semantic tags:
- Improved Accessibility: Screen readers and other assistive technologies can better understand the structure of your page, making it more accessible to users with disabilities.
- Better SEO: Search engines use semantic tags to better understand the content of your page, which can improve your page’s ranking.
- Easier Maintenance: Semantic HTML provides a clearer structure, making it easier for developers to read and maintain the code.
- Enhanced Readability: It helps to clearly define different parts of your page, such as headers, footers, and main content, improving overall readability.

I hope you find this helpful, and I would greatly appreciate it if you could mark my comment as helpful if it was.

Feel free to reach out if you have more questions or need further assistance.

Happy coding!

Anja Teisman• 130

@Dubbelteis

Posted 2 months ago

Hi Krushna Sinnarkar,

Thank you for your reaction. Background-size: contain is working! I use the firefox browser and keep getting a dark color. When I opend it in Edge I got the right color so it is indeed a browser thing. Concerning your third comment about the semantic tags, I have no clue what you're talking about so I have some reading up to do :-)

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