Web Developer from Zero to Hero Ruta - Aprendizado Online com Certificado

Web Developer from Zero to Hero

Beginner

4.5

51 reviews

46 Learners

Updated 01/2026

Discover the power to create captivating websites by harnessing HTML, CSS, and JavaScript. Immerse yourself in building dynamic web applications enhan…

199

Chapters

Learning hours

331

Assignments

AI Assistant

Shareable Certificate

Resultados

Track content

Related courses and projects

Depoimentos

Recursos

Preços

Resultados

Track content

Related courses and projects

Depoimentos

Recursos

Preços

Learning track content

Explore o funcionamento interno da web. Entenda como os dados trafegam pelas redes, descubra o papel dos protocolos e desvende os mistérios dos endereços IP e nomes de domínio. Obtenha uma compreensão geral de como navegadores e servidores se comunicam para entregar conteúdo web.

Bem-vindo ao HTML e Desenvolvimento Web

O Que É a Internet?

Como a Internet Funciona?

Compreendendo Como os Sites Funcionam

Explicação Sobre Desenvolvimento Frontend e Backend

Descubra o poder das tags para estruturar o conteúdo, desde títulos e parágrafos até listas e tabelas. Aprenda como aprimorar os elementos com atributos.

Compreensão das Tags HTML

Trabalhando com Atributos HTML

Compreendendo Tags Pareadas e Únicas em HTML

Marcação de Texto

Organizando Listas

Desafio: Crie o Parágrafo da Sua Primeira Página Web

Desafio: Construir uma Página Web de Apresentação Pessoal

Desafio: Criar uma Página Web de Exibição de Filmes

Usando Links

Adicionando Botões

Desafio: Criar Links para Sites Populares

Validando Seu Código HTML para Melhores Práticas

O núcleo da estrutura de documentos HTML. Aprenda os componentes de um documento HTML, incluindo a declaração do doctype, head e body. Compreenda o propósito de cada elemento e como eles contribuem para a estrutura geral de uma página web.

Os Segredos por Trás de Páginas Web Bem Estruturadas

Compreensão da Estrutura do Documento HTML

O Papel do Cabeçalho do Documento

Gerenciamento do Fluxo e Layout do Documento

Desafio: Estruturar Corretamente um Documento HTML

Usando Ferramentas de Desenvolvedor para Inspeção e Depuração de HTML

Torne uma página web mais atraente com o uso de mídias como imagens, áudio e vídeo. Trabalhe com dados tabulares estruturados na forma de tabelas.

Adicionando Imagens em HTML

Desafio: Trabalhar com Imagens

Trabalhando com Imagens Clicáveis, Legendas e Otimização

Compreensão de Gráficos Vetoriais e Rasterizados

Incorporação de Áudio para Mídia Enriquecida

Adicionando Elemento de Vídeo

Desafio: Incorporar Áudio e Vídeo em HTML

Criação e Estruturação de Tabelas em HTML

Desafio: Criar uma Tabela HTML Funcional

Explore a versatilidade dos formulários HTML. Aprenda a projetar formulários intuitivos e fáceis de usar aproveitando conceitos e técnicas essenciais. Descubra como os formulários possibilitam a interação do usuário e o envio de dados em sites.

Introdução aos Formulários HTML

Fundamentos da Criação de Formulários em HTML

Usando Rótulos para Melhor Acessibilidade de Formulários

Aperfeiçoando Formulários com Atributos de Entrada

Explorando Diferentes Tipos de Entrada em HTML

Desafio: Criar Formulário com Campos e Rótulos

Trabalhando com o Elemento Textarea para Entrada Multilinha

Usando o Elemento Select para Menus Suspensos

Usando o Elemento Datalist para Sugestões de Entrada Predefinidas

Agrupamento de Elementos de Formulário para Melhor Estrutura

Aprenda o que é CSS, como conectá-lo ao HTML e como estilizar elementos HTML utilizando seletores. Explore conceitos fundamentais como cores de texto, pseudo-classes de ação do usuário e variáveis em CSS.

O Que É CSS e Por Que É Importante?

Vinculando CSS a um Documento HTML

Domínio dos Seletores CSS para Estilização de Elementos HTML

Desafio: Aplique Seus Primeiros Estilos CSS

Desafio: Estilize com Seletores de Classe

