Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
12
Comments
9
P
Anjelica
@Anjie-MF

All comments

  • P
    DeerlyDev•100
    @DeerlyDev
    Submitted about 2 months ago

    Responsive meeting page

    1
    P
    Anjelica•160
    @Anjie-MF
    Posted about 2 months ago

    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.

  • Amanda Ferreira silva•170
    @onlyjustmandy
    Submitted 7 months ago
    What 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

    HTML CSS

    2
    P
    Anjelica•160
    @Anjie-MF
    Posted 7 months ago

    Ó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
  • Agus Setiawan•420
    @Agus27111
    Submitted over 1 year ago

    Four-card-feature-section

    1
    P
    Anjelica•160
    @Anjie-MF
    Posted about 1 year 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!

  • ana-lsm•80
    @ana-lsm
    Submitted over 1 year ago
    What 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.

    Responsive web-page

    2
    P
    Anjelica•160
    @Anjie-MF
    Posted over 1 year ago

    Hi 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
  • Geethansh P•40
    @geethansh
    Submitted over 1 year ago

    Recipe page with HTML and CSS

    1
    P
    Anjelica•160
    @Anjie-MF
    Posted over 1 year 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

  • Oswaldo Castro•240
    @tufcoder
    Submitted over 1 year ago
    What 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.

    HTML & CSS Mobile First Social Links Profile

    1
    P
    Anjelica•160
    @Anjie-MF
    Posted over 1 year ago

    Hey! 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
  • Carsten Körner•170
    @carstenkoerner
    Submitted over 1 year ago
    What 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?

    -/-.

    Social links profile using Flexbox

    #bem
    1
    P
    Anjelica•160
    @Anjie-MF
    Posted over 1 year ago

    Hey, 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.

  • Pedro Juliano•30
    @Pedwro
    Submitted over 1 year ago
    What 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.

    Cartão de visualização do blog

    1
    P
    Anjelica•160
    @Anjie-MF
    Posted over 1 year ago

    Eu 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!

  • gmnovrial•50
    @gmn26
    Submitted over 1 year ago
    What 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

    QR Code Component

    1
    P
    Anjelica•160
    @Anjie-MF
    Posted over 1 year ago

    Great job with your code!

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub