Skip to content
OverviewSolutions
2
Comments
11
Kevin Irias
@kiriasru

All comments

  • Kevin Irias•40
    @kiriasruPosted 4 months ago
    • Your HTML structure is generally good. Keep in mind using semantic tags. You should wrap everything in a main tag.
    • It seems that you don't have the asset's folder, so images won't load.
    • Add a descriptive alt attribute to <img> (alt="QR code" for example). It helps users who rely on screen readers understand the content of the image.
    • Add some margin-bottom in <p class="highlight">Learning</p>
    0
  • Kevin Irias•40
    @kiriasruPosted 4 months ago
    • Don't forget to wrap everything in a main tag for accessibility :D
    • The background-color is slightly different
    0
  • Kevin Irias•40
    @kiriasruPosted 4 months ago

    Nice!!! Take the following into account:

    • You should wrap everything in a semantic tac (<main></main>)
    • Change the background-color
    • Add some padding (around 17px) to the <div class="qrContainer">
    • Add a descriptive alt attribute to <img> tag (alt="QR code" for example). It helps users who rely on screen readers understand the content of the image.
    0
  • nais-4•10
    @nais-4Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud enough that I actually finished this project.

    What challenges did you encounter, and how did you overcome them?

    I had difficulty centering the QR Code vertically. I watched Kevin Powell's videos to get an understanding of Flexbox more.

    QR Code built with HTML & CSS

    1
    Kevin Irias•40
    @kiriasruPosted 4 months ago
    • Your HTML structure is generally good. I'd be great if you wrap everything in a semantic tag <main>
    • The QR code component is visually clear, but there is room for an accessibility improvement, which is adding a descriptive alt attribute to <img> tag (alt="QR code" for example). It helps users who rely on screen readers understand the content of the image!
    1
  • Kevin Irias•40
    @kiriasruPosted 4 months ago

    Nice! Try to reduce a little bit the font-size of h1 :D

    0
  • Kevin Irias•40
    @kiriasruPosted 4 months ago

    It looks exactly the same!! There is only a difference in the box-shadow

    0
  • Kevin Irias•40
    @kiriasruPosted 4 months ago

    Take two things into account!

    • Change the background color
    • Correctly target your image like this:
    <img src="./image-qr-code.png" alt="qr-Code image" width="100%">
    0
  • Rodrigo Lira•20
    @rodrigoroninSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Did the project as a warmup

    What challenges did you encounter, and how did you overcome them?

    None

    What specific areas of your project would you like help with?

    None

    QRCode challenge

    1
    Kevin Irias•40
    @kiriasruPosted 4 months ago

    Nice! You might want to center the wrapper :D

    1
  • Kevin Irias•40
    @kiriasruPosted 4 months ago

    Nicely done!!! :D Take the following things into account:

    • You should use text-align: center; for your h1 and p tag.
    • Remove the following css code from your h1 and p:
        display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    0
  • Lifes-Tough•40
    @Lifes-ToughSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud that i successfully completed it.

    What challenges did you encounter, and how did you overcome them?

    I had difficulty with almost everything and had to search up most of them.

    What specific areas of your project would you like help with?

    I need help with mainly html portions such as making divs. I dont really understand that part.

    QR-code

    2
    Kevin Irias•40
    @kiriasruPosted 4 months ago

    Nice!!!! You can center the card div by using flexbox :D

    • Add some margin-bottom to the <p> tag
    • Reduce the size of the <h1> tag
    • Try the following css code to center the card div
    .main {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
    0
  • Kevin Irias•40
    @kiriasruPosted 4 months ago

    Try to include semantic HTML! Font should be: font-family: "Outfit", sans-serif;

    Marked as helpful
    0