using more of the tailwind classes that i haven't use before and finishing the project faster compared to the previous one.
What challenges did you encounter, and how did you overcome them?the margins and padding. also the deployment to vercel have a build problem
I'm getting more comfortable to figure out the layout styles and which rules of CSS needed to be acheived the result.
What challenges did you encounter, and how did you overcome them?I have confused to which layout styles i need to use at first (grid or flexbox). and get some more time to adjusting to it.
What specific areas of your project would you like help with?-When i used media-queries, the icons of two cards were out of place. I don't know why it occurred. So i have to adjust their top on the media queries like this
.service-team-builder .img--service-icon , .service-calculator .img--service-icon { top: 5%; }
-I need a bit help of naming convention on CSS selector which i tried to follow BEM (Block, Element, Modifier). I think what i used so far was not corrected.
Great job,
Your design look closer the suggested one; For more consistency & re-usability of code, you should use css car for colors and use use those var with tailwind.
/* index.css */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--dark-cyan: hsl(158, 36%, 37%);
--darker-cyan: hsl(158, 36%, 25%);
--cream: hsl(30, 38%, 92%);
--very-dark-blue: hsl(212, 21%, 14%);
--dark-grayish-blue: hsl(228, 12%, 48%);
--white: hsl(0, 0%, 100%);
}
<--product-card.tsx--> <div className="py-2 px-5 md:p-6"> <p className="tracking-wider text-[--dark-grayish-blue]">PERFUME</p> ... </div>
See you.
Proud of: Separation between Mobile and Desktop components allows for simple, declarative styling without having to use complex CSS rules.
Would do differently: Make better use of component composition.
What challenges did you encounter, and how did you overcome them?Challenges: Duplicate code, verbosity with TailwindCSS classes.
How I overcame them: Interface definitions, interface composition.
Great job,
Your design look closer to the suggested one. Padding used in your design are wider than ones on the design; You should paid attention to details about used color in the design, that could help you design more precisely what the gave you to design.
See you.
My ability to use CSS flex effectively
What challenges did you encounter, and how did you overcome them?The use of position-absolute and relative
What specific areas of your project would you like help with?None
Greet job
You should take care of padding value to ensure you design being so close to the suggested one.
You should tailwindcss to help you using more generic & reusable css classes instead of using tied coupled css classes.
See you.
This is a very attractive yet simple card , that I was able to build on my own. I would like to make a habit of reading about something before using, I was having some problems trying to make tailwind work, but they have a different configuration when using react with vite, that I missed but was able to rectify
Good job,
For this project, it would be nice idea to let assets file in the public directory;
Increase a little bit padding in the card & border-radius should made it look more closer to the suggested design.
See you.
Nice for your design