Aperfeiçoando Estilos com Pseudo-Classes de Ação do Usuário

Desafio: Aplicar Pseudo-Classes de Ação do Usuário

Alterando Cores de Texto no CSS

Otimizando o Fluxo de Trabalho para Codificação Eficiente em CSS

Desafio: Use Variáveis para Melhor Gerenciamento de CSS

Descubra como estilizar e formatar texto em suas páginas web. Aprenda a aplicar fontes personalizadas e explore diversas propriedades de fonte para aprimorar a aparência do texto.

Dominando a Estilização de Texto em CSS

Técnicas de Formatação de Texto para Legibilidade

Desafio: Formatar Texto com CSS

Adicionando Fontes Personalizadas a uma Página da Web

Compreensão e Uso das Propriedades de Fonte

Desafio: Explorar Propriedades de Fonte

Aprenda os fundamentos do modelo de caixa, que define o layout e o espaçamento dos elementos em uma página web. Explore conceitos como dimensionamento de caixas, adição de espaço aos elementos, trabalho com elementos de bloco e em linha, e utilização de pseudo-classes estruturais e funcionais para estilização avançada.

O Que É o Modelo de Caixa do CSS?

Compreendendo o Dimensionamento de Caixas no CSS

Adicionando Espaço com Margens e Preenchimento

Desafio: Aplicar Box Sizing aos Elementos

Usando Pseudo-Classes Estruturais e Funcionais

Desafio: Praticar Pseudo-Classes Estruturais

Compreensão dos Elementos Block, Inline e Inline-Block

Trabalhando com Elementos de Bloco

Trabalhando com Elementos Inline

Desafio: Prever o Layout da Página com Diferentes Tipos de Elementos

Descubra o Flexbox, um método avançado de layout em CSS para organizar elementos em linhas e colunas. Aprenda a controlar a direção, o alinhamento e o espaçamento dos elementos horizontal e verticalmente, além de personalizar itens individuais para layouts precisos.

O Que É Flexbox e Por Que Usá-Lo?

Definindo a Direção do Flex para Layouts

Justificando o Conteúdo Horizontalmente no Flexbox

Alinhando Itens Verticalmente no Flexbox

Compreendendo as Propriedades dos Itens Flex

Desafio: Aplicar Conceitos de Flexbox

Desafio: Construir um Layout com Flexbox

Aprenda a aprimorar o apelo visual de suas páginas web com CSS. Explore técnicas para aplicar cores e imagens de fundo, estilizar imagens, utilizar pseudo-elementos decorativos e adicionar sombras para criar designs impressionantes.

Usando Cores de Fundo para Design

Aplicando Imagens de Fundo aos Elementos

Trabalhando com Imagens em CSS

Criando Efeitos com Pseudo-Elementos Decorativos

Adicionando Sombras para Profundidade e Estilo

Desafio: Implementar Efeitos Decorativos em CSS

Descubra o que os alunos podem esperar deste curso avançado de estilização com HTML e CSS. Quais conhecimentos prévios são necessários antes de iniciar o curso? Quais tópicos serão abordados?

Visão Geral do Curso e Resultados de Aprendizagem

Tópicos Abordados Neste Curso

Dicas de Sucesso para Aprender CSS Avançado

Posicione e gerencie elementos nas páginas da web. Aprenda sobre as diferentes propriedades de posicionamento, descubra como usar a ordem de empilhamento para controlar a visibilidade de elementos que se sobrepõem e, por fim, lide com o transbordamento de conteúdo.

Compreendendo o Posicionamento CSS

Posicionamento Relativo Explicado

Desafio: Aplicar Posicionamento Relativo

Posicionamento Absoluto em CSS

Desafio: Implementar Posicionamento Absoluto

Posicionamento Fixo para Elementos de Interface Fixos

Desafio: Trabalhar com Posicionamento Fixo

Posicionamento Sticky para Layouts Dinâmicos

Desafio: Dominar o Posicionamento Sticky

Gerenciamento da Ordem de Empilhamento dos Elementos

Desafio: Controlar Z-Index e Sobreposição de Elementos

Lidando com Overflow de Conteúdo em CSS

Pesquise o poder das transições e aprenda como aprimorar a experiência do usuário. Descubra como animar propriedades de forma suave e gradual, criando transições de estado contínuas.

