Design comparison
Solution retrospective
How to contain everything in a div without spilling out while giving a specific height. The spill happens when the screen becomes smaller.
Community feedback
- @MelvinAguilarPosted almost 2 years ago
Hi there π. Good job on completing the challenge ! I have some feedback for you if you want to improve your code.
HTML:
- Use the
<main>
tag to wrap all the main content of the page instead of the<div>
tag. With this semantic element you can improve the accessibility of your page.
- 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.
- You must use a level-one heading (h1) even though this is not a full-page challenge. You can create an '<h1>' element within your 'main' element that will be hidden visually but visible and readable by screen readers. The class "sr-only" hides content visually and here are the styles to copy. e.g.:
<h1 class="sr-only">3-column preview card component</h1>
- Not all images should have alt text. Car icons are for decoration purposes only, so they can be hidden from screen-readers by adding
aria-hidden="true"
and leaving its alt attribute empty:
<img src="./images/icon-sedans.svg" alt aria-hidden="true"> <img src="./images/icon-suvs.svg" alt aria-hidden="true" > <img src="./images/icon-luxury.svg" alt aria-hidden="true" >
CSS
- You could use a CSS Reset to remove browser built-in styles and reduce browser inconsistencies.
Popular reset style sheets:
I hope you find it useful! π Above all, the solution you submitted is great!
Happy coding! π
Marked as helpful0 - Use the
- @HassiaiPosted almost 2 years ago
Replace <div class="container"> with the main tag, <h2> with <h1> and <div class="attribution"> with the footer tag to fix the accessibility issues. for more on semantic html visit https://web.dev/learn/html/semantic-html/
Use the colors that were given the styleguide.md..
Give .container a fixed width instead of a percentage width value
e.g.: .container {width: 900px;}
Give the padding , margins and widths a fixed value instead of percentage value.
Answere to your question : use padding top and bottom values or height: auto
Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on this watch this https://youtu.be/N5wpD9Ov_To
Hope am helpful. HAPPY CODING
Marked as helpful0 - @VCaramesPosted almost 2 years ago
Hey there! π Here are some suggestions to help improve your code:
Congrats on completing your first challenge!ππ
- It is best practice to have separate files for you HTML and CSS code. It helps keep things organized and make it easier to maintain.
- Implement a Mobile First approach π± > π₯
With mobile devices being the predominant way that people view websites/content. It is more crucial than ever to ensure that your website/content looks presentable on all mobile devices. To achieve this, you start building your website/content for smaller screen first and then adjust your content for larger screens.
More Info:π
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding!ππ
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