Social Proof Section - React, Styled components, CSS Grid
Design comparison
Solution retrospective
Hi folks
I have some questions related to my codebase:
-
In public/index.html, I included
<noscript>
to cater for cases where Javascript is disabled in the browser. I provided a basic HTML structure devoid of stylings inside the<noscript>
. I have seen other places just mentioning about enabling javascript to view the site inside the<noscript>
. I am not sure if that concise message is good for accessibility. Please share your thoughts if we should write the HTML inside the<noscript>
(like how I did) OR the message about enabling Javascript is appropriate. -
In src/styles/Global.style.jsx, I included
clip-path:border-box
in themain
because when I altered the browser's font setting to "very small", I noticed the bottom decorative image overflowing out of the white card. Is this approach correct? Or there is a better way of handing this? -
Please help me understand this:
In HTML, I have the following img tag with the width and height specified
<img src="/images/icon-star.svg" alt="star icon" width="16" height="16">
and in my CSS definition, I have also specified the width and height as 1rem. However, I noticed that upon changing the browser's font setting, the image would also scale (which works correctly but it goes against my understanding). I thought that the inline width and height of "16" would take precedence over the CSS definition of 1rem when the font settings change.
Also, please feel free to provide your feedback on my code. Looking forward to your response!
Community feedback
Please log in to post a comment
Log in with GitHubJoin 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