Profile Card Component - HTML CSS

Solution retrospective
FINALLY! Sorry, I was having some trouble with GitHub Pages... Any feedback is welcome and appreciated! There are some things I'd really like to target though. Feedback on the code itself - thoughts on drying it out and best practices , as well as, thougnhts on how it might be simplified.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @pikapikamart
Hey, great work on this one. Layout in general looks great but it needs to be responsive/adaptable.
Muh Suryadi Triputra Rahman gave great tip in git, just going to add some suggestions on the site itself:
- Always have a
main
element to wrap the main content of your page. On this one, the.card-container
should be using themain
instead ofsection
. - On the
.card-container
instead ofwidth: 350px;
usemax-width: 350px
because using the former makes an explicitwidth
which makes the element not scale and just have fixedwidth
. Also on the image background of the card, use andwidth: 100%
so that it will scale as well. - Decorative image must be hidden at all times by using
alt=""
and extraaria-hidden="true"
attribute on theimg
tag. Hide theimg
inside of the.card-top
. - Also when using
alt
attribute, avoid using words that relates to "graphic" such as "background" and others. Animg
is already an image/graphic so no need to describe it as one. - Person's
img
should be visible because it is a meaningful image in the component so use the person's name as thealt
likealt="Victor Crest"
. - A page must have a single
h1
on a page. Since there are no text-content that are visible that could beh1
, you will make theh1
screen-reader only text. Meaning this will be hidden for sighted users and only be visible for screen-reader users, search aboutsr-only
stylings and see how it is used. Theh1
text should describe what is the main content is all about, thish1
would be placed as the first text-content inside themain
element.Have a look at Grace's solution on this inspect the layout and see how she used theh1
as well the stylings applied to it, copy that since you will need that a lot. But if you aren't comfortable right now, maybe useh1
on the person's name. - The
london
should not be a heading tag, use onlyp
tag on it. Use only heading tag if the text gives an overview to what a section contains all about. - On the
.activity-tracker
you could useul
on it since those are "list" of information about the user. I wouldn't explain the next section in since on the link that I gave you, you will a proper markup on that.
Aside from those, great work again on this one.
Marked as helpful - Always have a
- @msuryaditriputraR
I also had the same problem.. you can try this
git commit --allow-empty -m "Trigger rebuild"
git push
and refresh your page
it worked for me.. happy coding
Marked as helpful
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