Usando HTML semántico en el contenido principal de nuestro sitio

Obtuve 100%

Consejo: Para cambiar la etiqueta de apertura y cierre al mismo tiempo presiona F2 al lado del nombre de la etiqueta de apertura o cierre.

Codigo de la clase:
index.html

<main>
      <section>
        <h2 class="header">Acerca de</h2>
        <p class="intro">
          Hola! Soy Juliana 👋 Soy Colombo-Canadiense, amo los gatos y tambien
          crear cosas lindas para la web 😍 Después de estudiar comunicación
          social y ciencia política en la universidad, trabajé varios años en
          mercadeo digital hasta que aprendí a programar. Llevo un poco más de
          tres años enfocándome en front end, específicamente en JavaScript y
          accesibilidad. Sueño con una web donde todo el mundo pueda participar.
          Aquí puedes ver algunos de mis proyectos recientes y también puedes
          contactarme por si quieres hablar de tecnología, accesibilidad o
          gatos!
        </p>
        <ul class="social-media">
          <li>
            <a href="https://twitter.com/gmzjuliana" target="_blank">
              <img src="images/twitter.png" alt="Twitter" />
            </a>
          </li>
          <li>
            <a href="https://github.com/gmzjuliana" target="_blank">
              <img src="images/github-logo.png" alt="GitHub" />
            </a>
          </li>
          <li>
            <a href="https://www.linkedin.com/in/gomezjuliana/" target="_blank">
              <img src="images/linkedin.png" alt="LinkedIn" />
            </a>
          </li>
        </ul>
      </section>
      <section>
        <h2 class="header">Mis proyectos</h2>
        <div class="carousel">
          <div class="arrow arrow-left"></div>
          <div class="window">
            <ul class="project-container">
              <li>
                <button>
                  <img
                    src="images/project1.png"
                    class="project project1"
                    alt="Mi primer proyecto"
                  />
                </button>
              </li>
              <li>
                <button>
                  <img
                    src="images/project2.png"
                    class="project project2"
                    alt="Mi segundo proyecto"
                  />
                </button>
              </li>
              <li>
                <button>
                  <img
                    src="images/project3.png"
                    class="project project3"
                    alt="Mi tercer proyecto"
                  />
                </button>
              </li>
              <li>
                <button>
                  <img
                    src="images/project4.png"
                    class="project project4"
                    alt="Mi cuarto proyecto"
                  />
                </button>
              </li>
              <li>
                <button>
                  <img
                    src="images/project5.png"
                    class="project project5"
                    alt="Mi quinto proyecto"
                  />
                </button>
              </li>
            </ul>
          </div>
          <div class="arrow arrow-right"></div>
        </div>
      </section>
    </main>

styles.css

.intro {
  margin: 24px 196px 0;
  font-family: var(--secondary-font);
}

.project-container li {
  display: inline-block;
}

.project-container button {
  background: none;
  border: none;
}

.project {
  border-radius: 5px;
  border: 2px solid #000;
  display: inline-block;
  height: 400px;
  margin: 0 8px;
  transition: all 0.2s ease-in-out;
  width: 250px;
  object-fit: cover;
}

Si solo pones twitter, el usuario puede preguntase a cual voy,mío,o otro

Solo con un buen HTML semántico, se resuelve mucho de accesibilidad! 🙌

Algo que me gusto de esta clase es que se esta utilizando el correcto orden semantico, el cual es

<header>
	@code
</header> 

<main>
	@code
</main>

<footer>
	@code
</footer>

Algunos maestros de Platzi ponen el header y el footer dentro del main

Este curso no tendría que estar en Arquitectura Frontend

<article> Defines independent, self-contained content
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer> Defines a footer for a document or section
<header> Specifies a header for a document or section
<main> Specifies the main content of a document
<mark> Defines marked/highlighted text
<nav> Defines navigation links
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time

Con todo respeto
Que sentido tiene agregar un botón de traducción en linea si
traduce todo mal.
en informática existen muchas palabras que no son del cotidiano por lo que es casi gracioso leer dicha traducción.

Porque se dejan los <img> con las clases project1, project2 … si despues se eliminan del css?

no encuentro la herramienta de accessibility tree

Pueden usar este snippet en VSCode para crear las listas en el carrusel. Solo borran el 5, lo vuelven a escribir y presionan tab.

(li.project.project$>button>img)*5

La importancia del HTML semántico 😃

Si bien es super util e importante las correcciones en frontend, muchas de estas correcciones se visualizan en diseño UX/UI.

¿No sería conveniente introducir la lista de enlaces a las redes sociales en un nav?

Me encanta la intención de refactorizar, todo está muy bien.
Pero tengo algunas aclaratorias respecto a usar:

<section></section>

Considero no es obligatoriamente recomendable para refactorizar esta Web con section, puede emplearse un div en su lugar.

Hablando en semántica, un <section> tiene una aplicación un poco más cerrada, hablando de accesibildad no existe tampoco una distinción acertada entre una section y un div en este caso en particular.

siempre he tenido dudas con el aside 😕