Design comparison
Solution retrospective
i'm practicing my HTML and CSS skills, i find a difficult with media query, i hope you give your feedbacks.Thanks in advance.
Community feedback
- @vanzasetiaPosted over 2 years ago
Hi, Joligomez! 👋
Congratulations on completing this challenge! 🎉
About the media query, I would recommend writing the styling using the mobile-first approach. It means that you write the CSS for the mobile layout first and then use
min-width
media query to style larger screen sizes. This approach often leads to shorter and better performance code. Also, mobile users won't be required to process all of the desktop styles.The alternative text for the image is not used to tell the user that the image is broken. It is used as a fallback text that tells the image is. For example, if the logo image is failed to load then if the users notice that there's an alternative text that says Fylo, and then they know that they are visiting Fylo website. Not only that, screen readers use alternative text to pronounce the image. So, I highly suggest learning how to write a good alternative text.
For internal navigation links, I would not recommend using
target="_blank"
. It is usually used for external navigation links like social media links, etc.That's it! I hope this information is useful! 😁
0@vanzasetiaPosted over 2 years ago@joligomez As a side note, I would highly suggest doing the easier challenges first (e.g. component challenges). It's important to have a good fundamental.
To be honest in my mobile view, both landscape and portrait view, the site looks broken. Also, as you can see on the design comparison, yours looks different from the original design. It's recommended to make it as similar as possible.
So, I would recommend taking a step back and moving slowly. 😉
Good luck! 👍
0
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