Passo 1: Introdução aos Templates

Até agora, aprendemos a construir um site do zero, adicionando componentes e seções individualmente. No entanto, nem sempre é necessário fazer isso, pois existem modelos de sites prontos na internet chamados de templates. Neste módulo, aprenderemos a encontrar, baixar e customizar esses templates.

Um template é um modelo de layout pronto que pode ser usado para criar um site, publicação em redes sociais, e-mail marketing e até currículo. Ele é usado como base para a criação de conteúdo, com apenas a apresentação visual e instruções sobre onde e qual tipo de conteúdo deve entrar a cada parcela da apresentação.

Os templates são uma ótima maneira de economizar tempo e esforço na criação de um site ou outro tipo de conteúdo. Eles oferecem uma estrutura predefinida que pode ser facilmente personalizada para atender às suas necessidades específicas.

Passo 2: Encontrar e Baixar Templates

Aprenderemos onde encontrar e baixar templates de sites em Bootstrap. Para isso, abra uma nova aba em seu navegador e digite “Bootstrap Templates” na barra de pesquisa. Você também pode procurar por “Bootstrap Free Templates” se estiver procurando por opções gratuitas. Existem templates gratuitos e pagos disponíveis, sendo que os pagos geralmente oferecem mais funcionalidades e suporte.

Passo 3: Selecionar um Template

Ao selecionar um template, é importante considerar o propósito do site. Por exemplo, se você precisa de um site para um dashboard, procure por um template nesse sentido. Neste caso, estamos procurando por um template de portfólio.

Passo 4: Analisar o Template

Ao analisar um template, observe se ele é gratuito (marcado como “free”) ou pago (marcado como “pro”). Também verifique o número de downloads para ter uma ideia de sua popularidade. Além disso, é importante verificar a licença do template para garantir que você possa usá-lo conforme necessário.

Passo 5: Baixar o Template

Depois de selecionar um template, você pode baixá-lo clicando no botão “Free Download” ou “Download”. Certifique-se de salvar o arquivo em um local de fácil acesso em seu computador.

Passo 6: Extrair o Template

O template será baixado como um arquivo zip. Para acessar os arquivos, você precisará extrair o arquivo zip. Você pode fazer isso clicando com o botão direito no arquivo e selecionando “Extrair”.

Passo 7: Visualizar o Template

Depois de extrair o arquivo, você pode visualizar o template abrindo o arquivo HTML em seu navegador.

Passo 8: Abrindo o Projeto no VS Code

Abra o Visual Studio Code (VS Code). Vá até o menu ‘File’ (ou ‘Arquivo’ se o VS Code estiver em português). Clique em ‘Open Folder’ (ou ‘Abrir Pasta’). Navegue no seu computador até onde o projeto está localizado e clique em ‘Abrir’.

Passo 9: Explorando a Estrutura do Projeto

O projeto possui várias pastas. Comece explorando a primeira pasta chamada ‘Assets’. Esta pasta geralmente contém tudo o que é necessário para o site funcionar. Navegue pelas subpastas, incluindo ‘CSS’, ‘IMG’, ‘JS’, ‘SCSS’ e ‘Vendor’. Familiarize-se com o conteúdo de cada uma. Encontre e abra o arquivo ‘Index’. Esse é o arquivo onde está todo o código desse projeto.