Skip to content
OverviewSolutions
19
Comments
22

David Osorio

@osoriodevOaxaca, México560 points

Hi there. I'm a Frontend Developer and passionate about the web. Constantly learning and improving.

I’m currently learning...

Next.js | React | TypeScript | Tailwind

Latest solutions

View more solutions

Latest comments

  • David Osorio•560
    @osoriodev

    Hi Ali

    There's a problem. When you deploy a project with GitHub Pages, the root directory(/) refers to username.github.io, not the repository itself. You must use a relative path, in this case it must be body { background-image: url("../images/bg-desktop.svg"); }

    Btw, remember to use the aria-label attribute for <a> tags when there is no discernible text.

    I hope it helps.

    Marked as helpful
  • David Osorio•560
    @osoriodev

    Hello @JoshuaAD

    The best thing you could do is work with your own styles. It's true that Figma provides certain styles, but they are not actually optimized to work on a real website. You can use Figma to check for more specific things, for example: font sizes, colors, paddings, widths, etc.

    Btw, you have some accessibility issues. There must be an h1 on the page, it's very important for semantic and accessibility reasons.

  • David Osorio•560
    @osoriodev

    Hello @titocs, you have some accessibility issues.

    • You are using an h1 for each card title. There can only be one h1 on the page.
    • You have an h3 for the person's name and an h5 for the text "Verified Graduate", that doesn't make sense.

    When you use HTML headings, you must follow a logical order like a book's index.

    • h1
      • h2
        • h3
        • h3
        • h3
      • h2
      • h2

    Headings are usually separated by an article, a section, etc. I hope it helps you 👍

  • David Osorio•560
    @osoriodev

    Hello. I see your styles don't work. <link rel="stylesheet" href="/styles.css">

    You must add a dot to the href: <link rel="stylesheet" href="./styles.css">. This is to indicate that the file is on the same path, the same for the images.

    Btw, remember that there must be an h1 on the page.

    Marked as helpful
  • David Osorio•560
    @osoriodev

    Hello Obuhri.

    Your solution looks great. As a suggestion you can use a tags for the social media icons, I think it is more appropriate than using a span. I hope this helps ✌

  • David Osorio•560
    @osoriodev

    Hello there.

    I suggest you use a button element for the share option and put the icon inside, same for social media icons, it is better to use a tags and put the icons inside. This for better accessibility and semantic HTML.

    Don't forget to use the aria-label attribute as there is no discernible text.

View more comments