@Adnan7389
Submitted
What specific areas of your project would you like help with?
- Layout
- font weight and size
- line-height and letter-spacing properties
- color
@Liyyy9
@Adnan7389
Submitted
What specific areas of your project would you like help with?
@Liyyy9
Posted
Well done on completing the challenge! I have a few suggestions for further improvement based on feedback I received. I’m not claiming to be an expert, but I think these could be helpful insights for your project.
To improve the responsiveness of the webpage, consider using rem
units for font sizes instead of px
. Set the html
selector to a font-size
of 16px, and then define other font sizes relative to this base size, such as 1rem (16px), 2rem (32px), and so on.
In line 49, the font-size
is currently set to 1 (i.e., font-size: 1;
). It would be clearer to specify the unit of measurement, such as px, em, or rem.
Similarly to the font sizes, using rem
units for max-width can enhance responsiveness.
I’m not sure if I’ve caught everything that might need improvement, but those are the only issues I’ve noticed so far. I hope my suggestions are helpful! I'm not entirely sure either, but they should be a good starting point.
Marked as helpful
@aniketinTech
Submitted
What are you most proud of, and what would you do differently next time?
What am I proud of and what I would do differently next time:
What challenges did you encounter, and how did you overcome them?
Challenges encountered:
What specific areas of your project would you like help with?
@Liyyy9
Posted
Great job completing this challenge! I have a few suggestions for improvement based on feedback I received for the same project. I think they could be useful for you as well.
HTML:
Add a <main>
element to wrap all of your content except the <header>
and <footer>
. This improves accessibility and acts as a landmark for your webpage. Make sure to include your card within the <main>
element.
Consider changing your <p class="para1">
tag to an <h2>
tag. Typically, a page should only have one <h1>
tag for the main heading. Since this challenge doesn’t include a main heading, it would be appropriate to use an <h2>
tag instead.
CSS:
Don’t forget to include a fallback font in your font-family
property. It should be specified like this: font-family: 'Outfit', sans-serif;
.
Avoid using px
for font-size
. Instead, use rem
units to ensure the font size scales with the user’s default browser settings, which enhances accessibility.
Since you want all text to be centered, you only need to apply text-align: center
to the <body>
element. The child elements will inherit this property, so you can remove any redundant text-align: center
declarations from elsewhere.
Hope this helps!
Marked as helpful
@waeldrwish
Submitted
@Liyyy9
Posted
Looks good! Slightly different than the template but I'm assuming you are changing it to what you want. Code is readable, reusable and well-structured. I wish I thought about adding the :root and media query into my code.
Marked as helpful