Anotações e código do tutorial da maratona Discover realizado pela Rocketseat. A idéia do projeto é desenvolver um app financeiro.
Sempre há espaço para melhorar! Envie-nos comentários e sugestões!
Descrição | Link |
---|---|
Link Anotação do Linkedin: | |
Link do Notion com anotações do Mestre Mayke: | Notion |
Comando "!" = Adiciona codificação HTML padrão
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Comando "div*2" = Adiciona 2 tags divs, por exemplo
- Comando " * " = Aplica os estilos em toda a página.
- Comando "#" ⇒ Aplica estilo em um id.
- Comando "!important" ⇒ Fala para CSS considerar este estilo acima de qualquer outro comando aplicado nas demais tags.
Conceito: "Box model" ⇒ No desenvolvimento web, o conceito de box model no CSS refere a como os elementos HTML irão se comportar nos browsers e como as dimensões destes elementos HTML são derivadas das propriedades CSS. A imagem abaixo ilustra a base do conceito:
-
Comando: "box-sizing: border-box" ⇒ Esta proprietdade permite que incluamos o padding e a borda na contagem total de largura e altura do elemento.
-
Comando "margin: 0 "⇒ Determina tamanhos de Espaçamento externo.
-
Comando "padding: 0" ⇒ Determina tamanhos de Preenchimento.
-
Comando: "/**/ " ⇒ Permite inserir comentários.
-
Comando: ".container" ⇒ Chama uma classe chamada container.
-
Comando: "width: min(90vw, 800px);" ⇒ Pega a tela (Viewport") e divide em 100 pedaços. O mínimo 0que será exibido são 90 partes de 100. O vírgula é uma instrução de "ou então", ou seja, 90 viewport width ou então 800 pixels.
-
Comando: "line-height" ⇒ Determina a altura entre quebras de linhas.
-
Comando: "Font-size ⇒ Determina o tamanho da fonte.
-
Comando: "font-weight" ⇒ Determina o "peso" ou grossura da fonte.
-
Comando ":hover" ⇒ Determina o efeito que irá ter quando passar o ponteiro do Mouse em cima.
Sempre que iniciar um novo projeto, escreva os comandos abaixo para resetar todos os estilos:
* {
margin: 0; /*Espaçamento externo*/
padding: 0; /*Preenchimento*/
box-sizing: border-box;
}
These amazing people supported on the development of this project!
Lucas Gonçalves |
---|
Owner |
LinkedIn |
GitHub |