Recommandé
Contenu connexe
En vedette
En vedette (20)
Similaire à Front-end: do básico ao layout responsivo
Similaire à Front-end: do básico ao layout responsivo (20)
Front-end: do básico ao layout responsivo
- 1. Front-end: do básico ao layout responsivo Luciano Ratamero
- 2. Sobre o workshop bem, não vai ser tanto um workshop assim… …porque é muita coisa pra decorar e bater cabeça
- 3. Qual o perfil de vocês?
- 4. Mas o que vai ter? HTML CSS JavaScript (jQuery) Um pouco de tudo: Twitter Bootstrap (se der tempo)
- 5. 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
- 7. 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
- 9. 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… =/
- 11. Podemos começar! Criamos um arquivo HTML Explicamos as tags <head> e <body> Abrimos num navegador Colocamos algumas mensagens
- 12. 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!
- 13. Pausa para um café com dúvidas… …e música de elevador
- 14. Agora o negócio ficou sério O 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
- 15. Pausa para outro café com dúvidas… …porque javascript dói a cabeça
- 16. Já sei o básico! E agora? Agora é hora de aprender o básico!
- 17. Navegador e seu device Como ele vê seu device Formas do seu site reagir ao navegador Media queries! Vamos imprimir uma lhama!
- 18. 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!
- 19. Colunas salvam sua vida… …mas isso quer dizer que temos que escrever manualmente o CSS para cada tamanho diferente de device?
- 21. Twitter Bootstrap Bootstrap Grid Vamos jogar o CSS fora e trocar pelo Bootstrap Vamos refatorar o HTML para usar o Bootstrap
- 22. 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
- 23. Dúvidas?
- 24. É isso, então :D Luciano Ratamero email: luciano@ratamero.com twitter: @lucianoratamero facebook: lucianoratamero Podem me mandar qualquer dúvida, mesmo!