Projetos realizados durante o curso Explorer da Rocketseat
- Site Móveis Customizados
- Site Treine.me
- Formulário de Eventos
- Site Responsivo
- Componentes Animados Catioríneos
Esse projeto foi desenvolvido com as seguintes tecnologias:
- HTML e CSS
- Git e Github
- Figma
Meus principais aprendizados no decorrer do desenvolvimento desse projeto foram:
- Apresentação geral das funcionalidades do site
- Como exportar imagens e mensurar medidas do projeto
- Identação (boa prática de utilizar dois espaços para HTML e CSS)
- Posicionamento de elementos (block e inline)
- Aplicação de fontes do Google Fonts
- Quebra de linha com tag
- Uso da propriedade "margin" com shorthand
- Uso da propriedade "position"
- Uso do seletor especial a + a
Esse projeto foi desenvolvido com as seguintes tecnologias:
- HTML e CSS
- Git e Github
- Figma
Meus principais aprendizados no decorrer do desenvolvimento desse projeto foram:
- Tags Semânticas ('header', 'nav', 'ul', 'main', 'section' e 'footer')
- Conceito de Box Model
- A diferença na aplicação da propriedade "margin" e "padding"
- Utilização da ferramenta DevTools para explorar e testar funcionalidades
- Conceitos de acessibilidade (ex: inclusão de texto alternativo em imagens e aumento de contraste nas cores da fonte)
- Ordem de especificidade dos elementos CSS
- Utilização da função linear-gradient() e suas propriedades
Esse projeto foi desenvolvido com as seguintes tecnologias:
- HTML e CSS
- Git e Github
- Figma
Meus principais aprendizados no decorrer do desenvolvimento desse projeto foram:
- Utilização de tag input text precedida de label (equivalente ao for) para garantir acessibilidade
- Tipos diferentes de input (password, number, checkbox)
- Tags novas: select, textarea, fieldset
- Utilização da tag form e seus atributos (action e method)
- Method (protocolo HTTP): Get e Post, suas diferenças
- Criação de tags para encapsulamento
- Centralização de elementos na página com width e margin
- Propriedade box-sizing e definição de tamanho da caixa
- Display flex
- Como verificar se determinada propriedade do CSS é ativa em um navegador específico através do site CanIUse
- Conversão de imagens SVG para Base64 através do site Yoksel
- Como utilizar proporiedade nth-child
- Alterar checkbox padrão do navegador
Esse projeto foi desenvolvido com as seguintes tecnologias:
- HTML e CSS
- Git e Github
- Figma
Meus principais aprendizados no decorrer do desenvolvimento desse projeto foram:
Para desenvolver um site responsivo é necessário começar fazendo a interface para mobile. Utilizar preferencialmente unidades de medida relativas para garantir acessibilidade aos projetos e facilitar a responsividade.- Utilização da pseudoclass :root para auxiliar no cálculo proporcional das unidades de medida relativas do projeto
- Uso de at-rule media queries para ajuste do tamanho e comportamento dos elementos na tela
Esse projeto foi desenvolvido com as seguintes tecnologias:
- HTML e CSS
- Git e Github
- Figma
Meus principais aprendizados no decorrer do desenvolvimento desse projeto foram:
- Uso de variáveis no CSS no :root para criar padronização no projeto e facilitar eventuais mudanças (cores, fontes, etc)
- Aplicação da função (--hue) no CSS, para alterar as cores de forma homogênea e distribuida
- Técnicas para ajustar imagens e evitar o overflow utilizando propriedade object-fit
- TRANSIÇÕES: uso da propriedade transform, transition, delay e manipulação das curvas de bezier
- ANIMAÇÕES: at-rule @keyframe para movimentar componentes no eixo X e Y com uso das propriedades translate e opacity ⚠ Após o término da animação, o componente retorna ao estado inicial, portanto para evitar efeito piscante, podemos adicionar propriedade backwards