Resuminho Geral
Emily Filisbino 09/05/2025
"Todo ser humano tem um vazio em si com formato de uma cruz." - Emily Filisbino 2025.
De maneira resumida aprendemos desde elementos básicos como a estrura base de um código, tamanho e manipulação de textos, criar listas tabelas, navegar entre páginas, Linkar elementos, criar interfaces em CSS, alterar elementos visuais também através do CSS. Aprendemos também que os bons programadores JAMAIS falam "Hashtag" ou "Jogo da velha" mas sim o Glorioso "Hash". Bem, o que mais me influenciou e me ajudou com a vida de futura programadora, além das aulas, foram os atalhos de Vs Code, rapaz, esses foram simplesmente sensacionais (Shift alt f de identação é o meu favorito!)!!
Logo Abaixo teremos mais alguns detalhes do que foi aprendido em Sala;
Aula 01 - Manupulação de Texto básica de Texto e Listas
Nesta Sessão Usamos:
- O h1 a h6 para Hierarquia de texto, titulo, subtitulo, e assim por diante;
- P para criar um paragrafo, span, criação de div, a e href para linkar sites, hr para criar uma linha;
- "bloquote" é para Deixar o paragrafo com tab em tudo certinho;
- Seguindo com a aula aprendemos a fazer listas com ul li ou ol (Sendo Ordenada, numérica ou lista normal com pontos).
- O famoso dl (cria uma especie caixa que envolve o texto), o dt o título e o dd o conteudo de "dentro";
- Nosso amigo "br" pula linha prar deixar tudo mais organizado;
Aula 02 - Formulários e Tabelas
Nesta Sessão Usamos:
- Usamos "form" para criar a base do formulário "fieldset" para criar uma caixinha em volta do formulário, "legend" para o titulo do formulário, as divs fazem separação, "label" usa se para criar um campo para escrever, e o "input" para coletar o texto e criar um texto que ajuda o usuário a saber o que digitar naquele campo através do "placeholder"
- Ainda nos formulários Usamos "select" para criar um ambiente de seleção, "option" para criar opções para o usuário selecionar através do clique. e parta finalizar usamos textarea para criar um campo de texto como "Observações";
- Nas imagens, usamos "figure" para conjunto de imagens, "figcaption" para legendar as imagens;
- Já nas Tabelas, o table cria tabela, o "tr" cria "ao redor" da tabela, o "th" cria as colunas e o "td" cria linhas. o "rowspan" cria uma celula "mesclada" ;
Formulários:
Tabelas e images:
Aula 03 - Criando uma Páginda de navegação através de links.
Nesta Sessão Usamos:
- Oponto de destaque dessa atividade é o "a href="" que linka o destino das páginas; Obs: Ele é um pouco diferente do img, que carrega o destino de uma imagem. ("img src=");
- Utilzamos o Css, onde coloca se o "nome" do elemento que se quer trabalhar sua aparencia com chaves logo na frente de uma forma que todos os comandos fiquem entre as chaves{}.
- Entre esses comandos temos" background-repeat: repeat-y;" (que repete a imagem de forma padronizada em um devido sentido, "border radius" arredonda as bordas como para um botão por exemplo).
- Outros comandos muito interessantes estão aqui como o "text-align:" que deixa o texto alinhado; E também temos o "text indent" para deixar os textos com um TAB no inicio dele;
- As maneirices não param por ai, sabia que conseguimos usar imagens no lugar dos pontinhos de uma lista? Sim isso é possivel através do comando "list-style-image: url (nome da imagem)"
- Algumas imagens podem estar como background através do "background-image: url(nome exato do arquivo)".
Aula 04 - Tabela e Formulário com mais CSS.
Nesta Sessão Usamos:
- O comando "input type=" do html, noa juda muito pois podemos escolher qual o "tipo de dados quermos colher daquele campo;
- Também o "textarea" ele permite que criemos um campo expansivo, quase que uma "Caixa de texto" para informações adicionais;
- input"[type="submit]" para selecionar um atruto especícico para editar com Css.
- Se tratando da tabela temos "rowspan" (th rowspan="2") que mescla sentido coluna e "coldspan" que mescla sentido linha.
Aula 05 - Título de resumo.
Nesta Sessão Usamos:
- o mais importanrte dessa aula para mim foi o "section:nth-child(2)" que mostra como alterar um elemento repetido no codigo que tenha uma certa herança de outro elemento, como neste caso o Section.
- Também foi importante o Alinhamento de imagens com "margin" e text-align. No portal da floresta nós continuamos o que vimos acima no andamento das outras atividades;
Aula 06 - Treinando e Aplicando responsividade.
Nesta Sessão Usamos:
- Usamos o comando "width" com porcentagem para manter o design responsivo ;
- Usamos também o "display" neste caso o flex para ter as imagens e conteúdo se adaptando ao tamanho da tela.
- Usamos também "max-width: 1200px"; Aqui damos um limite de expanção.