I would like to receive feedback on how I did the challenge.
Juan Ramirez
@JuanRamirez2000All comments
- @daniDev6Submitted about 1 year ago@JuanRamirez2000Posted about 1 year ago
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 helpful0 - @kayas881Submitted about 1 year ago
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,
@JuanRamirez2000Posted about 1 year agoFirst 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-hubSubmitted over 1 year ago
.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
@JuanRamirez2000Posted over 1 year agoRegarding 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 - @WesllenAraujoSubmitted over 1 year ago@JuanRamirez2000Posted over 1 year ago
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