Iniciante: Introdução às primeiras linguagens de marcação e estilo, além de organização pessoal.
Neste nível, o dev é introduzido aos conceitos fundamentais do HTML. Aprende a construir a estrutura básica de uma página web e a utilizar as tags essenciais, como <html>, <head>, <body>, e outras que ajudam a criar textos, links e imagens. O foco está em estabelecer uma base sólida para criar uma página web simples, mas funcional.
Evolução: Ao final deste nível, o dev será capaz de estruturar uma página web utilizando os principais elementos do HTML.
Iniciante: Aprofundamento dos conceitos apresentados no nível 1, com complexidade crescente.
Após aprender a estrutura do HTML, o dev avança para o CSS, que é usado para estilizar a página web. Aqui, ele aprende a utilizar seletores simples (tipo, classe e ID) para aplicar estilos, definir cores, fontes e tamanhos de texto, além de trabalhar com o modelo de caixa (Box Model) para organizar os elementos da página. Também é apresentada a forma de incluir CSS no HTML de diferentes maneiras.
Evolução: O dev conseguirá aplicar estilização básica em suas páginas, aprimorando o design e tornando-as mais atraentes visualmente.
Iniciante: Aplicação de técnicas de otimização e integração com foco em usabilidade e presença online.
Neste estágio, o dev já tem uma boa compreensão dos fundamentos de HTML e CSS. Agora, o foco é otimizar o código para melhorar a performance e a usabilidade das páginas. Técnicas de otimização, como a organização do código, são introduzidas, e o dev aprende a criar layouts responsivos que se ajustam a diferentes dispositivos. Além disso, começa a trabalhar em sua presença profissional online, com a criação e revisão de um perfil no LinkedIn.
Evolução: O dev será capaz de criar páginas mais eficientes e responsivas, com foco na experiência do usuário, além de começar a fortalecer sua imagem profissional.
Iniciante: Revisão e correção das tarefas e projetos anteriores, com foco na melhoria contínua.
No último nível, o dev revisa e refina todo o trabalho desenvolvido até agora. Ele corrige erros, implementa feedback recebido e aprimora tanto a estrutura quanto a performance de seus projetos anteriores. Este nível é focado na melhoria contínua e na aplicação de tudo o que foi aprendido de forma prática e eficaz.
Evolução: O dev aprimora suas habilidades técnicas, corrigindo e otimizando projetos anteriores, e se prepara para desafios mais complexos no desenvolvimento web.
Intermediário: Utilizar elementos semânticos para criar uma estrutura de página clara e organizada.
O dev aprende a usar elementos como <article>, <section>, <footer>, e <header> para estruturar a página web de maneira lógica. Este conhecimento melhora a navegação e a acessibilidade, além de facilitar a indexação por mecanismos de busca.
Evolução: O dev será capaz de criar páginas web bem estruturadas e semanticamente corretas, promovendo uma navegação intuitiva e uma melhor indexação em motores de busca.
Intermediário: Implementar práticas de acessibilidade para imagens, garantindo que todo o conteúdo visual seja acessível.
O dev aprende a utilizar atributos como alt para fornecer descrições alternativas de imagens e técnicas de responsividade para adaptar as imagens a diferentes dispositivos. O foco está em garantir que todos os usuários, incluindo aqueles com deficiências visuais, possam acessar o conteúdo.
Evolução: O dev criará páginas com imagens acessíveis e responsivas, garantindo uma experiência inclusiva para todos os usuários.
Intermediário: Desenvolver e estilizar formulários para interatividade e funcionalidade.
O dev aprende a criar formulários utilizando elementos como <input>, <textarea>, e <select>. Também explora técnicas de estilização e validação para melhorar a funcionalidade e a experiência do usuário.
Evolução: O dev conseguirá construir formulários interativos e bem projetados, melhorando a coleta e o gerenciamento de dados.
Intermediário: Construir e estilizar tabelas para a apresentação eficiente de dados.
O dev aprende a usar <table>, <tr>, e <td> para organizar e exibir informações de forma clara. Técnicas de design são aplicadas para tornar as tabelas esteticamente agradáveis e funcionais.
Evolução: O dev será capaz de criar tabelas bem estruturadas, facilitando a leitura e a organização dos dados em suas páginas web.
Intermediário: Aplicar Flexbox para criar layouts responsivos e flexíveis.
O dev explora o uso de Flexbox para desenvolver layouts que se ajustam a diferentes tamanhos de tela. Este nível foca em técnicas para alinhar e distribuir espaço entre elementos de forma eficiente.
Evolução: O dev conseguirá criar layouts sofisticados e responsivos, melhorando a apresentação visual das páginas web.
Intermediário: Utilizar CSS Grid para layouts complexos e ajustáveis.
O dev aprende a aplicar CSS Grid para criar designs avançados e estruturados. O foco está em técnicas para construir layouts complexos e responsivos que atendem a diversas necessidades de design.
Evolução: O dev será capaz de desenvolver layouts dinâmicos e adaptáveis, utilizando CSS Grid para criar estruturas de página mais avançadas.
Intermediário: Aplicar pseudo-classes e pseudo-elementos para efeitos visuais avançados.
O dev aprende a utilizar pseudo-classes como :hover e pseudo-elementos como ::before para adicionar estilos dinâmicos e interativos. Este nível foca em criar efeitos visuais avançados e melhorar a experiência do usuário.
Evolução: O dev conseguirá aplicar efeitos visuais sofisticados, enriquecendo o design das páginas web e aumentando a interatividade.
Intermediário: Utilizar CSS Grid para layouts complexos e ajustáveis.
O dev explora como usar media queries para aplicar estilos adaptáveis a diferentes dispositivos e tamanhos de tela. O foco é criar uma experiência de usuário consistente em todos os dispositivos.
Evolução: O dev criará páginas web responsivas que proporcionam uma experiência de usuário otimizada em qualquer dispositivo.
Intermediário: Implementar transições e animações básicas para melhorar a interatividade.
O dev aprende a adicionar transições e animações em CSS para criar movimento e dinamismo nas páginas web. Técnicas básicas são exploradas para melhorar a estética e a interatividade dos sites.
Evolução: O dev conseguirá adicionar animações e transições que tornam as páginas web mais envolventes e visualmente atraentes.
Intermediário: Aplicar técnicas básicas de SEO para otimizar páginas web.
O dev aprende a usar meta tags e técnicas básicas de SEO para melhorar a visibilidade das páginas web em mecanismos de busca. O foco está em estratégias para aumentar a indexação e a relevância do conteúdo.
Evolução: O dev será capaz de implementar práticas básicas de SEO para melhorar a performance e a visibilidade das páginas web.
Avançado: Revisar conceitos avançados de JavaScript e iniciar o estudo do framework escolhido (React ou Angular).
Neste nível, o dev revisará conceitos avançados de JavaScript essenciais para trabalhar com o framework escolhido. O dev será introduzido aos fundamentos do framework, aprendendo sobre sua arquitetura, configuração inicial e conceitos básicos.
Evolução: O dev será capaz de revisar e aplicar conceitos avançados de JavaScript e iniciar a construção de aplicações usando o framework, preparando-se para projetos mais complexos.
Avançado: Aplicar o framework para criar aplicações web interativas utilizando HTML, CSS e JavaScript.
O dev aprenderá a integrar o framework com HTML e CSS para desenvolver interfaces dinâmicas. Este nível foca na construção de componentes reutilizáveis e na manipulação do DOM com o framework, além da interação com JavaScript para gerenciar o estado da aplicação.
Evolução: O dev conseguirá construir e estilizar aplicações web interativas utilizando o framework, HTML e CSS, melhorando a eficiência e a modularidade do desenvolvimento.
Avançado: Explorar técnicas avançadas no framework e otimizar o perfil profissional no LinkedIn.
O dev abordará técnicas avançadas como gerenciamento de estado complexo e roteamento no framework. Além disso, aprenderá a aprimorar seu perfil no LinkedIn para destacar as novas habilidades e projetos realizados.
Evolução: O dev será capaz de aplicar técnicas avançadas no framework para projetos mais sofisticados e melhorar sua presença profissional, aumentando suas oportunidades de carreira.
Avançado: Integrar e corrigir todas as tecnologias aprendidas em um projeto final.
Neste nível, o dev aplicará todos os conhecimentos adquiridos em um projeto final que integra HTML, CSS, JavaScript e o framework escolhido. O foco será em identificar e corrigir problemas, ajustar o projeto para funcionar perfeitamente e garantir a integração de todas as tecnologias.
Evolução: O dev conseguirá entregar um projeto final robusto e funcional, demonstrando a integração completa das tecnologias e a capacidade de resolver problemas complexos.
Avançado: Utilizar APIs HTML para recursos avançados e criar gráficos com HTML5 Canvas.
O dev aprenderá a usar a API de Geolocalização para acessar a localização do usuário e a API de Armazenamento Local para salvar dados no navegador. Além disso, explorará o elemento Canvas para criar gráficos e visualizações dinâmicas.
Evolução: O dev será capaz de implementar funcionalidades baseadas na localização do usuário e gerenciar dados localmente, além de criar visualizações de dados e gráficos interativos.
Avançado:Criar Web Components personalizados e melhorar a acessibilidade com atributos ARIA.
O dev aprenderá a criar componentes reutilizáveis com Web Components e a usar o Shadow DOM para encapsulamento. Além disso, implementará atributos ARIA para tornar a aplicação acessível a pessoas com deficiências.
Evolução: O dev conseguirá desenvolver componentes personalizados e acessíveis, promovendo a reutilização e a inclusão na aplicação.
Avançado: Utilizar variáveis CSS, técnicas de design responsivo e pré-processadores CSS.
O dev aprenderá a usar variáveis CSS para criar estilos mais moduláveis e a aplicar técnicas avançadas de design responsivo. Além disso, explorará pré-processadores CSS para adicionar funcionalidades adicionais aos estilos.
Evolução: O dev conseguirá criar estilos organizados e adaptáveis, melhorar a responsividade do design e escrever código CSS mais eficiente e poderoso.
Avançado:Dominar técnicas avançadas de layout utilizando Grid e Flexbox.
O dev explorará como utilizar Grid e Flexbox para criar layouts complexos e responsivos. Este nível foca em técnicas avançadas para desenvolver designs flexíveis e adaptáveis às diferentes necessidades e tamanhos de tela.
Evolução: O dev será capaz de criar layouts sofisticados e funcionais, aplicando técnicas avançadas para construir designs dinâmicos e adaptáveis.
Avançado: Trabalhar com Promises, funções de callback e manipulação avançada de arrays e objetos.
O dev aprenderá a utilizar Promises e a abordagem async/await para operações assíncronas, além de técnicas avançadas para manipular arrays e objetos, e gerenciar eventos e escopo.
Evolução: O dev conseguirá gerenciar operações assíncronas de forma eficiente e manipular dados de maneira avançada, melhorando a eficácia e a clareza do código JavaScript.
Avançado:Aplicar conceitos de programação orientada a objetos e módulos JavaScript para uma estrutura de código mais organizada e reutilizável.
O dev aprenderá os princípios da programação orientada a objetos, como classes e herança, e como utilizar módulos JavaScript para organizar e dividir o código em partes reutilizáveis.
Evolução: O dev conseguirá estruturar o código de forma modular e reutilizável, melhorando a organização e a manutenibilidade do projeto.
Avançado: Utilizar APIs Web e a função Fetch para interagir com recursos externos e realizar requisições assíncronas.
O dev aprenderá a trabalhar com APIs Web para acessar recursos externos e utilizar a função Fetch para realizar requisições e manipular respostas de forma assíncrona.
Evolução: O dev será capaz de integrar e consumir APIs externas, realizando requisições e gerenciando respostas para enriquecer as funcionalidades da aplicação.
AvançadoImplementar técnicas de manipulação de erros e debugging para garantir a estabilidade e a depuração eficiente do código.
O dev aprenderá a identificar e tratar erros no código, além de utilizar ferramentas e técnicas de debugging para resolver problemas e garantir a estabilidade da aplicação.
Evolução: O dev conseguirá detectar e corrigir erros de forma eficaz, melhorando a estabilidade e a confiabilidade da aplicação.