Product page w/ button done through website
Design comparison
Solution retrospective
I am doing a course online for web development and, at this point, it hasn't cover the subject of the website being responsive. I looked online, but I am not sure if I did correctly. It was also the same thing regarding fitting the itens of the page on the middle. I believe I did the correct thing regarding the width, but I am not sure about the height. My intention is migrate from my profession to web development, so any kind of tip would be great. Thank you for the opportunity.
Community feedback
- @AshxaryaPosted almost 2 years ago
Hi! 😊
I have some feedback to help you out.
Make sure you look at the accessibility report you're provided with below your solution.
HTML 📄:
As you can see in your accessibility report, you are recommended to use a level-one heading as in h1 for the first text. H tags improve user experience in the sense that they're part of a web page's hierarchical structure. Think of them less as a way to size font and more of a way to show the order of headings, since the size can be manipulated in CSS regardless.
Use the <main> tag to wrap up all the main content of the page instead of the <div> tag. With this semantic element, you can improve the accessibility of your page.
I see you decided to remove the attribution, if in the future you want to add an attribution to your page make sure to use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information.
Make sure to add alternative text in your images. To do this simply add (alt="") for ex. <img src="icon-music.svg" alt=""> You can either add info about the image in that section or leave it blank depending on what the image is.
CSS 🎨: For ease of access in future projects, you can create variables of different colors at the beginning of your sheet. You can read more here to learn about this here.
You seem to already be using rem values for font-sizes i suggest you watch kevin powells videos on rem em and other units and try and use them for margins, paddings, etc as well instead of pixels.
for your query on centering The most common way to center such articles is to use
body { display : grid; place-items: center; }
1@AlexDralurPosted almost 2 years ago@Ashxarya Thank you so much for your feedback. I applied everything you said and I will look it up Kevin Powells's videos. I am genuinely happy to know that you had the time to check and send this message. I will continue the journey and do more challenges.
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