Skip to content
OverviewSolutions
4
Comments
8

Renato Lacerda

@ralacerdaBrazil160 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

  • Renato Lacerda•160
    @ralacerda

    Great job on the challenge!

    You have to be careful when using github pages since your repo name is included in the address. This means your icon image is not found, because is looking for https://volakovakat.github.io/images/icon-cart.svg, but the image is at https://volakovakat.github.io/product-preview-card-component/images/icon-cart.svg.

    To fix this problem, you can add a dot at the start of the path, so it points to the path relative to the HTML file (that is https://volakovakat.github.io/product-preview-card-component/index.html).

    <img class="img-cart" src="./images/icon-cart.svg"/>
    Marked as helpful
  • Renato Lacerda•160
    @ralacerda

    Hey, great job on the solution.

    If you want to learn flexbox, practice, read some articles and practice more. Flexbox can be simple, but it also has a lot of power to do complex things.

    The "manual" for all web development is the MDN Web Docs, they have guides, visual examples and tips. Here is their guide to flexbox, worth a read: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

    CSSTricks also has a "visual guide" to flexbox, which is really helpful to visualize how some flex properties works: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    So here is a small challenge, try centering vertically and horizontally your .container div using flexbox.

    Marked as helpful
  • Renato Lacerda•160
    @ralacerda

    You need to build the website with Vite and then publish it. You can use gh-pages to push the build version to your gh-pages branch and tell github to use that branch to create the website.

    Also, don't forget to include the repo name in your vite configuration.

    Follow a tutorial if you are still having problems

    Marked as helpful
  • Renato Lacerda•160
    @ralacerda

    Hey, awesome job!

    You got everything right and your code is really clean. People usually show the attribution at the bottom (but I can understand if you hide it to keep the design clean). You can try using position-absolute to place it at the bottom without moving the card.

    If you want to fix the accessibility problems you can use a <main> tag instead of a <div> in your box element. It should fix both warnings about landmarks.

    You can include an empty alt attribute to your img tag, or describe that it is a qr code.

    Marked as helpful
  • Renato Lacerda•160
    @ralacerda

    Great job on your first challenge.

    If you remove position: absolute from the ".white-wall" class it will stop it from stretching it.

    But you can set position: absolute; bottom: 0; on the attribution element so it doesn't increase the body size.

    Your code is well written, I would only change the white-wall class name to card, since it better describes the element.

    Marked as helpful
  • Renato Lacerda•160
    @ralacerda

    You can use

    body {
  background-size: contain;
  background-repeat: no-repeat;
}

    to resize the background to the full size without repeating it.
    And then don't forget to pick a background-color! The SVG has transparent regions.

    Also, check out 1linelayouts for a simple solution to centering the card.

    Marked as helpful
View more comments