Embed Size (px)
Citation preview
Front-end: do básico ao layout
responsivoLuciano Ratamero
Sobre o workshopbem, não vai ser tanto um workshop assim…
…porque é muita coisa pra decorar e bater cabeça
Qual o perfil de vocês?
Mas o que vai ter?
HTML
CSS
JavaScript (jQuery)
Um pouco de tudo:
Twitter Bootstrap (se der tempo)
Okok, o que é HTML?Hyper Text Markup Language
Linguagem de marcação
Descreve o conteúdo interno de qualquer página
web
Centraliza todas as dependências da página
Legal, e o CSS?Cascading Style Sheets
Folha de estilos
Uma listona de como tudo tem que
aparecer
Apenas liga um elemento do HTML às
suas características
E o JavaScript?Linguagem de programação
Basicamente, um monte de função
Manipula diretamente o HTML e o CSS de uma
página
Não vamos falar muito dele por aqui… =/
Podemos começar!Criamos um arquivo HTML
Explicamos as tags
<head> e <body>
Abrimos num navegador
Colocamos algumas
mensagens
Temos conteúdo pra mexer!
Começamos a usar o CSS
IDs, Classes, Tags e seus
seletores
Características físicas
Características de
posicionamento
Vamos importar o CSS no HTML!
Pausa para um café com dúvidas…
…e música de elevador
Agora o negócio ficou sérioO que é jQuery
Querido e amado DOM (Document Object
Model)
Escondendo e exibindo coisas
Escondendo e exibindo coisas com estilo
Escondendo e exibindo coisas ao clicar em
coisas
Eventos: click, hover, focus, change
Pausa para outro café com dúvidas…
…porque javascript dói a cabeça
Já sei o básico! E agora?
Agora é hora de aprender o básico!
Navegador e seu device
Como ele vê seu device
Formas do seu site reagir ao
navegador
Media queries!
Vamos imprimir uma lhama!
Tem mais?Media queries para tamanhos específicos
Vamos mostrar a lhama acima de 640px!
Vamos mostrar duas lhamas lado a lado/acima e
abaixo!
Lembra de falar do viewport!
Colunas salvam sua vida…
…mas isso quer dizer que temos que
escrever manualmente o CSS para cada
tamanho diferente de device?
Twitter Bootstrap
Bootstrap Grid
Vamos jogar o CSS fora e trocar pelo Bootstrap
Vamos refatorar o HTML para usar o Bootstrap
Vamos juntar tudo!(se ainda tiverem
pique)Vamos fazer um formulário de contato
Nome, email e mensagem
Ao clicar no botão de enviar, desativar o botão,
esperar 3 segundos e substituir todo o HTML por
uma lhama
Dúvidas?
É isso, então :D
Luciano Ratamero
email:
twitter: @lucianoratamero
facebook: lucianoratameroPodem me mandar qualquer dúvida,
mesmo!
