Design comparison
SolutionDesign
Community feedback
- @CodeWithAlaminPosted almost 2 years ago
Hi Yevhenii Kozhevin👋 Great job on completing this challenge! 🥳
I would like to share a few suggestions on this solution if you don't mind.
HTML
- Instead of using a separate link element for the favicon, you can use the
rel="icon"
attribute in thehead
element like this:
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
- You can use the
alt
attribute to provide a text alternative for theimg
element. This is especially important for accessibility purposes, as screen readers will use thealt
text to describe the image to users who are unable to see it. Learn more
CSS
- You can use the
font-family
property to specify a list of fonts to use for an element. If the user's device does not have the first font in the list, it will try the next one, and so on. This is a good way to ensure that your design looks consistent across different devices. - Instead of using multiple media queries to change the styles for different screen sizes, you can use the
@media
rule to define a single media query that targets multiple screen sizes. This can help simplify your code and make it easier to maintain. Learn more - Instead of using the
gap
property, which is not supported by all browsers, you can use themargin
orpadding
properties to add space between elements. This will ensure that your design looks consistent across different browsers. - You can use the
:focus
pseudo-class to change the styles of an element when it has focus, which is typically when the user clicks on it or uses the tab key to navigate to it. This can be a useful way to improve the accessibility and usability of your component. Learn more
Overall, this is a very well done solution to the challenge. Great job!
I hope this feedback was helpful. 😊 Keep up the good work!👍
0 - Instead of using a separate link element for the favicon, you can use the
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