Introdução às Transições em CSS

Escolhendo as Propriedades de Transição Corretas

Definindo a Duração da Transição para Efeitos

Personalizando Transições com Funções de Temporização

Adicionando Atraso às Transições CSS

Combinando Transições

Desafio: Adicionar um Efeito de Transição Suave

Aprenda sobre a propriedade animation e como ela pode ser utilizada para criar designs dinâmicos e envolventes. Descubra como criar animações complexas utilizando keyframes e como controlar a animação.

O Que São Animações CSS?

Definindo Duração e Temporização de Animação

Controlando Iteração e Direção da Animação

Gerenciamento de Estados de Animação em CSS

Compondo Múltiplas Animações

Desafio: Implementar Animação CSS

Explore a propriedade de transformação, que permite modificar a aparência e a posição dos elementos em uma página web. Aprenda a dimensionar, rotacionar, inclinar e transladar elementos em duas e três dimensões. Combine múltiplas transformações para criar efeitos mais complexos.

Introdução às Transformações CSS

Dimensionamento de Elementos

Rotacionando Elementos em 2D e 3D

Desafio: Aplicar Escala e Rotação

Translação de Elementos para Efeitos Dinâmicos

Inclinação de Elementos para Designs Exclusivos

Usando Perspectiva para Efeitos de Profundidade

Desafio: Combinar Translação e Inclinação

Os princípios e técnicas utilizados no design adaptativo/responsivo visam tornar sites e aplicações acessíveis e visualmente atraentes em diferentes dispositivos, tamanhos de tela e orientações.

O Que É Design Responsivo?

Usando @media Queries para Estilos Adaptativos

Construindo Layouts Flexíveis para Diferentes Tamanhos de Tela

Inspecionando Páginas da Web

Desafio: Inspecionar Layout Adaptativo

Aprenda sobre pré-processadores em CSS e como eles podem ajudar a escrever um código mais eficiente e de fácil manutenção. Compreenda como utilizar pré-processadores para simplificar o fluxo de trabalho e gerar um código CSS mais limpo.

Introdução aos Pré-Processadores CSS

Compreendendo a Sintaxe do Sass para um CSS Aprimorado

Usando Variáveis Sass para Estilos Reutilizáveis

Realizando Cálculos com Operadores Numéricos do Sass

Aninhamento de Estilos para Código Mais Limpo

Estendendo Estilos com a Diretriz @extend

Organizando Arquivos Sass para Projetos Escaláveis

Compreenda os princípios fundamentais do React. Você aprenderá sobre JSX (JavaScript XML), construção de componentes de UI reutilizáveis e renderização de elementos. Além disso, explorará a importância da coleta de dados e da renderização condicional em aplicações React. Ao final desta seção, você terá uma base sólida dos conceitos essenciais do React, preparando-se para os tópicos mais avançados abordados nas próximas seções.

O Que É React e Por Que Usá-Lo?

Comparando SPAs e MPAs no Desenvolvimento Web

Como o React Funciona com o DOM Virtual

Introdução ao JSX para Escrever HTML em JavaScript

Construindo UI Complexa com JSX

Renderização de Elementos no React

Desafio: Renderizar um Elemento no React

Compreendendo Componentes React

Passando Dados com Props no React

Desafio: Criar Componentes Funcionais

Renderização Condicional em React

Desafio: Implementar Renderização Condicional – Notificação de Chat

Desafio: Implementar Renderização Condicional – Alerta Bancário

Realizar uma Coleta de Dados

Desafio: Exibir Coleções de Dados no React

Resumo dos Fundamentos do React

Explore os diversos métodos de adicionar estilos às aplicações React. Você aprenderá a aplicar estilos a componentes individuais, utilizar estilos dinâmicos e manter uma abordagem de estilização escalável e sustentável em seus projetos.

Introdução à Estilização em React

Usando Estilos Inline no React

Aplicando Estilos Inline na Prática

Desafio: Uso de Estilos Inline em um Componente React

Estilizando Componentes React com CSS Externo

Aplicando CSS Externo na Prática

Desafio: Aplicar CSS Externo em um Aplicativo React

Usando Módulos CSS para Estilização com Escopo em React

Organização de Estruturas de Arquivos e Pastas para Estilos

