<html> .css bootstrap

Programa de Trainee CITi 2017.1

OLÁR

Agenda

1ª AULA (27/05/17)

HTML: Tags, estrutura, semântica, elementos

CSS: Conceitos básicos, hierarquia, media queries, box model, flexbox

Exercício em sala: Desafio #0

2ª AULA (03/06/17)

Resolução do exercício: Desafio #1

Bootstrap

3ª AULA (10/06/17)

Exercício em sala: Desafio #3

Resolução de dúvidas

HTML

Estrutura
Tags, atributos, elementos
Semântica

CSS

Conceitos básicos
Hierarquia
Media queries
Box model
Flexbox

Exercício em sala: Desafio #0

1ª AULA (27/05/17)

hoje!

O que são?

HTML

HyperText Markup Language

CSS

BOOTSTRAP

Cascading StyleSheet

Framework

HTML

CSS

JavaScript

Informação

formatação

comportamento

Em resumo

HTML

CSS

JavaScript

html

<p class="hello">Lula ladrão roubou meu coração</p>

Semântica

// máquina: ok, essa estrutura parece um menu de navegação...?
<div class="classe-inutil"><ul><li><a href="link_interno">...</div>

// máquina: ah, um menu de navegação!
<nav class="classe-inutil"><ul><li><a>...</nav>

É importante por causa da acessibilidade

Facilita a leitura do código

É o uso de tags com um propósito

html

<h1>Olá</h1>

Elementos básicos

Cabeçalhos (h1, h2, h3...)

Parágrafo

<p>Olá</p>

Lista (Não ordenada)

<ul>
	<li>Olá</li>
	<li>Oi</li>
	<li>Como vai</li>
</ul>

Lista (Ordenada)

<ol>
	<li>Olá</li>
	<li>Oi</li>
	<li>Como vai</li>
</ol>

• Olá
• Oi
• Como vai

1. Olá
2. Oi
3. Como vai

html

<img src="foto.jpg">

imagem, formulários e botões

Imagem

Formulário (form, input, etc)

<form class="formulario">
  <input type="text" name="nome" required>
  <textarea></textarea>
  <button type="submit">Enviar</button>
</form>

Bloco

<div>Olá</div>

Semântica

e aí?

<1>Cabeçalho do meu site</1>

<2>
	Início
	Sobre
	Fale conosco
</2>

<3>
	Olá, seja bem-vindo ao meu site

	Eu gosto de:
	<4>
		<4.1>Comer</4.1>
		<4.1>Dormir</4.1>
		<4.1>Comer mais um pouco</4.1>
	</4>
</3>

<h1>Cabeçalho do meu site</h1>

<nav>
	Início
	Sobre
	Fale conosco
</nav>

<p>
	Olá, seja bem-vindo ao meu site

	Eu gosto de:
	<ul>
		<li>Comer</li>
		<li>Dormir</li>
		<li>Comer mais um pouco</li>
	</ul>
</p>

CSS

seletor {
  propriedade: valor;
}

Folha de Estilo em Cascata

Adiciona estilo aos elementos

<!-- index.html -->
<h1>Olá</h1>

<!-- style.css -->
h1 {
   color: red;
}

Exemplo

Olá

Pode-se selecionar elementos por .classe, #id e tag

Link: Praticar CSS

CSS - Hierarquia

Elemento filho (A > B)

p > span {
  color: red;
}

Elemento irmão (A + B)

input + label {
  color: blue;
}

Não é (A:not(B))

p:not(.catchenga) {
  color: orange;
}

Seletores complexos

input[type=text] {
   background: lightblue;
}

CSS

<mesa>
   <prato></prato>
   <prato id="bonito"></prato>
   <prato></prato>
</mesa>

Como selecionar?

CSS - Box model

É um conceito que engloba:

conteúdo (content)
espaçamento (padding)
bordas (border)
margens (margin)

CONTENT

PADDING

BORDER

MARGIN

CSS - Box model

.caixa {
   width: 20px;
   height: 20px;
   border: 5px solid orange;
   padding: 5px;
   margin: 10px;
}

/* qual a largura? */

nota: não está na proporção correta

CSS - MEDIA QUERIES

Responsividade

.caixa {
  background: blue;
}

@media (max-width: 200px) {
  .caixa {
    background: yellow;
  }
}

como é na prática?

CSS - flexbox

Flexible box

💎

Solução para posicionamento

flex container

flex item

.caixa {
   display: flex;
   justify-content: space-between;
}

.col {
   flex: 1;
}

Link: guia completo de FLexbox

na

PRÁTICA

Usando o projeto que você baixou do GitHub e o que a gente aprendeu agora, crie um perfil de um personagem que você gosta com nome, origem, o que faz, qualquer coisa... Tudo isso seguindo os requisitos abaixo:

A página deve ter pelo menos um cabeçalho
A página deve usar uma lista não ordenada (<ul>) com pelo menos um item (<li>)
A página deve ser dividida em duas colunas usando flexbox
A página deve conter pelo menos um link (<a>)

assets/img/teemo.jpg

use a criatividade! ✨

OBRIGADA!🐷

Vanessa Barreiros

Analista de Marketing @ CITi

vanessa.barreiros@citi.org.br