flex box

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 2 months ago

  HTML:

  • <main> holds all of the main content on a page. As a card would likely not be the only component on a page, I would wrap the card content in a <div class="card"> inside of <main>.

  • The image has meaning, so it must have proper alt text. Write something short and descriptive, without including words like "image" or "photo". Screen readers start announcing images with "image", so an alt text of "image of qr code" would be read like this: "image, image of qr code". The alt text must also say where it leads(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."

  • I would change the heading to a <h2> - a page should only have one <h1>, reserved for the main heading. As this is a card heading, it would likely not be the main heading on a page with several components.

  • Do not use <br> to force text onto a new line. The text should flow naturally, and all styling, including space between elements, should be done in the CSS.

  • .attribution should be a <footer>, and you should use <p> for the text inside. The <footer> must be outside of the <main>, as they are separate landmarks.

  CSS:

  • I recommend using this CSS Reset by Andy Bell. I think the one you're using from Eric Meyer is a bit outdated.

  • Remember to specify a fallback font:font-family: 'Outfit',sans-serif;

  • This article explains why you must remove font-size: 62.5% on the html.

  • I recommend adding 1rem of padding on the body, to ensure the card doesn't touch the edges on small screens.

  • On the body, change height to min-height - this way, the content will not get cut off if it grows beneath the viewport. Add flex-direction: column, without it the <footer> will be to the side of the card, not underneath.

  • Move the styles on .container to the <div> you created that holds the card content. Remove the margin and the width.

  • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

  • Since all of the text should be centered, you only need to set text-align: center on the body, and remove it elsewhere. The children will inherit the value.

  • On the image, add display: block and change width to max-width: 100% - the max-width prevents it from overflowing its container. Without this, an image would overflow if its intrinsic size is wider than the container. max-width: 100% makes the image shrink to fit inside its container.

  • On the image, remove align-items: center, as the image is centered using padding on the card itself. One thing to note is that align-items: center only works with display: flex. If you wanted to center the image, you would set display: flex on its parent, and either justify-content: center or align-items: center, also on the parent. justify-content: center centers the Flex items in the main axis, while align-items: center centers Flex items in the cross axis. When you declare display: flex, the default value is flex-direction: row, which means the main axis is horizontal (going from left to right), and the cross axis is vertical (going from top to bottom). Changing to flex-direction: column flips the main axis to vertical and the cross axis to horizontal. I hope that makes sense, you will use Flexbox quite a lot for layout :)

  Marked as helpful

  1

  ---

  

  ghamsin•50

  @ghamsinPosted 2 months ago

  @Islandstone89 tnx man this mean alot to me very gr8 feed back itry my best to follow these standards and wish u the best .

  1
• 

  Allan Sancley•110

  @AllanSancleyPosted 2 months ago

  • Sua solução ficou muito boa! Mas como todo incio tem suas dificuldade aqui estão alguns itens que deve ser levadas em consideração nos proximos desafios.

  1 - Para projetos futuros tente usar as fonts baixadas com @font-facepara melhorar o desempenho da inicialização da pagina caso o serviço de fonte de terceiros fiquem fora do ar.

  2 - Sempre garanta que os elementos estejam envelopadas com as tags semanticas <main>, <section>,<article>.

  3 - O uso de feramentas como o figma ajudam a melhorar o desenvolvimento, para tamanhos e alinhamentos, é uma ferramenta maravilhosa para quem está iniciando.

  Espero que este comentario seja util para você. 👍

  até a proxima, bons estudos! 👋

  0

  ---

  

  ghamsin•50

  @ghamsinPosted 2 months ago

  @AllanSancley ty for feed back as u can see im new in this feild itry my best to code better and wiser throw the time

  1