@javascriptor1
Posted
Hello,
Congratulations for completing this challenge. Here is my feedback on your solution which I hope it will help improve your code:
HTML
1- Use semantic tags always to reflect element's content meaning (like <main> <footer>
).
Avoid non-semantic elements like <div> <span>
. Use these two elements for grouping/styling purposes.
Apply this in your code by replacing the parent div with main tag. Same for footer.
2- Start with h1 tag instead of h2 as its level 1 heading to make your age accessible
3- Enhance the alt text for the QR code. Instead of alt="QRcode"
, you can write a more descriptive text like :
QR code for frontend mentor website
.
4- wrap QR abbr in the paragraph with <abbr>
tag like this:
<p>Scan the <abbr title="Quick Response">QR</abbr> code to visit Frontend Mentor and take your coding skills to the
next level</p>
CSS
5- The required font is Outfit but you have included three more fonts by mistake I guess:
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],400;9..144,500;9..144,600;9..144,700&family=Montserrat:wght@200;300;400;500&family=Outfit:wght@400;700&family=Overpass:wght@400;700&display=swap" rel="stylesheet">
This usually occurs when you add a font in google website and don't remove it after you finish. When you visit google font website next time , your old selection will stay there and will be added to the fonts you add recently.
6- As per style guide, font-size should be 15px which was not applied. Changing to 15px will make the page look like design in terms of Paragraph.
7- You can remove width:300px from h2 tag - it has no effect.
8- Instead of adding a style which can be inherited for each child element,apply the style to the parent instead:
For example , you want to align h2 and p text to center. Instead of applying styling to each tag , do it once for Child div which is parent:
text-align: center;
text-align is a property that gets inherited to child elements.
9- Avoid capitalizing class names -> parent instead of Parent.
10- Finally, increase the padding in child container div.
Keep coding and best of luck.
MKF
@CheFernandez99
Posted
@javascriptor1 hey thanks for the feedback, the width on paragraph did make it shorter it fit in the box that way, but yeah a div around that would probably have done the same thing.