Design comparison
Solution retrospective
First time working with shadow in CSS
What challenges did you encounter, and how did you overcome them?no challenge encountered yet
What specific areas of your project would you like help with?always needs to upgrade responsiveness.
Community feedback
- @ferfalconPosted 8 months ago
Hi Anwar, I hope you're doing well.
Your project closely aligns with the design goals, which is commendable. For an enhanced visual appeal, adjusting the padding within the .status div could provide more breathing space and balance. Additionally, consider reserving the vibrant yellow for hover states on the header to add an interactive element to your design.
To improve responsiveness, adopting relative units for widths and incorporating a max-width can ensure your layout adapts seamlessly across devices. Don't forget to test on various screen sizes for the best user experience.
Also, exploring more semantic HTML tags could enhance the structure and accessibility of your project. For instance, the header class used within a <div> could potentially be replaced with a semantic <header> tag for the card's header section.
Reviewing your CSS for opportunities to reduce repetition and streamline your code can also lead to cleaner and more efficient styling. For example, the repeated use of margin-left: 24px; could potentially be streamlined by applying it to a parent element or using a utility class.
Keep up the great work, and I look forward to seeing your project evolve!
Marked as helpful0@AnwarMestycerPosted 8 months ago@ferfalcon Thank you for the valuable feedback and suggestions! I'll definitely implement the adjustments.
0 - @Islandstone89Posted 8 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. Wrap.card
in a<main>
. -
Don't use words like "image" in the alt text, as screen readers will already announce it as an image. I would argue the top image might be mostly decorative, in case it should have empty alt text:
alt=""
. -
Remove
<div class>
. -
Never have text in
<header>
alone. Remove<header>
, it is used for content that repeats across many pages, like a top section with a logo and navigation. "HTML & CSS" is a heading, so change it to a<h1>
. -
Change the alt text to "Headshot of Gary Hooper".
CSS:
-
Including a CSS Reset at the top is good practice.
-
Add around
1rem
ofpadding
on thebody
, so the card doesn't touch the edges on small screens. -
Remove the
html
selector, it doesn't need any properties. -
On the
body
, changeheight
tomin-height: 100vh
- this way, the content will not get cut off if it grows beneath the viewport. -
Remove
justify-content: flex-start
, as that is the default value. -
Except for the profile image, remove all widths and heights in
px
. -
Add a
max-width
of around20rem
on the card, to prevent it from getting too wide on larger screens. -
font-size
must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead. -
Remove the margin on the top image.
-
Images should have
display: block
andmax-width: 100%
. -
On "Learning", add
display: inline-block
andpadding: .5em 1em
. -
You do not need to declare the same
font-family
on every element! Setfont-family
onbody
, and remove it elsewhere. The elements will inherit the font from thebody
.
Marked as helpful0 -
- @AnwarMestycerPosted 8 months ago
Wow, thank you so much for taking the time to share your insights! I'll definitely put them into action and see how they elevate the project. Your support means the world to me!
1
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