Recursos Web

Links que uso e recomendo em aula, organizados pelo que você quer fazer.

Aprender

HTML, CSS e JavaScript

• HTML & CSS Guidebook: guia completo de HTML e CSS. Veja também a parte de Box Model.
• Learn HTML & CSS (Shay Howe): curso de HTML e CSS do básico ao avançado.
• The Modern JavaScript Tutorial: tutorial completo de JavaScript moderno, do básico ao avançado.
• Guia Completo Flexbox (triangulo.dev): guia de Flexbox em português.
• Flexbox Real World Use Cases: casos de uso reais do Flexbox.
• Flexbox Examples (Quackit): exemplos práticos de Flexbox.
• Solved by Flexbox: problemas comuns de layout resolvidos com Flexbox.
• Hype CP: exemplos de htmx para copiar e colar.

Design para a web

• Designing for the Web: livro sobre design para a web.
• Intro to UI Design Fundamentals (Scrimba): curso interativo sobre fundamentos de design de interfaces.

Java e PHP

• Java Web Development (LaunchCode): curso de desenvolvimento web com Java.
• JavaFX: mudando o estilo com CSS: como estilizar aplicações JavaFX com CSS.
• JavaFX Examples (GitHub): exemplos de código JavaFX.
• Awesome PHP: lista curada de frameworks, bibliotecas e recursos PHP.

Arquitetura de software

• The Architecture of Open Source Applications: livro sobre a arquitetura de projetos open source conhecidos.

Inglês

• Frogly: aprenda inglês com vídeos.
• VOA Learning English: materiais para aprender inglês da Voz da América.
• News in Levels: notícias em inglês em diferentes níveis de dificuldade.

Desafios

• Challenge Charlie (Hurb): desafio de código front-end usado em processos seletivos.

Design e mídia

Cores

• UI Colors: gerador de paletas compatível com Tailwind CSS.
• Happy Hues: paletas curadas mostradas em um layout real.
• Realtime Colors: teste um esquema de cores em uma interface de exemplo.
• ColorSpace: gerador de paletas e gradientes.
• Color Hunt: paletas de cores gratuitas.
• Open Color: paleta de cores open source para interfaces.

Fontes e tipografia

• FontsArena: busca de fontes gratuitas e alternativas gratuitas a fontes pagas.
• Typescale: gere uma escala tipográfica e o CSS correspondente.

Ícones

• Icones: milhares de ícones de vários conjuntos, copiáveis como SVG ou componente.
• Iconify: API e componentes para mais de 100 conjuntos de ícones.
• Google Fonts Icons: ícones gratuitos do Google.
• Font Awesome: uma das bibliotecas de ícones mais populares.
• Phosphor Icons: família flexível de ícones para interfaces.
• Iconoir: ícones SVG open source.
• Ionicons: ícones do Ionic Framework, que podem ser usados em qualquer projeto.
• Simple Icons: ícones SVG de marcas populares.
• SVGBox: API para ícones SVG.
• Streamline: mais de 100.000 ícones.
• 3Dicons: ícones 3D gratuitos.
• Dashboard Icons: ícones de serviços e aplicações para dashboards.

Imagens, ilustrações e vídeos

• Unsplash: fotos de uso livre.
• Pexels: fotos e vídeos gratuitos, sem necessidade de atribuição.
• Burst: fotos gratuitas para uso comercial.
• unDraw: ilustrações open source com a cor que você escolher.
• SVGRepo: vetores e ícones gratuitos para uso comercial.
• Mixkit: vídeos, músicas e efeitos sonoros gratuitos.
• Coverr: vídeos gratuitos para usar em sites.
• Squoosh: comprima e converta imagens antes de colocar no site.

Inspiração e geradores

• Codrops Playground: experimentos criativos com HTML, CSS e JavaScript.
• Get Waves: gerador de ondas em SVG.
• Omatsuri: ferramentas para front-end, como geradores de formas SVG e sombras.
• CSS Snippets (30 seconds of code): trechos de CSS prontos para problemas comuns.
• Undesign: coleção de recursos de design gratuitos.
• Colors & Fonts: biblioteca curada de cores, fontes e recursos.

CSS pronto para usar

Frameworks minimalistas (classless)

Basta incluir o CSS e escrever HTML semântico.

• PicoCSS
• Simple CSS
• Water CSS
• MVP CSS
• Sakura
• Picnic CSS
• Awesome CSS Frameworks: lista com muitos outros.

Componentes com Tailwind CSS

• DaisyUI: componentes com classes semânticas.
• Flowbite: componentes interativos.
• Preline UI: componentes open source.
• HyperUI: componentes para copiar e colar.
• Basecoat: componentes no estilo shadcn/ui, sem React.
• TailGrids: componentes e blocos para interfaces e dashboards.
• BladewindUI: componentes com Tailwind CSS e Alpine.js.

Começando um projeto

Boilerplates

• My current HTML boilerplate (Manuel Matuzović): boilerplate HTML moderno e explicado linha a linha.
• HEAD (Webschool): tudo o que pode ir no <head> de uma página.
• Meta Tags: pré-visualize e gere as meta tags de compartilhamento do seu site.
• Useful Front-End Boilerplates And Starter Kits (Smashing Magazine): lista de starter kits para front-end.

Templates HTML e CSS

• HTML5 UP: templates responsivos e gratuitos.
• Tooplate: templates HTML e CSS gratuitos.
• ShareBootstrap: templates e dashboards com Bootstrap.
• Colorlib (e-commerce): templates de lojas virtuais.

Dashboards administrativos

• Tabler: kit de dashboard open source com Bootstrap.
• Mazer: dashboard e landing page com Bootstrap 5.
• TailAdmin: dashboard com Tailwind CSS.

Geradores de projeto Java

• Bootify: gera aplicações Spring Boot pelo navegador.
• JHipster Lite: gerador de aplicações web com Java.

Publicando

• Surge: publique um site estático com um comando.
• free-for.dev: CI e CD: serviços de integração e entrega contínua com plano gratuito.
• Deployer: automatize a implantação de projetos PHP.
• Easy, Free, Serverless Laravel with Vercel: Laravel na Vercel sem servidor.
• Webloyer: ferramenta para implantação de aplicações web.
• Froxlor: painel de administração de servidores.

Slides com Marp

• Marpit: diretivas: referência das diretivas de slide.
• Marpit: sintaxe de imagens: fundos, tamanhos e filtros de imagem.
• Marp basic example (Speaker Deck): exemplo de apresentação feita com Marp.
• Create Markdown presentations (Mario Yepes): tutorial de apresentações em Markdown.
• Creating slides with Marp (Medium): outro passo a passo com Marp.

Ferramentas úteis

• dbdiagram.io: desenhe diagramas de banco de dados escrevendo texto.
• TinyWow: ferramentas online para PDFs, imagens e vídeos.
• OnlineOCR: extraia o texto de uma imagem.
• AutoDraw: desenhe com ajuda de IA.
• Face Restoration (Tencent ARC): restaure fotos de rostos com IA.
• File Pizza: envie arquivos direto de um navegador para outro.
• Turboscribe: transcreva áudio para texto.
• Tactiq: transcreva reuniões do Google Meet.
• keybindings: atalhos de teclado de vários programas.
• Open Source Alternative: encontre alternativas open source para programas pagos.

Para estudar com música

• Lofi Cafe: rádio lofi para concentrar.
• Radio Garden: rádios do mundo todo em um globo interativo.
• Music Map: descubra artistas parecidos com os que você gosta.