Concluindo nosso HTML com o toque final: O footer e linkando nossos arquivos CSS e JS

Agora, para concluir a construção do nosso HTML, vamos para a nossa tag footer. Nosso footer terá uma div com um ícone e um link dentro dela, geralmente eu adiciono o link do github, mas você pode colocar o link que você achar melhor, o linkedin também é uma boa, ou quem sabe os dois.

<footer class="footer">

<div class="footer__container-dev">

 <iconify-icon class="iconify footer__container-dev__icon" icon="akar-icons:github-fill"></iconify-icon>

 <a href="https://github.com/fransilva0" class="footer__container-dev__link" target="_Blank">developed by Francileudo Oliveira</a>
</div>

</footer>

Com o nosso HTML construído, vamos seguir para a nossa estilização, porém antes de caminhar para essa etapa, precisamos linkar nosso arquivo CSS para que as estilizações funcionem. Existem três formas de fazer isso, porém apenas uma é a mais utilizada e a melhor.

Usaremos uma tag link dentro da tag header apontando para o nosso arquivo CSS na sua pasta, dessa forma iremos separar o conteúdo do HTML e do CSS em arquivos separados. a tag que vai estar no header é a seguinte:

<link rel="stylesheet" href="./assets/css/index.css">

Agora que linkamos o CSS vamos aproveitar e linkar nosso Js também, para desenvolvermos a lógica assim que concluirmos a estilização. Para isso vamos adicionar uma tag de script no final do body, antes da tag de fechamento. Nessa tag de script, iremos linkar o arquivo Js da seguinte forma:

<script src="./assets/js/index.js"></script>

Após isso, temos nosso arquivo JavaScript e nosso CSS linkados na nossa página. Nos próximos artigos iremos desenvolver nosso CSS para seguirmos com o desenvolvimento da lógica do Decoder usando o JavaScript. Um abraço e até breve.

artigo original no blog: https://francileudo-frontend.blogspot.com/2022/09/concluindo-nosso-html-com-o-toque-final.html