Skip to content
OverviewSolutions
5
Comments
5

Alan Santos

@alan-ssantosSão Paulo - Brasil140 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

Next.js, Tailwind CSS and Python

Latest solutions

Latest comments

  • Mario Romagnoli•20
    @Skelman016
    What are you most proud of, and what would you do differently next time?

    I’m proud that I completed this first step easily thanks to my previous knowledge of HTML and CSS. I’m familiar with CSS manipulation, and for my next project, I’d like to challenge myself with a framework or different writing styles like SASS.

    What challenges did you encounter, and how did you overcome them?

    I was already familiar with CSS manipulation, so I felt quite confident when writing the code and completing this first step of the course.

    What specific areas of your project would you like help with?

    I would love to receive feedback on my code writing. I want to create clean and as professional code as possible. I realize that I am at a fairly amateur level, so if you have any advice, feel free to share it.

    QR Code Card using Flexbox.

    #accessibility
    1
    Alan Santos•140
    @alan-ssantos

    Hello! ✌️ Congratulations on the solution you developed! Overall, your code is already well-structured, but I have a few suggestions to make it even better:

    • The role="main" is used for compatibility with Internet Explorer, which is now outdated. So, it might not be necessary to use it in future projects.
    • Currently, ARIA does not allow custom roles, so role="QRcode" has no effect. In this case, I’d recommend just improving the alt text.
    • To enhance organization and maintainability, I suggest adopting a methodology like BEM CSS, where, for example, the card could be .card, .card__image, and .card__content.
    Marked as helpful
  • Alan Santos•140
    @alan-ssantos

    Hello, how are you?
    Congratulations! Your solution is almost perfect. The only visual difference I noticed is in the card's drop-shadow. In Figma, you can see the shadow properties, which in this case are 0px 25px 25px rgba(0,0,0,0.04).

    Marked as helpful
  • Alan Santos•140
    @alan-ssantos

    Hello @Deeparkash 👋, I think that doing these challenges is a good way to practice, and you can also watch one of many free courses (freeCodeCamp, Youtube, Scrimba, and others) to learn more about HTML, CSS, and JS. Here's a roadmap that can help with what to learn.

    For this solution, I have some suggestions that can help to fix some issues.

    • Changing <div class="container"> to <main class="container">, will fix the accessibility issue.
    • The <h2 class='title'> should be <h1 class='title'>, is a best practice a page have a h1 title.
    • For the music icon, add aria-hidden="true” because it's for decoration only, and remove the srcset="".
    • <h5>Annual Plan</h5> should be <h2> or <p>, headings should not be skipped, such as from h2 to h5, here you can read more about it.
    • Lastly, try to send your solutions to GitHub, as the FrontEnd Mentor guide suggest. If you can't do that, you'll need to store the images in other places, like in Imgur. Also on submitting you could use the "Full Page View" of CodePen on the Live Preview URL to make the screenshots better.

    I hope this was helpful and keep doing the challenges. 😉😊

  • Alan Santos•140
    @alan-ssantos

    Hey @san-bonilla, great work on this challenge.

    I have some suggestions that can help you to fix some issues.

    • The <div class="card-main-container"> element should be <main class="card-main-container">, this will fix the a11y issue.
    • Change the <h2 class='text-title'> to <h1 class='text-title'>, because it's a best practice a page have a h1 title.
    • For the music icon, add aria-hidden="true” and remove the text of alt attribute alt="", because it's for decoration only.
    • <div class="plan-title">Annual Plan</div> and <div class="plan-price">$59.99/year</div> should be <p> element.
    • Lastly, you can change the background-size: cover to background-size: contain and the background-repeat: no-repeat to background-repeat: repeat-x this will make the background image looks better in different screen sizes.

    I hope this was helpful and keep doing the challenges. 😉😊

  • Alan Santos•140
    @alan-ssantos

    Oi Thainá, Tudo bem? 😉

    Adorei o trabalho feito nesse desafio, mas tenho algumas sugestões que talvez possam ajudar a deixar sua solução ainda melhor.

    • Toda página deve ter ao menos um titulo h1 e os níveis não devem ser pulados, como usar h1 e em seguida h3. Sendo assim você poderia mudar o "Order Summary" para h1 e o "Annual Plan" para h2 ou p. Neste link você pode ver mais sobre.

    • O icone de música deve ter o atributo alt vazio [alt=""] e deve conter aria-hidden="true", pois ele é apenas um elemento decorativo, não sendo relevante para leitores de tela. Mais sobre aria-hidden aqui e sobre alt-text aqui.

    • Considere alterar o background de no-repeat para repeat-x, pois em telas maiores a imagem é exibida apenas no centro da página.

    • Por último eu recomendo não misturar português e inglês na nomenclatura das classes, para não gerar confusão de quem for revisar o código.

    Espero que essas dicas possam ser úteis, continue fazendo os desafios e se precisar de algo é só chamar. 😁✌

    Marked as helpful