Fala Dev, tudo bem?

Quem tem acompanhado os posts anteriores já sabe que eu estou escrevendo esses posts para auxiliar na aprendizagem de quem está cursando o Discover da RocketSeat (https://www.rocketseat.com.br/discover) e também como uma forma de revisão e fixação de conteúdo. Tenham em mente que essas foram as minhas anotações pessoais e contêm diferenças das aulas, portanto, podem ser utilizadas como método auxiliar de aprendizagem, mas não substituem as aulas.

Em função de trabalho, tenho viajado bastante, portanto, irei demorar um pouco para fazer a revisão do conteúdo e postar por aqui.

Sem mais delongas, vamos lá?

Módulo 3 - Iniciando o HTML e CSS

AULA 1 - INTRODUÇÃO AO HTML - 06:31

HTML é Hypertext Markup Language, ou seja, Linguagem de Marcação de Texto. É utilizada para estruturar textos, criar links, imagens, vídeos, etc.
Hipertexto - surgiu com o advento da internet, com a possibilidade de inserir links nos textos.
Markup - é uma marcação de texto marcando um elemento HTML ou uma TAG, cada um serve para um propósito diferente, como criar links, imagens, texto, parágrafo.
Sintaxe da tag - conteúdo da tag
Atributos - adiciona informações extras e configurações à uma tag, exp: ver site .
Como escrever o atributo?
Ver site
Ver site
A parte importante da programação é entender que você dá uma instrução pro computador.

AULA 2 - INTRODUÇÃO AO CSS - 03:19

CSS significa Cascading Style Sheets, ou seja, Folha de Estilo em Cascata. Ele estiliza o HTML, é uma apresentação visual para o cliente.
É composto de declarações, que são pedaços de códigos que irão ditar as propriedades e valores a serem aplicados a um elemento HTML.
Como ele é escrito?
Você coloca um seletor de uma tag, abre a chave, escreve uma ou mais propriedades, dois pontos, adiciona um valor, ponto e vírgula e fecha a chave.
body {
background: black;
}
Existem comentários que também são feitos no CSS, são feitos dessa forma: /* exemplo */

AULA 3 - CONCEITO CSS - CASCATA E ESPECIFICIDADE - 04:13

Cascata - Se você repetir a mesma propriedade mais de uma vez e não colocar especificidades dentro das tags, o CSS irá considerar o último somente, portanto, a Cascata é isso, quando há 2 ou mais declarações a última será a mais relevante.

Especificidade - Cada seletor tem um peso e a soma dos pesos, será levada em conta para que determinada declaração seja mais específica.

id {

peso 100
}
.class {
peso 10
}
element {
peso 1
}

O CSS não aceita que qualquer ID comece com números e carácteres especiais (exceto o underline).

A cascata perde prioridade e é priorizada a especificidade da declaração, então, a especificidade funciona antes da cascata.

AULA 4 - CSS CONCEITOS - BOX MODEL - 07:26

Todos os elementos do CSS são observados como caixa e a caixa possui determinadas propriedades, como conteúdo, largura, altura, borda, preenchimento (espaço interno), espaçamento (espaço externo). Tem relação de como as caixas se comportam com elas mesmas ou com as caixas irmãs a ela.
É preciso compreender o comportamento padrão de algumas tags: h1 é display block, a p é display block e a spam é display inline.

AULA 5 - CONFIGURANDO O VSCODE - 03:10

Adicionou 4 extensões = Live server, Material Icon Theme, Omni Theme and Prettier - Code formatter.
Você irá criar uma nova pasta na área de trabalho para o projeto, arrastar para o VSCode, dentro do aplicativo você vai criar uma nova pasta chamada “.vscode” e criar um novo arquivo chamado “settings.json”, ele é utilizado para definir as configurações globais do editor para aquele projeto, como fonte e tema, você irá copiar o código que está disponibilizado na página e colar nesse formato e irá criar outro arquivo chamado “extensions.json” e repetir o mesmo procedimento com outro tipo de código.

AULA 6 - INICIANDO O PROJETO E O HTML - 07:19

Criar um novo arquivo chamado “index.html” e digitar uma “!” e dar enter e o Emmet (uma inteligência do VSCode), vai completar com a base do HTML.
O Doctype - Define o documento como html 5.
Document element ou root element tem a propriedade de língua, podendo colocar em pt-br ou en.
O head é responsável por ajustar configurações do documento que não são visíveis para quem acessa a pagina, com exceção da tag title.

A tag Meta define a configuração do próprio documento.
- O atributo: Charset define que são permitidos carácteres especiais da página, como o cedilha (ç), os acentos circunflexo (ê) e agudo (é) e o til (ã).
- Os atributos http-equiv e content: tornam os navegadores antigos compatíveis com os atuais.
- O atributo Name: tem o viewport que é visualizado como a caixa de visualização, então a página se adapta a visualização do celular e do computador, content é sobre altura e largura em outros dispositivos.

O head são as configurações da página, o body são as partes que estão visíveis.
Lembrar de constantemente salvar com CNTRL + S ou Comand + S, caso esteja no MAC.
Indentação - recuo das tags do código para adaptar a página e melhorar a visualização do código.

AULA 7 - ABRINDO O PROJETO NA WEB - 04:07


Para melhorar a visualização na web, vá em index.html no VS Code e “Open with live server”, que é um Plug-in instalado.
Um protocolo é um conjunto de regras para um tipo de file (arquivo), em termos práticos: file://user.etc…
HTTP: HyperText Transfer Protocol.
HTTPS: HyperText Transfer Protocol Secure.
Quando está escrito assim: http://127.0.0.1 é o computador simulando como se tivesse um servidor aberto para a página, no entanto, não está aberto em um servidor e sim na sua máquina.
Todo o domínio é transformado em um número, como o domínio do Google: (https://www.google.com) é transformado em um número e passa por uma porta 443.

AULA 8 - ADICIONANDO O ARQUIVO CSS - 02:48

Tudo que é alterado na tag Head, altera alguma parte do seu documento, porém nem tudo é visível.
Adicionar a tag link para criar um relacionamento com um tipo de arquivo (o tipo de arquivo é o CSS, então coloca Stylesheet), então adiciona um atributo (HREF) que diz em que lugar do mundo tá a referência, para dizer que está nessa própria pasta, você coloca ./ ou só digita o nome da pasta do projeto.
Ex: 


AULA 9 - QUIZ


AULA 10 - ACESSANDO O PROJETO NO FIGMA - 04:04


Acessar os materiais complementares que estão disponíveis no primeiro módulo: https://efficient-sloth-d85.notion.site/Materiais-complementares-d7841615addc4269ba5c5bba12a6edbe

Quem usa o ferramenta do Figma é Designer UX-UA. É importante ver o Figma na aula e saber como transformar do Figma para o código.
Para dar zoom no windows: Ctrl + bolinha do mouse
Para mover a tela: Espaço + clicando e arrastando


AULA 11 - EXPORTANDO A IMAGEM DE FUNDO
 - 01:40

Baixar um zip e exportar algumas informações para o VSCode, mas basicamente é só seguir as instruções da aula.

AULA 12 - APLICANDO O BACKGROUND NO PROJETO
 - 07:01

Dentro do CSS, cria o seletor do Body, escolhe o tipo de background, nesse caso é o de imagem através do URL, adiciona o no repeat para a imagem não ser colada várias vezes, ajusta ela no top center e por último, ajuste-a para cobrir toda a tela.
Não precisa adicionar várias vezes o seletor do body, você pode escolher as propriedades e continuar adicionando em somente um seletor.

AULA 13 - AS CAIXAS DO HTML E CSS NA PRÁTICA - 05:32

É preciso entender que tudo do HTML e do CSS são caixas e o professor faz mais uma explicação mostrando tudo que está contendo dentro delas, por exemplo, pequenas caixas dentro de grandes caixas.
A DIV é uma tag genérica que não tem estilos que o Browser aplica nela, ao nomear o ID, o nome não pode se repetir, precisa ter alguma informação diferenciando o ID, ao colocar a # no CSS e o nome da id, você caracteriza ela.
O pixel é uma unidade de medida fixa do CSS, é referente ao que tem em tela.

AULA 14 - CENTRALIZANDO UMA CAIXA - 01:52


É preciso considerar as margens da página, ao adicionar as margens da direita e esquerda, não precisa fazer manualmente os dois, pode recorrer diretamente a margem: auto.
Mas existe uma regra no CSS em que não faz automaticamente o preenchimento das margens de cima e debaixo, só funciona com a largura, ou seja, as partes laterais. 


AULA 15 - ADICIONANDO A IMAGEM DE PERFIL - 05:23

Adicionar uma tag profile e dentro da tag profile adicionar a tag image com dois atributos, o primeiro é o source que identifica onde a imagem está localizada, e o segundo é o alt que tem algumas funções, caso ela não seja encontrada no endereço do source haverá no seu lugar uma descrição, caso uma pessoa em situação de deficiência visual acesse o site e a última função é a interpretação do google, já que a ferramenta não visualiza a imagem, é necessário uma descrição.
O .ZIP é um tipo de arquivo que contém arquivos dentro. 


AULA 16 - ESTILIZANDO A IMAGEM DE PERFIL - 02:12

Geralmente no CSS não é necessário definir a altura, porque ela segue o conteúdo da página, mas é preciso definir a largura.

AULA 17 - DISPLAY NONE INLINE E BLOCK E ALINHAMENTO DE ELEMENTOS INLINE - 06:16

Existem regras do CSS e HTML que não obedecem a olho nu.
Ao adicionar o elemento display e caracterizar como none, o container some da tela.
O display block vai ocupar toda a largura da tela, forçando o elemento que está em cima a ocupar seu espaço em cima e o elemento que está abaixo a ficar embaixo.
Os elementos inline ocupam o mínimo de espaço possível, sendo assim, ficam até na mesma linha se for preciso e também para os elementos inline, não é possível aplicar a margem auto, caso queira, o elemento precisa ser obrigatoriamente em block.
Um elemento inline-block é a mesma coisa, vai tentar tomar o mínimo de espaço possível, outras coisas podem estar na mesma linha, porém você pode ajustar a largura e a altura.
O elemento display none age como se o que estivesse nele não existisse e tudo se move ao redor dele.

Obs: achei a explicação dessa aula confusa, então fui pesquisar um vídeo para me esclarecer, deixo aqui o link do vídeo para quem quiser checar: https://youtu.be/Qf-wVa9y9V4?si=T3mfkkygduS93kOK

AULA 18 - ADICIONANDO FONTES E ESTILOS AOS TEXTOS - 04:18

Para adicionar as fontes no VSCode, deve pesquisar no: https://fonts.google.com/
Asterisco é o seletor universal, significa que ele vai aplicar isso para todos os elementos dentro do body.
Font weight - é o peso da fonte que você adicionou do Google, o 500 é considerado negrito.
Font size - por padrão, os navegadores já tem o fonte size de 16 pixels.
Line height - é a altura da linha.

AULA 19 - RESET DE CSS - 02:13

Por padrão, o navegador já coloca espaço em algumas tags, nem sempre é interessante manter os espaços padrões do navegador, por isso, é interessante zerar em alguns momentos.

Então é interessante colocar o seletor universal para zerar as margens e o preenchimento interno.


AULA 20 - ENTENDENDO MARGIN E PADDING - 05:25


Margin e padding tem 4 propriedades importantes, top, right, bottom e left, respectivamente, então gira no sentido horário, mas podem ser reunidas em 1 propriedade principal.
No entanto, se você tem 1 propriedade, ela deverá ser aplicada em todos os lados, se tem 2 propriedades, a primeira fica em cima e embaixo e a segunda nas laterais, se tem 3 propriedades, a primeira fica em cima, a segunda nas laterais e a terceira embaixo, se tem 4 propriedades, funciona no sentido horário.


AULA 21 - CRIANDO LISTA EM HTML
 - 03:32

A tag ul é a que você usa para criar listas não ordenadas, Unsorted line.
A tag li é um item da lista.
Ao colocar a tag a e o href ( link do site), se você quiser que a pessoa abra outra página, você coloca o atributo target.