On10-HTML-CSS

Online-10 | Front-end | 2021 | Fundamentos de HTML e CSS

Plano de aula para o dia 20 e 24 de março, sobre HTML e CSS básico. Este arquivo será alimentado conforme o andamento da semana (:

AULA 20 MARÇO, SÁBADO, 9H - 17H

CONTEÚDO AULA MANHÃ 9h - 12h

[] 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 atributos src e alt e parágrafos <p>
- [] Tags semânticas, como e porque usá-las! (:
  - [] <header> <nav> <footer> <main> <section> <article> <ul> <ol> <li> <figure> <aside> <button> <h1> <h2> <h3> ...
- [] <a> - links em âncora, e seu atributo href
[] 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>
    - [] Importando fontes externas (ex.: Google Fonts) - um outro uso da tag <link>
- [] Estilizando o CSS juntas - propriedades básicas color bg-color font-size font-family
- [] Seletores CSS - .class #id elemento atributo
- [] Especificidade com seletores, propriedades CSS e efeito cascata
- [] Pseudo-seletores, ex: - :hover

html é a estrutura css é o estilo por cima

CONTEÚDO AULA TARDE 13h - 17h

[] 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
  - [] border margin padding width height
  - [] border-box vs content-box
[] Reset básico - mexendo nos estilos padrão de página [] - elemento *, padrões de li a
[] 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-content align-items align-content flex-direction
[] Intervalo - 15min
[] Codando juntas
- [] Endentar o código :)
- [] 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 :)

É comum e normal errar muitas vez o CSS, aprendê-lo é um joguinho de paciência

AULA 24 MARÇO, QUARTA, 20h-22h

[] Meu primeiro formulário
- [] Elementos <form> <input> <label> <textarea> <select> <option> <button>
- [] atributos type for name placeholder
[] Mais algumas dicas importantes
- [] background-image
[] Tirar dúvidas da semana

Links úteis para estudo :)

Dicas extra

Sobre Lorem Ipsum;
Nomes de cores Html-CSS;
Extensão conta-gotas, visualiza cores utilizadas pelo site no inspetor de código;
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

Vídeos pra quem gosta de vídeos - estudos

Jogos pra quem é de jogos - de CSS!! :)

Conteúdo - INTRODUÇÃO À HTML E CSS

Iniciaremos com assuntos básicos de estrutura, nomenclatura e anatomia de HTML e CSS.

HTML: anatomia e introdução de tags;
CSS: anatomia e introdução de propriedades;
Classes, id;

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

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

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 id

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.

Propriedades e tags

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;

About

Semana 3 - Turma On10 Front-end - Fundamentos do HTML e CSS

Languages

Language:HTML 81.7%Language:CSS 18.3%