Desenvolvimento de Software | Recursos de Frontend

Tutoriais

Estes foram selecionados como assuntos relevantes para serem usados como material suplementar e de revisão de conceitos básicos.

• HTML e CSS — freeCodeCamp (🔥) Projetos
  • Aprenda HTML Construindo uma Aplicação de Fotos de Gatos
  • Aprenda CSS Construindo um Menu de Cafeteria
  • Aprenda Cores CSS Construindo um Conjunto de Marcadores Coloridos
  • Aprenda Formulários HTML Construindo um Formulário de Registro
  • Aprenda o Modelo de Caixa CSS Construindo uma Pintura de Rothko
  • Aprenda CSS Flexbox Construindo uma Galeria de Fotos
  • Aprenda Tipografia Construindo um Rótulo Nutricional
  • Aprenda Acessibilidade Construindo um Quiz
  • Aprenda Mais Sobre Pseudo-Seletores CSS Construindo um Balanço Patrimonial
  • Aprenda CSS Intermediário Construindo uma Pintura de Gato
  • Aprenda Variáveis CSS Construindo um Horizonte de Cidade
  • Aprenda CSS Grid Construindo uma Revista
  • Aprenda Animação CSS Construindo uma Roda Gigante
  • Aprenda Transformações CSS Construindo um Pinguim
• JavaScript — freeCodeCamp (🔥)
  • JavaScript Básico

---

🗒️ Notação de Caminho de Arquivo / Referências

Um caminho de arquivo é a localização específica de um arquivo ou pasta dentro do sistema de arquivos do computador/servidor. Ele aponta para a estrutura de diretório exata do arquivo.

• Caminhos de URL Absolutos: Referências de caminho absoluto são mapas de caminho de arquivo que usam recursos externos e começam com um protocolo (como https).

  <a href="https://www.byui.edu/speeches/devotionals">

  <img src="https://resource.thesite.com/images/breakfast.svg">

• Raiz do Servidor – Caminho Absoluto: O diretório raiz do site/servidor.

  /images/someimage.webp

  Recomendação: Não use este tipo de notação de diretório raiz ao referenciar recursos em suas páginas nos cursos WDD. Pode funcionar localmente mas não no seu espaço do github pages porque você está trabalhando em um repositório/subdiretório de curso.

• Caminho Relativo: O caminho para um arquivo ou pasta relativo à página atual. subpasta: Este exemplo referencia uma imagem chamada "profile.png" em uma subpasta chamada "images". Veja a captura de tela de exemplo à esquerda.

  <img src="images/profile.png" alt="Xavier Rodriguez" width="100" height="200">

  Este exemplo referencia um arquivo chamado "aboutus.html" que está localizado na mesma pasta do arquivo HTML de referência que está usando o atributo href da tag âncora a. O caminho do arquivo é relativo ao arquivo atual.

  <a href="aboutus.html">Sobre Nós<a>

• Diretório Pai: Para voltar ao diretório pai do diretório atual, use ../ para referenciar o diretório pai. Este exemplo referencia uma imagem que está localizada no diretório pai da página atual.

  ../images/someimage.webp

  Neste exemplo, a tag img com atributo src está localizada em um arquivo chamado "holygrail.html" que está em uma subpasta chamada "week02".

  <img src="../images/castle.jpg" alt="Castelo Eltz na Alemanha" width="200">

• Mesmo Diretório: O arquivo referenciado existe no mesmo diretório da página atual.

  products.html

  Outro método é referenciar o diretório atual usando a notação ./ no início do caminho. Isso normalmente não é necessário porque está implícito e pode levar a erros, especialmente se você esquecer o ., o que então tornaria a referência um caminho relativo à raiz /, que tem resultados diferentes dependendo do servidor.

• Elemento na Mesma Página Um elemento na mesma página pode ser referenciado usando o símbolo # seguido do ID do elemento.

  <a href="#section-six">Seção Seis do Relatório</a>

Solução de Problemas Básicos

• Certifique-se de que o arquivo existe onde você pretendia que ele ficasse.
• Verifique o caminho do arquivo para ter certeza de que você não está apontando para a pasta ou local errado.
• Verifique a ortografia, incluindo as maiúsculas e minúsculas se necessário, da referência do arquivo para ter certeza de que corresponde ao nome real do arquivo. Compare a referência com a fonte fornecida.

  Exemplo: Erro Comum – Maiúsculas e minúsculas não correspondem

  Neste exemplo, a referência à imagem encontrada em uma tag âncora dentro do arquivo index.html está errada porque as maiúsculas e minúsculas estão incorretas.

  <img src="images/img_3324.jpg">

  Além disso, este arquivo de imagem NÃO deve ser deixado neste formato de nomenclatura. O arquivo de imagem deve receber um nome simples e semântico como "castle.jpg".

  

Convenções Comuns de Nomenclatura em Programação

• Camel Case
  Cada palavra dentro de um nome composto é capitalizada exceto a primeira palavra.

  julySales, getNewReport()

• Pascal Case
  Cada palavra dentro de um nome composto é capitalizada.

  JulySales, GetNewReport()

• Underscore ou Snake Case
  Cada palavra dentro de um nome composto é separada por um sublinhado.

  july_sales, get_new_report()

• Kebab Case
  Cada palavra é separada por um hífen/sinal de menos.

  july-sales, get-new-report()