I would appreciate feedback on the following areas:
Accessibility: Are there improvements I can make to ensure the share functionality is accessible to all users, especially those using screen readers or navigating via keyboard?
JavaScript logic: Is there a more efficient or cleaner way to handle the toggling of the share bar between mobile and desktop?
CSS organization: Are there best practices I could follow to make my CSS even more maintainable as the project grows?
Any suggestions or code reviews in these areas would be really helpful
How to make the grid adapt smoothly between breakpoints without abrupt layout shifts.
Best practices for equalizing card heights dynamically without fixed heights.
Suggestions for combining CSS Grid and Flexbox efficiently inside cards for content alignment.
Any tips or code examples to improve these areas would be very helpful!
I would appreciate feedback on how to optimize the layout for desktop screens, particularly:
Are there more efficient ways to manage spacing between cards without relying heavily on padding and margin tweaks?
Would using CSS Grid instead of Flexbox and Bootstrap grid improve the responsiveness or maintainability of the layout?
Any tips on structuring media queries for complex multi-column layouts to keep the CSS clean and scalable?
Additionally, I’m open to suggestions on improving accessibility and semantic HTML in this kind of card-based layout.
I'm open to constructive comments and feedback on any part of my page!
I would like help making the code in the nutrition section much cleaner.
Cualquier ayuda o consejo es bienvenido, cualquier consejo o tips sobre utilizar media queries aún más.
Any help or advice is welcome, especially any tips or guidance on using media queries even more effectively.
— Manejo de Clases BEM
What challenges did you encounter, and how did you overcome them?— Ajustar object-position y object-fit en distintos tamaños para que la parte deseada de la imagen principal siempre sea visible en los recortes de móvil, tablet y escritorio. — Posicionamiento del Popup
Te quedó prácticamente idéntico. Me encantó el resultado, felicidades.
All feedback is welcome. Thanks!
I loved your quiz, super interactive and easy to solve. Just one thing, although it's almost a personal request—I am a Spanish speaker and there were some words I didn’t know the meaning of in English, and when I used Google Translate on the page to translate it, it did translate but then immediately the screen went blank, which was very frustrating because I had to start over haha. But I completed it and I liked it!
Proud of getting the grid layout correct. I would likely start from mobile and work up to desktop next time. I also gave up on matching the font and colors for each section as I was focused on the layout.
What specific areas of your project would you like help with?keeping all content centered vertically as well as getting the background image quotes in the background of the first card
Your page looks amazing! To place the quotation marks SVG behind the text in the top-left corner of the card while keeping the background color, use CSS background-image with background-position: left 2rem top 2rem; and background-repeat: no-repeat;. Set the card’s background-color as usual and add a media query to show the SVG only on large screens (e.g., @media (min-width: 1440px)). This positions the SVG nicely away from the edges and behind the content. I hope this helps!
I was able to make proper use of tailwind's grid variant
What challenges did you encounter, and how did you overcome them?Rearranging the grid to have different combinations, mostly trial and error and realizing what works and what doesn't
What specific areas of your project would you like help with?I manipulated the rows and columns of the grid on the grid container for different media sizes which made it look bloated. If there is a better alternative, I'd like to know about it.
Looks amazing! The layout adapts really well to different screen sizes.
Unfortunately, I can’t see your code or live page, but the screenshot looks great!
I'm most proud of how clean and responsive the final layout turned out. It matches the design closely across different screen sizes, and I was able to apply Tailwind CSS effectively to speed up styling while keeping the codebase neat.
If I were to do this project again, I would focus more on improving accessibility—ensuring that the component works well for screen readers and keyboard users. I’d also like to implement the project using only one styling approach, either Tailwind or Bootstrap, to avoid unnecessary overlap.
What challenges did you encounter, and how did you overcome them?One of the main challenges I faced was making the layout responsive on smaller screens. At first, the elements overlapped or didn't stack properly. I overcame this by reviewing how flexbox and media queries work, and then applied a mobile-first approach to fix the layout step by step.
Another challenge was deciding when to use utility classes from Tailwind versus writing custom styles. To keep things organized, I stuck mostly to Tailwind but used custom classes only when necessary for clarity and reuse.
What specific areas of your project would you like help with?I'd really appreciate feedback on the following:
Responsiveness: Does the layout adjust well across different screen sizes? Are there any breakpoints or devices where it looks off?
Code structure and readability: Is my HTML and CSS organized in a clean and maintainable way? Any tips on improving naming conventions or reducing repetition?
Mixing frameworks: I used both Tailwind CSS and Bootstrap—was this a good decision, or should I stick to one? What’s the best way to manage or separate styles when combining frameworks?
Accessibility: Are there any improvements I could make to ensure the component is more accessible (e.g., better focus states, semantic elements, or alt text usage)?
I’m open to any tips that can help me improve as a front-end developer, especially in real-world projects like this!
Hi! I just finished this same challenge a moment ago, and from my experience, I can tell you that to properly structure the image alongside the information on desktop size, you should use Bootstrap’s grid columns. Look into them on the Bootstrap website—they are very easy to use and make it really simple to create a responsive page. I also recommend designing mobile-first and then progressively enhancing up to desktop because it’s actually much easier that way! I hope this helps you.
