
Anjelica
@Anjie-MFAll comments
- P@DeerlyDevP@Anjie-MF
Your use of custom properties (--cyan-600, --purple-300, etc.) is great for scalability and keeping your code concise. Your * and :root setup lays a solid foundation. Love the use of overflow-wrap: break-word; on text elements, nice touch for long content. I am committing to learn how to do custom properties. It will take me longer to spin up a project, but seeing your code makes it worth the effort.
A note I had: Your use of <div class="footer-title"><p>Experience more together</p></div> could be improved by making the p an h2 or h3 for screen readers and structure. Same for .section-tagline, which reads like a heading.
A question I had: What was your approach to organizing your media queries—mobile-first or desktop-first—and how did that influence your class naming or structure? I ask because I went desktop first, but I have seen other devs do mobile. I am curious.
- @onlyjustmandyWhat are you most proud of, and what would you do differently next time?
mobile first é sempre um desafio para mim, então responsividade eu preciso treinar
What challenges did you encounter, and how did you overcome them?responsividade eu preciso treinar
P@Anjie-MFÓtimo trabalho na criação de uma grade de depoimentos visualmente atraente e responsiva! Você se esforçou muito neste projeto. Abaixo estão algumas observações e sugestões de melhoria para levá-lo ao próximo nível: =Embora seu uso de <main> seja apropriado, você pode melhorar a estrutura envolvendo cada depoimento em uma tag <section> ou <article>. Isso definiria melhor cada depoimento como uma unidade autônoma de conteúdo. == regras repetidas de .testimonial:nth-child para áreas de grade podem ser consolidadas em um único grupo para simplificar o CSS. ===Tente evitar o uso excessivo de !important usando seletores mais específicos. Este projeto demonstra fortes habilidades técnicas e de design. Continue com o ótimo trabalho! Com essas melhorias, seu design pode se tornar ainda mais amigável ao usuário. Aqui estão alguns links que marquei: https://piccalil.li/blog/a-more-modern-css-reset/ https://learntheweb.courses/topics/html-semantics-cheat-sheet/ https://www.craigabbott.co.uk/blog/how-to-write-good-alt-text-for-screen-readers/
Marked as helpful - @Agus27111P@Anjie-MF
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! - @ana-lsmWhat 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.
P@Anjie-MFHi Ana! I'm reviewing/redoing my projects, so here is an updated review from me--a year smarter and better, just like you! Great work on this solution — here's my review:
🌟 What you did well: --Clean HTML structure with semantic tags like <main>, <article>, and <picture>. --Use of media queries to switch images and layout responsively—great first use! --The use of CSS variables makes it super readable and scalable. --Love how you used ::before and data-icon to add the cart icon. Very creative!
🛠️ Suggestions for improvement: Accessibility: The alt attribute for the <img> tag is empty. For screen readers, consider adding a more descriptive alt.
Layout scaling on larger screens: You use max-width: 600px, which is great, but I would try adding more spacing for screens larger than 600px for future polish.
Centering approach: Oh, I struggled then, and I struggled even yesterday with centering my div. I found out that I could use height 100vh with flexbox. Look into it for your next project!
❓ ❓ Questions & Curiosities: Curious why you chose data-icon over just using an <img> inside the button? It works well, just wondering what you learned from it!❓ ❓
📚 Resources for You: Here’s a quick reference for improving accessibility for screen readers:
WebAIM: Alternative Text MDN: Accessibility Basics
✨ Overall: You’re making strong design choices and showing great curiosity with data attributes and media queries. Keep up the momentum—this is solid work!
Marked as helpful - @geethanshP@Anjie-MF
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
- @tufcoderWhat 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.
P@Anjie-MFHey! 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 helpful - @carstenkoernerWhat 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?-/-.
P@Anjie-MFHey, 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.
- @PedwroWhat 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.
P@Anjie-MFEu 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!
- @gmn26What 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
P@Anjie-MFGreat job with your code!