@Sicro01
Submitted
1st challenge and new to CSS so took me a while. Plenty of YouTube (Kevin Powell!)
@KoiHast
@Sicro01
Submitted
1st challenge and new to CSS so took me a while. Plenty of YouTube (Kevin Powell!)
@KoiHast
Posted
Hey, great job on your first project! If you want, here are just a couple of tips to improve your code a bit ^_^
<main>
element, just to improve semantics and readability.<h1>
at the top of your page and hide it using CSS. It's kind of a cheatsy way, but since FEM doesn't recognize that these are only components and not entire web pages, it judges them as if they are, so you have to kinda work around it.<h3>
and <p>
elements, you can just use a combinator selector like h3, p { }
to style your text. For instance, your text-padding
and text-center
styles could've just as easily been put under a selector for h3
and p
, and you wouldn't have had to make so many classes. It just makes for an easier time for you and keeps you from having a million classes on everything. You don't want to depend on classes as your only method of styling. If you can get your styles across using element selectors, then that's usually a better way to go.I'd analyze your CSS, but I'm still learning a lot of those rules myself, so I don't want to steer you wrong. I hope the HTML tips help you out, though! 🌺✌
Marked as helpful
@Jack-Price
Submitted
@KoiHast
Posted
Hey, great job on your first project! If you want, here are just a couple of tips to improve your code a bit ^_^
You want to wrap the main part of your HTML in a <main>
element, just to improve semantics and readability.
Just to clean up your code, since you deleted the div.attribution
from the bottom, you could delete the
section of your HTML that pertained to that, as well. It would just make things a bit neater since that code isn't being used anymore.
I'd analyze your CSS, but I'm still learning a lot of those rules myself, so I don't want to steer you wrong. I hope the HTML tips help you out, though! 🌺✌
@LacrhymoseL
Submitted
@KoiHast
Posted
Hey, great job on this project! I just noticed a couple things that may help you out on future projects.
You don't really need an alt
attribute for the "ethereum", "clock", and "avatar" icons. Small, unimportant images like this don't really add any content to the page and are more there for decoration, so the best thing to do is give them an empty attribute like alt=""
. That way, screen readers and other accessibility tools know that it's not important to the context of the entire page and can skip over reading it out to their user.
If you wanted to just comment out the div.attribution
section at the bottom, you could've used an actual <footer>
element for the avatar and name at the bottom of the card, rather than using a div
and giving it a class of footer
. That would just help with the semantics of your HTML a bit, as we have a unique element for footers that negates the need for the div/class method.
This one is more for FrontEndMentor itself, but to avoid getting the "Pages should contain a level-one heading" error message in your accessibility report, you can just add a <h1>
at the top of your page and hide it using CSS. It's kind of a cheatsy way, but since FEM doesn't recognize that these are only components and not entire webpages, it judges them as if they are.
I'd look over your CSS, but I'm still learning a lot of those rules myself, so I don't want to steer you wrong. I hope the HTML tips help, though! 🌺✌
@xversone
Submitted
@KoiHast
Posted
Hey, great job on your first project! If you want, here are just a couple of tips to improve your code a bit ^_^
You want to wrap the main part of your html in a <main>
element, just to improve semantics and readability.
You also may want to wrap the div.attribution
in a <footer>
element for the same reasons as above.
I saw you added an alt
attribute to the QR code image but didn't add any content to the tag. As it is a key image on the page and it's important for users to know what the image is, filling that in with something like "QR Code for FrontEndMentor.io" or something like that would improve accessibility for those that can't see/access the image. You typically want to use empty alt
attributes for things like icons that don't really add any real meaning to the page.
I'd analyze your CSS, but I'm still learning a lot of those rules myself, so I don't want to steer you wrong. I hope the HTML tips help you out, though! 🌺✌
Marked as helpful
@KoiHast
Submitted
It took me forever to figure out how to do the hover effect with the icon over the main image. I probably did it in a really goofy way. If there's a better way for me to have done it, please let me know!
Also, I know the hover effect isn't showing the same border-radius as the image. It's in my CSS code, but for some reason, GitHub isn't wanting to see it when I deploy the site. Just know that it is there! GitHub just hates me.
Thank you! <3
@KoiHast
Posted
Nevermind! It's recognizing the border-radius now :)