@Agus27111Submitted about 1 year ago
Very open to suggestions
Anjelica
@Anjie-MFAll comments
- @Anjie-MFPosted 4 months ago
Hello! HTML---The HTML structure is clear and semantic. So, good job there! Accessibility--- I would add 'aria-labels' to the images for better accessibility. I just learned the difference between aria labels and alt text. "alt": Use alt for images to describe the content . "aria-label": Use aria-label for any interactive element Layout---When viewed on different screen sizes, the layout becomes wonky, and elements do not resize properly. I would review and adjust the media queries. Also, use a CSS validator to catch any typos or open tags. Then, test thoroughly using Chrome DevTools' device simulation feature or https://responsivetesttool.com/ (I bookmarked this site). Solution---The design comp has a box shadow on the cards. Yours is not visible enough. I made mine grayer so it contrasts against the stark white background.
P.S. There is a tiny typo on line 40 which may help with the layout. P.P.S I would add a CSS reset to your file. It removes potential inconsistencies between different browsers. I highly recommend Andy Bell CSS Reset. With a few minor adjustments, this project could be even more polished. Keep up the great work and continue building on these skills!0 - @ana-lsmSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
First time using media query, and data attributes.
What challenges did you encounter, and how did you overcome them?To center the content in the page, just adding a min-height solved the issue.
What specific areas of your project would you like help with?With the accessibility for screen readers.
@Anjie-MFPosted 7 months agoHey, your code is structured and functional, but here are some improvements that could enhance its readability, maintainability, and user experience: --Consider adding a more descriptive alt attribute to the <img> tag for better accessibility. For example, <img src="images/image-product-mobile.jpg" alt="Product Image">. -Optimize the size of the images used, especially the image-product-desktop.jpg, to reduce load times.
Marked as helpful1 - @geethanshSubmitted 7 months ago@Anjie-MFPosted 7 months ago
Overall, your code demonstrates a good understanding of HTML and CSS. However, there are a few areas where you might consider making some improvements: -The styles are directly embedded within the HTML file using
1 - @tufcoderSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
Not over/using flexbox in a simple layout.
What challenges did you encounter, and how did you overcome them?All the work is done from eye. Maybe using a Pro account to check all the spaces, fonts etc.
What specific areas of your project would you like help with?I always want help about semantic tags and responsive layout.
@Anjie-MFPosted 7 months agoHey! Overall, your code is organized and functional. For future projects, consider using more semantic HTML elements where appropriate. For example, using <header> for the header section and <footer> for the footer section can improve the structure of the document. Here is a cheatsheet I have bookmarked: https://learntheweb.courses/topics/html-semantics-cheat-sheet/
Marked as helpful0 - @carstenkoernerSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
-/-
What challenges did you encounter, and how did you overcome them?Not really a challenge, but I have replaced the poisonous green with a yellow and I was able to deepen what I had learned in the challenges before.
What specific areas of your project would you like help with?-/-.
@Anjie-MFPosted 7 months agoHey, I enjoyed the hover technique you implemented in your code! It was so cool that I decided to incorporate it into my project. This feature is new to me, so adding it to my repertoire is exciting. Thanks for the inspiration! I credited you in my Readme.
0 - @PedwroSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
Em ter concluído o desafio.
What challenges did you encounter, and how did you overcome them?Demorei para ajustar a foto e nome do autor. E sobre sombreamento, primeira vez que mexo, apanhei um pouco.
What specific areas of your project would you like help with?Nele todo. Toda ajuda é bem-vinda.
@Anjie-MFPosted 7 months agoEu também tenho dificuldades com Flexbox e Grid. Confira estes sites: https://flexboxfroggy.com/ https://cssgridgarden.com/ Eu espero que isso ajude!! Seu código parece bom!
1 - @gmn26Submitted 7 months agoWhat are you most proud of, and what would you do differently next time?
Nothing, its just a simple component
What challenges did you encounter, and how did you overcome them?Nothing, its just a simple component
What specific areas of your project would you like help with?Nothing, its just a simple component
