Pular para o conteúdo principal
Carol Paier 🐞

Trilhas de estudos 100% gratuitas

Selecione a trilha de estudos desejada:

Desenvolvimento Front-end

Curadoria da trilha feita por Caroline Paier

Aprenda a construir interfaces web, desde a estruturação e estilização da página até o desenvolvimento de aplicações interativas e dinâmicas com tecnologias modernas do mercado.

Como a trilha funciona?

  • A trilha de estudos foi criada para guiar quem deseja iniciar ou fortalecer conhecimentos na área de Front-end, desde os fundamentos até temas avançados. Ela não é um curso formal, mas sim um roteiro organizado de conteúdos relevantes (artigos, vídeos, cursos gratuitos e materiais externos).

  • A trilha está organizada em grandes blocos temáticos sequenciais. Siga na ordem sugerida para construir uma base de aprendizado sólida e estruturada.

  • Você não precisa estudar todas as linguagens de programação ou ferramentas, a proposta é que você tenha noção de todos os temas, mas escolha alguns para se aprofundar, de acordo com seus objetivos e momento de carreira.

  • A trilha oferece modelos externos para baixar. Estes são arquivos de apoio que você deve:

    • Baixar para seu computador ou nuvem;

    • Editar conforme a sua necessidade profissional;

    • Usar como referência para prática real ou simulação de projetos.

  • Estude os conteúdos da trilha, pratique e crie o seu portfólio! Compartilhe essa jornada no LinkedIn, conecte-se com outros profissionais e chame a atenção de recrutadores para se posicionar de forma estratégica rumo à sua vaga.

  1. Antes de iniciar os estudos em Front-end, é importante entender como a web funciona e qual é o papel de um desenvolvedor front-end dentro de uma equipe de tecnologia. Além dos conhecimentos técnicos, habilidades como comunicação, resolução de problemas e aprendizado contínuo serão importantes durante toda a sua jornada.

    1

    Introdução ao Desenvolvimento Web

    • O que é Front-end
    • Front-end, Back-end e Full Stack
    • Como funciona a internet
    • Como um navegador renderiza uma página
    • Ferramentas do desenvolvedor

    Conteúdos e Cursos Gratuitos:

  2. Para criar qualquer aplicação, você precisa desenvolver o raciocínio lógico. A lógica de programação é a base que te permitirá dar instruções corretas para o computador em qualquer linguagem.

    2

    Lógica de Programação

    • Algoritmos
    • Variáveis
    • Operadores
    • Estruturas condicionais
    • Laços de repetição
    • Funções
    • Arrays
    • Objetos

    Conteúdos e Cursos Gratuitos:

  3. Todo desenvolvedor precisa saber gerenciar as versões do seu código e trabalhar em equipe. O Git é a ferramenta mais usada no mundo para isso, e o GitHub é onde você guardará seu portfólio.

    3

    Git e GitHub

    • Diferença entre Git e GitHub
    • Controle de versão
    • Repositórios
    • Commits
    • Branches
    • Merge
    • Pull Requests

    Conteúdos e Cursos Gratuitos:

  4. Agora que você já possui a base necessária, é hora de aprender as tecnologias fundamentais da Web. Elas serão responsáveis por estruturar, estilizar e adicionar interatividade às aplicações.

    4

    HTML

    • Estrutura da página
    • HTML semântico
    • Títulos e parágrafos
    • Links
    • Listas
    • Imagens
    • Tabelas
    • Formulários
  5. 5

    CSS

    • Seletores
    • Box Model
    • Cores
    • Tipografia
    • Flexbox
    • Grid
    • Responsividade
    • Media Queries
    • Animações
  6. 6

    JavaScript

    • Sintaxe
    • Variáveis
    • Funções
    • Objetos
    • Arrays
    • DOM
    • Eventos
    • ES6+
    • Fetch API
    • Async/Await

    Conteúdos e Cursos Gratuitos:

  7. Com os fundamentos consolidados, você poderá trabalhar com aplicações mais próximas da realidade do mercado, consumindo dados externos, criando interfaces reutilizáveis e aplicando boas práticas.

    7

    Consumo de APIs

    • O que é uma API
    • REST
    • JSON
    • Métodos HTTP
    • Consumo de APIs
    • Tratamento de erros
  8. 8

    Acessibilidade

    Acessibilidade não é um bônus, é um requisito técnico e de usabilidade. Um bom desenvolvedor garante que a web seja inclusiva para todas as pessoas e dispositivos.

    • HTML semântico
    • WCAG
    • Navegação por teclado
    • ARIA
    • Contraste
    • Formulários acessíveis
  9. 9

    React

    • Componentes
    • JSX
    • Props
    • State
    • Hooks
    • Roteamento
    • Consumo de APIs

  10. Desenvolver uma aplicação é apenas uma parte do processo. Também é importante garantir sua qualidade, disponibilizá-la na internet e organizar um portfólio para mostrar o seu talento aos recrutadores.

    10

    Testes e Qualidade

    • Conceitos de testes
    • Testes unitários
    • Testes de componentes
    • Debug
    • Boas práticas
  11. 11

    Deploy e Portfólio

    • Build
    • GitHub Pages
    • Vercel
    • Netlify
    • Organização do GitHub
    • Portfólio
  12. 12

    Próximos passos

    Você não precisa aprender todas estas tecnologias de uma vez. Foque em dominar muito bem o básico (HTML, CSS e JavaScript puro) antes de avançar para os tópicos abaixo.

    • TypeScript
    • Next.js
    • Tailwind CSS
    • Sass
    • Styled Components
    • Gerenciamento de estado
    • Performance Web
    • SEO
    • Progressive Web Apps (PWA)
    • CI/CD
    • Docker
    • Design Systems
    • UX/UI
    • Arquitetura Front-end

📁 Materiais Auxiliares

Modelos prontos para organizar a sua rotina de estudos. Eles auxiliam no planejamento do seu cronograma e na fixação do conhecimento.

Os arquivos abaixo são fornecidos como uma base e devem ser editados e adaptados conforme a sua necessidade. Você deve baixar os modelos na sua máquina, não é possível a edição online por meio destes links.

Cronograma Semanal de Estudos (abre numa nova aba)Resumo de Estudos (abre numa nova aba)

Encontrou algum link quebrado ou tem sugestões de melhoria para a trilha?

Entrar em contato para falar da trilha (abre numa nova aba)