Pular para o conteúdo
Internet Public Library

Desenvolvimento frontend

Aprenda a criar interfaces web acessíveis, rápidas e responsivas, começando pelo funcionamento do navegador e chegando às ferramentas e frameworks atuais.

Iniciante 14 etapas

Etapas

Fundamentos da web e HTML

  1. Como o navegador monta uma páginaEntenda como o navegador busca, interpreta e desenha uma página, base para tudo o que vem depois na trilha.
    • MDN Web Docs developer.mozilla.orgfree

      Repositório completo e documentação aberta de referência mantida pela Mozilla sobre tecnologias web abertas, CSS e HTML.

    • Ceweb.br ceweb.brfree

      Centro de estudos do NIC.br focado em padrões abertos, acessibilidade digital e desenvolvimento da web no Brasil.

  2. HTML semânticoEstruture o conteúdo com as tags certas, porque uma marcação bem feita ajuda acessibilidade, buscadores e estilização.
    • web.dev Learn web.devfree

      Trilhas de aprendizagem guiadas criadas pelo Google abordando HTML semântico, layouts modernos com CSS, design responsivo e acessibilidade.

    • W3C Nu Html Checker validator.w3.orgfree

      Validador oficial do World Wide Web Consortium para checagem de conformidade de documentos HTML5, XHTML e SVG.

CSS e layout

  1. Base do CSSDomine cascata, especificidade, modelo de caixa e unidades para que os estilos se comportem como você espera.
    • web.dev Learn web.devfree

      Trilhas de aprendizagem guiadas criadas pelo Google abordando HTML semântico, layouts modernos com CSS, design responsivo e acessibilidade.

    • CSS-Tricks css-tricks.comfree

      Portal clássico de artigos, guias visuais e almanaque completo de propriedades CSS e técnicas modernas de estilização web.

  2. Flexbox e GridPratique os dois sistemas modernos de layout, que resolvem a maioria das páginas e componentes sem gambiarras.
    • CSS-Tricks css-tricks.comfree

      Portal clássico de artigos, guias visuais e almanaque completo de propriedades CSS e técnicas modernas de estilização web.

    • freeCodeCamp em Português freecodecamp.orgfree

      Currículo interativo e gratuito cobrindo desenvolvimento web responsivo, estruturas de dados com JavaScript e bibliotecas frontend.

  3. Design responsivoFaça páginas que se adaptam a qualquer tela com layouts fluidos e media queries, já que a maioria acessa pelo celular.
    • freeCodeCamp em Português freecodecamp.orgfree

      Currículo interativo e gratuito cobrindo desenvolvimento web responsivo, estruturas de dados com JavaScript e bibliotecas frontend.

    • Learning Web Design learningwebdesign.compaid

      Manual didático abrangente de Jennifer Robbins sobre os fundamentos visuais e técnicos de HTML, CSS e arquitetura de sites responsivos.

  4. Experimentos e inspiração (opcional)Veja como o mesmo HTML ganha visuais muito diferentes e teste ideias rapidamente num editor online.
    • CSS Zen Garden csszengarden.comfree

      Demonstração educativa histórica que ilustra o poder das folhas de estilo CSS aplicando diferentes temas visuais ao mesmo código HTML.

    • CodePen codepen.iofreemium

      Ambiente de desenvolvimento social online para testar, criar e compartilhar códigos front-end de HTML, CSS e JavaScript.

    • Codrops tympanus.netfree

      Blog criativo e laboratório experimental voltado para animações web em CSS, efeitos visuais inovadores e layouts de vanguarda.

Interatividade, acessibilidade e desempenho

  1. JavaScript no navegadorUse JavaScript para manipular o DOM e reagir a eventos, o que dá vida a qualquer interface interativa.
    • The Modern JavaScript Tutorial javascript.infofree

      Curso detalhado e aprofundado que aborda JavaScript desde os fundamentos até conceitos modernos de manipulação do DOM e eventos.

    • MDN Web Docs developer.mozilla.orgfree

      Repositório completo e documentação aberta de referência mantida pela Mozilla sobre tecnologias web abertas, CSS e HTML.

  2. AcessibilidadeAplique as diretrizes WCAG e padrões inclusivos para que pessoas com leitores de tela ou só teclado usem seu site.
    • Inclusive Components inclusive-components.designfree

      Biblioteca conceitual e livro de Heydon Pickering que detalha a construção de componentes de interface robustos e totalmente acessíveis.

    • WAVE Web Accessibility Evaluation Tool wave.webaim.orgfree

      Suíte de avaliação de acessibilidade digital que identifica barreiras visuais e conformidade com as diretrizes WCAG diretamente na página.

    • W3C Standards and Technical Reports w3.orgfree

      Acervo oficial de especificações técnicas, padrões de acessibilidade WCAG e recomendações abertas para a arquitetura da web.

  3. Compatibilidade entre navegadoresConfira o suporte de cada recurso nos navegadores antes de usá-lo em produção e evite surpresas com usuários reais.
    • Can I use caniuse.comfree

      Tabela atualizada e banco de dados de suporte e compatibilidade de navegadores para recursos modernos de HTML, CSS e APIs Web.

  4. DesempenhoMeça carregamento e renderização com ferramentas reais e corrija os gargalos que mais pesam nas Core Web Vitals.
    • Google PageSpeed Insights pagespeed.web.devfree

      Ferramenta de diagnóstico que analisa o desempenho técnico de páginas web e fornece recomendações baseadas no Core Web Vitals.

    • web.dev Learn web.devfree

      Cursos estruturados pelo time do Google Chrome sobre acessibilidade, design responsivo, CSS moderno e métricas de desempenho Core Web Vitals.

Ferramentas e frameworks

  1. Controle de versão com GitAprenda a registrar mudanças, criar branches e colaborar com Git, ferramenta presente no dia a dia de toda equipe.
    • Learn Git Branching learngitbranching.js.orgfree

      Aplicação interativa e visual para praticar comandos do Git, navegação de branches e operações de rebase no navegador.

    • Pro Git git-scm.comfree

      Livro de referência gratuito e oficial sobre Git cobrindo desde conceitos fundamentais de branching até o funcionamento interno do sistema.

  2. npm e ViteInstale dependências pelo npm e use um servidor de desenvolvimento rápido para organizar projetos maiores.
    • npm Registry npmjs.comfree

      Registro público oficial de pacotes para o ecossistema JavaScript e Node.js com milhões de bibliotecas e ferramentas de linha de comando.

    • Vite vite.devfree

      Ferramenta de build frontend moderna e de alta velocidade baseada em módulos ES nativos e empacotamento com Rollup.

  3. React ou VueEscolha uma biblioteca de componentes para montar interfaces complexas a partir de peças pequenas e reutilizáveis.
    • React react.devfree

      Biblioteca declarativa mantida pela Meta para construção de interfaces de usuário reativas baseadas em componentes.

    • Vue.js vuejs.orgfree

      Framework progressivo e acessível para a construção de interfaces web com reatividade nativa e ecossistema integrado.

  4. Comunidade brasileira de frontend (opcional)Acompanhe eventos e conteúdos da comunidade nacional para trocar experiências e se manter atualizado em português.
    • BrazilJS braziljs.orgfree

      Portal e comunidade com artigos, novidades e debates sobre desenvolvimento web e engenharia de software no Brasil.

    • Front in Sampa frontinsampa.com.brpaid

      Tradicional conferência comunitária de frontend realizada em São Paulo, abordando HTML, CSS, JavaScript e acessibilidade.

Veja também

Links externos, de seus respectivos autores. Esta trilha é conteúdo original da IPL.