The goal is to write styled components in React but need to learn a lot more to get there.
Animations! The short-hand property is pretty overwhelming and I wonder if the code is written correctly.
Any other tips on how to render specific images in React based on screen sizes are welcome!
Any other ideas on how to structure the data.js differently are welcome!
Everything.
What challenges did you encounter, and how did you overcome them?Grid layout was confusing at first but managed it well.
What specific areas of your project would you like help with?I want to make the cards to align themselves properly as we go down from full screen to mobile layout. Grid (maybe has auto responsive functionality) should adapt with the screen size.
Nice work! One tip: go for the mobile-first approach. It will be easier to set up the layout. No need for a new grid layout at your @media screen and (max-width: 540px) breakpoint for example.
none
What challenges did you encounter, and how did you overcome them?none
What specific areas of your project would you like help with?none
Great work! All is working fine.
I was able to gain more detailed knowledge on responsiveness and best practices.
What challenges did you encounter, and how did you overcome them?Overdoing things in Tailwind and CSS, while truly understanding responsiveness, has been greatly aided by Kevin's videos.
What specific areas of your project would you like help with?Any kind of feedback!
Great solution on how to set the images based on the screen size. Didn't think of that myself!
Just one tiny thing: I never use tailwind.css but seems to me that the card div has a max width of 600 px while the rendering of the image is set to a width bigger than 640px. Shouldn't that be the same sizes?
I've utilized Tailwind Directives, a new learning experience for me.
I've centralized required text contents, such as preparation time, ingredients, and instructions, into constants stored in a separate folder named constants.
I've followed a mobile-first design approach throughout the project.
What challenges did you encounter, and how did you overcome them?Tailwind doesn't style headings by default. So, I made custom directives to style them.
Also for the table element created component directives. (index.css file)
What specific areas of your project would you like help with?Any better way of doing things, better practices.
Any suggestions or doubts appreciated.
Nice work. Maybe use useState next time to pass through the data into the components.
Need to work upon responsiveness
What challenges did you encounter, and how did you overcome them?Nothing as such
What specific areas of your project would you like help with?Responsiveness
Colors and hover state aren't correct according to the style guide.
I really liked using css custom properties for changing font sizes based on media queries.
Next time I would pay more attention to writing semantic html.
What challenges did you encounter, and how did you overcome them?Setting up emotion with typescript support was not as well documented as I had hoped.
What specific areas of your project would you like help with?I would be glad about any css specific feedback I could get. Any obvious improvements I could make to improve the code-base?
Don't have any knowledge about typescript but as you mentioned yourself, maybe next time use css custom properties and separate the card into a specific component.
