Design comparison
Community feedback
- @StroudyPosted 2 months ago
Amazing job with this! You’re making fantastic progress. Here are some small tweaks that might take your solution to the next level…
-
Using a
<main>tag inside the<body>of your HTML is a best practice because it clearly identifies the main content of your page. This helps with accessibility and improves how search engines understand your content. -
Having a clear and descriptive
alttext for images is important because it helps people who use screen readers understand the content, making your site more accessible. It also improves SEO, as search engines usealttext to understand the image's context, helping your site rank better, Check this out Write helpful Alt Text to describe images, -
For future project, You could download and host your own fonts using
@font-faceimproves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable. Place to get .woff2 fonts -
Using
remoremunits in@mediaqueries is better thanpxbecause they are relative units that adapt to user settings, like their preferred font size. This makes your design more responsive and accessible, ensuring it looks good on different devices and respects user preferences. -
Setting
font-size: 62.5%can affect accessibility by reducing the default browser font size, potentially making text harder to read for users with visual impairments. This does make it easier to work out the relative units but at what cost?
You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟
0@StroudyPosted about 1 month agoHey @vaibhu252frontend, You got this, I'm glad you found this information helpful.
0 -
- @Islandstone89Posted 2 months ago
HTML:
-
Every webpage needs a
<main>that wraps all of the content, except for<header>andfooter>. This is vital for accessibility, as it helps screen readers identify a page's "main" section. -
All images needs an
altattribute. If the image is decorative, the alt text should be empty:alt="". This image has meaning, so it must have proper alt text. Write something short and descriptive, without including words like "image" or "photo". Screen readers start announcing images with "image", so an alt text of "image of qr code" would be read like this: "image, image of qr code". The alt text must also say where it leads(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website." -
"Improve your" is a heading, not a paragraph. I would make it a
<h2>- a page should only have one<h1>, reserved for the main heading. As this is a card heading, it would likely not be the main heading on a page with several components.
CSS:
-
Including a CSS Reset at the top is good practice.
-
Read this article to understand why you must not set
font-size: 62.5%on thehtml. -
I recommend adding
1remofpaddingon thebody, to ensure the card doesn't touch the edges on small screens. -
On the
body, changeheighttomin-height- this way, the content will not get cut off if it grows beneath the viewport. -
Remove the
widthonbody- it is a block element, meaning it takes up the full width ny default. -
Remove all widths in
%. -
Add a
max-widthof around20remon the card, to prevent it from getting too wide on larger screens. -
Paragraphs have a default value of
font-weight: 400, so there is no need to declare it. -
Move
font-familyto thebody, and remove it elsewhere. The children ofbodywill inherit the font. -
On the image, add
display: blockandmax-width: 100%- the max-width prevents it from overflowing its container. Without this, an image would overflow if its intrinsic size is wider than the container.max-width: 100%makes the image shrink to fit inside its container. -
As the design doesn't change, there is no need for any media queries. When you do need them, they should be in
remorem, not px. Also, it is common practice to do mobile styles first and use media queries for larger screens.
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