Social Links Perfil

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!

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

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!

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!