@erntTt94Submitted 27 days ago
What specific areas of your project would you like help with?
Any feedback appricated...
moaz-shamim
@moaz-shamimAll comments
- @moaz-shamimPosted 27 days ago
Your HTML and CSS for the recipe page are well-structured and provide a good foundation. Below are suggestions to enhance the semantic quality, SEO optimization, and overall design of your project.
Use more semantic HTML5 elements for better accessibility and SEO. For example, consider using <article> for the recipe card, <header> for the title and introductory information, <footer> for attribution, and <section> for distinct parts like ingredients and instructions.
Your media query applies at 500px,
Use max-width: 100%; for images to ensure they scale appropriately on smaller screens.
Increase line height for better readability:
Prefer using relative units (rem, em) for margins and paddings instead of fixed units (px) for better scalability across different screen sizes.
By implementing these suggestions, you can create a more semantic, accessible, and SEO-optimized recipe page. Ensuring that your HTML is clean and your CSS is flexible will lead to a better user experience and improved search visibility.
Using a CSS reset is a great way to ensure consistency across different browsers by normalizing default styling
1 - @cswin10Submitted 29 days agoWhat are you most proud of, and what would you do differently next time?
I did this one quicker than the last one, I'm improving
What challenges did you encounter, and how did you overcome them?Not really any challanges with this one actually
@moaz-shamimPosted 28 days agoYour Solution is completely different from the provided challenge design. Ensure the font-family: 'Inter' is properly imported into your HTML or via a CSS import, so it applies correctly. Issue: The .container class has fixed width (50%) and height (60%). This might cause layout issues on different screen sizes, especially on larger screens. Instead of fixed percentages, try using max-width and min-width with relative units (like rem) to make the container more flexible. Consider removing fixed height to let it grow naturally.
Accessibility Improvements: Add more descriptive alt texts and aria labels, and consider semantic elements to improve accessibility.
Consistent Styling: Move all styles from inline to external CSS to keep the code cleaner.
Functional Buttons: Convert the buttons to anchor links with proper href attributes so that users can easily navigate to the intended social media profiles.
0 - @ZhyperMaxSubmitted about 1 month ago@moaz-shamimPosted about 1 month ago
The solution does not contain semantic HTML. Inside the <main> tag, you are using too many <section> tags, which is not an optimal approach. Instead of using multiple sections, you should use the <article> tag for the card and include <header> or <footer> tags as needed.
While the layout looks good, the card does not align properly across different screen sizes. Additionally, there is a noticeable difference in the design compared to your expectations. You can improve your design skills by practicing or by using a Figma file for proper style guidance regarding width, height, border radius, and padding.
Marked as helpful1 - @D4nielPSilvaSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
I changed the color of the texts, put the shadow on the qr code container and changed the cursor to default when placing the mouse over the container
@moaz-shamimPosted about 1 month agoYes, the solution includes semantic HTML with appropriate tags for structure. It's accessible with readable fonts, proper contrast, and keyboard navigation, but could improve with more
ariaattributes. The layout looks good on different screen sizes due to responsive design with Flexbox or Grid. The code is well-structured, readable, and follows best practices, with only minor creative adjustments from the design.0
