Skip to content
OverviewSolutions
4
Comments
8
Renato Lacerda
@ralacerda

All comments

  • Renato Lacerda•160
    @ralacerdaPosted about 2 years ago

    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
    0
  • Renato Lacerda•160
    @ralacerdaPosted about 2 years ago

    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
    0
  • Xiang•210
    @000xzhouSubmitted about 2 years ago

    The most difficultly part is installing react. Since I'm just learning react here is a simple static page made from it.

    Thank you everyone for helping me deploy this react project on github. The problem all along was because I type my /<repo>/ wrong

    Product preview card component

    2
    Renato Lacerda•160
    @ralacerdaPosted about 2 years ago

    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
    1
  • Renato Lacerda•160
    @ralacerdaPosted about 2 years ago

    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
    1
  • Renato Lacerda•160
    @ralacerdaPosted about 2 years ago

    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
    0
  • Renato Lacerda•160
    @ralacerdaPosted about 2 years ago

    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
    0
  • Renato Lacerda•160
    @ralacerdaPosted about 2 years ago

    Hey, that's is a great start!

    One thing that is easy to miss is the card shadows, I also didn't notice it when I first did this challenge, so don't worry about it.

    Sometimes is hard to understand the accessibility warnings. In your solution, you are missing the "main" landmark, you can easily fix this by using the <main> tag in your ".container", instead of a <div> tag.

    I think it's easier to center the card with a grid display (only 2 lines needed), but the end result is the same.

    You also don't need the card to be a flex, since the normal flow of blocks is vertical.

    0
  • Renato Lacerda•160
    @ralacerdaSubmitted over 2 years ago

    Probably really bad practices.
    By far the worse thing was setting the right letter-spacing.

    I'm not even sure if I should be using flex for this, it might be overkill. I'm not sure how to include the footer without changing the position of the main component.

    Flex and Sass

    2
    Renato Lacerda•160
    @ralacerdaPosted over 2 years ago

    I just noticed I missed the box shadows. It's a small detail, but I think it makes the design "pop" more. It's not something I would pay attention to before, but I'll from now on.

    0