Styling the "Speech Bubble" Component: While functional, the implementation feels overly complex. I’d appreciate advice on making it more intuitive and scalable using modern CSS techniques.
Responsive Design Patterns in React: I’d like to explore more efficient or idiomatic ways to handle responsive layouts and media queries in React, maybe without relying on window.matchMedia.
Accessibility Enhancements: I’ve added ARIA labels and semantic elements, but I’d welcome a review to identify any overlooked accessibility issues or opportunities for improvement, especially for screen reader users.
Since I'm relatively new to CSS, I have not much experience with CSS projects. But I learn a lot by doing these Frontend Mentor challenges. In addition, I decided to read and practice some ideas from the book "Every Layout". I think my CSS will benefit from it.
Like I said above: I know there must be a solution for partitioning the cards for the grid layout columns with HTML and CSS only, but I have not found one yet. I will look at other solutions later to see how it could be done.
I need more fundamental information on "Responsive Design". That's why I started Kevin Powell's 21-day course "Conquering Responsive Layouts".
Especially the problem with the image on top of the recipe page was a challenge for me. I don't know if my solution is good. I'd like to hear about a better one.
Before I continue with the challenges, I will first complete some learning for React applications in general.
Biggest challenge here is probably figuring out the structure of the share popup and the button without duplicating the content or making it too weird or complex. I think I did alright.
I struggled quite a bit with this challenge and found solutions that now feel overly complicated when compared to your approach. This comparison has been an eye-opener and highlighted ways I can improve my own method:
What I especially admire about your solution is how it accomplishes everything required in a clean, simple way that is far more readable—and ultimately more maintainable—than my own approach. I’ve learned a lot from reviewing your work!
I think you demonstrate a strong understanding of Tailwind CSS, responsive design principles, and modern web development techniques with React and Vite. The thoughtful use of utility-first styling, customized theme configurations, and grid layouts makes the design visually appealing and adaptable to various screen sizes.
Especially, I like your thoughtful spacing with gap-y-6 and gap-x-8 for consistent design alignment.
I believe you could further enhance your solution with some accessibility markup and semantic markup, like wrapping a testimonial card in an "article" element:
<article aria-labelledby="daniel-title"> <!-- ... -> <h2 class="text-white flex flex-col text-sm" id="daniel-title">Daniel Clifford</h2> <!-- ... --> </article>
Overall - like always so far - I like your solution to the challenge!
Your solution looks great for me:
grid-cols-1, lg:grid-cols-3, lg:grid-rows-2, gap-6, md:gap-8) ensures that the layout adapts to different screen sizes<main>, <footer>, <h1>, <h2>, and <p>font-semibold, font-extralight, text-xl) aligns with the designrow-span-2 and order-last demonstrates an understanding of advanced CSS grid properties to achieve the desired layout; I had to look it up to get an idea of what it does ;-)If I had to say one thing that I used myself:
The bg-${color} pattern wasn't used, and instead, colors like border-cyan and border-red are hardcoded. I believe it's because you want to prevent Tailwind from purging the CSS. Consider using dynamic class generation with Tailwind's safelist. E.g. I had defined the primary colors in tailwind.config.js and then included this:
safelist: [ { pattern: /(bg|text|border)-(primary-red|primary-cyan|primary-orange|primary-blue)/, },
I really like your nice and clean implementation!
There's little to say here: your solution looks perfect and matches the design very closely.
What can be done is: use some aria stuff for enhanced accessibility. For example, "hide" the <img> in the button with aria-hidden="true".
Nice job!
I think use CSS Modules with React. I will use Tailwind CSS soon
What challenges did you encounter, and how did you overcome them?Use prop types correctly, i needed read about Proptypes's types and use cases
What specific areas of your project would you like help with?About the naming on BEM and PropTypes :)
Your solution is a really nice React application. I like how you have broken up the code in multiple components. That makes the structure of the project crystal clear. Good job!
Maybe you want to consider two small improvements?
.recipe-card__nutrition-table-tr conditionally for every <tr> except the last one. In that case it would be helpful if nutrition was an array - not an object.Anyway, I really like how you have structured your app! Again: great work!
Your solution for the "Social Links Profile" challenge demonstrates good use of semantic HTML and a well-structured CSS approach. The layout is straightforward, responsive, and visually cohesive, aligning with the requirements of the challenge. There exists only minimal improvement in terms of accessibility, maintainability, and visuals.
The use of semantic elements such as <main>, <section>, and headings (<h1>) is excellent.
The media query ensures a responsive design for screens smaller than 425px.
Adjustments for font sizes and padding are thoughtful.
The hover effect on the .socials buttons is intuitive and visually distinct. The use of transition effects (transition: all 0.2s ease-in-out;) is a nice touch!
The CSS is well-organized and avoids unnecessary properties.
The inclusion of font-optical-sizing: auto; is an advanced CSS feature. Nice!
Missing alt attribute content: The alt attribute for the avatar image is empty. To improve accessibility, provide descriptive text such as alt="Jessica Randall's profile picture".
The attribution link (Your Name Here) should be updated to your name or GitHub profile. Be proud of your work!
You have tagged your solution to this challenge with the #react tag, although it's not a React application.
Your solution effectively meets the challenge requirements with only minor room for improvement in accessibility. Great job!
