luan-prates / explorer

Explorer

Stage 02 - Introdução ao HTML e CSS

Neste módulo veremos os conceitos de HTML e CSS estruturando de forma semântica. Aprenderemos a utilizar a ferramenta Figma, aplicaremos fontes e cores personalizadas em nossos projetos, entenderemos como posicionar e espaçar os elementos utilizando os conceitos de Box Model e Flexbox do CSS.

Introdução ao HTML e CSS

• Navegador e editor de código
• Introdução ao HTML
• Material complementar - Glossário HTML
• Introdução ao CSS
• O que iremos desenvolver e o que é o Figma
• Figma do Projeto
• Iniciando o projeto 01
• Estruturando o projeto 01
• Apresentação e posição dos elementos na tela
• Aplicando fontes customizadas e iniciando o CSS
• Trabalhando com cores e fontes
• Alinhando textos e elementos
• Mais ajustes de textos
• Trabalhando com espaçamentos
• Bordas e classificações de elementos
• Posicionando elementos
• Finalizando esta etapa
• Utilizando o codepen para enviar desafios
• Utilizando o Github para enviar os projetos e desafios
• Corrigindo bugs (01)
• Recriando layout - Extra

Conhecendo novos conceitos de HTML e CSS

• Apresentando o projeto 02
• Figma do Projeto
• Estruturando HTML com tags semânticas
• Finalizando a estrutura do HTML semântico
• O conceito Box Model do CSS
• Conhecendo a ferramenta de desenvolvimento - DevTools
• O conceito de Flexbox do CSS
• Melhorias na acessibilidade e refatoração
• Adicionando as fontes e melhorando os textos
• Aplicando alinhamentos e espaçamentos no main e no footer
• Configurando o botão
• Background linear-gradient e ajustes finais
• Ajustes finais do projeto
• Corrigindo bugs (02)
• Semântica e acessibilidade
• Recriando Layout
• Autoavaliação

Land 03 - Aprendizado, Estudos e Técnicas

Neste módulo iremos potencializar ainda mais o aprendizado com a metodologia PARE. Aqui, você vai aprender a estudar de uma maneira eficiente, sabendo a importância de ter uma rotina de estudos organizada. Serão apresentadas algumas técnicas (Pomodoro, Lozanov, Feymann e Active Recall) para te ajudar a evoluir muito mais rápido no seu aprendizado.

• Cronograma de estudo com Notion
• Potencializando o aprendizado
• Estudando de maneira eficiente
• Técnica Pomodoro
• Técnica Lozanov
• Técnica Feynmann
• Técnica Active Recall
• Cronograma de estudos
• Desafio - Cronograma de estudos em perspectiva anual (opcional)
• Autoavaliação

Stage 03 - Avançando no HTML e CSS

Neste módulo veremos sobre formulários no HTML e vários tipos de inputs. Aprenderemos sobre responsividade, para que o nosso projeto se adapte a vários tipos de dispositivos. Trabalharemos com Grid no CSS e faremos transições a animações para deixar o nosso projeto ainda mais robusto.

Formulários, Validações e Customizações

• Visão geral do projeto
• Figma do Projeto
• Entendendo os campos HTML
• Como funcionam os formulários no HTML
• Simulando a busca do google
• Iniciando a estrutura do HTML e configurações do VSCode
• Iniciando os estilos da página
• Agrupando campos com fieldset e legend
• Formatando o campo de texto
• Ajustando novos campos dentro do fieldset
• Estilizando o campo select
• Aplicando estilos aos agrupamentos restantes
• Checkbox customizado e com acessibilidade
• Criando estilos para o submit
• Validando campos e submetendo formulários
• Quiz 01
• Criando Formulário

Responsividade

• Introdução à responsividade
• Figma do Projeto
• Estruturando o HTML
• Regra mobile-first
• Regra das unidades de medidas flexíveis
• Continuando ajustes de textos
• Finalizando ajustes da versão mobile
• Versão Desktop
• Finalizando essa etapa