Desafio: Uso de Módulos CSS no React

Conclusão Sobre Técnicas de Estilização em React

Recursos avançados no desenvolvimento moderno com React. Hooks revolucionam a escrita de componentes funcionais, oferecendo uma maneira concisa e intuitiva de gerenciar estado e executar efeitos colaterais. Por outro lado, Context permite compartilhar dados pela árvore de componentes sem a necessidade de prop drilling. A combinação de Hooks e Context possibilita um gerenciamento de estado eficiente e compartilhamento de dados simplificado em aplicações React.

Introdução aos React Hooks e Context

Gerenciamento de Estado com o Hook useState

Desafio: Alternar Visibilidade com useState

Trabalhando com Referências Usando o Hook useRef

Desafio: Construir um Componente de Formulário Controlado

Lidando com Efeitos Colaterais com o Hook useEffect

Desafio: Buscar e Exibir Dados com useEffect

Otimizando o Desempenho com o Hook useMemo

Desafio: Implemente um Filtro de Lista de Carros com useMemo

Compartilhando Estado Entre Componentes com Contexto

Usando Contexto em um Cenário do Mundo Real

Desafio: Construa um Aplicativo de Mundo da Astronomia com Context

Encerramento de React Hooks e Context

Guia passo a passo sobre como iniciar um projeto React do mundo real. Desde a configuração do ambiente de desenvolvimento até a compreensão da organização do projeto e ferramentas essenciais, você adquirirá o conhecimento e a confiança necessários para iniciar sua jornada com React.

Configurando Seu Ambiente de Desenvolvimento React

Escolhendo um Editor de Código para Desenvolvimento em React

Organizando a Estrutura de Pastas do Projeto

Trabalhando com o Terminal no Desenvolvimento React

Iniciando e Executando um Projeto React com Vite

Conclusão da Configuração do Projeto React

Aprenda os fundamentos teóricos de conceitos como URL, domínio, protocolo, parâmetros de consulta e outros. Entenda a importância do roteamento em aplicações web e por que precisamos da biblioteca React Router.

Introdução ao Roteamento em Aplicativos Web

O Que É o React Router?

Compreensão da Estrutura de URL

Explorando URLs na Prática

Quiz: Conceitos Fundamentais do React Router e URLs

Descubra como criar uma aplicação React completa do zero, com a capacidade de exibir conteúdo que se adapta com base na URL utilizando a funcionalidade do React Router.

Visão Geral do Site Multipágina

Instalando o React Router

Habilitando o Roteamento em um Aplicativo React

Definindo Rotas para Navegação

Recapitulação: Primeiros Passos no React Router

Otimizando Importações com Carregamento Preguiçoso

Implementação de um Componente de Fallback

Recapitulação: Segundos Passos no React Router

Criando e Gerenciando Navegação

Explorando Toda a Lógica do React Router

Recapitulação dos Fundamentos do React Router

Explore o uso de strings de consulta para compartilhar e gerenciar o estado da aplicação por meio de URLs, trabalhe com diferentes tipos de dados em parâmetros de consulta e aproveite o React Router para navegação e efeitos baseados em alterações de URL.

Visão Geral

Compreendendo Strings de Consulta em URLs

Configurando um Componente React

Inspecionando Alterações Recentes

Trabalhando com Parâmetros de Consulta

Integrando o Hook useSearchParams

Aplicativo Final

Resumo do Curso de React Router

Impulsione suas Habilidades Tecnológicas!

com até 55% de desconto

Features:

*Tracks not included in Pro plan

500+ Cursos Bem AvaliadosCopiloto de IA de ponta

Trilhas de estudo personalizadas40+ Projetos práticos do mundo real

Sem cancelamento, antes do término do plano com desconto selecionado, aceito que a Codefinity cobrará automaticamente $104 a cada 3 meses até eu cancelar. Saiba mais sobre a política de cancelamento e reembolso em Termos de Assinatura.

Recommended Courses and Projects

test code

TEST COURSE WITH QUESTIONSs

-----

Fundamentos de HTML

Domine os fundamentos do HTML para criar conteúdos web bem estruturados e acessíveis. Aprenda a estruturar documentos utilizando tags, elementos e atributos. Trabalhe com confiança com textos, listas, imagens, áudio e vídeo para enriquecer páginas web. Crie tabelas para organizar dados e formulários para entrada e interação do usuário. Descubra o HTML semântico para aprimorar a acessibilidade e construa estruturas completas e funcionais de sites desde o início.

