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!
I used Tailwind CSS to style this card. I believe my learning path with Tailwind CSS is on the right track. All criticisms and suggestions are most welcome.
Nice job!
Some things to note:
mobile: class for responsive styles. While this works, sticking to Tailwind's default responsive modifiers like sm:, md:, lg: is recommended. It maintains consistency and reduces dependency on custom configurations.<img> tags are missing meaningful alt attributes. For accessibility, include descriptive text for each image.I just went for html + tailwind, I think I will change to a css file if Im required, if not Tailwind all the way
What challenges did you encounter, and how did you overcome them?I just learn how to center a component, I was not aware of origin points being the upper corner of a div or any html element
What specific areas of your project would you like help with?I dont know if what I did is the best thing to center a component
You've done a commendable job with this project! The code structure is clean, and you’ve used semantic elements effectively.
You have added the #react hashtag to your submission, and I wonder why? It's not a React application.
Great work overall - keep building!
