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
I have try to write the correct structure with HTML and CSSI have try to create whole page with my own with almost looking page
What challenges did you encounter, and how did you overcome them?face some challenges while giving padding and to fit that user image at the end inside the main DIV
What specific areas of your project would you like help with?I can write the structure pretty well but in some css design I got really confused
Hey, this design looks really clean! I like how you used HSL colors—makes it super easy to tweak shades. Also, great call on loading the Figtree font locally; that’s perfect for performance. The box shadow is bold, which gives the card a nice pop. I noticed there’s no hover effect on the card though—might be cool to add one for some interactivity, like changing the shadow or color slightly. Love how the flexbox is used for the author section too—it all feels well-aligned and responsive. Overall, solid design with a clean structure
Great job on the project! I noticed that a lot of the CSS could be simplified by using Flexbox instead of grid for certain areas, especially when centering elements and aligning content. Flexbox often requires fewer lines of code and can achieve similar layout results with less complexity. It also makes responsiveness easier to manage across different screen sizes. Overall, using a bit less CSS and letting Flexbox handle alignment and distribution could make the code even cleaner and more maintainable. Keep up the great work!"
