Skip to content
OverviewSolutions
4
Comments
4

jordancareyui

@jordancareyui80 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • jordancareyui•80
    @jordancareyui

    Your HTML and CSS look very clean!! I also like how you added the attribution at the bottom of the main div, I never thought of doing that. If you're interested in tweaking this in the future, adding some styles to change the size and font-weight of the headings could help make this more accurate. Additionally, the font used for the h3 is wrong, in the design it's Outfit instead of Young Serif. Nice job on this!!

  • Mauricio•120
    @Lucknagh
    What specific areas of your project would you like help with?

    I had difficulty centering the text of the links, if you could give me feedback on other ways that I could have aligned I would appreciate it

    Social links profile

    3
    jordancareyui•80
    @jordancareyui

    For centering, text-align: center gets the job done for me the majority of the time.

    Marked as helpful
  • jordancareyui•80
    @jordancareyui

    You have a typo in the author's name, his name is Greg Hooper, not Greg Hoop 😭.

    I think the biggest ways this deviates from the design are the size of the profile picture next to the name, and the small border-radius on the card. In the design, the border-radius is closer to 20px than 10px. Your card also looks a lot taller than the design, but it's likely because Greg's picture wasn't resized. If you open the design in Figma, you can see that it's supposed to be 32x32 px, so something quick like this (along with some adjustment for the padding) should fix the height difference.

    .container-perfil img {
height: 32 px;
width: 32 px;
}

    Your code is super clean though, I like it. I think we speak different languages, but I could tell what was going on instantly.

    Marked as helpful
  • jordancareyui•80
    @jordancareyui

    Hi Jimovan, hope you're doing well! I'm trying to get through the learning path right now, and the site won't let me continue unless I review your 1-year-old code... Apologies for my random comment, and feel free to ignore it if you wish. 🙏

    Overall, the solution looks really good! The preview has your text a bit misaligned, but I opened the page in my browser and it looks perfect there. I didn't end up using a CSS reset myself because I was afraid it would do too much, but I think that's a valid way of working with this challenge. The <article> tag you used for the card is interesting, I might look more into it.

    The only issues I see with this solution are how vivid the drop shadow is and the lack of alt text for the QR code. The dimensions and color of the drop shadow seem good, but it'd benefit from a lower opacity. As for the lack of alt text, I can understand why you didn't include it since this project is so simple (and seems a bit inaccessible to low-vision screenreader users anyhow,) but something like alt="QR code" could help people who use tools or strip the styles of webpages when they browse the web.

    Well done!