Some elements with Tailwind can get quite messy, like custom linear gradient images. If I were to do it again, I might consider going back to something more traditional, like combining CSS modules with Tailwind, trying to get the best of both worlds.
I can't provide detailed feedback since the solution uses TypeScript and a few other technologies that I'm not familiar with. However, I can say that the solution very closely resembles the original design, looks good across a range of screen sizes, and the code is well-structured, readable, and reusable.
Congratulations on that, and keep up the great work!
The solution looks great, both on desktop and mobile.
Here’s a little input from me:
ARIA Labels: Adding ARIA labels to interactive elements, such as buttons, can enhance accessibility.
ARIA Hidden: If the images are purely decorative, consider using aria-hidden="true" to prevent them from being announced by screen readers, ensuring a smoother experience for users relying on assistive technologies.
Headings Hierarchy: Placing an <h4> on top of an <h1> is not considered best practice. You may want to keep the <h1> as it is and change the <h4> for "Perfume" to a <p> to maintain a proper heading hierarchy.
Use of <button>: Instead of using a <div> for the button, consider using a <button> element for better semantics and accessibility. This enhances the experience for screen readers and improves keyboard navigation.
Keep up the great work, and best of luck!
I got a better understanding of spacing between elements in the challenge. I will use grid layout next time.
What challenges did you encounter, and how did you overcome them?Positioning better my elements. Understanding how use padding and margins better.
What specific areas of your project would you like help with?I want to get even a better understanding of positioning and spacing my elements and improve my understanding of responsiveness in my projects.
Solution looks great. Here my 2 cents:
Header Hierarchy: Consider using <h2> for "Preparation time" instead of <h3>, as it should follow the main title hierarchy. The same applies to the "Instructions" and "Nutrition" sections — they should be <h2> instead of <h1>.
Semantic HTML: The first <header> tag is somewhat redundant. You may want to combine the two header sections into a single <header> element for clarity.
Image Alt Text: The alt text for the header image could be more descriptive. Instead of "omelette-image," consider something like "A golden-brown omelette garnished with herbs."
List Structure: For the preparation list, consider using <strong> instead of <b> for better semantic meaning.
ARIA Labels: Consider adding ARIA labels or roles where appropriate to enhance accessibility.
Best of luck! Keep up the great work.
Saludos desde Argentina.
Hello, just my two cents here:
1.Replace <div> with <article>: It might be beneficial to use an <article> element for the profile card. This indicates that the content is self-contained and related to a single topic, which can improve accessibility and SEO.
<article class="profile-card"> Profile content here </article>
2. Place the Links Within the Card: You could consider positioning the social links inside the profile card. This would create a more cohesive unit, making it visually appealing and easier to navigate.
<article class="profile-card">
-- Profile content here --
<ul class="social-links-list">
-- social links --
</ul>
</article>
3. Add aria-labels to Links: Consider adding aria-labels to your links to enhance accessibility. This can help users with screen readers understand the purpose of each link.
Keep up the great work, and good luck on your journey.
I was wondering about an image in .svg format. Should I place it in an img tag as I did, or paste it directly into the index.html file...
This solution is excellent and surely better than mine; it was challenging to find any relevant suggestions for this peer review, but I guess that's part of the learning process.
Anyway, my two cents:
1. Semantic elements: It is advisable to replace the <div class="card"> with an <article> tag, as this element effectively represents a self-contained piece of content.
2. Ensure descriptive alt text: It is recommended to provide descriptive alt text for images to enhance accessibility.
3. Add ARIA labels to relevant elements: Consider incorporating aria-label attributes to elements where additional context may be beneficial for screen reader users.
4. Structure content with semantic tags: It may be beneficial to organize the card content using <header> for the title and category, and <footer> for the author information, to improve content clarity and accessibility.
Semantic HTML: It might be beneficial to use more semantic elements (e.g., <header>, <footer>, <section>) for enhanced accessibility.
Missing <h1>: It might be helpful to include an <h1> element for better document structure and SEO.
Accessibility: Adding ARIA labels for interactive elements may enhance support for screen readers.