Test UI Features

Let's test

Domínio do Next.js 14 para Construção de Aplicações Web Modernas

Aprenda a construir aplicações web modernas e de alto desempenho utilizando Next.js. Configure projetos com layouts estruturados, estilização e roteamento para navegação fluida. Busque e exiba dados de forma eficiente, otimizando a renderização e o desempenho. Implemente recursos avançados como paginação, operações CRUD e busca global para aplicações web dinâmicas. Faça o deploy de seus projetos Next.js, conecte-os a bancos de dados e adicione autenticação para proteger os dados dos usuários.

Gerenciamento de Estado com Redux Toolkit no React

Descubra o poder do Redux Toolkit em conjunto com o React e potencialize suas habilidades de gerenciamento de estado. Este curso apresenta de forma abrangente o Redux Toolkit, uma biblioteca poderosa para gerenciar estados. Aprenda a simplificar a configuração do Redux, facilitar lógicas de estado complexas e criar aplicações React eficientes e escaláveis.

Introduction to CSS Part I

CSS, or Cascading Style Sheets, is a stylesheet language used to describe the presentation of a document written in a markup language like HTML. CSS is a fundamental building block of the modern web and controls the styling and layout of websites and web applications.

Introduction to CSS Part II

Continue learning CSS. CSS, or Cascading Style Sheets, is a stylesheet language used to describe the presentation of a document written in a markup language like HTML. CSS is a fundamental building block of the modern web and controls the styling and layout of websites and web applications.

Introduction to HTML

In this course, participants will learn the basics of HTML, what HTML is and how it is used to create web pages, the structure of an HTML document and the various tags used to define the content and layout of a web page, how to use HTML tags to structure and format content, such as headings, paragraphs, lists, tables, and more, how to create links, add images and videos, and create forms for user input.

Expert React

Unlock the full potential of React and become a proficient Frontend developer with this course. Whether you're a beginner or an experienced developer looking to level up your skills, this hands-on course will take you on an exciting journey through the core concepts of React and its ecosystem, considering such valuable topics as React Router, Redux Toolkit, Formik, and Jest.

Introduction to React

In this course, we will learn how to use the JavaScript React library for making front-end applications. This course will help you understand the structure of a React application, how to add it to an existing website, and how to set up a React app from scratch. You will learn how to easily create React applications and expand them further for more advanced purposes. This course is intended for beginners though basic knowledge of JavaScript is required.

HTML for Beginners

HTML (HyperText Markup Language) is a standard language for creating web pages. It describes the structure and content of a web page and consists of a series of tags that define the various elements of the page, such as headings, paragraphs, lists, links, and more. HTML is the foundation of the modern web.

Discover more Learning Tracks

trilha

TEST TRACK 12

Iniciante

Desenvolvimento Web Full Stack

Iniciante

Torne-se um Desenvolvedor React

Intermediário

Análise e Visualização de Dados em Python

Intermediário

SQL do Zero ao Herói

Iniciante

C++ para Iniciantes

Iniciante

Python de Zero a Herói

Iniciante

Domínio em Aprendizado de Máquina

Intermediário

Python Além do Intermediário

Iniciante

Essenciais de Java

Iniciante

Desenvolvimento de Jogos com Unity

Iniciante

Torne-se um Desenvolvedor Django

Avançado

Por que as Pessoas Escolhem Codefinity

Web Developer

Kwizera Mugisha

The teaching methodology at Codefinity is excellent, and I particularly appreciate how it has prepared me to handle real-world coding problems. Currently, I am delving into Node.js and eagerly anticipate building full-stack projects that integrate all the knowledge I have gained.

Senior Business Analyst

Sherry Barnes-Fox

My first course was 4 hours, I did it in a few days, "nugget-style". The instructions are very clear and easy to understand. There is even a hint to help you get the answer. I love the learning style that is used, it engages me.

Accounts Payable Specialist

Bill Wagner

I have really liked the browser-based lessons that allow me to code within the lesson. The RUN button allows me to test the code I write before submitting for a grade.

IT Support Specialist

Daniel Chinea

