Design comparison
SolutionDesign
Community feedback
- @SabineEmdenPosted 3 months ago
Hello there!👋 Good job on completing the challenge.
Here are some suggestions how you could improve your code:
HTLM: Major Issues
- Add a
<main>element to your code. This is very important for web accessibility. It allows users who use assistive technology to access the main content of the page faster. You don’t need an extra HTML element for this, simply replace<div class=“card”>with<main>. - Add an
altattribute with a descriptive text to theimgelement. This is very important for web accessibility. It provides fallback (alternate) text that is displayed if the image is not loaded. Most importantly, it is used by screen readers and other assistive technology for blind or visually impaired users. - Remove the
<br>elements in the<h1>and<p>elements. The line break element is useful in a poem or an address, where the division of lines is significant. The problem you are trying to solve here is that the width of the heading and the paragraph doesn’t reach all the way to the padding of the card. That’s best solved with margins in your CSS.
HTML: Minor Improvements
- Wrap
<div class=“attribution”>in a <footer>element. The attribution does not belong inside<main>. It needs its own semantic HTML element. - Add a URL to
<a href="#">Khamri Oussama</a>. If you don’t have a personal website, add a link to your Frontend Mentor profile. - Check the link to request the font from the Google Font API:
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Outfit:[email protected]&display=swap" rel="stylesheet">. It looks like you are requesting more than just the Outfit variable font.
CSS: Major Issues
- Convert all values for
font-sizefrompxtorem. This is very important for web accessibility. It allows users who have selected a larger font size in the settings for their browser or their operating system to view your page with a larger font size. - Add
max-widthinremto<div class=“white”>. This is needed for the design to work with larger fonts sizes. - Remove the
widthandhightfrom the<img>element. The image needsmax-width: 100%. If you use a CSS reset (see below), that’s already included there. - Add
colorattributes to the<body>and<h1>elements to change the font to the colors that are specified in the style guide. This is important for following the provided design. - Add the margins I mentioned above to the
<h1>and<p>elements.
CSS: Minor Improvements
- Move the CSS code to a separate style sheet.
- Add a modern CSS reset to the top of your style sheet. I like the one by Josh Comeau. Andy Bell has another good one.
- Move the style rules for the attribution in the footer of the page to the end of your CSS code. In your style sheet, start with the style rules that apply to the whole page. (That includes the CSS reset.) Then work your way from the top to the bottom on the page.
- Move
font-family,font-size, andfont-weightfrom the<p>element to the<body>element and removefont-familyfrom the<h1>element. - Choose one color format - hexadecimal or
hsl()- and use it consistently in your code. - Add some padding to the
<body>element. - Check whether you really need
display: flex;withflex-direction,justify-content, andalign-itemson<div class=“white”>. The<div>contains an image, a heading, and a paragraph. All three are block elements and should stack in a column by default. - Use
pxorremforborder-radius. - Move
text-align: centerto<div class=“white">to reduce repetition in your code. - Use selectors with a higher specificity for the
<h1>and<p>elements, like.white h1and.white p. This will make it easier to use the component within a larger project.
I hope this helps. Let me know if you have any questions.
Happy coding! 😎
0 - Add a
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