P
@uheron96Submitted 12 days ago
Latest comments
- @yuriinykPosted 11 days ago
Great job! 🎉 Your layout looks clean and well-structured, and the responsiveness is spot on. I really liked how you implemented animations—they feel smooth and natural. The form validation works flawlessly, and the success message transitions are well-handled.
A couple of minor suggestions: • Consider adding a slight delay before hiding the success message to improve user experience. • The error message styling could be a bit more prominent for better visibility.
Overall, fantastic work! Keep it up! 🚀
0 - @sd3u16Submitted 25 days ago
- @moad-00Submitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
What I'm Most Proud Of: Responsive Design: I’m really proud of how the layout adjusts seamlessly across various screen sizes, especially on mobile devices. By using CSS Grid and Media Queries, I was able to create a flexible layout that looks great on both large and small screens. Aesthetic Consistency: I paid close attention to the color scheme and typography, ensuring that everything aligns with the design specifications provided by Frontend Mentor. The color palette, font choices, and layout make the project look polished and cohesive. Code Organization: I structured the HTML and CSS in a clean, organized way, which helps with readability and future scalability. I also made use of the Flexbox layout in the .name-img class to align the images and text neatly. What I Would Do Differently Next Time: JavaScript Integration: For future projects, I would consider adding interactivity using JavaScript, such as adding a hover effect or animated transitions between testimonials to make the user experience more dynamic. Accessibility Improvements: I could further improve the accessibility of the project by adding more aria-labels and ensuring the alt text for images is more descriptive. SEO Optimization: I would work on better SEO practices, such as ensuring each testimonial is properly structured for search engines, with well-defined headings and meta descriptions. CSS Optimization: I’d aim to improve the efficiency of my CSS by using CSS variables more consistently for color themes and font sizes, making it easier to update and maintain.
- @emiwooSubmitted about 2 months ago@yuriinykPosted about 2 months ago
This is a great solution! Your HTML is well-structured, uses semantic tags, which improves accessibility and SEO. It looks clean and easy to understand.
A few improvements: 1. You could make the alt attributes more descriptive for better accessibility. 2. Consider adding media queries for better responsiveness on smaller screens. 3. Think about using CSS variables for easier scaling.
Overall, great job!
0 - P@librartSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
I learned how to use the
What challenges did you encounter, and how did you overcome them?root: {}selector and media query, but I still need to learn more about media query for responsive web.I still need to learn more about media query for responsive web.
What specific areas of your project would you like help with?I think I would love to get feedback for all of my code from HTML structure to CSS styles, especially the responsive design.
@yuriinykPosted about 2 months ago- Semantic HTML: Good use of semantic tags like <main>, <article>, and <picture>. Consider adding aria-label for better accessibility. 2. Accessibility: Improve the :focus state visibility and add descriptive alt text for images. 3. Responsive Layout: Looks good on mobile and desktop. Test on tablets and refine typography scaling with clamp(). 4. Code Structure: Well-organized CSS with variables. Add comments for better readability and separate reusable styles from layout-specific ones. 5. Design Match: Faithful to typical product card designs. Double-check spacing and padding for pixel-perfect accuracy.
0 - @CeciliaBPerdomoSubmitted 3 months ago@yuriinykPosted about 2 months ago
. Semantic HTML: • Positive: The solution uses proper semantic HTML for key sections such as headings (<h1>, <h3>, <h4>), lists (<ul>, <ol>, <li>), and table structure (<table>, <th>, <td>). This helps both accessibility and SEO. • Improvement: Consider using <section> more appropriately for structuring your content, such as wrapping specific sections like “Instructions” or “Nutrition” within <section> tags. It helps improve the clarity of the content and its structure. You’ve already done this, but ensure all meaningful parts of the page are enclosed in such elements for better hierarchy and accessibility.
-
Accessibility: • Positive: The content is organized in a clear, logical structure. The use of headings and lists makes it easier to read. • Improvement: • Add alt text for the image (<img src="./assets/images/image-omelette.jpeg" class="imagen_omellette">) for better accessibility. For example: <img src="./assets/images/image-omelette.jpeg" alt="A delicious omelette with fillings" class="imagen_omellette">. • Make sure the links (<a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>) have descriptive text, and you can even provide more context in an aria-label, for example: <a href="https://www.frontendmentor.io?ref=challenge" target="_blank" aria-label="Frontend Mentor website">Frontend Mentor</a>. • For better keyboard navigation, consider using the tabindex attribute for interactive elements, such as forms or buttons (though you don’t have them here, it’s useful for other projects).
-
Responsiveness: • Positive: The use of flexbox for centering and alignment of elements is a great approach to making the layout responsive. You also use width: 50% for .main_principal, which is good for maintaining a fixed width on larger screens. • Improvement: • Make sure that the image inside .imagen_omellette is responsive as well. You may want to set max-width: 100% and height: auto to prevent it from stretching on smaller screens. For example: .imagen_omellette { max-width: 100%; height: auto; } • Consider adding media queries to tweak the design for smaller screens (like mobile devices). For instance, setting .main_principal to 100% width or adjusting font sizes for better readability on small screens. • You could also try adding box-sizing: border-box; globally to avoid issues with padding affecting element sizes.
-
Code Structure, Readability, and Reusability: • Positive: The CSS is organized and follows a clear structure. You’ve used classes that are descriptive and easy to understand. The overall code is readable and maintainable. • Improvement: • Try grouping related CSS rules together (for example, grouping all heading styles or all typography styles), which will improve the readability further. • The repetition of the font-family links in the <head> tag may be unnecessary; you can remove the duplicate <link> tags for font imports. • Ensure consistency with indentation and spacing for better readability.
-
Design Consistency: • Positive: The layout looks clean and neat, and the choice of colors is pleasant. The use of borders, rounded corners, and soft background colors enhances the aesthetics. • Improvement: • The border color of the table (border-bottom: 1px solid black;) might be too stark compared to the rest of the softer, pastel-like color palette. You could use a lighter color, such as hsl(0, 0%, 80%), for a softer look. • The nutritional values table could benefit from some padding or margin in the header (<th>) to distinguish it from the content better and ensure alignment is consistent.
-
Suggestions for Improvement or Enhancements: • Interactive Elements: Consider adding more interactive elements like buttons or links to allow users to adjust the servings or customize the recipe. This can enhance the user experience. • Print Styles: If your page is meant to be printed, consider adding a print stylesheet to optimize how the page looks on paper (for example, removing unnecessary elements like navigation bars). • Error Handling: Since you are working with images, ensure that there’s fallback behavior in case the image doesn’t load (e.g., a background color or text as a placeholder).
0 -
