O Emmet

Curso de Responsive Design

Introdução ao Responsive Design

Bem-vindo ao curso

Conceitos básicos de design responsivo

Ferramentas para design responsivo

O Emmet

Meta Viewport

Unidades de medidas relativas

Introdução a media queries

Aplicando a teoria

Levantando os requisitos da aplicação

Montando a estrutura HTML

Formatando títulos, subtítulos, textos, cores e sessões

Incluindo media queries e CSS

Técnicas avançadas

CSS Selectors

Calc, block, inline e inline-block

Imagens

Imagens de fundo

Ocultando e exibindo elementos

Adicionando vídeos

Algumas técnicas de desenvolvimento

CDNs

Usando fontes

Usando ícones

Posicionamento usando flex align

Bootstrap

Introdução ao Bootstrap

Tipografia e cores

Criar uma página de contato

Desenvolvimento de formulário

Tabelas

Aplicando novo layout ao currículo

Aplicando Bootstrap ao currículo

Aplicando Bootstrap ao currículo: continuação

Material Design

Introdução ao Material Design

AngularJS

Olá Mundo

Angular material: tela de login

Angular material: vamos codificar

Encerramento

Crie uma conta ou faça login

Continue aprendendo! Junte-se e comece a impulsionar sua carreira

Recursos

O Emmet é mágico! Ele é uma extensão para diversos editores que permite agilizar a codificação de HTML e CSS, isso porque ele gera código de forma automática através de menos texto escrito.

Isso se dá através o uso de certas “fórmulas” com sintaxe especial em combinação com a tecla de atalho Ctrl + Enter. Por exemplo, ao digitar o nome de uma tag como “body” e pressionar Ctrl Enter, ele já gera o código equivalente html <body> </body>.

Ele permite também gerar estruturas complexas de HTML usando uma sintaxe especial que permite gerar elementos em hierarquia, concatenados, multiplicados e agrupados; além de permite gerar seus próprios tipos de atributos para usar essas técnicas e usar o texto para que já fico completo o código gerado automaticamente.