Codelab HTML e CSS

Codelab: HTML e CSS
GDG Feira de Santana

Vamos ver na prática
GDG Feira de Santana
Bem-vindo ao Grupo de Desenvolvedores Google de Feira de
Santana (BA)
O que é um GDG?
Redes sociais
Eventos

<!DOCTYPE html>
<html>
<head>
<title>GDG Feira de Santana</title>
<meta charset="utf-8">
</head>
<body>
<h1>GDG Feira de Santana</h1>
<h2>Bem-vindo ao Grupo de Desenvolvedores Google de Feira de Santana (BA)</h2>
<ul>
<li>O que é um GDG?</li>
<li>Redes sociais</li>
<li>Eventos</li>
</ul>
</body>
</html>

<figure>
<img width="200px" src="img/gdgfsa.png"
alt="Logo GDG Feira de Santana">
<figcaption>GDG Feira de Santana</figcaption>
</figure>

<video src="video/gdg.mp4" controls>Seu navegador não
suporta a tag video</video>
<audio src="audio/Anydoll_-_Evil_Rockstar.mp3" controls>
Seu navegador não suporta a tag audio</audio>

p {
text-align: right; /* alinhamento de cada linha */
line-height: 3px; /* tamanho da altura de cada linha */
letter-spacing: 3px; /* tamanho do espaço entre cada letra */
word-spacing: 5px; /* tamanho do espaço entre cada palavra */
text-indent: 30px; /* tamanho da margem da primeira linha do texto */
background-color: gray;/* rgb ou hexadecimal*/
color: blue;
padding: 10px; /* padding-top padding-bottom padding-right padding-left*/
}
video{
border-color: red;
border-style: solid;
border-width: 1px;
height: 300px;
width: 300px;
}

Seletores CSS
ID: #texto
Classe: .video
Atributo: audio[controls]
Pseudo-classe: a:visited a:hover
Relações:
● A B: qualquer elemento B que descendente de A (filhos, filhos de filhos, etc.)
● A > B: qualquer elemento B que é filho de A
● A:first-child: primeiro filho de A
● B + E: qualquer elemento E que é irmão próximo de B
Wild card: *

Tabelas<table>
<tr>
<td>Evento</td>
<td>Data e horário</td>
</tr>
<tr>
<td>JS Day Feira de Santana</td>
<td>2017 7/14/17 2 p.m. -03</td>
</tr>
<tr>
<td>Kotlin para programadores raiz</td>
<td>6/14/17 8:30 p.m. -03</td>
</tr>
<tr>
<td>Codelab Angular 2 Básico</td>
<td>3/25/17 1:30 p.m. -03</td>
</tr>
<tr>
<td>Feliz Angular Novo!</td>
<td>1/19/17 9 p.m. -03</td>
</tr>
</table>

Formulário
<form>
<fieldset>
<legend>Inscreva-se</legend>
<input type="text" placeholder="Nome" required/><br>
<input type="email" placeholder="Email" required/><br>
<label for="newsletter">
<input id="newsletter" type="checkbox"/> Receber novidades na nossa newsletter
</label><br>
<label for="gender">Gênero <br>
<input type="radio" name="gender" value="male" checked/> Masculino<br>
<input type="radio" name="gender" value="female"/> Feminino<br>
<input type="radio" name="gender" value="other"/> Outro<br>
</label>
<button type="submit">Enviar</button>
</fieldset>
</form>

Semântica
● header: conteúdo de introdução, logo, navegação.
● nav: uma seção com links para navegar para outras
páginas ou áreas da mesma página.
● aside: conteúdo relacionado à página, como
informações sobre o autor, avisos, links relacionados,
glossário.
● article: conteúdo principal da página. Pode ser um post
de blog, notícia, artigo científico, comentários, etc.
● section: seção genérica em um documento, geralmente
possui título.

Grid layout
● Melhor organização da página
● Responsividade
<meta name="viewport" content="width=device-
width, user-scalable=no">
Ou
@viewport{
zoom: 1.0;
width: device-width;
}

Grid layout
● Conjunto de linhas e colunas
● Posições fixa ou flexíveis
● Posicionamento de itens
● Grids adicionais
● Alinhamento
● Sobreposição: z-index

.nav ul{
padding: 0px;
margin: 0px;
list-style: none;
background-color: #EDEDED;
}
Menu de navegação

.nav ul li {
display: inline;
}
.nav ul li a {
padding: 2px 10px;
display: inline-block;
/* visual do link */
background-color:#EDEDED;
color: #333;
text-decoration: none;
border-bottom:3px solid #EDEDED;
}

.nav ul li a:hover {
background-color:#D6D6D6;
color: #6D6D6D;
border-bottom:3px solid #14EA00;
}

Grid
.grid-container {
display: grid;
grid-template-columns: 70% 30%;
grid-template-rows: 30% 60% 10%;
grid-column-gap: 20px;
grid-row-gap: 20px;
grid-template-areas:
'header header'
'article aside'
'footer footer';
}

Media query
● All: Para todos os dispositivos.
● Braille: Para dispositivos táteis.
● Embossed: Para dispositivos que imprimem em braile.
● Handheld: Para dispositivos portáteis, geralmente com telas pequenas e banda
limitada.
● Print: Para impressão em papel.
● Projection: Para apresentações como PPS.
● Screen: Para monitores ou dispositivos com telas coloridas e resolução
adequada.
● Speech: Para sintetizadores de voz. As CSS 2 tem uma especificação de CSS
chamada Aural, onde podemos formatar a voz dos sintetizadores.
● Tty: Para dispositivos que possuem uma grade fixa para exibição de caracteres,
tais como: Teletypes, Terminais e também dispositivos portáteis com display
limitados.
● Tv: Para dispositivos como televisores, ou seja, com baixa resolução, quantidade
de cores e scroll limitados.

Media query - operadores lógicos
● And: screen and (max-width: 600px)
● Or: screen and (color), tv and (color)
● Not: all and (not color)
● Only: only screen and (color)

Media query
@media screen and (max-device-width: 600px) {
.grid-container{
grid-gap: 10px;
grid-template-columns: 100%;
grid-template-rows: auto;
grid-template-areas:
'header'
'article'
'aside'
'footer';
}
}

Referências
● Desenvolvimento Web com HTML, CSS e JavaScript:
https://www.caelum.com.br/apostila-html-css-javascript/
● Mozilla Developer Network HTML: https://developer.mozilla.org/pt-
BR/docs/Web/HTML
● Mozilla Developer Network CSS: https://developer.mozilla.org/pt-
BR/docs/Web/CSS
● Adeus Flexbox! Bem-vindo CSS Grid Layout:
https://imasters.com.br/desenvolvimento/adeus-flexbox-bem-vindo-
css-grid-layout/
● Utilizando CSS Media Queries:
http://www.devmedia.com.br/utilizando-css-media-queries/27085

Devfest Nordeste 2017: www.devfestne.com.br

Codelab HTML e CSS

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Codelab HTML e CSS

Semelhante a Codelab HTML e CSS (20)

Mais de Romualdo Andre

Mais de Romualdo Andre (20)

Codelab HTML e CSS