Skip to content
OverviewSolutions
9
Comments
4
Juan Ramirez
@JuanRamirez2000

All comments

  • Juan Ramirez•170
    @JuanRamirez2000

    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
  • Juan Ramirez•170
    @JuanRamirez2000

    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)

  • Fawziyyah-hub•130
    @Fawziyyah-hub

    bootsrap

    #accessibility#bootstrap#materialize-css
    4
    Juan Ramirez•170
    @JuanRamirez2000

    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/

  • Juan Ramirez•170
    @JuanRamirez2000

    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.