@aazs-edu
Submitted
- Feedback is more than welcome. Thanks for your time.
@EduardoSaavedraQ
@aazs-edu
Submitted
@EduardoSaavedraQ
Posted
Hi, @aazs-edu
The results of your project are amazing.
However, I have a few suggestions for you:
HTML has these two tags for that porpuse: <details>
and <summary>
.
<details>
<summary>Your question?</summary>
<p>Your answer.</p>
</details>
By default, browsers will show a '►' when the answer is hidden, and a '▼' when it is shown. You can delete or modify these markers with CSS:
details summary::marker {
content: ''; /*If you want to remove the marker*/
content: '☼'; /*If you want to change the marker*/
}
<details name="info">
<summary>A question?</summary>
<p>An answer.</p>
</details>
<details name='info'>
<summary>Another question?</summary>
<p>Another answer.</p>
</details>
However, right now these feature is not available in all browsers, so, for the moment, you might wanna use JavaScript instead.
Always follow a hierarchy for headings. You are skipping h2 tags and using h3 tags. If you need to make headings smaller, you better use CSS for that.
I saw in your CSS file that you are using absolute units for font sizes. To improve the accesibility, I recommend you to use rem units instead of pixels. The default value of 1rem is 16px. So, if you wanna convert pixels to rem, you must follow this formula: Xpx/16. It's possible to set the value of 1rem by addign the next CSS code:
:root {
font-size: 10px; /*Now 1rem is equal to 10px*/
}
But this is not recommended.
I hope these advices work for you Happy coding!
Marked as helpful