📘 Bem-vindo ao CodeWiki!

Este repositório tem a finalidade de organizar minhas anotações, dicas e trechos de códigos diversos.
É um projeto em constante evolução, então sinta-se à vontade para explorar!

📝 Anotações

  • Risco ao usar target_blank
  • Como Adicionar Link para PDF no Seu Site
  • Como Criar e Usar Snippets Personalizados no VS Code
  • Otimizando Fontes da Web para Melhorar o Desempenho do Site
  • Guia To-Do List para Front-End Developer
  • Simulando Condições de Rede no DevTools do Chrome
  • Clean Code para HTML e CSS
  • CRUD - Exemplo com Gerenciador de Produtos
  • CRUD Explicado
  • Documentação – Uso de JSON-LD e Schema.org no Site
  • Conversão de Arquivos JSON para Formatos Acessíveis
  • Atalhos de teclado
  • Pesquisa Avançada no Google

    • 🚩 Snippets

  • Criando um Acordeão com details e summary sem JavaScript
  • Acordeão com HTML, CSS e JS
  • Criando um Sistema de Sliders Multi-Range com Atualização Dinâmica de Total
  • Galeria de Imagens com Rolagem Infinita
  • Script em Batch para abrir programas automaticamente
  • Desligar o Computador usando VBScript
  • Vários scripts em VBScript ou Batch
  • Rolagem de Texto ao Passar o Mouse
  • Validação de Formulário

    • 🎁 Design-DEV

  • Dicas, Trechos de Código e Boas Práticas — The Design.dev Crew

    • 🖌️ UX/UI no Front-End

    Seção dedicada a aplicar conceitos de design digital no desenvolvimento front-end. Encontre guias práticos sobre experiência do usuário, interface intuitiva, composição visual e recursos gráficos para elevar a qualidade dos seus projetos.

    📤 Backstage da WEB

    Anotações e guias sobre o que acontece por trás de um site: DNS, hospedagem, disponibilidade, e diagnósticos para manter tudo no ar.

  • Como identificar sites fora do ar
  • Documentação Técnica: Conceitos Fundamentais de DNS, Cache, CDN e SEO
  • Documentação: Perguntas sobre SEO
  • Documentação: HTTP e Códigos de Status
  • Fundamentos para o Funcionamento Correto de um Site

    • 🛠️ Ferramentas para Diagnóstico de DNS

    Ferramenta Descrição Acesso
    DNSChecker Permite verificar a propagação de DNS globalmente. Você pode inserir um domínio e ver como os servidores DNS ao redor do mundo estão respondendo. Ideal para identificar problemas de resolução ou propagação. dnschecker.org
    DNSHistory Exibe o histórico de registros DNS de um domínio. Útil para investigar alterações suspeitas, rastrear mudanças de IP ou entender o comportamento passado de um site. dnshistory.org
    Chrome Net Internals (DNS) Ferramenta interna do navegador Chrome que mostra o cache DNS local, permite limpá-lo e visualizar requisições DNS feitas pelo navegador. Excelente para testes locais e depuração rápida. chrome://net-internals/#dns (digite diretamente na barra de endereço do Chrome)

    Estudando sobre DNS

    Título Link
    Artigo sobre DNS Acessar
    O que é ataque DDoS? Acessar
    O que é armazenamento em cache? Acessar
    Artigo sobre IP e TCP Acessar
    Artigo sobre HTTP Acessar
    O que é e como funciona DNS Acessar
    Como a velocidade do site impulsiona o SEO Acessar
    Por que a velocidade de um site é importante? Acessar
    Dicas para melhorar a velocidade do site Acessar
    Como a performance do site afeta conversões Acessar

    💻 HTML (HYPER TEXT MARKUP LANGUANGE)

    HTML (HyperText Markup Language) é o bloco de construção mais básico da Web. Ele define o significado e a estrutura do conteúdo da Web.

  • Artigo de Josh W. Comeau: HTML Skeleton
  • Documentação: preconnect, prefetch, e preload
  • Validação de Formulários com Atributos HTML Nativos
  • Popover API (HTML) + Cascade Layers (CSS)

    • 🎨 CSS (CASCADING STYLE SHEETS)

    Cascading Style Sheets (CSS) é uma linguagem de estilos que define como um documento escrito em HTML ou XML deve ser apresentado. É uma tecnologia fundamental da World Wide Web, juntamente com HTML e JavaScript.

  • CSS Reset de Josh Comeau
  • Container Queries no CSS
  • Documentação: Media Queries e CLAMP FUNCTION no CSS
  • Nova Sintaxe de Consultas de Mídia
  • Documentação de Alinhamento Vertical em CSS
  • Tipografia fluida: abordagem moderna explicada
  • 50 efeitos de imagem CSS criativos para sites envolventes
  • Cores de Sistema CSS
  • Funções Personalizadas em CSS
  • Usando backdrop-filter no CSS
  • Efeito Hover com Raio Invertido em CSS
  • CSS Arrumado
  • Artigo do CSS-Tricks Carousels somente com CSS
  • Texto embaralhado com CSS (Scramble Effect)

    • 💻 JAVASCRIPT

    JavaScript (às vezes abreviado para JS) é uma linguagem leve, interpretada e baseada em objetos com funções de primeira classe, mais conhecida como a linguagem de script para páginas Web, mas usada também em vários outros ambientes sem browser, tais como node.js, Apache CouchDB e Adobe Acrobat. O JavaScript é uma linguagem baseada em protótipos, multi-paradigma e dinâmica, suportando estilos de orientação a objetos, imperativos e declarativos.

  • Como Adicionar um Botão de Voltar ao Topo
  • Função: copiarTextoPorId(idElemento)
  • RELÓGIO COM SAUDAÇÃO
  • Rolagem Suave entre seções (smooth scroll)
  • Estudando o poder do JS

    • 💻 PHP (PHP Hypertext Preprocessor)

    (Originalmente Personal Home Page)

    PHP é uma linguagem de script de código aberto amplamente utilizada, especialmente adequada para o desenvolvimento web. Pode ser incorporada em HTML e é especialmente adequada para desenvolvimento web. O PHP é um dos principais componentes da pilha LAMP (Linux, Apache, MySQL e PHP).

  • 100 Funções PHP Mais Utilizadas

    • 📂 GIT E MARKDOWN

    Git é um sistema de controle de versão distribuído, usado para rastrear alterações no código-fonte durante o desenvolvimento de software.

  • Principais Comandos GIT

    • 📝 Markdown & Documentação

    Já, o Markdown é uma linguagem de marcação de texto que permite formatar textos de forma simples.

    Link Descrição
    Markdown to HTML (CodeBeautify) Ferramenta simples para converter rapidamente Markdown em HTML com visualização instantânea.
    MarkdownEditor.org Editor Markdown com visualização lado a lado em tempo real. Ideal para anotações, READMEs e documentação.
    Readme.so Construtor de arquivos README.md com blocos pré-formatados. Ideal para projetos open source e portfólios.
    Free Markdown to HTML Converter Converter Markdown para HTML Cole ou digite seu markdown e veja-o renderizado como HTML. Baixe ou copie o HTML resultante.

    ⚙ Recursos e Ferramentas

    Link Descrição
    Documentações Diversas Documentações e Referências Técnicas para Consultas
    Ilustrações e Design Recursos para Design, Ilustrações e Imagens
    httrack.com/page/2 É uma ferramenta gratuita e de código aberto para download completo de sites, permitindo navegá-los offline. É útil para fazer cópias locais para estudo, backup ou análise de estrutura de sites.
    Front end Editor Playground online para testar e experimentar código HTML, CSS e JavaScript em tempo real.
    FileZilla Software de código aberto para transferência de arquivos via FTP, FTPS e SFTP, com interface intuitiva e recursos avançados. Amplamente utilizado por desenvolvedores web e administradores de sistema.
    place-hold.it Serviço online que fornece imagens de espaço reservado de forma rápida e fácil para uso temporário em projetos durante o desenvolvimento. Ideal para preencher layouts até que as imagens finais estejam disponíveis.
    emojidb.org Site que oferece uma variedade de emojis e símbolos para uso em comunicações digitais.
    CSS Layout Generator O CSS Layout Generator é uma ferramenta interativa pra gerar layouts de página usando CSS. Ela permite escolher vários modelos de layout (como grid ou flexbox), ver uma prévia visual e pegar o código CSS/HTML gerado para usar no seu projeto.
    Design & Dev Tools For Creators Lista de ferramentas essenciais para criar e manter Design Systems (sistemas de design), destacando a convergência entre design e código (como Storybook, Figma, e frameworks de UI/UX).

    👩‍💻 Cursos Online de Programação

    Se você quer aprender programação pela internet, existem diversos cursos gratuitos e pagos que oferecem ótimo conteúdo. Aqui você encontra links e anotações dos cursos que acompanho.

    📺 Curso em Vídeo

    🎓 CFB Cursos

    📚 Livros de Programação

  • Dev Free Books - Coleção de livros para DEVs

    • 👌 Projetos Mão na Massa

    Este espaço foi criado para documentar meus projetos de desenvolvimento web. O objetivo é registrar os desafios, as dúvidas e as soluções encontradas, criando um material de referência prático e acessível.

  • Projeto Dark Souls