Desenvolvimento front-end
Olá
Este é um repositório de código aberto para todos que desejam aprender o desenvolvimento do front-end.
Desenvolvimento front-end
O desenvolvimento da Web front-end é a prática de converter dados em uma interface gráfica, através do uso de HTML, CSS e JavaScript, para que os usuários possam visualizar e interagir com esses dados.
Certifique -se de mostrar seu apoio pela Star Mark e compartilhar o repositório
Uma lista de recursos úteis para desenvolvedores de front -end
Índice
- Desenvolvimento front-end
- Olá
- Uma lista de recursos úteis para desenvolvedores de front -end
- Índice
- Roteiro
- Útil
- Aprendizado
- A11y
- Canais do YouTube
- Blogs
- Podcasts
- Editores de código
- Extensões de código do Visual Studio
- Ferramentas
- Estruturas CSS
- Ícones
- Cores
- Tipografia
- Inspiração de design
- Estruturas de animação
- Recursos de estoque
- Geolocation
- APIs
- Mockups
- Livros
- Desafios / jogos
- Ferramentas gratuitas para estudantes
- Vídeos do YouTube
- Teste
Roteiro
- Roteiro-Para um roteiro passo a passo bem descrito para desenvolvedores de front-end.
Útil
- BGJAR - Gerador de fundo SVG gratuito para seus sites, blogs e aplicativos.
- Inspecione - Inspecione e depure seus aplicativos e sites da Web móveis em dispositivos iOS diretamente do Mac ou do Windows.
Aprendizado
- Um guia completo para o Flexbox | CSS -TRICKS - Um guia abrangente para o layout do Flexbox.
- Um guia completo para grade | CSS -TRICKS - Um guia abrangente para o layout da grade.
- Usuário de energia da linha de comando - Uma série de vídeos para desenvolvedores da web sobre o aprendizado de um fluxo de trabalho da linha de comando moderno com as ferramentas ZSH, Z e Related.
- CSS Grid - Curso de vídeo completo sobre CSS Grid
- Best Of JS Um site para verificar os melhores repositórios do GitHub para sua estrutura JS favorita
- Codecademy - Uma série de cursos interativos ensinando ao mundo a codificar. Oferecendo assinaturas gratuitas e pagas em vários idiomas.
- Codemente - Uma ferramenta para obter ajuda de desenvolvedores experientes em vários idiomas de codificação em sua jornada de aprendizado.
- Tópicos do Scaler - Uma plataforma para aprender linguagens de programação como HTML, Java, JavaScript, Python etc.
- Conquistador Layouts Responsivos - Feito por Kevin Powell (https://twitter.com/kevinjpowell). Este curso leva você a tudo o que você precisa saber para criar layouts responsivos em seu brilhante curso de 21 dias.
- Coursera - Uma seleção de cursos de escolas altamente respeitáveis como Stanford e Yale.
- CSS Almanac | CSS -TRICKS - Um guia de referência rápido para muitos recursos do CSS.
- CSS Grid Playground - Um guia visual com curadoria da equipe Mozilla para ajudá -lo a aprender os recursos de layout da grade do CSS com muitos exemplos de código e demos.
- Recursos de design - Recursos de design da Skullface.
- Dev.to - onde os programadores compartilham idéias e se ajudam a crescer.
- DevProjects - Uma comunidade gratuita consiste em projetos com curadoria de desenvolvedores seniores para ajudá -lo a preencher a lacuna entre teoria e prática. !
- Dicoding Academy - onde todos podem aprender a programação de fundamentos ( disponível apenas na Bahasa Indonésia ).
- EDX - Uma série de cursos de nível universitário de Harvard, MIT, Wharton e muito mais.
- EGGHEAD - Tutoriais em vídeo de desenvolvimento da Web em segmentos de "tamanho de mordida". Tem associações gratuitas e "pro" (pagas).
- Enboça | Recursos de Front -End - Recursos organizados sobre o desenvolvimento do front end.
- FLEXBOX - ENCONSEIRA DO SEU FLEXBOX Knowledge - Um curso on -line de história centrado em zumbi.
- FREECODECAMP - Um recurso gratuito que incorpora projetos de programação e preparação de entrevistas para trabalhos de desenvolvedor.
- Frontend Masters - Tutoriais em vídeo de desenvolvimento da Web de líderes do setor (atualizados com frequência). Possui associações gratuitas (tempo limitado) e pagas.
- Full Stack Open - Curso sobre o desenvolvimento da Web Full Stack pela Universidade de Helsinski. Aprenda React, Redux, Node.js, MongoDB, GraphQL e TypeScript de uma só vez! Este curso apresentará a você o moderno desenvolvimento da Web baseado em JavaScript. O foco principal é a criação de aplicativos de página única com o ReactJS que usam APIs REST construídas com Node.js.
- Geeksforgeeks - Um portal de ciência da computação para geeks.
- Khan Academy - Uma plataforma universal de aprendizado on -line que também oferece os cursos importantes para os desenvolvedores.
- Aprendizagem - Pesquise mapas mentais interativos para aprender qualquer coisa.
- Aprenda JavaScript - Aprenda JavaScript em um ambiente interativo. Leia lições curtas, faça anotações e complete os desafios diretamente no seu navegador.
- Mastering Markdown - uma mini -série que mudará a maneira como você escreve documentação.
- Rede de desenvolvedores da Mozilla - as informações mais recentes sobre as tecnologias da Web Open.
- Tutoriais completos de desenvolvimento da web -lyty.dev Tutoriais completos de desenvolvimento da web com exemplos bem explicados gratuitamente.
- PLURALSIGHT - Treinamento ilimitado de desenvolvedores on -line de especialistas do setor.
- Saylor - Uma solução aberta e de aprendizado on -line que oferece oportunidades de crédito para a faculdade para os alunos.
- Scrimba-aprendizado baseado em screencast em vários idiomas.
- Scotch - Muitos cursos de desenvolvimento da Web. Tem associações gratuitas e "premium" (pagas).
- Cursos de pesquisa - Uma seleção de cursos de tendências e tutoriais.
- Sololearn- Um portal gratuito para aprender a Web Development.
- Team Treehouse - Aprendizagem de ritmo próprio em uma variedade de idiomas e assuntos.
- O tutorial javascript moderno - tudo sobre a linguagem JavaScript.
- O Projeto Odin - um currículo de código aberto para aprender a Web Development
- Tutoriais Point - Tutoriais para muitos idiomas diferentes com exemplos de código interativo.
- Udacity - Aprenda qualquer coisa online - aprendizado profundo, aprendizado de máquina, idiomas de front -end.
- Udemy - um mercado de aprendizado e ensino on -line.
- ASSISTA E CÓDIGO - A Escola de Ciência da Computação para alunos que exigem rigor e profundidade intelectuais.
- W3SCOOL - Biblioteca de Referência de Desenvolvimento da Web. Abrange HTML, CSS, JavaScript (jQuery, Ajax e muito mais), bem como alguns idiomas do lado do servidor. Inclui descrições e exemplos interativos.
- APIs da web | MDN - Tudo o que um iniciante precisa saber sobre APIs da web.
- Web Design em 4 minutos por Jeremy Thomas Criador do Bulma CSS e MarkSheet.io.
- Wesbos - cursos gratuitos e premium em desenvolvimento da web
- Truques de desenvolvimento da web - todos os seus códigos de tendência CSS, JS, JQuery com códigos de origem em um só lugar. Seu prático parceiro para todos os tipos de desenvolvimento e designs modernos da Web.
- Web.Dev - Guias e recursos para sites rápidos modernos pelos desenvolvedores do Google.
- Torne -se um desenvolvedor da Web de front -end - desenvolva competência com HTML, CSS, JavaScript e JQuery.
- Webglossary.info - Glossário de desenvolvimento e design da web, com mais de 3.500 entradas (em agosto de 2023)
- Habilidades da Web - Uma visão visual de habilidades úteis para aprender como desenvolvedor da web.
- A cervejaria do aplicativo - tudo em uma plataforma para cobrir suas habilidades de desenvolvimento da web
- Full Stack Open 2021 - Este curso serve como uma introdução ao desenvolvimento moderno de aplicativos da web com JavaScript.
- DevTools Tech - Uma plataforma de preparação de entrevista gratuita para engenheiros de front -end, com foco em perguntas de programação do mundo real de alta qualidade.
⬆ de volta ao topo
A11y
- Guia de estilo A11y - um guia de estilo vivo ou biblioteca de padrões, gerada a partir de estilos documentados do KSS ... com uma reviravolta de acessibilidade.
- AX - Kit de ferramentas de teste de acessibilidade.
- Analisador de contraste de cores - CCA ajuda a determinar a legibilidade do texto e o contraste de elementos visuais, como controles gráficos e indicadores visuais.
- Deque University - Cursos on -line sobre habilidades de acessibilidade da Web e móveis.
- Introdução do W3C à acessibilidade da Web - estratégias, padrões, recursos para tornar a web acessível a pessoas com deficiência.
⬆ de volta ao topo
Canais do YouTube
- Apna College- Tutoriais sobre HTML, CSS, Bootstrap, JavaScript, Git, Github, SQL
- Adrian Twarog- Tutoriais sobre HTML, CSS, Bootstrap, JavaScript, React, React
Nativo, UI/UX e Cool Designing Stuff - 1stwebdesigner - Tutoriais no WordPress, PSD para HTML
- Brad Hussey - Tutoriais sobre Bootstrap, Sass, JQuery, PHP, Freelancing
- Truques do CSS - canal do YouTube do conhecido blog Web Design and Development CSS Truques de Chris Coyier.
- Tutoriais do CSS - Tutoriais em Hindi, por Husain, Sir, cobrindo todos os conceitos básicos do CSS.
- Guia do codificador - tutoriais sobre HTML, CSS, JavaScript, Bootstrap
- Codevolution - Tutoriais sobre React, Vue, Angular, MongoDB, JavaScript, pilha média, HTML, CSS.
- Programador inteligente - Tutoriais sobre React, MongoDB, JavaScript, Mern Stack, HTML, CSS, React Native.
- Derek Banas - Tutoriais sobre C#, Visual Basic, Django, Python, Nodejs, AngularJs, MongoDB, JQuery, JavaScript, CSS, Ruby on Rails, Java, Sqlite, Android, Html, Php, Objetivo C.
- Devtips - Tutoriais sobre HTML5, CSS, SASS, Bootstrap, Fundação, JQuery, Ruby on Rails, Github.
- DesignCourse - Tutoriais sobre UI/UX Design ou HTML5, CSS, SASS, Biblioteca de Animação.
- Dennis Ivy - Tutoriais sobre Django & Flask Full Stack Development Projects
- ELZERO Web School - Somente árabe
- FREECODECAMP - Tutoriais sobre jQuery, JavaScript, React, Math, Science, Engenharia de Software, Software de código aberto
- Função divertida de diversão - tutoriais sobre javascript, react, programação funcional, grafql, vida como desenvolvedor
- Google Chrome Developers - Conversas mais recentes e mais recentes sobre o desenvolvimento da web moderno com dicas, insights e técnicas para ajudá -lo a aumentar o nível da sua habilidade de desenvolvimento da Web.
- Kevin Powell - Tutoriais no HTML, CSS, ajudando a entender o CSS melhor de maneira simples
- LearnCode.academy - Tutoriais sobre HTML, CSS, JQuery, JavaScript, React JS / Redux, Nó JS
- LevelUptuts - Tutoriais sobre HTML, CSS, SASS, WordPress, Magento, Drupal, React, Meteor
- Mackenzie Child - Design to Code Challenge - Tutoriais na interface do usuário, como projetar e codificar vários estilos de sites.
- O trem de codificação - tutoriais sobre JavaScript, nó, aprendizado de máquina, redes neurais, algoritmos
- O NINJA NET - Tutoriais sobre HTML, CSS, JQuery, JavaScript, Git e Github, Bootstrap, Mangodb, PSD para WordPress, PSD para HTML e muito mais.
- Tedigicraft - Tutoriais sobre HTML, CSS, JQuery, Php, Ajax, Bootstrap, MySQL.
- TENHEWBOSTON - TUTORIAIS NO ECMASCRIP 6, REACT JS / Redux, Django, Angular 2, Gulp, Git, Python, SEO, Sass, SCSS, Grunt, Illustrator, MongoDB, PHP, Java, Ruby, Objetivo C
- Traversy Media - Tutorials on HTML, CSS, jQuery, PHP, Ajax, Bootstrap, MySQL, ECMAScript 6, React JS / Redux, Django, Angular, Ionic, Gulp, Git, Python, Node JS, PHP, Laravel, Cake PHP, Symfony, CodeIgniter, Programming Tips
- CodeWithharry - Tutoriais sobre HTML, CSS, JavaScript, Node JS, MongoDB e Hosting.
- Programação com Mosh - Tutorial sobre React, Nodejs, Python, JavaScript, Angular, TypeScipt e C#.
- Dev Ed - Aprenda Desenvolvimento da Web, Web Design, Modelagem 3D, Ferramentas como Figma e muito mais
- Web Dev simplificado - Aprenda desenvolvimentos de sites com HTML, JavaScript, CSS e outras estruturas com os mesmos projetos e muito mais
- Desenvolvedor Mozilla - Vídeos para ajudá -lo com seu trabalho como web designer, desenvolvedor da web ou pessoa envolvida em fazer sites ou aplicativos da web
- Academind - Sempre há algo para aprender. Se você deseja procurar tutoriais ou guias angulares, vue.js, outro conteúdo de desenvolvimento de front -end ou tópicos de ciência de dados ou qualquer outra coisa - você provavelmente está certo
- Tutoriais do Projeto Sonny Sangha no React, Redux, Next JS & React Native
- WB Web Development - Tutoriais em HTML, CSS, Bootstrap, Sass, JavaScript, Git e Github, MongoDB, Nodejs, ReactJs
- Tutoriais on-line- Conteúdo da primeira classe no desenvolvimento da Web frontal. Possui tutoriais exclusivos sobre HTML, CSS e JavaScript com efeitos surpreendentes. Uma visita obrigatória para todos os desenvolvedores de front -end
- Akshay Saini- Vídeos sobre dicas de entrevistas de front-end, experiências de entrevistas e conceitos especialmente principais de JavaScript.
- Devtools Tech-Videos sobre conceitos avançados de front-end, perguntas e experiências de entrevista e concentre-se em conceitos de JavaScript intermediários a avançados.
⬆ de volta ao topo
Blogs
- 10 Precisa conhecer os cursos de conceitos JavaScript - do conceito básico ao avanço do JavaScript explicado de maneira simples que todo desenvolvedor de JavaScript precisa conhecer.
- 100 maneiras de ser mais criativo - 100 maneiras de ser mais criativo de Shaunta Grimes.
- 2017 Design Roundup - Coleção de todos os Recursos de Desenvolvimento da Web da Codrops para 2017.
- 50 coisas que você provavelmente esqueceu de projetar - UX Power Tools - Médio - 50 coisas que você provavelmente esqueceu de projetar de Jon Moore
- Mês da ACM do Código 2K17: Construindo Moodify - Mês ACM do Código 2K17: Construindo Moodify a partir de Ajay NS.
- Um guia ilustrado para configurar seu site usando o Github & Cloudflare - um guia ilustrado para configurar seu site usando o Github e o Cloudflare de Karan Thakkar.
- Brad Frost Blog - Autor de design atômico, sistemas de design de construção em CSS e HTML.
- Melhores fontes gratuitas - mais de 70 melhores fontes gratuitas para designers - gratuito para uso comercial em 2019
- CSS Animações vs A API da Web Animações: um estudo de caso
- Truques do CSS - Artigos diários sobre CSS, HTML, JavaScript e todas as coisas relacionadas ao design e desenvolvimento da web.
- Citações de design e criatividade - 72 citações sobre design e criatividade de Margaret Kelsey.
- Recursos de design - Lista de recursos para trabalhar e aprender sobre o design.
- Design for Change - Artigo sobre design regenerativo e sustentável de Viba Mohan.
- Registradores de domínio DNS e Hosting - Registradores de Domain, DNS e hospedagem de Kirby Kohlmorge
- Guia para iniciantes para Gatsby - Gatsby.js: Como configurar e usar o gerador de sites estáticos do React de Aman Mittal
- Exemplos de tudo no ECMAScript em 2016.2017, 2018
- Flavio Copes Tutoriais - Tutoriais diários sobre JavaScript e Desenvolvimento da Web por Flavio Copes
- Do URL à interativa - explicação de como nossa web mundial funciona.
- Dogma front -end - Notícias e ferramentas para o desenvolvimento do front -end, geralmente atualizado duas vezes por dia
- Frontend Weekly - Os melhores artigos, links e notícias relacionados ao desenvolvimento de front -end entregues uma vez por semana à sua caixa de entrada.
- Como animei o logotipo do BitsOfCode com o artigo do CSS - Process em uma animação CSS personalizada.
- Como a função minmax () funciona - explicação da função CSS minmax (), que pode ser usada para os layouts de grade CSS.
- Como construir um portfólio impressionante quando você é novo no Tech - como construir um portfólio impressionante quando você é novo no Tech de Randle Browning
- Como construir um gerador de cotação aleatória com JavaScript e HTML, para iniciantes absolutos - como construir um gerador de cotação aleatória com JavaScript e HTML, para iniciantes absolutos da Sophanarith SOK.
- Como construir seu primeiro componente Vue - Tutorial do projeto para iniciantes para construir um componente Vue por Sarah Dayan.
- Vamos codificar uma rede neural do zero - Parte 1 - TypeMe - Médio - Vamos codificar uma rede neural do zero de Charles Fried
- Music Player Inspirations - Music Player Inspiration 2017 de Muzli.
- A lista de verificação do front -end - uma lista exaustiva de todos os elementos que você precisa ter/testar antes de lançar seu site para a produção.
- Como é construir e comercializar um chatbot quando você tem apenas 14 anos - como é construir e comercializar um chatbot quando você tem apenas 14 anos de Alec Jones
- Qual é o problema com as margens dobráveis? - Explicação do recurso de margens em colapso do CSS.
- Uma lista bem selecionada para UX - Lista de recursos com curadoria para UX por Fernandocomet.
- Airbnb Open Source - Artigos de engenharia e ciência de dados e projetos de código aberto.
- O custo do JS - como entregar JavaScript com eficiência para uma experiência valiosa do usuário por Addy Osmani.
- CSS Scroll -SNAP - Tutorial sobre o Snipping CSS Scroll, que permite bloquear a viewport depois que um usuário terminar de rolar.
- Pré -carga, pré -busca e prioridades no artigo do Chrome - sobre como os primitivos de carregamento da web funcionam na pilha de iniciantes do Chrome por Addy Osmani.
- Aprendendo Git por si mesmo - chinês tradicional
- IDEs para desenvolvedores da web - fatores a serem considerados ao escolher um IDE para o desenvolvimento da Web e exemplos de boas opções.
- As 8 principais APIs meteorológicas para 2020 - 8 melhores APIs climáticas para 2020 - as melhores APIs de clima livre para desenvolvedores
- Tutoriais da Comunidade Oceano Digital - Uma coleção de tutoriais gratuita de especialistas. Tudo contribuiu da comunidade do Oceano Digital.
- REACT para iniciantes - um manual react.js para desenvolvedores de front -end - um manual react.js para desenvolvedores de front -end
- Ultimate React Resources - O blog inclui postagens de blog, e -books gratuitos, repositórios do GitHub com listas com curadoria, implementação prática do React.js no mundo real com código de trabalho.
- Introdução completa ao CSS Grid - um blog para aprender os fundamentos da grade CSS, construindo diferentes layouts complexos.
- Blog de Rado) - Um blog que consiste em artigos sobre dependências e implementação do React, GraphQL e muito mais!
- ROBLOG - Um destino preferido para todas as coisas relacionadas à tecnologia, JavaScript, Node.Js e Web Development.
- Monica Powell Blog - Um blog incrível em JavaScript, React, Gatsby e Git.
- Devtools Tech - Recursos de alta qualidade cuidadosamente selecionados para engenheiros de front -end.
Contratando
Podcasts
- Blocos de codificação - podcasts de desenvolvimento de software por uma equipe de programadores profissionais.
- Frontend Happy Hour - Podcasts de front -end, software e desenvolvimento de carreira dos participantes do setor.
- JavaScript Jabber - Podcasts para desenvolvedores de JavaScript. O site também oferece muitos outros podcasts relacionados à programação.
- Sintaxe - podcasts de desenvolvimento de front -end de Wes Bos e Scott Tolinski de Tuts de nível superior.
⬆ de volta ao topo
Editores de código
Atom - Atom é um editor de texto moderno, acessível, mas hackeable para o núcleo - uma ferramenta que você pode personalizar para fazer qualquer coisa, mas também usar produtivamente sem tocar em um arquivo de configuração. Código aberto | Todas as plataformas
Suportes - com ferramentas visuais focadas e suporte de pré -processador, os colchetes são um editor de texto moderno que facilita o design no navegador. É criado desde o início para designers da web e desenvolvedores de front-end. Código aberto | Todas as plataformas
GEANY - Geany é um ambiente de desenvolvimento integrado pequeno e leve.
Intellijidea - Um IDE universal de Jetbrains. Possui conclusão de código, integração e sistema de controle de versão (VCS).
Notepad ++ - Notepad ++ é um editor de código -fonte "Liberdade de expressão" e também como na "cerveja gratuita") e na substituição do bloco de notas que suporta vários idiomas. Somente -Windows -pyCharm -utilizado especialmente para a linguagem Python, ele fornece análise de código, um depurador gráfico, um testador de unidade integrado, integração com sistemas de controle de versão e suporta o desenvolvimento da web com o Django e também como ciência de dados com a Anaconda. Todas as plataformas | Código aberto
Texto sublime - Um editor de texto sofisticado para código, marcação e prosa. Todas as plataformas
Vim - Vim é um editor de texto altamente configurável para criar e alterar com eficiência qualquer tipo de texto. Está incluído como "VI" com a maioria dos sistemas Unix e com o Apple OS X.
Código do Visual Studio - Edição de código redefinida. Possui destaque de sintaxe e conclusão automática com o IntelliSense, comandos GIT integrados, extensíveis e personalizáveis. Código aberto | Todas as plataformas
Webstorm - O IDE JavaScript mais inteligente, WebStorm é um ambiente de desenvolvimento integrado para JavaScript e tecnologias relacionadas. Todas as plataformas
UltraEdit - UltraEdit é um poderoso editor HTML e código disponível para Mac, Windows e Linux. Ele vem com um utilitário de comparação de arquivos interno, conclusão automática, layout avançado, editores de várias abas, editores de vários panela e sintaxe para as linguagens de programação mais populares.
Nano - GNU Nano é um editor de texto do SO do tipo UNIX.
Stackblitz - Um poderoso editor de código de código aberto on -line para estruturas e bibliotecas JavaScript, com alguns recursos impressionantes, como importações do GitHub, servidor ao vivo e comprometimento direto do editor para o Github!
⬆ de volta ao topo
Extensões de código do Visual Studio
- Tag de renomeio automático - quando você renomear uma tag HTML/XML, renomeie automaticamente a tag HTML/XML emparelhada.
- Melhores comentários - esta extensão Codes de cores vários tipos de comentários para dar -lhes significativos diferentes e se destacar do restante do seu código.
- Par de suporte colorizor - colchetes de cores correspondentes para tornar seu código muito mais legível - muito útil.
- Código verificador ortográfico - um verificador ortográfico básico que funciona bem com o código do camelcase.
- ES LINT - LINNTER JAVASCRIPT para destacar erros de código e práticas recomendadas.
- Formatando alternância - uma extensão de código vs que permite alternar o formatador (mais bonito, embelezado,…) ligado e desativado com um clique simples.
- Histórico do Git - Veja o log git, histórico de arquivos, compare ramificações ou compromissos
- GITLENS - SUPERCARGA Os recursos GIT incorporados ao Código do Visual Studio - Visualize a autoria de código rapidamente por meio de anotações e lentes de código de culpa Git, navegam perfeitamente e explorem repositórios Git, obtêm informações valiosas por meio de comandos de comparação poderosos e muito mais.
- Snippets JS - Esta extensão contém trechos de código para JavaScript na sintaxe ES6 para o editor de código VS (suporta JavaScript e TypeScript).
- Servidor ao vivo - um servidor ao vivo de desenvolvimento rápido com recarga do navegador ao vivo.
- Ícone de material tema - Pacote de ícone com tema de material do Google.
- Path Intellisense - Quando você começa a digitar um caminho nas citações, você obterá o IntelliSense para diretórios e nomes de arquivos.
- Pavão - Altere sutilmente a cor da área de trabalho do seu espaço de trabalho. Ideal quando você tem várias instâncias de código VS e deseja identificar rapidamente qual é qual.
- Polacodo - Você conhece as capturas de tela de código sofisticadas que você vê em artigos e tweets? Bem, provavelmente eles vieram de Polacode. É super simples de usar. Copie um pedaço de código para a sua área de transferência, abra a extensão, cole o código e clique para salvar sua imagem!
- Mais bonito - formate seu código automaticamente em salvar.
- Quokka.js - Quokka.js é uma ferramenta de produtividade do desenvolvedor para prototipagem rápida de JavaScript / TypeScript. Os valores do tempo de execução são atualizados e exibidos no seu IDE ao lado do seu código, conforme você digita.
- Configurações Sincroniza - Configurações Extensão de sincronização Salve sua desativação no GitHub. Em seguida, você pode carregá -los em qualquer nova versão do vs código com um comando.
⬆ de volta ao topo
Ferramentas
- Diretório da API | ProgrammableWeb
- Animista - Predefinições/Gerador de Animação CSS
- Better Code Hub - verifica a base de código do GitHub em relação às diretrizes de engenharia de software e fornece feedback.
- Navegador - testes interativos ao vivo em máquinas virtuais.
- Lambdatest - Sites de teste e aplicativos da Web em mais de 2000 navegadores e OS.
- BrowSerstack - Sites de teste e aplicativos móveis em diferentes navegadores e dispositivos móveis.
- Posso usar ... - Tabelas de suporte para HTML5, CSS3, etc. Em desktop e navegadores móveis
- Checkbot - Extensão do navegador que testa sites para problemas de SEO, velocidade e segurança
- Codepen - Ambiente de Desenvolvimento Social, onde você pode escrever código no navegador e ver os resultados conforme criar.
- CODEPLY - Um playground HTML, CSS, JavaScript Editor para designers e desenvolvedores comparar, prototipo e estruturas de front -end.
- Códigos e caixa de caixa - IDE instantânea e ferramenta de prototipagem para desenvolvimento da web.
- Crie um novo violino - JSFiddle - Test JS, CSS, HTML ou CoffeeScript em um editor de código on -line.
- Crítico CATH CSS Generator - por Jonas Ohlsson - reduz a quantidade de CSS que o navegador deve passar para renderizar uma página da web.
- App CrossBrowSertesting - Serviço da Web para executar testes funcionais da Web em navegadores da Web móveis e de desktop.
- CSS Cheat Sheet - Uma referência de uma página muito fácil de usar para seletores e propriedades CSS. Ele também inclui categorias para Flexbox e Grid.
- CSS Minifier - Minifique seus arquivos CSS!
- Referência CSS - Um guia visual gratuito para CSS.
- O CSS Gatters - diz o que é acionado ao mutar uma determinada propriedade CSS.
- Filtros CSS - gerador de filtro CSS interativo
- Colorlisa - gerador de paleta de cores baseado em ótimos artistas
- DirtyMarkUp - arrume seu código HTML, CSS e JavaScript.
- ExtendSclass - fornece ferramentas para adicionar recursos diretamente utilizáveis no navegador.
- Gerador Favicon - Carregue uma imagem e gerar um favicon para o seu site.
- Gerador Favicon para IOS/Google Progressive Web Manifest - Ferramenta on -line para testar os favoritos em diferentes plataformas.
- Coisas gratuitas do desenvolvedor - Lista de coisas gratuitas para o desenvolvedor do desenvolvedor usar. Alguns serviços são gratuitos para sempre ou têm uma camada gratuita pelo menos por 1 ano.
- GRATUITO PARA DESENVOLVIDOS - Este site possui uma quantidade extensa de listas de recursos gratuitas e pagas com curadoria não apenas para desenvolvedores de front -end, mas também para qualquer tipo de desenvolvedor.
- Gerar favicon com base no texto - gerar um favicon a partir de texto, uma imagem ou emojis.
- Obtenha ondas - Gere muitos tipos de ondas SVG para uso no web design.
- Glitch - o Glitch é como trabalhar juntos no Google Docs - Multiple, as pessoas podem trabalhar no mesmo projeto ao mesmo tempo.
- Gerador gráfico - gera gráficos para algumas aplicações comuns de extremidade frontal.
- Google Analytics - Serviço da Web que rastreia e relata o tráfego do site.
- Google Apis Explorer - Ferramenta para explorar interativamente várias APIs do Google.
- JavaScript Console no texto sublime - Tutorial para testar JavaScript e executá -lo via Build Systems in Sublime Text 3.
- JQuery Mega Catch Sheet - Folha de dicas de jQuery Selectro, manipulação, eventos e muito mais em formato PDF.
- JS Bin - Passo ao vivo para HTML, CSS e JS, além de uma variedade de processadores.
- Lighthouse - Ferramenta automatizada de código aberto para melhorar a qualidade das páginas da web.
- Folha de dicas modernas do JavaScript - Esta é uma excelente coleção de dicas e conceito de JavaScript de Manuel Beaudru funciona como uma boa visão geral de muitas das coisas que você precisará estar familiarizado se estiver apenas começando com JavaScript e outras estruturas relacionadas.
- Node Package Manager (NPM) - Gerenciador de pacotes para JavaScript.
- YARN - Gerenciador de pacotes para JavaScript, como o NPM.
- Responsabilidade - Replique como os sites responsivos parecerão dispositivos populares.
- React Cheat Sheet - Um site baseado em documentação também é um aplicativo da Web progressivo, o que significa que funciona bem, mesmo em offline. Você pode pesquisar por palavra -chave ou selecionar um dos filtros predefinidos.
- Sistema de grade responsiva - Gere grades flexíveis para criar um site responsivo.
- Editor de expressão regular (REGEX) - ajuda a criar e verificar suas expressões regulares.
- Sans Francisco - Uma ferramenta para designers - coleção de ferramentas para designers
- Captura de tela - uma comparação de tamanhos de tela em pixels independentes de dispositivo.
- SIZZY: Ferramenta de teste do navegador - ferramenta para desenvolver e testar design responsivo em vários dispositivos de uma só vez.
- Pilha Overflow - Comunidade on -line para que os desenvolvedores façam perguntas e obtenham respostas.
- O Serviço de Validação de Markup W3C - verifica a validade da marcação dos documentos da Web em HTML, XHTML, SMIL, MATHML, etc.
- O Serviço de Validação do W3C CSS - verifica a validade dos documentos CSS e XHTML com folhas de estilo.
- Helper Helper - Ajuda a converter milis em vezes e vice -versa.
- Tinypng - compactação/otimizador png e jpeg
- Lista de verificação do desenvolvedor da web - Lista de verificação categorizada para cobrir o desenvolvimento da web.
- Ferramentas progressivas para otimizar seu desempenho na Web - Lista de ferramentas que podem ser usadas para melhorar o desempenho da página.
- Stackblitz - IDE online para projetos Angular e React que podem ser compartilhados via link.
- Postman (ferramenta para testar APIs) - cliente da API para criar, compartilhar, testar e documentar APIs.
- Folha de dicas de bootstrap gratuita 5 - É uma lista interativa de bootstrap 5 classes, variáveis e mixins.
- JSONT - Uma ferramenta de formatação JSON on -line simples e poderosa.
⬆ de volta ao topo
Estruturas CSS
- Bootstrap - Projete e personalize sites responsáveis pela primeira vez.
- Bulma CSS - estrutura de código aberto modular com base no FlexBox.
- Caramelo - Uma estrutura simples, moderna e responsiva do site.
- Cardeal - Modular Mobile -First Framework para desempenho e escalabilidade.
- Elemento CSS - Biblioteca de componentes baseados em Vue 2.0.
- Fundação CSS - Família de estruturas de front -end responsivas.
- HalfMoon - Estrutura front -end totalmente personalizável e responsiva para a construção de painéis e ferramentas.
- Jeet - sistema de grade fracionária para SASS e STYLUS.
- Menos - sistema de grade CSS para projetar sites adaptáveis.
- Material Design Lite - Implementação de componentes de design de materiais em baunilha CSS, JS e HTML.
- Materialize a estrutura CSS - CSS, com o objetivo de permitir uma experiência unificada do usuário em todos os produtos em qualquer plataforma.
- Miligram - Uma estrutura CSS minimalista.
- PCAR - Uma grade de atrevida leve e flexível.
- PETAL CSS - Light CSS UI Framework com base em menos.
- CSS puro - um conjunto de módulos CSS pequenos e responsivos.
- Estrutura semântica da interface do usuário - UI projetada para temas e design responsivo.
- Skeleton CSS - Boilerplate simples e responsivo para iniciar qualquer projeto responsivo.
- Specter CSS - estrutura CSS leve, responsiva e moderna para desenvolvimento mais rápido e extensível.
- Tacit - estrutura primitiva, mas atraente para iniciantes em design gráfico.
- Tailwindcss - estrutura CSS de baixo nível altamente personalizável.
- Kit da interface do usuário - estrutura de front -end leve e modular para interfaces da Web.
- Sistema de grade de fluido não -Semantic - com base em porcentagens, em vez de um número definido de colunas.
- CSS vital - Estrutura CSS minimamente invasiva para aplicativos da Web criados com SASS e Slim.
⬆ de volta ao topo
Ícones
- Brandicons - Icon Fonte Gerador e Visualizador.
- Ícone plano - Banco de dados de ícones gratuitos nos formatos PNG, SVG, EPS, PSD e Base64.
- Fonte Awesome - conjunto de ícones de código aberto e kit de ferramentas com estilos consistentes.
- Glyphicon - ícones para uso com bootstrap, outras estruturas CSS e quaisquer projetos da Web.
- Google Material Design Icons - Uma visão geral dos ícones materiais e como integrá -los em projetos.
- ICOMOON - ICON FONT Generator and Icon Collection.
- Iconguram - Coleção de pacotes de ícones de diferentes fontes.
- Iconsvg - ícones rápidos personalizáveis para seus projetos
- Icons8 - pacotes de ícones com estilo consistente e personalizáveis.
- Ionicons - ícones de código aberto no SVG e WebFont.
- MAPICONS - ICON Font para uso com a API do Google Maps e a API do Google Places usando marcadores SVG e etiquetas de ícones.
- Fonte icônica de design de material - conjunto completo de ícones de design de material para facilitar SVGs no site ou desktop.
- MFGLABS -ICONSET - Ícone do MFG Lab para uso em webfonts e css.
- Micon - Windows Font e CSS Toolkit.
- O Projeto Substantivo - Coleção Abrangente de Ícone.
- OCTICONS - Coleção de ícones do Github para projetos.
- Open icônico, um conjunto de ícones gratuito e aberto - ícone de código aberto definido nos formatos SVG, WebFont e Raster.
- OpenWebicons - WebFont para ícones e logotipos de vetores escaláveis.
- Reacicons -SVG React ícones de pacotes de ícones populares.
- Remixicon - Sistema de ícone de estilo neutro de código aberto.
- Shape.So - Coleção personalizável de ícones e animações.
- Stackicons - ícones personalizáveis para marcas sociais.
- Typicons-ícones vetoriais gratuitos incorporados em um webfont.
- Ícones climáticos - Fonte do ícone temática do tempo e CSS.
- Zocial | Conjunto de botões CSS3 - Crie botões sociais usando CSS e encenando ícones sociais como uma fonte.
⬆ de volta ao topo
Cores
- Color Adobe - roda de cores, tema de extração, gradiente de extração, ferramentas de acessibilidade e muito mais
- Códigos de cores BADA55 - Converta as palavras do Leet em cores hexadecimais CSS.
- Cores da Branição - Coleção de paletas de cores com curado manual, melhor ajustado para a marca.
- Hunt de cores - coleções abertas de lindas paletas de cores
- Teoria das cores de Natalya Shelburne - Teoria de cores práticas para pessoas que codificam: tutorial sobre o uso de cores com exemplos
- Roda de cores | Esquemas de cores - Adobe Color CC - Roda de cores interativa com diferentes regras de cores (ajustes possíveis)
- Ferramentas Colordesigner - O principal objetivo desta ferramenta é ajudar na construção de uma paleta de cores e gerar tonalidades e tons com base nela. Basta escolher uma cor e o aplicativo faz o resto. Você pode usar as cores pré -selecionadas ou o seletor de cores para mais controle. Verifique também as outras ferramentas aqui
- ColorMind - Bootstrap - ColorMind é um gerador de esquema de cores que usa o aprendizado profundo para aplicar automaticamente o palete de cores a uma maquete de site ao vivo.
- Coolors- Criador de esquema de cores super rápido com muitas funcionalidades
- Gradiente CSS - Lista de sites com curadoria para explorar gradientes e paletas de cores.
- Picker de cores de dados - Gere paletas de cores com cores visualmente equidistantes. Útil para visualizações de dados.
- Projeto de cor - um guia completo para projetar em cores (artigo no meio)
- Cores da interface do usuário plana - seletor de cores para desenhos planos
- Picker de cor da imagem - seletor de cores de imagem e gerador de paleta
- Lol cores - inspirações de paleta de cores com curadoria
- Paleta de material - gerador de paleta de cores para design de material
- Palettable - Interactive color picker: creates a color scheme based on your preferences and palettes on the Internet
- Paletton - The Color Scheme Designer - Advanced tool for creating color schemes
- Picular - Google, but for colors - Primary color generator using Google's image search.
- Pigment - Palette Generator - Generate color palettes based on lighting and pigment.
- UI Gradients - Scroll through or pick from beautiful gradients, download JPG and copy CSS Code
- W3school Color Picker - Find the perfect color from the color wheel, easy control
- UI Color Picker - Best colors in few selected shades to choose from very helpful for quickly choosing and adding color to design. ![Livre]
⬆ back to top
Tipografia
- A Crash Course in Typography: The Basics of Type - First article of a series on Typography
- Circular Font Combinations | Free Alternatives | Typewolf - A great resource for everything related to Typography
- Font Pair - Helps designers pair Google Fonts together. Beautiful Google Font combinations and pairs. - Clean web-tool on How to pair Google Fonts
- Fontspiration - An iOS app for creating custom typographic designs
- Fontsquirrel - A resource for FREE, hand-picked, high-quality, commercial-use fonts
- Google Fonts - A catalog of free & open source fonts, great details and font pair suggestions
- Just My Type - A collection of font pairings
- Table of Contents | The Elements of Typographic Style Applied to the Web - A practical guide to web typography
- Typekit - "Quality fonts from the world's best foundries"
- Typography Terms - An infographic on Typography Terms + explanations
⬆ back to top
Inspiração de design
- Admire The Web - Admire the Web is where we showcase the very best in website design inspiration - carefully curated and organised to keep you inspired.
- Awwwards - The Website Awards that recognize and promote the talent and effort of the best developers, designers and web agencies in the world.
- Dribble - Dribbble is where designers gain inspiration, feedback, community, and jobs and is your best resource to discover and connect with designers worldwide.
- Site Inspire - siteInspire is a showcase of the finest web and interactive design.
- Web design Inspiration - Find inspiration for your next web design project. We help web designers, digital agencies and entrepreneurs to be inspired. Everyday, our team of experts hand picks the best new web designs from all over the world.
- Behance - Behance is a social media platform to showcase and discover creative work like Graphic Design, Illustration, Game Design and many more things
- Pinterest - Pinterest has a host of design inspirations in a variety of forms and styles.
- Pixpa - Pixpa features some nice modern designs and inspirations for web designers and photographers.
- Lapa Ninja - Lapa Ninja is a gallery featuring the best 4127 landing page examples, free books for designers and free UI kits from around the web.
- Landings - Find the best landing pages for your design inspiration based on your preference.
⬆ back to top
Animation Frameworks
- Animate CSS - Choose, try out and get the CSS-Code for different animation types (over 70)
- Anime JS - It's easy to use, has a small and simple API, and offers everything you could want from a modern animation engine.
- Bounce JS - Tool and JS Library, creating CSS3 powered animations(adjustments possible) & export CSS code
- Magic Animations - Showcase of different animations with link to GitHub repo
- MO JS - The library provides built-in components to start animating from scratch like HTML, shape, swirl, burst, and stagger but also brings you tools to help craft your animation in a most natural way.
- Particles JS - A lightweight JavaScript library for creating particles.
- Typed JS - A JavaScript typing animation library with a great documentation on GitHub
- Wow JS - JavaScript library: Reveal CSS animation as you scroll down a page
⬆ back to top
Stock Resources
- Burst - Free, high-resolution images. All our pictures are free to download for personal and commercial use.
- Canva - 8,000+ free templates and thousands of free photos
- Free stock images and Videos - A great collection of stock photos, videos and other resources. Most of them under the CC0-License, all of them free.
- Gratisography - Photographer Ryan McGuire provides this collection of high-resolution pictures for free. You can use them on your personal or commercial project free of copyright restrictions.
- Humaaans - Library of editable people illustrations. Free for both commercial and personal use.
- I'd Pin That! - Created to help bloggers and non-designers create high quality images like those often seen on Pinterest. I'd Pin That is more than just a source for free images — it is an image editor! Use the tools provided here to add your own text and edit the images right on the site.
- Illlustrations - 120+ Awesome free illustrations made by the artist vijay verma on a 100 days challenge.
- MakerBook - The best free resources for creatives - A directory of sites to get free resources (Photography, Mockups, Graphics, Textures, Fonts, Colours, Video, Audio & Tools).
- Morguefile - Founded in 1996 by college student Michael Connors.Photographers contribute images to Morguefile for visitors to use in their creative projects. Yes, they're all completely free. The website does ask that you credit the photographer when possible.
- Open Doodles - A Free Set of Open-Source Illustrations.
- The Open Photo Project - The Open Photo Project is a photo sharing platform created in 1998 by Michael Jastremski. Contributors have offered their images free of charge under terms of Creative Commons licensing.
- Pexels - Exclusively stock photos of high quality, great feature: Filter photos by color.
- Picalls - Free photos and wallpapers licensed under the Creative Commons CC0 license.
- Pixabay - In addition to photos, Pixabay offers video, vectors and illustrations.
- Pikwizard - Free stock photo library for commercial and editorial use. Huge library of stunning, high quality, royalty free images. No attribution required
- Public Domain Archive - “a public domain image repository” created by Matt a graphic designer, web designer and photographer.Vintage and modern images.
- StockSnap.io - High quality stock photos free to download and use. Licensed under the Creative Commons CC0 license.
- The Stocks - Another awesome directory sharing sites for resources, loading directly on the webpage
- UnDraw - "MIT licensed illustrations for every project you can imagine and create
- UnSplash - "Beautiful, Free Photos" & themed collections of photos
- 3D Bay - "Free, 3D Illustrations" A collection of High-quality 3D Illustration resources
- Design Stripe - "Create beautiful illustrations, no design skills needed
⬆ back to top
Geolocation
- Geocomplete-location autocomplete - An advanced jQuery plugin that wraps the Google Maps APIs Geocoding and Places Autocomplete services into a dropdown for an input-form.
- Google maps API | Google - Google Map APIs including documentation & learning resources - extensive
- Google maps API | Traversy - Great YouTube tutorial on using the Google Maps APIs
- OpenCage Geocoder - Free to use forward (lat/long to text) and reverse (text to lat/long) geocoding API
- GeoJS - Free to use API for geolocation lookup by IP address
⬆ back to top
APIs
- Alexa API | Codecademy - Learn to develop a custom Amazon Alexa skill that respond to the user's voice with custom messages.
- Abstract APIs - Free utility API's for compressing images, creating user avatars, validating emails, and more
- jsonplaceholder - Fake Online REST API for Testing and Prototyping
- A list of public APIs
- Lorem Picsum - Easy to use and customize placeholder photos
- OpenWeatherMap - Weather API with free and paid licenses
- Random famous quotes | Rapid APIs - Gets a random quote in JSON format.
- TMDB API - API Service for those who are interested in displaying data/images about different movies, TV Shows or actors in their application.
- Unsplash Source - API to retrieve random images from Unsplash.com
- Web APIs | MDN
- News API - Locate articles and breaking news headlines from news sources and blogs across the web with our JSON API.
- Spotify API - Spotify's Web API allows you to find music and podcasts, manage your Spotify collection, control audio playing, and do a variety of other things.
⬆ back to top
Mockups
- Am I Responsive - This is a tool to check the responsiveness of a website and take a screenshot on multiple devices in a single frame. Go to the site and enter the URL to capture the screenshot. You should have separate screen capture tool to take the proper screenshot.
- Figma - Free app with a simple to use surface for designing, prototyping and sharing your website and app ideas
- Adobe XD - One of the best tool for UI/UX Design, Wireframe, animate, prototype, collaborate, and more
- Magic Mockups - Place your product in realistic environment! Free real-life product/app mockup generator. Laptop, Phone, Tablet, Imac.
- Rotato 3D Mockup Generator - Make video 3D mockups and images. No experience required. Unlimited renders. MacOS.
- The MockUp Club - Website that offers free downloads of design mockups (mostly Photoshop format).
- MockupsJar - Build mockups with screenshots of your application or web Design for free to share with customers and clients
- MockUPhone - Free and simple screenshots device mockups generator. Wrap your design in mobile devices or Laptop/Desktop in a few clicks!
- Multi Device Website Mockup Generator - Multi device website mockup generator is free online tool to test your responsive website on apple devices including Apple iMac, MacBook, iPad and iPhone. This tool is very helpful for theme developers to mockup the web template on various apple devices with a single click. You should have a proper screen grabber tool to take the screenshot from the browser.
- Wireframe.cc - Great tool for sketching out ideas and layouts, super minimalistic
⬆ back to top
Livros
- Ebook Foundation-free programing books: GitHub Repository - A directory of free learning resources, categorized by language
- HTML Basics - A workshop covering the basics of HTML (free pdf/18 pages)
- HTML5 for Masterminds, 2nd Edition - A complete course from Beginner to Mastermind
- HTML5 Pocket Reference (Pocket Reference (O'Reilly) - A comprehensive compact reference for HTML 5
- HTML Tutorialspoint - A thorough tutorial on HTML (free pdf/486 pages)
- Learn How To Code In HTML5 and CSS3 - A free e-book about making websites in HTML5 and CSS for absolute beginners
- Responsive Web Design with HTML5 and CSS3 - A comprehensive book about making RWD
- You don't know JS - Book series diving deep into the core mechanisms of the JavaScript language.
- Guide to Git and Github - A beginner friendly guide to using git and working with Github.
- Introduction to HTTP - Introduction to HTTP, the stateless protocol underlying all of the web.
- Introduction to the Command Line - A short and beginner friendly introduction to the command line, covering common commands that will make you immediately productive.
- HTML & CSS Books ![Free]
- Web Design Playground, Second Edition - Modern HTML, CSS, and web design standards.Paid
- Build a Frontend Web Framework (From Scratch) - Learn how a frontend web framework works by coding your own.Paid
⬆ back to top
Challenges / Games
- Ace Front End - Ace Front End has complete and practical coding challenges, with a detailed walk through of a perfect interview solution.
- Codepen Challenges - Each month has a theme and every week there is a new challenge prompt that you can use to build a project online using HTML, CSS and JavaScript. The best projects are featured on Codepen's homepage.
- Codewars - Improve your skills by training with others on real code challenges.
- CSS Battle - CSSBattle is an online CSS Code Golfing game. Here, players from all around the world try to visually replicate Targets in smallest possible CSS code and battle it out to get to the top of the leaderboard.
- CSS Diner - It's a fun game to learn and practice CSS selectors.
- CSS Zen Garden - A demonstration of what can be accomplished through CSS-based design, and a chance to do your own.
- Dev Challenges - Made by Thu Nghiem. devChallenges.io is a community driven platform for anyone who wants to solve practical tasks. It has some tricky and curated challenges.
- Flexbox Defense - It is a game that covers the flex properties align-items, justify-content, flex-direction, align-self and has 12 different levels.
- Flexbox Froggy - This game is also about Flexbox and it covers even more flex properties: align-items, justify-content, align-content, flex-direction, align-self, flex-wrap, flex-flow and has 24 different levels.
- Front End Mentor - Solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs. Join 192,401 developers building projects, reviewing code, and helping each other get better.
- Grid Garden - Interactive CSS code game. Practice your CSS skills by watering your garden! It has 28 different levels to learn CSS Grid Layout.
- Hackerrank - Practice coding, prepare for interviews, and solve interview style coding challenges.
- JavaScript30 - A free challenge course, building 30 little projects with HTML, CSS and plain JavaScript.
- Leetcode - Coding problems to solve in a range of categories and difficulties
- Project Euler - Challenging computer science and mathematical problems.
- 100DaysOfCode - Regardless of your coding skills or your language of choice, this challenge invites you to code for at least 1 hour a day.
- Devtools Tech - Devtools Tech is a free platform for Frontend Engineers to practice high quality real world programming interview questions, follow curated learning paths, read blogs, and track progress across various frontend domains.
⬆ back to top
Free Tools For Students
- JetBrains Student License : Free individual licenses of the award-winning professional developer tools from JetBrains for students and faculty members.
- Student Developer Pack : The best developer tools, free for students via @githubeducation
⬆ back to top
YouTube Videos
- Flexbox in 20 minutes - Quick crash-course on the CSS Flexbox model.
- SVGs can do that ? - Sarah Drasner's talk on nontypical pratical uses of SVGs.
- CSS Grid Tutorial - Use CSS grid to structure and position websites with ease.
- Git and GitHub for Beginners - Crash Course - Ad-free tutorial by freeCodeCamp.
- 12HR Coding Bootcamp 2021! - Complete frontend bootcamp!
⬆ back to top
Teste
- Jest - JavaScript testing framework
- Mocha - JavaScript testing framework
- Karma - JavaScript test runner
- Istanbul - JavaScript test coverage tool
- TestCafe - Node.js end-to-end testing
- Cypress - JavaScript end-to-end testing framework
- Puppeteer - Google's Chrome automation tool for E2E testing.
- Playwright - Microsoft's browser automation tool for E2E testing.
- Sinon.JS - Standalone test spies, stubs and mocks for JavaScript
- Chai - Assertation library for JavaScript testing
- PactumJS - REST API Testing Tool used to automate e2e, integration, contract & component (or service level) tests
- Vitest - Vitest is a blazing fast unit test framework powered by Vite
⬆ back to top
