P
@DeerlyDev
Latest solutions
Meet Landing Page
PSubmitted 14 days agoI'd love feedback on my media query structure and whether I'm using CSS Grid efficiently, especially in how I defined my columns, and whether I could simplify or refactor. I’d also appreciate any advice on managing layout overlap (z-index, positioning) in a clean, scalable way. And lastly, I’m curious if I’m on the right track with my responsive design strategy or if there’s a smarter approach I haven’t considered yet.
productPreview_firstFigmaChallenge
PSubmitted about 1 month agoI'd love feedback on my layout structure, particularly if there are cleaner ways to handle spacing and alignment earlier in the project without needing multiple rounds of tweaking. I'd also appreciate advice on best practices for structuring media queries and scaling a layout for larger screen sizes in a more maintainable way.
testimonialsGrids_figmaChallenge
PSubmitted about 1 month ago- In the mobile viewpoint, the .test or "Jonathan" div is spaced out. I don't understand why "jeanette" is smaller but not as spaced out.
- I also want to better understand how to align content within grid cells so I can build layouts that feel balanced even with different content lengths.
QR Code Component
PSubmitted about 2 months agoRight now, I’m focusing on getting really solid with HTML and CSS fundamentals. I’ve started going through the full Frontend Mentor Learning Path again — this time with intention. I’d love feedback on how to keep improving my layout and semantic HTML choices, and how to transition more confidently into using tools like React when the time comes.
fourCardFeature_figmaChallenge
PSubmitted 12 months agoThe mobile layout! I think I got the @media (max-width: 600px) logic right, and I’m stacking cards the way I want, but I’d love a fresh set of eyes to double-check that:
My grid-column values are clear and consistent
I’m not overcomplicating the stacking order
My padding/margins are responsive-friendly
If anyone spots any refactor opportunities or smarter ways to handle breakpoints, I’d love to hear them!
Latest comments
- P@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
