Design comparison
SolutionDesign
Solution retrospective
Your feedback is much appreciated. Thank you in advance.
Community feedback
- @MelvinAguilarPosted almost 2 years ago
Hello there 👋. Good job on completing the challenge !
I have other suggestions about your code that might interest you.
Metadata 🗃️:
- The
langattribute is used to declare the language of the webpage. Add thelangattribute to the<html>tag with the valueen.
- The
viewportmeta tag is missing. theviewportmeta tag is used to control the layout of the page on mobile devices. Add theviewportmeta tag to the<head>tag:<meta name="viewport" content="width=device-width, initial-scale=1.0">
HTML 📄:
- Wrap the page's whole main content in the
<main>tag.
- The
<h1>is the most important heading on the page, In this challenge the perfumer's name can be considered like the title of the page, so it should be the<h1>
- The <br> tag is often used to create line breaks, but it doesn't convey any semantic meaning. When a screen-reader reads the text, it will break the flow of reading at the line break tag, which can be confusing for users. More information here.
- For specificity reasons you should work with classes instead of ids because they are more reusable. You can use ids to work with JavaScript, but you should use classes to style your elements. You can read more about this here 📘.
CSS 🎨:
- Unfortunately, your solution is not adapted for mobile devices :(, you should use media query to change the design of the solution, you can even learn mobile first approach so that the solutions are completely responsive.
I hope you find it useful! 😄 Above all, the solution you submitted is great!
Happy coding!
1 - The
- @adkenneyPosted almost 2 years ago
Nice job! A few things you could take a look at:
<picture>element for images that change depending on screen size- link to picture docs: click here
Taking another look at your media query to change your page layout on smaller devices
0
Please log in to post a comment
Log in with GitHub
Join 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