Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Product-Preview Card Component

#tailwind-css#typescript#react
Dorian Edwardsβ€’ 110

@dorian-edwards

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


So many questions. I'm still wrapping my head around Typescript for starters. Having to declare the type of values passed as props is going to take some getting used to. And how can do this and still de-structure my props?

Using tailwindcss for the first time was also fun. I feel like using it more effectively will require more careful planning, e.g. setting up my theme configuration rather than shotgunning values into every class using square brackets.

I'm also not sure what the best way to deploy a react-app to github is. I lazily uploaded the production build so nothing can be seen of the individual components or anything. I'll probably go back and fix this after a bit of research...

Community feedback

Adarsh Raiβ€’ 560

@AdarshRai0

Posted

Hi Dorian Edwards , congratulations on your new challenge!✨🎯

I took a look at your code and I have some tips for you.πŸ™Œ

If you want to improve your solution a bit I've two advice for your:

Consider using the h1 element as a top-level heading only (all h1 elements are treated as top-level headings by many screen readers and other tools).

rfume</h3><h1 class=product-title bold mb-[1.6rem] text-dk-blu>Gabril

Marked as helpful

1
Lucas πŸ‘Ύβ€’ 104,500

@correlucas

Posted

πŸ‘ΎHello Dorian, congratulation for your solution!

About the deployment, talking about my own experience and also many other people here, the best way do deal with Github Pages, is just not using and jumping into Vercel or Netlify. Github Pages is too complex to use, if you want something easy and fast to setup use vercel.com all you need to do is connect the Github account and import the repository and in a matter of 5min your live site solution is on and you can manage all the deployment settings with ease.

Hope it helps, happy coding!

Marked as helpful

1

Dorian Edwardsβ€’ 110

@dorian-edwards

Posted

@correlucas Agreed, I've worked with Netlify's drag and drop feature which is an absolute dream. I think I'll look into both of these options in the future, just kind of default to github. Thanks for the tip!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord