Skip to content
OverviewSolutions
5
Comments
5
Koi Hastilow
@KoiHast

All comments

  • Koi Hastilow•90
    @KoiHastPosted over 1 year ago

    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.
    • 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 web pages, it judges them as if they are, so you have to kinda work around it.
    • Instead of using classes for the different stylings that you did on your <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
    1
  • Koi Hastilow•90
    @KoiHastPosted over 1 year ago

    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! 🌺✌

    0
  • Koi Hastilow•90
    @KoiHastPosted over 1 year ago

    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! 🌺✌

    0
  • Koi Hastilow•90
    @KoiHastPosted over 1 year ago

    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
    1
  • Koi Hastilow•90
    @KoiHastSubmitted over 1 year ago

    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

    NFT Preview Card Component w/ FlexBox

    2
    Koi Hastilow•90
    @KoiHastPosted over 1 year ago

    Nevermind! It's recognizing the border-radius now :)

    0