RoquetQ

Projeto em desenvolvimento durante a semana #NLWTOGETHER na trilha DISCOVER.

📋 Sumário

• Sobre
• Tecnologias
• Layout
• Aprendizado
• Milha Extra
• Licença

📖 Sobre

O Rocket.Q é uma aplicação de interação através de perguntas, sendo possível criar uma sala para internautas anônimos fazerem perguntas e o criador da sala em posse de uma senha gerenciar essas perguntas e marcar como lidas.

🚀 Tecnologias

• HTML
• CSS
• JavaScript
• NodeJS
• EJS
• Express
• SQLite

🔖 Layout

Você pode visualizar o layout do projeto através desse link. É necessário ter conta no Figma para acessá-lo.
Ah eu fiz o Tema dark então caso queira ter uma inspiração fique a vontade para acessá-lo Dark Theme

📚 Aprendizado

📌 Aula 1

• Responsividade Natural:

Sempre tentar deixar as fontes com tamanhos padrões utilizando a propriedade rem pois assim ela irá se adaptar automaticamente conforme a tela em que sua aplicação estiver rodando.

Propriedade nova aprendida o clamp(): onde ele o determina intervalo de tamanho da fonte (minímo, padrão, máximo) assim conforme é o tamanho da tela será o tamanho da fonte respeitando os minimos e máximos.
font-size: clamp(14px, 1.6rem, 2vw);

Propriedade nova aprendida o filter: essa propriedade faz com que uma luz seja criada sobre o elemento quando o mouse passa sobre o mesmo, fazendo o efeito hover.

📌 Aula 2

Propriedade nova: ::placeholder aprendi a dar estilo para o placeholder através do css aplicando da seguinte forma como no projeto:

textarea::placeholder {
    color: var(--gray-blue);
}

Site legalzinho para colocar figuras geométricas no layout Bennett Feely

Propriedade nova: filter: drop-shadow() ela permite criar sombras nos elementos em que é aplicada.

📌 Aula 3

📌 Aula 4

📌 Aula 5

⚙️ Milha Extra

• Responsividade;
• Dark Mode.
• Dark Mode Save (deixa o estado salvo).
• Refazer o alert de senha errada;

📝 Licença

Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

---