Renato Lacerda
@ralacerda
All comments
- Renato Lacerda• 160
@ralacerda
Posted
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 athttps://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 - Ritesh Diwan• 50
@abandonedwaffle
Submitted
What should one do learn Flexbox properly? I am still not very comfortable with using Flexbox and media queries.
Renato Lacerda• 160@ralacerda
Posted
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
@000xzhou
Submitted
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
Renato Lacerda• 160@ralacerda
Posted
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.
Marked as helpful
1 - Ahmed Ramadan• 80
@ahmed-abohmaid
Submitted
It is close or not?
Renato Lacerda• 160@ralacerda
Posted
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 - Tania Diaz• 10
@tluciad
Submitted
Renato Lacerda• 160@ralacerda
Posted
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 tocard
, since it better describes the element.Marked as helpful
0 - Mohamed Nejjar• 170
@NJR911
Submitted
Renato Lacerda• 160@ralacerda
Posted
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 - Evelyn Matos• 80
@evelyn-matos
Submitted
Renato Lacerda• 160@ralacerda
Posted
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
@ralacerda
Submitted
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.
Renato Lacerda• 160@ralacerda
Posted
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