Social Links Perfil

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 9 months ago

  Olá @MonicaPoloni!

  Parabéns pelo seu primeiro projeto! Ficou excelente!

  Tenho uma sugestão:

  📌 Use <main> pro conteúdo principal ao invés de uma <div>.

  Tags como <div> e <span> são exemplos típicos de elementos HTML não-semânticos. Elas servem apenas como containers para o conteúdo, mas não indicam qual o tipo desse conteúdo e nem o papel que ele desempenha na página.

  Essas mudanças de tag geram pouco ou nenhum impacto visual mas tornam o seu código HTML mais semântico e melhoram a otimização SEO e acessibilidade do projeto.

  Espero que ajude!

  Fora isso, ótimo trabalho!

  Marked as helpful

  0

  ---

  

  MonicaPoloni•60

  @MonicaPoloniPosted 9 months ago

  @danielmrz-dev Thank you for the message, it will be useful in my learning! Hugs my friend :)

  1
• 

  GLBonfim•60

  @GLBonfimPosted 9 months ago

  Nice job, to your first project here! See you later :)

  Marked as helpful

  0
• 

  P

  tediko•6,680

  @tedikoPosted 9 months ago

  Congrats on finishing your first challenge! 🎉

  I don't know Grid yet so take my advice with a grain of salt but your .card container doesn't stretch to max-width: 375px because when you aligned your grid items in body element with place-content: center your browser implicitly created tracks (both columns and rows) to align your .card to the center of the screen. Since columns were created implicitly they're set to auto which means they take only that much space that your .card container needs. What you need to do is explicitly set grid-template-columns: 1fr in your body so it stretch across whole body width and then use justify-self: center on .card element to align itself to the center of body. Also add width: 100% to your .card container so it stretch to your max-width now.

  Your document lacks landmarks, lists and have multiple heading elements that are unnecessary. Landmarks are a group of HTML tags and roles that define different subsections of a website and help navigate through a website. Your .card container should be <main> element, .buttons container could be a <ul> list and <button> elements should be <a> anchors. Links take the user to a new location, such as a new web page or new section of the current page, bButtons trigger some action, such as showing content on the page that was previously hidden, playing a video, or submitting a form. Then keep your <h1> heading as it is your component title, but change <h2> element to <p>.

  Have fun!

  Marked as helpful

  0

  ---

  

  MonicaPoloni•60

  @MonicaPoloniPosted 9 months ago

  @tediko Thank you for this, it will be very useful to me. A hug my friend!

  0
• 

  P

  Justin Green•2,770

  @jgreen721Posted 9 months ago

  Nice work, especially if just starting out. Everything is centered and positioned nicely! Only real obvious suggestion would be to add some hover styling for your buttons with something like cursor:pointer added to your button css and then button:hover{ whatever you like -- I believe turning the background to green is their suggestion}. Unless it was intentional to leave them more as just list items, in which you might just want to convert that part into an <ul><li>...</ul> section for the user readability, conventions yada yada. lol. Main design though is 👍 so again nice work!

  Marked as helpful

  0

  ---

  

  MonicaPoloni•60

  @MonicaPoloniPosted 9 months ago

  @jgreen721 Thank you for your message!

  0