Online-08 | Front-end | 2020 | Fundamentos de HTML e CSS
Plano de aula para o dia 22 de agosto, sobre HTML e CSS básico. Este arquivo será alimentado conforme o andamento da semana (:
link para o arquivo dontpad; Deploy do resultado final => https://online8-reprograma.netlify.app;
- Apresentação
- Combinados
- Preparando estrutura de desenvolvimento juntas
- Criando pastas e arquivos
- Introdução e revisão - HTML
- Cliente e Servidor
- O que é linguagem de marcação de hipertexto?
<!DOCTYPE html> - HTML vs. HTML5 | CSS vs CSS3
- Elementos
<head>e<body>
- Intervalo - 15min
- Elementos HTML: tags (etiquetas) e atributos
- Exemplo com imagens
<img>e seus atributossrcealte parágrafos<p>
- Exemplo com imagens
- Tags semânticas, como e porque usá-las! (:
-
<header><nav><footer><main><section><article><ul><ol><li><figure><aside><button>
-
-
<a>- links em âncora, e seu atributohref
- Elementos HTML: tags (etiquetas) e atributos
- Introdução CSS
- CSS - Folha de estilo em cascata
- Diferentes formas de adicionar estilo à página
- A tag e atributo
<style> - Importar arquivo style.css através da tag
<link>
- A tag e atributo
- Diferentes formas de adicionar estilo à página
- - Estilizando o CSS juntas - propriedades básicas
colorbg-colorfont-sizefont-family - Seletores CSS -
.class#idelementoatributo - Especificidade com seletores, propriedades CSS e efeito cascata
- Pseudo-seletores, ex: -
:hover
- CSS - Folha de estilo em cascata
html é a estrutura css é o estilo por cima
- Dúvidas da manhã
- Box-sizings (tamanho das caixas) e displays
- Blocos
<div>e elementos em linha<span>,<img> - Displays block, inline, inline-block
- Mexendo em bordas, margens, preenchimentos e conteúdo
- [x]bordermarginpaddingwidthheight
- [x] border-box vs content-box
- Blocos
- Reset básico - mexendo nos estilos padrão de página
[x] - elemento
*, padrões delia - Display flex - o famoso Flexbox
- Mães
<div>as e filhas<div>inhas. Display na mãe, mexe as filhas. - Algumas propiedades e seus valores:
justify-contentalign-itemsalign-contentflex-direction
- Mães
- Intervalo - 15min
- Codando juntas
- Usando o inspetor de código - ctrl + shift + i (:
- Criando navBar
- Nomeando classes pra não se perder, introdução ao método BEM
- criando uma section
- Retirar dúvidas, deixar o exercício para concluir até sexta e falar sobre materiais e jogos disponíveis :)
- Meu primeiro formulário
- Elementos
<form><input><label><textarea><select><option><button> - atributos
typefornameplaceholder
- Elementos
- Mais algumas dicas importantes
- Endentar o código :)
- Importando fontes externas (ex.: Google Fonts)
-
background-image
- Tirar dúvidas da semana
- Documentação HTML;
- Documentação CSS;
- Guia HTML para iniciantes;
- Guia CSS para iniciantes;
- Sobre HTML semântico;
- Tutorial sobre formulários HTML;
- Sobre seletores CSS e pseudo-classes;
- Sobre a propriedade box-sizing;
- Conceitos básicos de flexbox;
- Calma senhora - ótimo site guia para estudos - desenvolvido por aluna da reprograma;
Dicas do Dontpad, aula dia 22
- Nappy - site com imagens de pessoas negras e marrons;
- Sobre Lorem Ipsum;
- Nomes de cores Html-CSS;
- Pixabay - banco de imagens;
- Negativespace - banco de imagens;
- Pexels - banco de imagens;
- Canva - banco de imagens - possível modificar e personalizá-las;
- Extensão conta-gotas, visualiza cores utilizadas pelo site
- Extensão para visualizar fontes usadas pelo site;
- Dicas de links sobre Display flex
(https://developer.mozilla.org/pt-BR/docs/Web/CSS/display)
(https://www.maujor.com/tutorial/propriedade-css-display.php)
(https://www.w3schools.com/cssref/pr_class_display.asp)
(https://medium.com/collabcode/pare-de-chutar-e-aprenda-como-funciona-o-display-block-98480c987950)
(https://medium.com/collabcode/pare-de-chutar-e-aprenda-como-funciona-o-display-inline-4ccb7b77371d#.jww2dont9)
(https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
Sites úteis para buscar por imagens e layout
- Google Fonts;
- Flat UI Colors - paleta de cores;
- Coolors - paleta de cores;
- FlatIcon - download de icones;
- FontAwesome - download de icones dentre outros;
- Unsplash - site para download imagens;
- Imagens de Fundo - site para download imagens;
- FreePik - Site para download de imagens;
Vídeos para estudo
- Dica de tipografia - Largura do texto - 2min;
- Background simples mas pode ser que não;
- Flexbox in 15 Minutes - em inglês;
- CSS Grid layout e Flexbox - um pouco mais avançado;
- Entenda o POSITION;
- Position in 9 Minutes - em inglês;
Jogos de CSS!! :)
- Flexbox Froggy - Jogo do Sapinho; pra aprender flexbox;
- CSS Diner - Jantando com CSS; pra aprender sobre como usar seletores em CSS;
- Flexbox Defense - Defendendo o CSS; outra forma de aprender flexbox;
Iniciaremos com assuntos básicos de estrutura, nomenclatura e anatomia de HTML e CSS.
- Editores de texto e organização de pastas;
- HTML: anatomia e introdução de tags;
- CSS: anatomia e introdução de propriedades;
- Classes, id;
Para se modificar um arquivo .html e .css, precisamos de editor de texto. Apesar de que um simples bloco de notas pode ser a ferramenta para criação desses arquivos, vários softwares foram lançados no mercado para gostos dos programadores, oferecendo facilidades e plugins para facilitar o desenvolvimento. Alguns famosos e notáveis são:
- Sublime Text;
- Notepad++;
- Atom;
- O que vamos usar durante as aulas é o Visual Studio Code;
A estrutura de pastas básicas é:
css style.css img imagem.jpg index.html Ou seja, uma pasta com um arquivo index.html na raiz e duas pastas: uma css para inserção de nossos estilos .css e outra img, para inserção de nossas imagens.
HTML é uma abreviação de Hyper Text Markup Language (linguagem de marcação em hipertexto). Ou seja, não se trata de uma linguagem de programação, pois não tem lógica (algoritmos, processos etc). Ele cria a estrutura de uma página ou aplicação web, determinando a separação de layout e seu conteúdo.
Documentos .html possuem tags de estruturação básica:
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>Internamente, as tags html possuem uma anatomia básica também:
<nome-da-tag atributo="valor do atributo">
conteúdo
</nome-da-tag>Comentários em HTML:
<!-- Isso é um comentário. Comentários em qualquer linguagem são pedaços de código que são ignorados na renderização (na leitura do computador), mas são úteis para entedimento humano -->CSS é abreviação de Cascading Style Sheet (folha de estilos em cascata). É a linguagem que define estilos para o HTML, portanto, não se trata de linguagem de programação. CSS tem "cascata" no nome, devido a sua forma de determinar a propriedade de um elemento - levando em consideração hierarquia de seletores e de chamadas de estilo (inline, internal e external).
Para fazer o link de um arquivo .css em um documento .html, devemos inserir a tag no do documento, com o href do caminho do arquivo.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" />
</head>
<body></body>
</html>Dentro do arquivo .css, a anatomia é:
seletor {
propriedade: valor;
}Exemplo:
p {
color: red;
}Comentários em CSS:
/* Sou um comentário CSS */ATENÇÃO! Não esqueçam de indentar o código! Isso ajuda na sua legibilidade, manutenção e colaboração com outros desenvolvedores. Para indentar, selecione a linha do código e aperte tab.
Classes e ids são atributos que podem ser inseridos em qualquer tag dentro da . Eles são atributos de nomeação, sendo class muito usada para referência em CSS e id para Javascript (apesar de que há outras boas práticas no mercado atualmente). Uma diferença entre os dois é que podem haver várias classes com o mesmo valor, ao passo que ids devem ser únicos.
Verificar os arquivos de exercícios para vê-los em prática.
| HTML | CSS |
|---|---|
| Tags de estrutura: !doctype, html, head, body | Propriedades de background: background-imagem, background-color |
| Tags no head: meta (charset), title, link | Propriedades de texto: text-align, font-family, font-size, text-decoration, font-size, text-transform |
| Tags de divisão: div | Propriedades de layout: width, margin, padding, display (inline-block) |
| Tags de texto: h1 ao h6, p | Propriedade de cor: color |
| Tag de link: a | Propriedade de decoração: box-shadow, border |
| Tag de imagem: img |
Macete de centralização: apenas para elementos block.
- Definir um tamanho para seu elemento através da propriedade width;
- Definir margin: 0 auto;