@VCarames
Posted
Hey there! ๐ Here are some suggestions to help improve your code:
Regarding your question, it is best practice to link the font-family in the HTML due to performance (even if it is minimal).
- The
sectionandfigureelements are being used incorrectly โ.sectionare for sections of a page while thefigureis only used when there is afigcaption.
- Your "buttons" were created with the incorrect element โ. When the user clicks on the button they should be directed to a different part of you site. The
anchor tagwill achieve this.
More Info:๐
- For "visually hidden" content use the following code:
.visually-hidden {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;
height: 1px !important;
overflow: hidden !important;
margin: -1px !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
white-space: nowrap !important;
}
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding! ๐พ
Marked as helpful
@davidochoadev
Posted
@vcarames Thank you for your response,
and please forgive me for bombarding you with questions again. In this case, since we are dealing with icons, the <picture> tag or even the <figure> tag would not be appropriate, correct? Should I settle for a <div>? Or is there a specific container element that is more suitable for wrapping these non-descriptive, purely decorative elements?
@VCarames
Posted
@davidochoadev
Ask as many question you have. Thatโs why Iโm here for.
The icons donโt need to be wrapped by anything; img on its own is enough.
The only time youโll use the picture element is when you re using different sized images during different breakpoints. As for the figure, only if there is a figcaption.
