Skip to content
OverviewSolutions
3
Comments
3
Alan Santos
@alan-ssantos

All comments

  • Deepak Parkash•10
    @FancybearINSubmitted about 3 years ago

    having Question how I can be better in front-end-development and other question is that how to remember the elements like flex, animation format.

    Responsive using only css

    2
    Alan Santos•50
    @alan-ssantosPosted about 3 years ago

    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. 😉😊

    1
  • Alan Santos•50
    @alan-ssantosPosted about 3 years ago

    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. 😉😊

    0
  • Alan Santos•50
    @alan-ssantosPosted about 3 years ago

    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
    1