I have gained a lot of practical and logical thinking skills, along with patience for myself and confidence in myself that I can learn programming. Years ago, I would have never thought that I could learn programming in any way, shape or form, and I was able to obtain these certifications and skills with Codefinity.

Technology Project Manager

Steve Bruening

The learning was progressive and made it easy to follow along and make progress. I could feel my skills increasing and building on each other as the course went along.

Project Manager

Stephanie Chan

As I went through the first course of the Python track, I liked the way the course was lay out (in easy and digestible modules) with little exercises at the end of each concept.

Step-by-Step to Stellar Results

Ambiente de codificação interativo

Mergulhe em nosso ambiente interativo: escreva e execute seu código com feedback em tempo real e métricas de sucesso—aprenda fazendo a cada passo.

Suporte com IA

Aproveite o assistente de IA integrado para explicar erros, sugerir correções ou responder a qualquer pergunta sobre seu código—assim você permanece produtivo e nunca fica preso.

Check your progress

Conclua cada módulo com um questionário rápido que fornece feedback instantâneo, acompanha seu progresso e garante que você dominou os conceitos-chave.

Promote your expertise

Ganhe seu certificado reconhecido pela indústria ao concluir e compartilhe no LinkedIn com um clique—deixe sua rede ver o que você pode fazer.

Confiado por Funcionários de Empresas Líderes
e Estudantes de Universidades de Prestígio

Acesso completo ao catálogo

Uma assinatura abre este curso e todo o nosso catálogo de projetos e habilidades.

Features:

500+ Cursos Bem AvaliadosCopiloto de IA de ponta

Trilhas de estudo personalizadas40+ Projetos práticos do mundo real

Experimente Codefinity com confiança – garantia de devolução do dinheiro em 30 dias incluída

Para dar as boas-vindas ao Codefinity, estamos oferecendo até 64% de desconto em nossos cursos. Além disso, temos uma garantia de devolução do dinheiro em 30 dias, para que você possa nos experimentar sem riscos.Estamos ansiosos para recebê-lo em nossa plataforma e estamos comprometidos em tornar sua experiência de aprendizado fácil, interativa e divertida.

Ready to get started?

Pro

Best intro offer

Ultimate

A complete experience
to kickstart your career

500+ Top-Rated courses

Completion certificates

Early access to new courses

40+ hands-on Real-world projects

Personalized study tracks

Unlimited workspaces

Acesse instantaneamente 500+ cursos

Aprendizado Ilimitado, Acesso InstantâneoTenha acesso total a todos os cursos e trilhas, incluindo conteúdo em vídeo, questionários e materiais aprofundados—comece a aprender a qualquer momento.

Certificados Reconhecidos pela IndústriaGanhe certificados que validam sua expertise e impulsionam sua carreira em tecnologia, IA, dados, marketing e além.

Aprendizado assistido por IAReceba dicas personalizadas, feedback em tempo real e explicações com IA para acelerar seu progresso.

Constantemente Expansível: Novos Cursos e Trilhas de CarreiraMantenha-se à frente com cursos constantemente atualizados, roteiros de carreira, desafios e testes práticos.

Desenvolva Habilidades que ImportamDomine habilidades em demanda com cursos em IA, ciência de dados, programação, marketing, automação, desenvolvimento web e mais.

Aprendizado Interativo e Sem CosturaEngaje-se com projetos práticos, exercícios do mundo real e uma experiência de aprendizado intuitiva — sem necessidade de ferramentas extras.

TEST TRACK 12

Desenvolvimento Web Full Stack

Torne-se um Desenvolvedor React

Análise e Visualização de Dados em Python

SQL do Zero ao Herói

C++ para Iniciantes

Python de Zero a Herói

Domínio em Aprendizado de Máquina

Python Além do Intermediário

Essenciais de Java

Desenvolvimento de Jogos com Unity

Torne-se um Desenvolvedor Django

Por que as Pessoas Escolhem Codefinity

Confiado por Funcionários de Empresas Líderes e Estudantes de Universidades de Prestígio

Acesso completo ao catálogo

Experimente Codefinity com confiança – garantia de devolução do dinheiro em 30 dias incluída

Acesse instantaneamente 500+ cursos

Confiado por Funcionários de Empresas Líderes
e Estudantes de Universidades de Prestígio