Skip to content
OverviewSolutions
11
Comments
6
Kerby
@KeremBakan

All comments

  • Kerby•200
    @KeremBakanPosted almost 2 years ago

    You can use transition on button hovers.

    You can use mix-blend-mode: screen in button class to make same color with background even you change background color it will be same color.

    The alt attribute should not contain the words "image", "photo", or "picture", because the image tag already conveys that information.

    The alt attribute should explain the purpose of the image.

    If you want to learn more about the alt attribute, you can read this article. 📘.

    Happy Coding 😁

    0
  • Eneyee•60
    @EneyeeSubmitted almost 2 years ago
    • How much of the code is usless or repeats what was already stated earlier?
    • How to aproach positioning of the elements better?
    • Please recomend some resourses for learning front-end for an abslute beginner and maybe provide a general roadmap of front-end developer

    QR code component solution with basic HTML/CSS

    2
    Kerby•200
    @KeremBakanPosted almost 2 years ago

    Your <img> tags should have alt attribute.

    The alt attribute should explain the purpose of the image. Uppon scanning the QR code, the user will be redirected to the frontendmentor.io website, so a better alt attribute would be QR code to frontendmentor.io.

    If you want to learn more about the alt attribute, you can read this article 📘.

    Every page should have <h1> tag because it is important for screen readers. If you want to add <h1> tag but making it only visible for screen readers, you can use something like this.

     .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
      }

    Your page should have <footer> tag.

    You can use reset.css or normalize.css to reset default styling.

    Happy Coding 😁

    Marked as helpful
    1
  • Mateo Rinland•210
    @mateorinlandSubmitted almost 2 years ago

    The background isn't exactly the same as the design. I'm not sure if the best way to get it exact is to tinker with the background-position or if there's a better method like maybe using translate.

    Profile card component

    1
    Kerby•200
    @KeremBakanPosted almost 2 years ago

    You don't have to reset default styling manually just use reset.css or normalize.css to reset default styling.

    Your background is fine you don't have to worry about it.

    Your font is not same with design I assume default styling causing it.Just reset styling and try again.

    Sorry for bad english.

    Other than that God Job.

    Happy Coding 😁

    Marked as helpful
    1
  • Kerby•200
    @KeremBakanPosted almost 2 years ago

    Your page should have <footer> tag. Every page should have <h1> tag because it is important for screen readers. If you want to add <h1> tag but making it only visible for screen readers you can use something like this.

     .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
      }
    0
  • Kerby•200
    @KeremBakanPosted almost 2 years ago

    You should use <main> tag it is semanticly important. Every page should have <h1> tag because it is important for screen readers. If you want to add <h1> tag but making it only visible for screen readers you can use something like this.

     .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
      }

    Happy Coding 😊

    Marked as helpful
    0
  • Kerby•200
    @KeremBakanPosted almost 2 years ago

    You have to use header tags in order <h1> <h2> <h3> go on like this. You should use reset.css or normalize.css to reset browsers default styling. To center .container on the page you can also use this code snippet.

    .container {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
}

    Other than that good job.

    Happy Coding

    0