Componentes Header y Sidebar

Aquí la estructura del header con emmet:

div.Header>div.Header-container>div.Header-content>div.Header-logo>h1{Pugstagram}+div.Header-nav>ul>li

<script>
  let actualYear = new Date().getFullYear();
</script>

<div class="Footer">
  <div class="Footer-container">
    <small class="Footer-content">
      © { actualYear } Pugstagram from platzi
    </small>
  </div>
</div>```

También podemos pasarle el año con Javascript para que sea el año actual

<script>
    let year = new Date().getFullYear();
</script>


<div class="Footer">
    <div class="Footer-container">
        <div class="footer-copy">© <span id="year">{year}</span>PUGSTAGRAM FROM PLATZI</div>
    </div>
</div>

Reto

<div class="Footer">
  <div class="Footer-container">
    <div class="Footer-text">
      ©️ 2020 PUGSTAGRAM FROM PLATZI
    </div>
  </div>
</div>

Si a lo largo de un proyecto nos encontramos con dos componentes que pueden nombrarse casi igual, qué es más recomendable?

• Dentro de ‘components’ hacer carpetas de componentes ‘padre’ o,
• Llamar a los componentes diferente, estilo: Sidebar-Footer.svelte

Mi footer

https://pugstagram.co/

En el minuto 1:20 Oscar habla de algo llamado BEM, no lo sabía y lo pasé por alto por lo que me tocó devolver el video varias veces. Simplemente es una metodología para la organización de componentes en front, más especificamente - Metodología ágil de desarrollo basada en componentes.

https://blog.ida.cl/desarrollo/metodologia-bem-desarrollo-front-end/

<script>
    let year = new Date().getFullYear();
    let footerText = `© ${year} Pugstagram From Platzi`;
</script>

<div class="Footer">
    <div class="Footer-content">
        <div class="Footer-copy">
            <p>
            <span>{footerText}</span>
            </p>
        </div>
    </div>
</div>

Este es mi Footer:

<script>
  const currentYear = new Date().getFullYear();
</script>

<div class="Footer">
  <footer class="Footer-container">
    <p class="Footer-copy">&copy{currentYear} Enrique Moreno</p>
  </footer>
</div>

<div class="Footer">
  <div class="Footer-container">
    <div class="Footer-copy">
      © 2020 PUGSTAGRAM FROM PLATZI
    </div>
  </div>
</div>```

Mi codigo:

<div class="Footer">
    <footer class="Footer-container">
        <p>© 2020 PUGSTAGRAM FROM PLATZI</p>
    </footer>        
</div>

<div class="Footer">
  <div class="Footer-container">
    <div class="Footer-copy">
      <span>© 2020 PUGSTAGRAM FROM PLATZI</span>
    </div>
  </div>
</div>

<div class="Footer">
    <div class="Footer-container">
        <div class="Footer-copy">© 2020 PUGSTAGRAM FROM PLATZI</div>
    </div>
</div>

<div class=“Footer”>
<div class=“Footer-container”>
<div class=“footer-copy”>
<span>By Platzi</span>
</div>
<div class=“Footer-container-redes”>
<ul>
<li>Facebook</li>
<li>Instagram</li>
<li>Youtube</li>
</ul>
</div>
</div>
</div>

<script>
  let year = new Date().getFullYear();
</script>

<style>
  .Footer .Footer-content p span.copyleft {
    display: inline-block;
    text-align: right;
    margin: 0px;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: “FlipH”;
  }
</style>

<div class="Footer">
  <div class="Footer-content">
    <p>
      <span class="copyleft">©</span>
      {year} Berlinstagram from Platzi
    </p>
  </div>
</div>

Reto completado! Agregué el emoji del copyright en vsc, ctrl + i en mi caso con Ubuntu.

<script>
let today = new Date();
let year = today.getFullYear();

</script>


<div class="Footer">
    <div class="Footer-container">
        <div class="Footer-copy">
            <i class="far fa-copyright"></i> {year} Pugstagram PMSoft
        </div>
    </div>        
</div>

Listo, el footer es bastante sencillo:

<script>
  let Year = new Date().getFullYear();
</script>

<div class="Footer">
  <div class="Footer-content">
    <h2>© {Year} PUGSTAGRAM FROM PLATZI</h2>
  </div>
</div>

Reto footer

<script>
 
</script>

<div class="Footer">
    <div class="Footer-container">
        <div class="Footer-copy">
            © 2020 PUGSTAGRAM FROM PLATZI
        </div>
    </div>
</div>

<style>
    
.Footer-copy {
    display: inline-block;
    text-align: center;
    margin: 0px;
}
</style>

Footer.svelte :

<div class="Footer">
  <div class="Footer-container">
    <div class="Footer-copy">© 2021 Pugstagram</div>
  </div>
</div>

👌

Para la imagen del avatar les recomiendo usar la alternativa de --Gravatar.com–
Es bastante sencillo y les servirá para todos los proyectos que lo ameriten