Awesome
Baseada em anos de experiência de desenvolvedores Front-End, com as adições provenientes de outras checklists open-source.
Índice
Como usar?
Todos itens na Front-End Checklist são necessários na maioria dos projetos, mas alguns elementos podem ser omitidos ou não são tão essenciais (no caso da administração de um aplicativo web, você pode não precisar de um feed RSS por exemplo). Nós escolhemos três níveis de flexibilidade:
significa que o item é recomendado mas pode ser omitido em algumas situações em particular.
significa que o item é altamente recomendado e pode eventualmente ser omitido em alguns casos realmente particulares. Alguns elementos, se omitidos, podem ter más repercussões em termos de performance ou SEO.
significa que o item não pode ser omitido por qualquer razão. Você pode causar uma disfunção na sua página ou ter problemas com acessibilidade ou SEO. A prioridade dos testes precisa estar nestes elementos primeiro.
Alguns recursos possuem um emoticon para ajudar você a entender qual tipo de conteúdo / ajuda você pode encontrar na checklist:
- 📖: documentação ou artigo
- 🛠: ferramenta online / ferramenta de teste
- 📹: mídia ou conteúdo em vídeo
Você pode contribuir no App Front-End Checklist lendo o arquivo README_APP que explica tudo sobe o projeto.
Head
Notas: Você pode acessar uma lista com tudo que poderia ser encontrado na
<head>de um document HTML.
Meta tag
- Doctype: O Doctype é HTML5 e está no topo de todas as suas páginas HTML.
<!doctype html> <!-- HTML5 -->
As próximas 3 meta tags (Charset, X-UA Compatible e Viewport) precisam vir primeiro no head.
- Charset: O charset declarado (UTF-8) é corretamente declarado.
<!-- Determine o encoding de caracteres para o document -->
<meta charset="utf-8">
- X-UA-Compatible: A meta tag X-UA-Compatible está presente.
<!-- Instrua o Internet Explorer a usar seu mais recente engine de renderização -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
- Viewport: A viewport é corretamente declarada.
<!-- Viewport para web design responsivo -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
- Title: Um título é usado em todas páginas (SEO: Google calcula a largura em píxel dos caracteres usados no título, cortados entre 472 e 482 píxels. O limite médio de caracteres seria em torno de 55-caracteres).
<!-- Título do Document -->
<title>Título de Página menor que 55 caracteres</title>
- Descrição: Uma meta decrição é providenciada, é única e não possui mais de 150 caracteres.
<!-- Meta Descrição -->
<meta name="description" content="Descrição da página com menos de 150 caracteres">
- Favicons: Cada favicon foi criado e é exibido corretamente. Se você tem apenas um
favicon.ico, ponha-o na raiz do seu site. Normalmente você não precisa usar nenhum markup. Entretanto, ainda é uma boa prática linkar ele usando o exemplo abaixo. Atualmente, o formato PNG é recomendado ao invés do formato.ico(dimensões: 32x32px).
<!-- Favicon padrão -->
<link rel="icon" type="image/x-icon" href="https://exemplo.com/favicon.ico">
<!-- Formato favicon recomendado -->
<link rel="icon" type="image/png" href="https://exemplo.com/favicon.png">
- Apple Web App Meta: Meta-tags da Apple estão presentes.
<!-- Apple Touch Icon (pelo menos 200x200px) -->
<link rel="apple-touch-icon" href="/custom-icon.png">
<!-- Para rodar a aplicação web em tela cheia -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Estilo da Barra de Status (veja as Meta Tags suportadas abaixo para valores disponíveis) -->
<!-- Não tem efeito nenhum se você não tiver a meta tag anterior -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
- Windows Tiles: Windows tiles estão presentes e linkadas.
<!-- Microsoft Tiles -->
<meta name="msapplication-config" content="browserconfig.xml" />
O markup xml mínimo necessário para o arquivo browserconfig.xml é como segue:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="pequeno.png"/>
<square150x150logo src="medio.png"/>
<wide310x150logo src="largo.png"/>
<square310x310logo src="grande.png"/>
</tile>
</msapplication>
</browserconfig>
- Canonical: Use
rel="canonical"para evitar conteúdo duplicado.
<!-- Ajuda a evitar problemas com conteúdo duplicado -->
<link rel="canonical" href="http://exemplo.com/2017/09/um-novo-artigo-para-ler.html">
Tags HTML
- Atributo de linguagem: A tag de idioma do seu website é especificada e relacionada ao idioma atual da página.
<!-- Indicamos o idioma definido para a página atual -->
<html lang="pt-br">
- Atributo de direção: A direção de leitura é especificada na tag
<html>(Pode ser usada em outra tag HTML).
<!-- Indicamos a direção de leitura (rtl é sigla para right to left, isto é, da direita para a esquerda) -->
<html dir="rtl">
- Idioma alternativo: A tag de idioma alternativo do seu website é especificada e relacionada ao idioma atual da página.
<!-- Indicamos o idioma alternativo definido para a página atual -->
<link rel="alternate" href="https://es.exemplo.com/" hreflang="es">
- Comentários condicionais: Comentários condicionais são presentes para o IE se necessário.
-
RSS feed:
Se seu projeto é um blog ou possui artigos, foi providenciado o link do RSS. -
CSS Crítico:
O CSS crítico (ou "above the fold") coleta todo o CSS usado para renderizar a porção visível da página. Ele é embutido antes da chamada CSS principal e entre <style></style>numa linha única (minificado).
- 🛠 Critical por Addy Osmani no Github automatiza isso.
- Ordem CSS: Todos os arquivos CSS são carregados antes de quaisquer arquivos JavaScript no
<head>(Exceto no caso onde, algumas vezes, arquivos JS são carregados assíncronamente no topo da página).
Social meta
Facebook OG e Twitter Cards são, para qualquer website, altamente recomendados. As outras tags de mídia social podem ser consideradas se seu público-alvo tem uma presença em particular nelas, e você quer se assegurar de exibí-las.
- Facebook Open Graph: Todos os Facebook Open Graph (OG) estão testados e nenhum está faltando ou com informações falsas. Imagens precisam ter no mínimo 600 x 315 píxels, porém é recomendado 1200 x 630 píxels.
Notas: Usar
og:image:widtheog:image:heightvai especificar as dimensões da imagens para o crawler para que ele renderize a imagem imediatamente sem ter que baixá-la e processá-la assíncronamente.
<meta property="og:type" content="website">
<meta property="og:url" content="https://exemplo.com/pagina.html">
<meta property="og:title" content="Título do Conteúdo">
<meta property="og:image" content="https://exemplo.com/imagem.jpg">
<meta property="og:description" content="Descrição Aqui">
<meta property="og:site_name" content="Nome do Site">
<meta property="og:locale" content="pt_BR">
<!-- As próximas tags são opcionais mas recomendadas -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
- 📖 Um Guia de Compartilhamento para Webmasters
- 📖 Melhores Práticas - Compartilhamento
- 🛠 Teste sua página com o Facebook OG testing
- Twitter Card:
<meta name="twitter:card" content="sumário">
<meta name="twitter:site" content="@conta_do_site">
<meta name="twitter:creator" content="@conta_individual">
<meta name="twitter:url" content="https://exemplo.com/pagina.html">
<meta name="twitter:title" content="Título do Conteúdo">
<meta name="twitter:description" content="Descrição de conteúdo com menos de caracteres">
<meta name="twitter:image" content="https://exemplo.com/imagem.jpg">
- 📖 Iniciando com cards — Twitter Developers
- 🛠 Teste sua página com o Validador de Twitter cards
HTML
Melhores práticas
- Elementos Semânticos do HTML5: Elementos Semânticos do HTML5 são usados apropriadamente (header, section, footer, main...).
-
Páginas de erro:
Páginas para Erro 404 e 5xx existem. Lembre-se de que páginas de erro 5xx precisam ter seu CSS integrado (sem chamadas externas no servidor atual). -
Noopener:
Caso você esteja usando links externos com target="_blank", seu link deveria ter um atributorel="noopener"para prevenir tab nabbing. Se você precisa suportar versões mais antigas do Firefox, userel="noopener noreferrer".
- Retirando comentários: Código desnecessário precisa ser removido antes de enviar a página para produção.
Testando HTML
- W3C compliant: Todas as páginas precisam ser testadas com o validador W3C para identificar possíveis problemas no código HTML.
- HTML Lint: Eu uso ferramentas para me ajudar a analisar quaisquer problemas que eu poderia ter com meu código HTML.
- Verificador de Link: Não há links quebrados na minha página, verifique que você não tem nenhum erro 404.
- Teste Bloqueadores de Publicidade: Seu website mostra o conteúdo corretamente com adblockers habilitados (Você pode providenciar uma mensagem encorajando os usuários a desabilitar o adblocker).
Webfonts
Notas: Usar webfonts pode causar um flash de texto invisível ou sem estilização - cogite ter fontes reserva e/ou utilizar webfont loaders para controlar esse comportamento.
- Formato de webfont: WOFF, WOFF2 e TTF são suportados por todos os navegadores modernos.
-
Tamanho de webfont:
Tamanhos de webfont não excedem 2 MB (todas variantes inclusas). -
Webfont loader:
Controle o comportamento de carregamento com um webfont loader
CSS
Notas: Dê uma olhada em Guidelines CSS e Guidelines Sass seguidas pela maioria dos desenvolvedores Front-End. Se você tem alguma dúvida sobre propriedades CSS, você pode visitar a CSS Reference. Existe também um pequeno Guia de Código para consistência.
- Web Design Responsivo: O website está usando web design responsivo.
- CSS Print: Uma stylesheet de impressão correta é providenciada em cada página.
- Pré-processadores: Sua página está usando um pré-processador CSS (e.g. Sass).
- ID Único: Se IDs são usados, eles são únicos à página.
- Reset CSS: Um CSS reset (reset, normalize ou reboot) está em uso e atualizado. (Se você está usando um Framework CSS como Bootstrap ou Foundation, o Normalize já está incluído.)
- 📖 Reset.css
- 📖 Normalize.css
- 📖 Reboot
- JS prefix: Todas as classes (ou id- usados em arquivos) começam com js- e não estão estilizadas nos arquivos CSS.
<div id="js-slider" class="meu-slider">
<!-- ou -->
<div id="id-usado-pelo-cms" class="js-slider meu-slider">
- CSS embutido ou inline: Evite a todo custo o uso de CSS embutido em tags
<style>ou inline: apenas utilizado por razões válidas (ex: background-image para slider, CSS critical). - Vendor prefixes: Prefixos CSS de vendor são usados e gerados de acordo com sua compatibilidade e suporte a navegadores.
Performance
- Concatenação: Arquivos CSS são concatenados num arquivo único. (Não para HTTP/2).
- Minificação: Todos arquivos CSS são minificados.
- Non-blocking: Arquivos CSS precisam ser non-blocking para prevenir o DOM de tirar tempo para carregar.
- CSS Inutilizado: Remover CSS inutilizado.
Validação CSS
- Stylelint: Todos arquivos CSS ou SCSS estão sem nenhum erros.
-
Web design responsivo:
Todas as páginas foram testatas nos seguintes breakpoints: 320px, 768px, 1024px (podem ser mais / diferentes de acordo com seu analytics). -
Validador CSS:
O CSS foi testado e erros pertinentes foram corrigidos.
- Navegadores Desktop: Todas as páginas foram testadas em todos os navegadores desktop atuais (Safari, Firefox, Chrome, Internet Explorer, EDGE...).
- Navegadores Mobile: Todas as páginas foram testadas em todos os navegadores mobile atuais (Browser nativo, Chrome, Safari...).
- SO: Todas as páginas foram testadas em todos os Sistemas Operacionais atuais (Windows, Android, iOS, Mac...).
- Fidelidade de design: Dependendo do projeto e da qualidade dos profissionais da área criativa, pode ser requisitado que você se mantenha próximo ao que foi desenhado. Você pode usar algumas ferramentas para comparar as criações com sua implementação de código e assegurar consistência.
- Direção de leitura: Todas as páginas precisam ser testadas para idiomas LTR e RTL se elas precisarem dar esse suporte.
Imagens
Notas: Para um entendimento completo de otimização de imagem, veja o ebook grátis Essential Image Optimization, do Addy Osmani.
Melhores práticas
- Otimização: Todas as imagens são otimizadas para renderização no navegador. Formato WebP poderia ser usado para páginas críticas (como a Homepage).
- 🛠 Imagemin
- 🛠 Use ImageOptim para otimizar suas imagens gratuitamente.
- 🛠 Use Kraken.io como uma alternativa incrível para otimização tanto png quanto jpg. Até 1MB por arquivo no plano gratuito.
- 🛠 TinyPNG otimize sem perdas imagens png, apng (png animado) e jpg. Versões gratuita e paga estão disponíveis.
- 🛠 ZorroSVG compressão similar à do jpg para imagens transparentes usando mascaramento de svg.
- 🛠 SVGO uma ferramenta baseada em Nodejs para otimização de arquivos de gráficos vetoriais SVG.
- 🛠 SVGOMG uma versão GUI web do SVGO para otimização dos seus svgs online.
- Picture/Srcset: Você usa picture/srcset para providenciar a imagem mais apropriada para o viewport atual do usuário.
- Retina: Você providencia imagens em layout x2 ou 3x, e suporta retina display.
- Sprite: Imagens pequenas estão num arquivo sprite (no caso de ícones, eles podem estar num sprite SVG).
- Altura e Largura: Determine os atributos
widtheheightem<img>se a imagem final renderizada é conhecida (pode ser omitido para CSS sizing). - Texto alternativo: Todas as tags
<img>têm um texto alternativo que descreve a imagem visualmente. - Lazy loading: Imagens são carregadas de modo lazy, ou seja, por demanda (Um fallback para noscript é sempre providenciado).
JavaScript
Melhores práticas
- JavaScript Inline: Você não tem nenhum código JavaSScript inline (misturado com seu código HTML, por exemplo).
- Concatenação: Arquivos JavaScript são concatenados.
- Minificação: Arquivos JavaScript são minificados (você pode adicionar o sufixo
.min).
- Segurança JavaScript:
- Tag
noscript: Use a tag <noscript>no body do HTML se um tipo de script na página não for suportado ou se scripting em geral está atualmente desabilitado no navegador. Isto ajudará em renderização client-side de aplicações pesadas como React.js, veja exemplos.
<noscript>
Você precisa habilitar JavaScript para rodar esta aplicação.
</noscript>
- Non-blocking: Arquivos JavaScript são carregados assíncronamente usando atributo
asyncou deferidos usando atributodefer.
- Bibliotecas JS Otimizadas e atualizadas: Todas as bibliotecas JavaScript usadas no projeto são necessárias (prefira Vanilla JavaScript (JS puro) para funcionalidades simples), atualizadas para sua versão mais atual e não sobrecarregam seu JavaScript com métodos desnecessários.
- Modernizr: Se você precisa visar features específicas, é possível usar um Modernizr custom para adicionar classes na sua tag
<html>.
Validação JavaScript
- ESLint: Nenhum erro é visível pelo ESLint (baseando-se nas sua configuração ou regras pré-estabelecidas).
Segurança
Scaneie e cheque seu website
Melhores práticas
- HTTPS: HTTPS é usado em todas as páginas e para todo conteúdo externo (plugins, imagens...).
- HTTP Strict Transport Security (HSTS): O header HTTP está configurado com 'Strict-Transport-Security'.
- Cross Site Request Forgery (CSRF): Você certifica requests feitas pro seu server-side são legítimas e originadas do seu website / app para prevenir ataques CSRF.
- Cross Site Scripting (XSS): Sua página ou website está livre de possíveis problemas com XSS.
- Content Type Options Previne Google Chrome e Internet Explorer de tentar aplicar mime-sniff no content-type de uma response em relação ao que foi declarado no server.
- X-Frame-Options (XFO) Protege seus visitantes contra ataques clickjacking.
- Política de Segurança de Conteúdo Define como o conteúdo é carregado no seu site e de onde é permitido que seja carregado. Pode também ser usada para se proteger contra ataques de clickjacking.
Performance
Melhores práticas
- Objetivos a alcançar: Suas páginas deveriam alcançar as seguintes metas:
- Primeira Pintura Significativa antes da marca de 1 segundo
- Tempo para Interação abaixo de 5 segundos para uma configuração "média" (um Android de ~R$700 numa rede 3G lenta com 400ms RTT e 400kbps de velocidade de transferência) e abaixo de 2 segundos para visitas repetidas
- Tamanho crítico de arquivos abaixo de 170Kb gzippado
- Minificado: Seu HTML está minificado.
-
Lazy loading:
Imagens, scripts e CSS precisam ser carregados de modo lazy para melhorar o tempo de resposta da página atual (Veja detalhes nas seções respectivas). -
Tamanho dos Cookies:
Se você está usando cookies, certifique-se de que cada cookie não excede 4096 bytes e que seu domain name não tem mais de 20 cookies.
- Componentes de terceiros: Iframes ou componentes de terceiros que dependam em JavaScript externo (como botões de compartilhamento) são substituidos por componentes estáticos quando possível, assim limitando chamadas a APIs externas, e mantendo privadas as atividades de seus usuários.
Preparando requisições a caminho
- Resolução DNS: DNS de serviços de terceiros que podem ser necessários são adiantadamente preparados durante tempo ocioso, usando
dns-prefetch.
<link rel="dns-prefetch" href="https://exemplo.com">
- Preconnection: DNS lookup, TCP handshake e negociação TLS com serviços que serão necessários em breve, são ambos feitos adiantadamente durante tempo ocioso, usando
preconnect.
<link rel="preconnect" href="https://exemplo.com">
- Prefetching: Recursos que serão necessários em breve (ex.: imagens em lazy loading) são requisitados adiantadamente durante tempo ocioso, usando
prefetch.
<link rel="prefetch" href="image.png">
- Preloading: Recursos necessários na página atual (ex.: scripts colocados no fim do
<body>) adiantadamente usandopreload.
<link rel="preload" href="app.js">
Testes de Performance
- Google PageSpeed: Todas suas páginas foram testadas (não só a homepage) e têm um score de pelo menos 90/100.
Acessibilidade
Notas: Você pode assistir a playlist A11ycasts com Rob Dodson 📹
Melhores práticas
- Melhoramento progressivo: Funcionalidades extensivas como a navegação principal e busca deveriam funcionar sem JavaScript habilitado.
- Contraste de cor: Contraste de cores deveria pelo menos passar WCAG AA (AAA para mobile).
Cabeçalhos
- H1: Todas as páginas têm uma tag H1 que não é o título do website.
- Cabeçalhos: Cabeçalhos deveriam ser usados apropriadamente, na ordem correta (H1 até H6).
Semântica
- Inputs HTML5 específicos são utilizados: Isto é especialmente importante para dispositivos mobile, que mostram keypads e widgets customizados para diferentes tipos de input.
Formulários
- Label: Uma label é associada a cada input de um formulário. Caso uma label não possa ser exibida, use
aria-label.
Testes de Acessibilidade
- Testando padrões de Acessibilidade: Use a ferramenta WAVE para testar se sua página respeita os padrões de acessibilidade.
- Navegação por Teclado: Teste seu website usando apenas seu teclado numa ordem previsível. Todos elementos interativos são alcançáveis e utilizáveis.
- Screen-reader: Todas as páginas foram testadas num screen-reader (VoiceOver, ChromeVox, NVDA ou Lynx).
- Estilo de Foco: Se o foco está desabilitado, ele é substituído por um estado visível em CSS.
SEO
- Google Analytics: Google Analytics está instalado e corretamente configurado.
- Lógica de cabeçalhos: Os textos de cabeçalho ajudam a entender o conteúdo na página atual.
- sitemap.xml: Um sitemap.xml existe e foi submetido ao Google Search Console (anteriormente Google Webmaster Tools).
- robots.txt: O robots.txt não está bloqueando páginas da web.
- 📖 O arquivo robots.txt
- 🛠 Teste seu robots.txt com o Google Robots Testing Tool
- Dados Estruturados: Páginas usando dados estruturados são testadas e não possuem erros. Dados estruturados ajudam crawlers a entender o conteúdo da página atual.
- 📖 Introdução a Dados Estruturados - Search - Google Developers
- 📖 RDFa - Dados Linkados no HTML
- 📖 JSON-LD
- 📖 Microdata
- 🛠 Teste sua página com a Ferramenta de Teste de Dados Estruturados
- 🛠 Lista completa de vocabulários que podem ser usados como dados estruturados. Schema.org Full Hierarchy
- Sitemap HTML: Um sitemap HTML é providenciado e acessível via um link no rodapé do seu website.
- Tags para links de Paginação: Providencie
rel="prev"erel="next"para indicar conteúdo pagiado
<!-- Exemplo: Tags para links de paginação para a segunda página de uma lista paginada -->
<link rel="prev" href="https://exemplo.com/?page=1">
<link rel="next" href="https://exemplo.com/?page=3">
Traduções
O Front-End Checklist também está disponível em outros idiomas. Obrigado a todos tradutores por seu incrível trabalho!
- 🇺🇸 Inglês: thedaviddias/Front-End-Checklist
- 🇯🇵 Japonês: miya0001/Front-End-Checklist
- 🇪🇸 Espanhol: eoasakura/Front-End-Checklist-ES
- 🇨🇳 Chinês: JohnsenZhou/Front-End-Checklist
- 🇰🇷 Coreano: kesuskim/Front-End-Checklist
- 🇧🇷 Português: jcezarms/Front-End-Checklist
- 🇻🇳 Vietnamita: euclid1990/Front-End-Checklist
- 🇹🇼 Chinês Tradicional: EngineLin/Front-End-Checklist
- 🇫🇷 Francês: ynizon/Front-End-Checklist
- 🇷🇺 Russo: ungear/Front-End-Checklist
- 🇹🇷 Turco: eraycetinay/Front-End-Checklist
- 🇩🇪 Alemão: xfuture603/Front-End-Checklist
Badge da Front-End Checklist
Se você quer mostrar que está seguindo as regras do Front-End Checklist, ponha esta badge no seu arquivo README!
➔
[](https://github.com/thedaviddias/Front-End-Checklist/)
Contribuindo
Abra uma issue ou uma pull request para sugerir mudanças ou adições.
Guia
O repositório original do Front-End Checklist consiste em duas branches:
1. master
Esta branch consiste no arquivo README.md que é automaticamente refletido no website Front-End Checklist.
2. develop
Esta branch será usada para fazer algumas mudanças significativas à estrutura, conteúdo se necessário. É preferível usar a branch master para arrumar erros pequenos ou adicionar um novo item.
Suporte
Se você tem alguma pergunta ou sugestão, não hesite em usar o Gitter ou Twitter:
Autor
Contribuidores
Este projeto existe graças a todas as pessoas que contribuem. [Contribute]. <a href="https://github.com/thedaviddias/Front-End-Checklist/graphs/contributors"><img src="https://opencollective.com/front-end-checklist/contributors.svg?width=890" /></a>
Apoiadores
Obrigado a todos os nossos apoiadores! 🙏 [Torne-se um apoiador]
<a href="https://opencollective.com/front-end-checklist#backers" target="_blank"><img src="https://opencollective.com/front-end-checklist/backers.svg?width=890"></a>
Patrocinadores
Suporte este projeto tornando-se um patrocinador. Seu logo irá aparecer aqui com um link pro seu website. [Torne-se um patrocinador]
<a href="https://opencollective.com/front-end-checklist/sponsor/0/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/0/avatar.svg"></a> <a href="https://opencollective.com/front-end-checklist/sponsor/1/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/1/avatar.svg"></a> <a href="https://opencollective.com/front-end-checklist/sponsor/2/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/2/avatar.svg"></a> <a href="https://opencollective.com/front-end-checklist/sponsor/3/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/3/avatar.svg"></a> <a href="https://opencollective.com/front-end-checklist/sponsor/4/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/4/avatar.svg"></a> <a href="https://opencollective.com/front-end-checklist/sponsor/5/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/5/avatar.svg"></a> <a href="https://opencollective.com/front-end-checklist/sponsor/6/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/6/avatar.svg"></a> <a href="https://opencollective.com/front-end-checklist/sponsor/7/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/7/avatar.svg"></a> <a href="https://opencollective.com/front-end-checklist/sponsor/8/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/8/avatar.svg"></a> <a href="https://opencollective.com/front-end-checklist/sponsor/9/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/9/avatar.svg"></a>
Licença
