Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Sugestão] Eu não consigo encontrar o material auxiliar do curso.

Referente ao curso HTML e CSS: formulários, SEO e acessibilidade

por Isabella Souza
| 65.8k xp | 1 posts
Meio-Oficial

Eu não achei nenhuma aula, sessão ou algo do gênero que contivesse o material auxiliar que a instrutora cita, como o favicon. Acaba que eu não consigo seguir com o desenvolvimento prático, apenas prossigo assistindo, mas a parte prática tem sido fundamental para meu desenvolvimento, então gostaria que esse problema fosse solucionado, por favor.

Matricule-se agora e aproveite até 50% OFF

O maior desconto do ano para você evoluir com a maior escola de tecnologia

QUERO APROVEITAR
2 respostas
solução!
por Ronaldo Cordeiro Schmidt
| 288.4k xp | 762 posts

Ola Isabella.
Para voce não ficar só na teoria veja se o conteudo abaixo te ajuda:
O favicon é o ícone que aparece na aba do navegador ao lado do título da página.
Para adicionar:
Gere seu favicon (em .ico, .png, etc.) usando sites gratuitos como:

Coloque os arquivos na pasta do seu site.
No <head> do seu HTML, insira:

<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="apple-touch-icon.png">

Essas linhas indicam ao navegador qual imagem usar como favicon em diferentes contextos (desktop, mobile, etc.).
Existem várias formas de usar ícones.
Aqui vão as mais simples.
Baixe ícones de sites como:

Depois, use assim:
HTML:

<img src="icons/heart.svg" alt="Coração">

Ou no CSS:

.icone {
  width: 24px;
  height: 24px;
  background-image: url('icons/heart.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

Você pode usar bibliotecas que fornecem ícones como se fossem texto. Exemplo com Font Awesome:
No <head>:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

No corpo do HTML:

<i class="fa fa-heart"></i>

No CSS:

.fa {
  font-size: 20px;
  color: red;
}

Você pode copiar e colar o código SVG direto no HTML.
Exemplo:

<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
  <path d="M12 21.35l-1.45-1.32C5.4 15.36..."></path>
</svg>

CSS:

svg {
  width: 24px;
  height: 24px;
  color: blue;
}

Se o SVG usar fill="currentColor", ele herda a cor do CSS.
Dicas :

  • Para ícones leves e modernos, experimente bibliotecas como Feather Icons, Bootstrap Icons ou Material Icons.
  • Prefira SVG a PNG sempre que possível (são vetoriais e leves).
  • Teste o favicon em modo anônimo, pois navegadores podem guardar o antigo em cache.

Com essas opções, você já pode personalizar sua página com ícones visuais e um favicon que representa seu site.
Simples, prático e com aparência profissional.
Se ficar na duvida ou quiser saber mais comente ai.
Bons estudos.

por Ana Oliveira
| 6.7k xp | 3 posts
Instrutor Coordenação Educacional

Oi, Isabella.

Muito obrigada por sua atenção e por ter dedicado um tempo para nos sinalizar a falta do material auxiliar. Seu feedback é extremamente valioso para garantir a qualidade e a experiência prática do nosso curso!

Você tem toda razão em pontuar que a parte prática é fundamental para o desenvolvimento, gostaria de informar que a situação já foi resolvida: o material auxiliar foi inserido na segunda aula, dentro da atividade "Preparando o Ambiente". Agora você poderá baixar o favicon e os demais arquivos para retomar o desenvolvimento prático de onde parou.

Ficamos muito felizes que você tenha notado e nos avisado sobre essa inconsistência. É com a ajuda de alunos engajados como você que conseguimos aprimorar nosso conteúdo rapidamente.

Agradecemos novamente por sua colaboração! Conte conosco para o que mais precisar em seu aprendizado.