Design comparison
Community feedback
- @VCaramesPosted about 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
-
The Alt Tag Description for the image needs to be improved upon. You want to describe what the image is; they need to be readable. Assume you’re describing the image to someone.
-
This challenges requires the use of two images 🎑 for different breakpoints. The Picture Element will facilitate this.
Here is an example of how it works: EXAMPLE
Syntax:
<picture> <source media="(min-width: )" srcset=""> <img src="" alt=""> </picture>
More Info:
https://www.w3schools.com/html/html_images_picture.asp
https://web.dev/learn/design/picture-element/
If you have any questions or need further clarification, let me know.
Happy Coding! 👻🎃
Marked as helpful1@Mourad3rdPosted about 2 years ago@vcarames So using
<picture>
instead of just<img>
gives me more control over the responsiveness of the image to be more flexible with it, right?0@VCaramesPosted about 2 years ago@Mourad3rd
Correct! The Picture because of the container of your images and by giving the source a min-width the image will then appear when you need it.
Marked as helpful0 -
- @christian-prasetyaPosted about 2 years ago
Congratulations for finishing this challenge.
Your result is totally fine, but there's some area of improvement
- Don't forget the semantic HTML
Instead of using
<div class="container">
in the opening content tag, it's better to use<main class="container">
as it's semantically correct, and will help the reader with visual impairment to browse the main content of your website.-
And because this project require us to make a responsive website, it's better if you start using relative unit especially rem and em.
-
And for more best practice, I think you better link all the google fonts and fontawesome cdn through link in the HTML head rather than importing through CSS (personal opinion though).
Overall, nice work, and can't wait for your next project submission.
Marked as helpful0@Mourad3rdPosted about 2 years ago@christian-prasetya Thanks for the feedback , gonna take these in consideration in the following projects. <3
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