daniDev6• 150
@daniDev6
Submitted
I would like to receive feedback on how I did the challenge.
Juan Ramirez
@JuanRamirez2000
All comments
- Juan Ramirez• 170
@JuanRamirez2000
Posted
Nice job!
Everything seems fine, the only thing I would suggest is maybe changing the naming of some of your css class names. I noticed you have ".card-image" referencing the container for the image. This is fine, but it might lead to confusion somewhere down the line. Maybe changing it to ".card-image-container" and referencing the image itself by ".card-image-container > img" would be more readable.
Marked as helpful
0 - Kayas• 150
@kayas881
Submitted
making the qr code fit in the box was kind of difficult, The width and height of my code i am not sure, if i did the right thing,
Juan Ramirez• 170@JuanRamirez2000
Posted
First off welcome! This is a really good first attempt and I hope my feedback pushes you in the right direction! I mainly have tips for using tailwindcss. They are minor but I do hope that they help
-
There is a className being used in the App.tsx file named "image" on a div that I don't believe is defined anywhere. Tailwindcss doesn't have a class for that
-
Text in tailwind can have its opacity dropped using their own percentage system. For example, you can do "text-white/40" which will color the text as white with opacity of 40%. This would style the bottom text for the QR code component to have the "gray" color
-
The image tag in App.tsx should have an alt="" property for accessibility
-
Keeping the text within the component should be a matter of sizing I believe. The way I would handle this is to have the component at a fixed height (though I am sure this is the wrong approach)
2 -
- Fawziyyah-hub• 130
@Fawziyyah-hub
Submitted
.it was difficult trying the get the correct width and also the colors that were used
.i don't know yet
.Yes i do. how can i balance my school n tech life
Juan Ramirez• 170@JuanRamirez2000
Posted
Regarding the colors used.
If you are always unsure of what color an element is and you dont have the style guide as described in the other comment, you can always resort back to using chrome devtools (not sure about the process for other browsers)
Chrome devtools has a color picker that you can use to find the color of any element on the screen. You can open the chrome devtools by rght clicking and hitting 'inspect". From here in the Elements tab you can go towards the subsection called "styles"" and find the color attribute. Clicking on the color here will bring up a color picker that you can use to find the color of any element on the screen.
This is a better explanation than the one I have above. Hope it helps! https://geekflare.com/google-chrome-color-picker/
0 @WesllenAraujo
Submitted
Juan Ramirez• 170@JuanRamirez2000
Posted
I am not sure if you sent the wrong link or your deployment went wrong, but for Vercel you can link your github account to select repos to deploy.
To do this you can log into your vercel account and go into your dashboard and follow these steps. https://vercel.com/docs/concepts/deployments/git#deploying-a-git-repository to deploy a repo from your github account into a vercel app.
0
