@NaveenGumaste
Posted
Hello codie123 ! Congo 👏 on completing this challenge
Let's look at some of your issues, shall we:
-
Always use
h1
first and thenh2
,h3
and so on -
add
Font-weight
for the "Eth" and number
happy Coding😀
Marked as helpful
@NaveenGumaste
Posted
Hello codie123 ! Congo 👏 on completing this challenge
Let's look at some of your issues, shall we:
Always use h1
first and then h2
, h3
and so on
add Font-weight
for the "Eth" and number
happy Coding😀
Marked as helpful
@PhoenixDev22
Posted
Hello @Codie123,
Congratulation on completing frontend mentor challenge.
I have some suggestions regarding your solution:
Anything with a hover style in design means it's interactive. you need to add an interactive element <a>
around the image , Equilibrium #3429 and Jules Wyvern
. And add the hover effect on them .
<svg> '
s do not add important information to a document should be considered decorative. You can use aria-hidden="true"
to hide the SVG from screen readers. focusable="false"
is also used to ensure Internet Explorer won’t allow the Tab key to navigate into the SVG.in( icon-ethereum, icon-clock
).
the icon-view
doesn't really need to be in the html, you could do it with css. If you want it to stay in html it needs to be aria-hidden or role presentation with empty alt.
There are so many ways to add the hover effect on the image , The one I would use , using pseudo-elements to change the teal bg color to a hsla. Then opacity can be changed from 0 to 1 on the pseudo element on the hover as there is no reason to have the extra clutter in the html.
The avatar's alt should not be "user-profile "
. It's meaningless , you can use Jules Wyvern
. Read more how to write an alt text
the link should be wrapping the main image and either have Sr-only
text, an aria-label
or alt
text that says where that link takes you.
No need for <hr>
, you can use border-top:
to the avatar part class="user-details"
.
I wouldn't use a header, <p>
instead for this <p class="creator-details">Creation of <a href="#" class="">Jules Wyvern</a ></p>
.
For the avatar's part , you would use <figure>
and <figcaption>
.
using min-height: 100vh
instead of height: 100%;
allows the body to to grow taller if the content outgrows the visible page.
width: 270px;
an explicit width is not a good way . consider using max-width
to card instead and a little margin to the card .That will let it shrink a little when it needs to.
height: 478px;
It's rarely ever a good practice to set heights on elements . Let the content inside the card element dictate the height of it.
You should use em
and rem
units .Both em
and rem
are flexible, Using px
won't allow the user to control the font size based on their needs.
Best practice not to leave commented codes.
Overall , your solution is good. Hopefully this feedback helps.
Marked as helpful
@Codie123
Posted
@PhoenixDev22 Thank you ,Your feedback helps me figure out my mistakes. soon i will be updating my corrected solution.
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