InicioCurso Práctico de Maquetación en CSS
Curso Práctico de Maquetación en CSS
5

DRY (don't repeat yourself)

Agustina
aguscorvo
23775

Para los que quieran seguir el princpio DRY (don’t repeat yourself) durante el curso pueden hacer lo siguiente:
.

  • Crear un archivo header.html con lo siguiente:
<body><divclass="header-icons-container"><divclass="icons"><ahref="/"><spanclass="flaticon-001-facebook"></span></a><ahref="/"><spanclass="flaticon-002-twitter"></span></a><ahref="/"><spanclass="flaticon-011-instagram"></span></a><ahref="/"><spanclass="flaticon-010-linkedin"></span></a><ahref="/"><spanclass="flaticon-008-youtube"></span></a></div></div><nav><divclass="nav-logo-container"><ahref="/"><imgsrc="./assets/img/Logo-negro.png"alt="Logo de mi blog"/></a></div><divclass="profile-link"><ahref="./profile.html">Sobre mí</a></div></nav></body>
  • Crear un archivo header.js:
fetch('./header.html')
  .then(response => {
    return response.text();
  })
  .then(data => {
    document.querySelector('header').innerHTML = data;
  });
  • Dentro de todos los archivos html que queramos tener ese header, simplemente agregamos las etiquetas header sin contenido, dentro del body y agregamos el script de header.js dentro de la etiqueta head, antes del body:
<head><scriptasyncsrc="./assets/js/header.js"></script></head><body><header></header></body>

Espero que les sea de ayuda 😃

0
hace 4 años
Escribe tu comentario
+ 2

Entradas relacionadas

3

¿Qué es CSS?🎨

Una vez que aprendemos qué es HTML y como funciona su motor de interpretación, debemos ir al siguiente nivel.🚀 En caso que aún no hayas leíd
1nkarri
1nkarri
1

Notas completas del curso: Maquetación en CSS | NOTION |

Hola, duplica el template en la esquina superior derecha. Notas del curso.
emilysdominguez
emilysdominguez