I’d like some guidance on effectively using mixins or reusable styles in Tailwind, similar to how CSS handles mixins. I’m curious if there’s an efficient way to apply repeated styling patterns across multiple components without adding redundant code.
Additionally, I’ve noticed my HTML tags are getting cluttered with a lot of classes, making them look a bit unwieldy. Are there any strategies or best practices in Tailwind for keeping my code cleaner, especially when it comes to managing lengthy class lists? Any tips on optimizing readability would be great!
I would like help with reducing CSS code, how can I optimize the code, I am not sure I have use correct semantic HTML, any feedback is appreciated, Thanks
While the current layout works, I feel there may be more efficient flexbox techniques or grid approaches to achieve the desired desktop layout without as many nested wrappers. Any guidance on optimizing complex responsive layouts with fewer containers would be helpful. I’d appreciate tips on maintaining equal height for flex children in a row without relying on fixed height or min-height. Sometimes, flex children with varying content height still misalign slightly on different screens, and I’m looking for more flexible ways to solve this.
I would like help on how to effectively use media queries and do I have to set max-width and max-height since in the given design there are set heights and widths or I can set them as auto
Borders and gaps: I'm curious about how I handled the table borders and spacing between rows in the nutritional box. Is there a better way to manage borders when collapsing them and still maintaining some separation between rows? and also I wanted to know more about media queries
I wanted to know more about responsive design, and how can I optimize my CSS code
I had issues with z-index. I have never fully understood z-index and how to use it, but thankfully this project required a lot of it and I was able to complete the necessary research needed to become more confident in three-dimensional positioning.
Great job on the design! I’ve also started using Tailwind for my project and took a similar approach—hiding hero images on mobile and applying them only on desktop, using negative margins for the hero images to create an overflow effect, and using absolute positioning for the "02" divider. I don’t have much feedback since our approaches are pretty similar, but overall, it looks really good! The design is nearly identical to solution, with just a few adjustments in height.
Making react load image dynamically. since I'm using typescript I can't just use require or if I use import to load image dynamically it was throwing me Strict MIMI error in the server side.
I’m just starting to learn Tailwind CSS, so this project is a great reference for me! It’s helpful to see how you’ve used utilities like flex, justify-center, and grid classes for alignment and spacing. Looking forward to applying these in my own projects, overall good work
I'm most proud of understanding more about SCSS and how to separate parts of codes by using partials.
What challenges did you encounter, and how did you overcome them?A challenge that I faced while working on this project is arranging the cards in the desktop version that resembles the original design. I overcame this challenge by using Figma and taking a look at the layout grid of the desktop frame, and I seen that the cards were on a three column grid. So, I used display:grid instead of display:flex for the desktop-version.
With this project, I wanted to focus on structuring my folders and sub-folders. I would appreciate it if someone can take a look at my code and see if my folder structure is correct.
This layout looks great! One difference I noticed is that mine centers the title and description more by using justify-content: center and align-items: center, while yours uses specific margins. The card layout here with grid and transform positioning achieves a cool effect but might be easier to adjust with flexbox for responsiveness. Overall, good design
Fier : Je suis particulièrement fier des media queries que j'ai mises en place. Elles m'ont donné le plus de difficultés, mais j'ai réussi à rendre le site vraiment réactif et adaptatif à différentes tailles d'écran.
Différemment : La prochaine fois, je me concentrerai sur l'optimisation des performances et l'ajout d'animations plus fluides pour améliorer l'expérience utilisateur.
What challenges did you encounter, and how did you overcome them?Défis : Les media queries ont été le plus grand défi, car il fallait s'assurer que le contenu s'adapte parfaitement à chaque taille d'écran.
Solution : J'ai surmonté ce défi en utilisant des outils de développement pour tester les différentes résolutions et en ajustant les styles jusqu'à obtenir le résultat souhaité
What specific areas of your project would you like help with?J'aimerais obtenir de l'aide pour optimiser encore davantage mes media queries et comprendre comment les rendre encore plus efficaces et fluides.
Overall good design, but the card in desktop design is little bit smaller with smaller dimensions, you can adjust them using max-height and max width and more over it is better to design mobile first which is less complex and adjust the design for desktop using media with min-width (screen size), nice work overall
This recipe page looks great! The layout is clean, the fonts are nice, and it's responsive too, which is a big plus. Just watch out for small typos in the class names and maybe adjust the container height for more flexibility. Overall, awesome work!
I'm proud because i can feel my work flow and eye to hand coordination improving with each challenge.
What challenges did you encounter, and how did you overcome them?I felt pretty confident through this challenge.
I saw you have used media queries, the topic I want to learn more about, overall great job
