Frontend Mentor | Group CSS selectors to have fewer lines of code. coding challenge solution

Community feedback

@correlucas

Posted about 2 years ago

👾Fala Felipe Mellão, tudo bem? Parabéns pelo desafio!

Acabei de olhar sua solução, e está perfeita, eu só mudaria a questão do mobile que ainda não foi implatada, pra fazer isso basta mudar o fluxo do conteudo com flex-direction: column.

Fiz uma media query pra vc consertando isso:

@media (max-width: 700px) {
main {
    display: flex;
    flex-direction: column;
    align-content: space-between;
    justify-content: center;
    align-items: center;
}
}

👋 Espero ter ajudado e continue no foco!

Marked as helpful

Felipe Mellão• 160

@MellonFive

Posted about 2 years ago

@correlucas Opa cara! Muito obrigado pelas suas dicas! Com certeza irei colocar no projeto! :D

PhoenixDev22• 16,950

@PhoenixDev22

Posted about 2 years ago

Hello Felipe Mellão,

Excellent work! Congratulation on completing this challenge. I have some suggestions regarding your solution if you don't mind:

In this challenge , the svgs are much likely to be decorative. For any decorative svgs , each svg tag should have aria-hidden="true" and focusable=”false” attributes to make all web assistive technologies such as screen reader ignore those images .

About <h1>it is recommended not to have more than one h1 on the page . Multiple <h1>tags make using screen readers more difficult, decreasing your site’s accessibility. You can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech).Then you can use <h2> instead.

Addborder-radius andoverflow hiddento the main container that wraps the three cards so you don't have to set border-radius to individual corners.

In order to center the card on the middle of the page , you can use the flex or grid properties and min-height: 100vh to the ``<body>`. Add a little padding to the body that way it stops the component from hitting the edges of the browser instead of position absolute.

For future use: Best practice is to use the simplest selector possible while maintaining the minimum required specificity. As a rule, if a selector will work without it being nested then do not nest it. That is to say, how quickly a browser can match the selectors your write in CSS up with the nodes it finds in the DOM.

Aside these, your solution looks great. Hopefully this feedback helps.

Group CSS selectors to have fewer lines of code.

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community