I'm proud of implementing this with Tailwind CSS.
What challenges did you encounter, and how did you overcome them?I faced challenges as I'm new to Tailwind CSS, but I learned by following documentation and examples.
Great job! It looks exactly the same as the design. Just note a few slight differences:
1. The letter spacing of 'perfume':
In Tailwind, this can be achieved with tracking-widest, which might make it look closer to the design.
2. The corner radius: The design appears to have slightly more rounded corners compared to your work. It's not a big deal, though.
Implemented a few components to get reps on React - also got to practice implementing Tailwind on specific components to ensure DRY code.
What challenges did you encounter, and how did you overcome them?Not thinking about React or Tailwind as separate technologies, but to mesh them together as part of a singular efficient workflow in preparation for implementing interactive web applications.
What specific areas of your project would you like help with?Speed and efficiency when implementing a mobile-first design with Tailwind CSS.
Nice work! I struggled with Tailwind CSS as well. Thank you for the advice on mobile-first design, I completed this challenge that way, and the result is satisfying!
By the way, your GitHub page seems to be unavailable. Is that intentional?
I was able to successfully implement a mobile-first design, starting with the mobile view. I need more reps to be comfortable with this since I am used to doing desktop-first design + I am learning all the new technologies: React, Tailwind CSS, Git + GitHub, and deploying to Vercel.
It's a little overwhelming, but I am focused on implementing the challenge, as it is the most important aspect of learning.
What challenges did you encounter, and how did you overcome them?Gradually moving up to desktop view. I am still getting used to the mobile-first approach.
What specific areas of your project would you like help with?I think I just need more reps.
Wow! Your solution is really close to the design file, great job! Since I haven't start a mobile-first design, I am curios about the process, does it just reverse the sequence of media query?
Hover Animation. the shadow animation looks cool
What challenges did you encounter, and how did you overcome them?Challenge I faced was in spacing between each text elements. to get exact I had to put in a lot of work
What specific areas of your project would you like help with?probably css
Hi, tejasnegi!
Your website looks so good, and I agree the animation of the card and the shadow is really cool. Honestly I don't think there is anything to revise.
As for the css you mentioned, here are some advices:
Reduce Redundancies
font-weight: bolder.:root {
--primary-bg-color: #f4d04e;
--font-bold: bolder;
--text-gray: #6b6b6b;
}
.card-category {
background-color: var(--primary-bg-color);
}
Custom Fonts Fallback
I'm proud of how quickly this was able to come together. Next time I need to work more on my CSS because I feel like I could have done the positioning of everything in an easier way.
What challenges did you encounter, and how did you overcome them?I struggled with the positioning and sizing. Luckily with the sizing I was close enough compared to the figma design. With the positioning I had to keep googling different CSS properties but I did figure it out eventually. But I do feel like I could have made things like the bottom text more exact to the photo.
Hi, ks9927! Congrats for Your Great Work on This Project
It's amazing you use such clear css code to complete this challenge! Honestly I don't feel like there's anything to revise. But here's some nit-picking for your work.
The Position of The Component
I'm not sure why your screenshot looks like the component is so close to the top of the viewport? A possible cause is that you didn't put a reset on the whole document (just a guess)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
In this part of code, I clear all the margin and padding for a reset of my project, and set the box-sizing to border-box, which made my child containers will be right inside the parent containers. (ref: MDN - box-sizing)
and for the body part, I add a property height and set to 100vh to make sure it would take the whole height of the viewport.
Small Text Align
This is a really small point about your small text since it's a little exceed the design example. The way I get through this is to set it to display: block and set the margin to 20px, and this work for me.
Conclusion
Despite of all the advices I wrote, I am really surprised of your job! Since my CSS code is so long and redundant compare to yours. It's really nice to have a chance to have a feedback to your code, hope everything goes well!