Apostila - Módulo 1 - Bootcamp Desenvolvedor(a) Front End

Prévia do material em texto

Design para Front End 
 
 
 
 
 
Bootcamp Desenvolvedor(a) Front End 
 
Rafaela Santos de Paula Marcolino 
 
 
 
 
 
 
 
2021 
 
 
 Design para Front End – Página 2 de 112 
 
Design para Front End 
Bootcamp Desenvolvedor(a) Front End 
Rafaela Santos de Paula Marcolino 
© Copyright do Instituto de Gestão e Tecnologia da Informação. 
Todos os direitos reservados. 
 
 
 
 
 
 
 
 
 
 
 
 
 Design para Front End – Página 3 de 112 
Sumário 
Capítulo 1. HTML Semântico ................................................................................. 7 
Elementos de Seção ............................................................................................... 7 
Elementos de Agrupamento (ou de Nível de Parágrafo) ........................................ 9 
Elementos de Nível de Texto ................................................................................ 11 
Capítulo 2. Abordagem (ou mindset) de desenvolvimento .................................. 14 
Graceful Degradation ............................................................................................ 14 
Progressive Enhancement .................................................................................... 14 
Progressive Enhancement VS Graceful Degradation ........................................... 15 
Capítulo 3. Acessibilidade (WCAG) ..................................................................... 17 
Aural StyleSheets ................................................................................................. 19 
Por que se preocupar com acessibilidade? .......................................................... 21 
Capítulo 4. Metodologias CSS ............................................................................. 22 
OOCSS ................................................................................................................. 22 
SMACSS ............................................................................................................... 24 
BEM ...................................................................................................................... 26 
Outras metodologias ............................................................................................. 27 
Capítulo 5. Boas Práticas em Desenvolvimento .................................................. 28 
Boas Práticas: HTML ............................................................................................ 28 
Boas Práticas: CSS .............................................................................................. 29 
Boas Práticas: JavaScript ..................................................................................... 31 
Boas Práticas: Acessibilidade ............................................................................... 32 
 
 
 Design para Front End – Página 4 de 112 
Boas Práticas: Performance ................................................................................. 33 
Capítulo 6. CSS Estilos ....................................................................................... 35 
Propriedades CSS ................................................................................................ 35 
Modelo de Caixa CSS ........................................................................................... 36 
Seletores ............................................................................................................... 37 
Funções ................................................................................................................ 39 
Capítulo 7. CSS Pseudo atributos ....................................................................... 40 
Pseudo-classes ..................................................................................................... 40 
Pseudo-seletores .................................................................................................. 41 
Pseudo-elementos ................................................................................................ 42 
Capítulo 8. CSS Animações ................................................................................ 43 
CSS Transform ..................................................................................................... 43 
CSS Animation ...................................................................................................... 44 
Exemplos de animação ......................................................................................... 46 
Capítulo 9. Noções de UI e UX ............................................................................ 49 
Design Systems .................................................................................................... 53 
Atomic Design ....................................................................................................... 57 
Vantagens em usar o Atomic Design ................................................................ 60 
Capítulo 10. CSS Layout ....................................................................................... 62 
Fluxo normal do CSS ............................................................................................ 62 
Os primórdios do layout web................................................................................. 63 
CSS Flexbox ......................................................................................................... 64 
 
 
 Design para Front End – Página 5 de 112 
CSS Grid ............................................................................................................... 67 
Capítulo 11. Técnicas de Design Responsivo ....................................................... 71 
Responsive Design ............................................................................................... 71 
Adaptive Design .................................................................................................... 72 
Responsive vs Adaptive Design ............................................................................ 73 
Capítulo 12. CSS User agent Styles ...................................................................... 75 
CSS Normalize ..................................................................................................... 75 
CSS Reset ............................................................................................................ 76 
Normalize CSS & Reset CSS ............................................................................... 77 
Capítulo 13. Framework CSS ................................................................................ 79 
Bootstrap............................................................................................................... 79 
Foundation ............................................................................................................ 80 
Materialize............................................................................................................. 81 
Bulma .................................................................................................................... 82 
Tailwind ................................................................................................................. 82 
Capítulo 14. Pré-processadores CSS .................................................................... 84 
SASS .................................................................................................................... 84 
Outros pré-processadores .................................................................................... 88 
Capítulo 15. CSS-in-JS ......................................................................................... 89 
Styled Components ............................................................................................... 90 
Capítulo 16. Técnicas de Debugging .....................................................................93 
Conhecendo o Chrome DevTools ......................................................................... 93 
 
 
 Design para Front End – Página 6 de 112 
Elements ............................................................................................................... 93 
Console ................................................................................................................. 95 
Sources ................................................................................................................. 97 
Network ................................................................................................................. 98 
Capítulo 17. 7 passos para debugging ................................................................ 100 
Etapa 1: Reproduzir o Código ............................................................................. 100 
Etapa 2: Acessar o Chrome DevTools ................................................................ 101 
Etapa 3: Pausar o código com Breakpoints ........................................................ 101 
Etapa 4: Percorrer o código ................................................................................ 104 
Etapa 5: Definir um ponto de interrupção da linha de código.............................. 104 
Etapa 6: Conferir valores das Variáveis .............................................................. 105 
Etapa 7: Aplicar uma correção ............................................................................ 108 
Referências.............. .............................................................................................. 110 
 
 
 
 Design para Front End – Página 7 de 112 
 HTML Semântico 
A maioria dos sites segue convenções estruturais razoavelmente 
padronizadas; áreas típicas incluem um cabeçalho, um rodapé, uma barra lateral, 
uma barra de navegação e assim por diante. Como autores da web, vamos muitas 
vezes nomear os elementos div que usamos para designar mais claramente essas 
áreas (por exemplo, <div class="header">). No entanto, no que diz respeito ao próprio 
código, qualquer agente de usuário – e isso inclui um navegador da web, leitor de tela 
ou rastreador de mecanismo de pesquisa – que analisar esse conteúdo, não poderia 
dizer com certeza qual o propósito de cada um desses elementos div. HTML5 resolve 
esse problema com novos elementos semânticos. 
Em termos de especificação HTML, seus elementos se enquadram em um 
dos três grupos: 
▪ Elementos de seção, para os traços mais amplos em uma página HTML. Estes 
são os tipos de elementos a serem usados nas áreas de cabeçalho, rodapé e 
barra lateral. 
▪ Elementos de agrupamento (ou de nível de parágrafo), que são usados para 
agrupar elementos associados, como parágrafos, blockquotes e outros 
conteúdos dessa natureza. 
▪ Elementos em nível de texto, que são os elementos que usamos para designar 
áreas especiais (ênfase), como uma seção de texto ou código em negrito ou 
itálico. 
É de suma importância utilizar corretamente cada elemento para deixar claro 
o objetivo do conteúdo em si. 
 
Elementos de Seção 
▪ <main>: 
 
 
 Design para Front End – Página 8 de 112 
‒ A tag <main> define o conteúdo principal da página; 
‒ A área de conteúdo principal de um documento inclui conteúdo 
exclusivo para aquele documento e exclui o conteúdo que se repete em 
um conjunto de documentos, como links de navegação, informações de 
direitos autorais, logotipos e banners do site; 
‒ Só pode haver um elemento <main> em um documento HTML e ele não 
deve ser usado como um elemento filho descendente de alguns dos 
outros elementos semânticos do HTML5. 
▪ <header>: 
‒ A tag <header> pode ser usada para a área principal do cabeçalho de 
um site, mas também como uma introdução a outro conteúdo, como 
uma seção de introdução em um elemento <article>, por exemplo; 
‒ É possível usá-lo quantas vezes forem necessárias na mesma página: 
poderia ter um <header> dentro de cada <seção> em sua página, por 
exemplo. 
▪ <footer>: 
‒ A tag <footer> pode ser usada para a área principal do rodapé de um 
site, mas também como um conteúdo complementar ao final de outro 
conteúdo principal, como uma seção de links ou de copyright em um 
elemento <article>, por exemplo; 
‒ É possível usá-lo quantas vezes forem necessárias na mesma página: 
poderia ter um <footer> dentro de cada <seção> em sua página, por 
exemplo. 
▪ <aside>: 
‒ A tag <aside> é usada para conteúdo que está tangencialmente 
relacionado ao conteúdo ao seu redor; 
 
 
 Design para Front End – Página 9 de 112 
‒ Em termos práticos, é comumente usada para barras laterais ou 
conteúdo como uma “dica” sobre um assunto relacionado em uma 
postagem de blog. 
▪ <section>: 
‒ A tag <section> é usada para definir uma seção genérica de um 
documento ou aplicação; 
‒ É usado como o elemento que agrega um determinado componente 
visual, por exemplo: seção de contato, seção de feed etc. 
▪ <article>: 
‒ A tag <article> é usada para envolver uma parte independente do 
conteúdo, ou seja, o conteúdo que você pretende usar em uma tag 
<article> pode ser copiado e colado em um site diferente e ainda assim 
fazer todo o sentido. 
▪ <nav>: 
‒ A tag <nav> é usada para envolver os principais links de navegação 
para outras páginas ou partes da mesma página. 
 
Elementos de Agrupamento (ou de Nível de Parágrafo) 
▪ <p>: 
‒ A tag <p> representa um parágrafo. 
▪ <blockquote>: 
‒ A tag <blockquote> representa uma seção que é citada de outra fonte. 
▪ <hr>: 
 
 
 Design para Front End – Página 10 de 112 
‒ A tag <hr> representa uma quebra temática de nível de parágrafo, por 
exemplo, uma mudança de cena em uma história ou uma transição para 
outro tópico dentro de uma seção de um livro de referência; 
‒ Ela não deve ser usada apenas como uma linha decorativa. 
▪ <ol>: 
‒ A tag <ol> representa uma lista ordenada; 
‒ Os itens da lista <li> são elementos filhos do elemento <ol> e possuem 
três atributos: reversed (lista descendente), start (inicia a contagem a 
partir de um determinado número) e type (especifica o tipo de marcador 
a ser usado na lista). 
▪ <ul>: 
‒ A tag <ul> representa uma lista não ordenada; 
‒ Os itens da lista <li> são elementos filhos do elemento <ul>. 
▪ <dl>: 
‒ A tag <dl> representa uma lista de descrição consistindo em zero ou 
mais grupos nome-valor; 
‒ Um grupo nome-valor consiste em um ou mais nomes (<dt>) seguidos 
por um ou mais valores (<dd>); 
‒ Em um único <dl>, não deve haver mais de um <dt> para cada nome. 
▪ <figure>: 
‒ A tag <figure> representa algum conteúdo de fluxo (opcionalmente com 
uma legenda) que pode ser usada para fazer anotações em ilustrações, 
diagramas, fotos, listagens de código etc. 
▪ <figcaption>: 
 
 
 Design para Front End – Página 11 de 112 
‒ A tag <figcaption> representa uma legenda ou legenda para o resto do 
conteúdo do elemento pai <figure> do elemento <figcaption>. 
▪ <div>: 
‒ A tag <div> não tem um significado em especial, ele é usado para 
agrupar algo sem um significado especial. 
 
Elementos de Nível de Texto 
▪ <a>: 
‒ A tag <a> é usada para vincular o documento em que o usuário está 
para outro documento na internet, ou para vincular um ponto no mesmo 
documento. 
▪ <em>: 
‒ A tag <em> é usada para definir um texto enfatizado. O conteúdo interno 
é normalmente exibido em itálico. 
▪ <strong>: 
‒ A tag <strong> é usada para definir texto com grande importância. O 
conteúdo interno é normalmente exibido em negrito. 
▪ <small>: 
‒ A tag <small> define texto menor (como direitos autorais e outros 
comentários). 
▪ <cite>: 
‒ A tag <cite> define o título de um trabalho criativo (por exemplo, um 
livro, um poema, uma música, um filme, uma pintura, uma escultura 
etc.); 
 
 
 Design para Front End – Página 12 de 112 
‒ O texto geralmente é renderizado em itálico. 
▪ <time>: 
‒ A tag <time> define uma hora específica(ou data e hora); 
‒ O atributo datetime desse elemento é usado para traduzir a hora em um 
formato legível por máquina para que os navegadores possam se 
oferecer para adicionar lembretes de datas por meio do calendário do 
usuário e os mecanismos de pesquisa possam produzir resultados de 
pesquisa mais inteligentes. 
▪ <sub>: 
‒ A tag <sub> define o texto subscrito. O texto subscrito aparece meio 
caractere abaixo da linha normal e, às vezes, é renderizado em uma 
fonte menor; 
‒ O texto subscrito pode ser usado para fórmulas químicas. 
▪ <sup>: 
‒ A tag <sup> define o texto sobrescrito. O texto sobrescrito aparece com 
meio caractere acima da linha normal e, às vezes, é renderizado em 
uma fonte menor; 
‒ Texto sobrescrito pode ser usado para notas de rodapé. 
▪ <i>: 
‒ A tag <i> define uma parte do texto em uma voz ou humor alternativo. 
O conteúdo interno é normalmente exibido em itálico; 
‒ É frequentemente usado para indicar um termo técnico, uma frase de 
outro idioma, um pensamento, um nome de navio etc. 
▪ <b>: 
 
 
 Design para Front End – Página 13 de 112 
‒ A tag <b> especifica o texto em negrito sem qualquer importância extra. 
De acordo com a especificação HTML5, ela deve ser usada como o 
ÚLTIMO recurso quando nenhuma outra tag é mais apropriada. 
▪ <span>: 
‒ A tag <span> é um contêiner embutido usado para marcar uma parte de 
um texto ou uma parte de um documento; 
‒ É facilmente estilizado por CSS ou manipulado com JavaScript usando 
o atributo class ou id; 
‒ É muito parecido com o elemento <div>, mas <div> é um elemento de 
nível de bloco e <span> é um elemento embutido. 
▪ <br>: 
‒ A tag <br> insere uma única quebra de linha, é útil para escrever 
endereços ou poemas; 
‒ Não deve ser usada como linha para decoração da página. 
 
 
 
 Design para Front End – Página 14 de 112 
 Abordagem (ou mindset) de desenvolvimento 
Para qualquer tipo de desenvolvimento em programação, é necessário 
escolher uma abordagem que regerá as decisões de quais tecnologias serão usadas. 
Existem duas abordagens (ou mindset) de desenvolvimento: o Graceful Degradation 
e o Progressive Enhancement. 
 
Graceful Degradation 
Graceful Degradation foca nas tecnologias mais avançadas aceitas nos 
navegadores mais modernos. Isso não quer dizer que as aplicações não funcionarão 
em navegadores mais antigos, mas que a experiência nestes será mais simples, não 
comprometendo a usabilidade. 
Esta é uma abordagem descendente (top-bottom) em que você constrói o 
melhor site possível usando todos os recursos que deseja e, em seguida, ajusta-o 
para que funcione em navegadores mais antigos. Isso pode ser mais difícil de fazer e 
menos eficaz do que o aprimoramento progressivo, mas pode ser útil em alguns 
casos. Na prática, o desenvolvimento usando essa abordagem utiliza qualquer 
recurso disponível que melhor cumpra o objetivo do projeto. Para que ele se adapte 
a todos os navegadores, é possível usar media queries específicas para determinar 
o conteúdo em diferentes navegadores, assim como é possível detectar usando 
bibliotecas JavaScript ou usar feature detection (detecção de recurso). 
 
Progressive Enhancement 
Progressive Enhancement foca no desenvolvimento de funcionalidades e 
recursos que possam ser executadas em todos os tipos de navegadores, mesmo 
aqueles mais antigos, sem restrição. Novas tecnologias serão usadas gradualmente 
quando os navegadores começarem a suportar as novas tecnologias. 
 
 
 Design para Front End – Página 15 de 112 
Esse mindset envolve o desenvolvimento de seu site em 'camadas', usando 
uma abordagem ascendente (bottom-top), começando com uma camada mais 
simples e melhorando os recursos do site em camadas sucessivas, cada uma usando 
mais recursos. Na prática, o desenvolvimento usando essa abordagem é regido da 
seguinte forma: começamos com as camadas mais simples usando recursos que 
todos os navegadores aceitam, depois construímos camadas com tecnologias mais 
novas usando polyfills e feature detection. 
 
Progressive Enhancement VS Graceful Degradation 
Graceful Degradation Progressive Enhancement 
É uma abordagem topdown que pode 
favorecer a criatividade nos projetos, 
uma vez que já começa do melhor 
dispositivo possível. 
É uma abordagem bottom-up que 
favorece mais o funcionamento da sua 
aplicação em diversos dispositivos. 
Surgiu antes, quando não havia suporte 
padronizado aos recursos mais básicos 
dentro do browser. 
Surgiu depois, quando sugiram também 
os polyfills e shims e quando a 
marcação semântica ganhava força. 
Enfrentou muitos bugs de CSS nos 
navegadores dominantes do mercado e 
falta de suporte a APIs do HTML5 e do 
JavaScript em geral. 
Conseguiu lidar melhor no nivelamento 
de recursos com polyfills e se favoreceu 
com os ciclos de atualização mais 
rápidos dos navegadores. 
Ênfase na degradação dos recursos. 
Entrega o conteúdo “feio”, se não 
houver outro jeito melhor. 
Ênfase no aprimoramento do conteúdo 
entregue, isso é, entrega o conteúdo 
“pelado” e acrescenta-se camadas para 
quem puder aproveitá-las. 
Trocou o browser sniffing (ou browser 
detection) pelo feature detection. 
Surgiu quando já existia o conceito de 
feature detection e continuou usando, 
somando-se a um cuidado especial com 
uma marcação com mais 
significado. 
Mais difícil de ser testado em diferentes 
ambientes, já que o desenvolvimento 
começa com a tecnologia mais 
avançada. 
Mais fácil de ser testada em diferentes 
ambientes, já que podemos testar cada 
camada de desenvolvimento e verificar 
se algo se quebra ao implementar algo 
mais novo. 
 
 
 Design para Front End – Página 16 de 112 
O Progressive Enhancement é geralmente considerado uma boa prática, pois 
começa com o básico e vai aprimorando aos poucos. Como incia a partir do HTML, 
não só garante que o aplicativo funcionará em qualquer navegador, mas também que 
os mecanismos de pesquisa e leitores de tela o compreenderão. Ao projetar algo do 
zero, você deve pensar em termos de aprimoramento progressivo. 
Se você está tentando tornar um site existente mais acessível e cumprir os 
novos padrões, a situação é diferente. A menos que queira começar tudo de novo, a 
Graceful Degradation é o caminho a seguir neste caso. 
Em relação aos testes, é muito mais fácil testar o Progressive Enhancement 
do que a Graceful Degradation. Se trabalharmos do ponto de vista do Progressive 
Enhancement, podemos simplesmente começar desenvolvendo a versão básica e 
verificar se ela funciona corretamente. Em seguida, adicionamos mais uma camada 
e verificamos se tudo ainda funciona da maneira certa e assim por diante. Então, 
simplesmente, cada vez que adicionamos uma camada adicional, precisamos 
verificar se ela não quebra a versão básica. 
Por outro lado, precisamos de uma abordagem diferente ao usar a Graceful 
Degradation. Os recursos avançados já estão lá e podem ser testados. Para verificar 
se eles degradam normalmente, devemos desativar o suporte a esses recursos. Em 
alguns casos, você precisará testar em um navegador diferente, mas na maioria dos 
casos, você pode usar os recursos de acessibilidade do Opera, Web Developer 
Toolbar no Firefox ou Developer Tools do Chrome. 
É possível usar as duas abordagens em diferentes momentos do projeto ou 
em partes específicas. O importante é você ter em mente se está construindo aquela 
peça de código como algo básico que será progressivamente aprimorado ou como 
algo avançado que será degradado de forma suave. 
 
 
 
 Design para Front End – Página 17 de 112 
 Acessibilidade (WCAG) 
Acessibilidade na web é a prática de tornar conteúdos e funcionalidades 
acessíveis a todos os usuários, sejam eles: 
▪ Deficientes (visual, auditivo, físicas, de fala, cognitivas e neurológicas etc.); 
▪ Usuários com restrições temporárias (operações, acidentes etc.); 
▪ Usuários idosos ou com pouco contato com tecnologia. 
As Diretrizes de Acessibilidadepara Conteúdo Web (WCAG) 2.0 definem 
como fazer o conteúdo da Web mais acessível para todos os usuários. Para atender 
às necessidades de todos, existem diversas camadas de orientação, incluindo 
princípios globais, diretrizes gerais, entre outros recursos. Neste capítulo, vamos focar 
nos princípios e as diretrizes. 
Princípio 1: Perceptível – “As informações e os componentes da interface 
do usuário devem ser apresentados em formas que possam ser percebidas pelo 
usuário” (WCAG, 2020). 
▪ Diretriz 1.1 Alternativas em Texto: É preciso ter alternativas de texto para 
qualquer conteúdo não-textual (imagens, gráficos, vídeos etc.) para que possa 
ser transformado em outros formatos de acordo com as necessidades do 
público. 
▪ Diretriz 1.2 Mídias com base em tempo: Dar alternativas para mídias baseadas 
em tempo, por exemplo: vídeos, áudios, entrevistas ao vivo etc. Alternativas 
como legendas, transcrição em texto etc. 
▪ Diretriz 1.3 Adaptável: Fazer conteúdo que pode ser adaptado de diferentes 
formas sem perder seu significado. 
▪ Diretriz 1.4 Discernível: Separar o primeiro plano e o plano de fundo de forma 
a facilitar a audição e a visualização de conteúdo ao público. 
 
 
 Design para Front End – Página 18 de 112 
Princípio 2: Operável – “Os componentes de interface de usuário e a 
navegação devem ser operáveis” (WCAG, 2020). 
▪ Diretriz 2.1 Acessível por Teclado: Tornar toda funcionalidade disponível a 
partir de um teclado. 
▪ Diretriz 2.2 Tempo Suficiente: Dar ao público tempo o bastante para ler e usar 
o conteúdo. 
▪ Diretriz 2.3 Convulsões: Não criar materiais de uma forma conhecida por 
provocar convulsões. 
▪ Diretriz 2.4 Navegável: Dar maneiras de ajudar o público a navegar, encontrar 
conteúdos e escolher onde se encontram. 
Princípio 3: Compreensível – “A informação e a operação da interface de 
usuário devem ser compreensíveis” (WCAG, 2020). 
▪ Diretriz 3.1 Legível: Fazer com que o conteúdo seja fácil de entender e legível. 
▪ Diretriz 3.2 Previsível: Fazer com que o funcionamento das páginas web 
funcionem de modo previsível. 
▪ Diretriz 3.3 Assistência de Entrada: Auxiliar o público para encontrar e corrigir 
erros. 
Princípio 4: Robusto – “O conteúdo deve ser robusto o suficiente para poder 
ser interpretado de forma confiável por uma ampla variedade de agentes de usuário, 
incluindo tecnologias assistivas” (WCAG, 2020). 
▪ Diretriz 4.1 Compatível: Fazer com que o conteúdo seja compatível aos atuais 
e futuros agentes de usuário, principalmente tecnologias assistivas. 
 
 
 
 
 
 Design para Front End – Página 19 de 112 
Aural StyleSheets 
Aural StyleShets (ou folhas de estilo auditivo) usam uma combinação de 
síntese de fala e efeitos sonoros para fazer o usuário ouvir as informações, em vez 
de ler as informações. A apresentação auditiva pode ser usada: 
▪ Por cegos; 
▪ Para ajudar os usuários a aprender a ler; 
▪ Para ajudar os usuários com problemas de leitura; 
▪ Para entretenimento doméstico; 
▪ No carro; 
▪ Por comunidades com problemas de entendimento de entonação. 
A apresentação auditiva converte o documento em texto simples e o alimenta 
em um leitor de tela (um programa que lê todos os caracteres na tela). 
 
Fonte: W3School. 
Propriedade Descrição 
azimuth / elevation Define de onde o som deve vir. 
cue Define as propriedades da sugestão em 
uma declaração. 
cue-after Especifica um som a ser reproduzido 
depois de falar o conteúdo de um 
elemento. 
 
 
 Design para Front End – Página 20 de 112 
cue-before Especifica um som a ser reproduzido 
antes de falar o conteúdo de um 
elemento. 
pause Define as propriedades de pausa em 
uma declaração. 
pause-after Especifica uma pausa após falar o 
conteúdo de um elemento. 
pause-before Especifica uma pausa antes de falar o 
conteúdo de um elemento. 
pitch Especifica a voz falada. 
pitch-range Especifica a variação na voz falada. 
(Voz monótona ou voz animada?) 
play-during Especifica um som a ser reproduzido ao 
falar o conteúdo de um elemento. 
richness Especifica a riqueza da voz falada. (Voz 
grossa ou voz fina?) 
speak Especifica se o conteúdo será 
renderizado auditivamente. 
speak-header Especifica como lidar com os 
cabeçalhos da tabela. Os cabeçalhos 
devem ser falados antes de cada célula 
ou apenas antes de uma célula com um 
cabeçalho diferente da célula anterior. 
speak-numeral Especifica como falar os números. 
speak-punctuation Especifica como falar os caracteres de 
pontuação. 
speech-rate Especifica a velocidade da fala. 
stress Especifica a "intensidade" na voz 
falada. 
voice-family Especifica a família de voz do falante. 
volume Especifica o volume da fala. 
 
 
 
 
 Design para Front End – Página 21 de 112 
Por que se preocupar com acessibilidade? 
Existem muitas vantagens em ter sites acessíveis, abaixo estão algumas 
delas: 
▪ Dar aos usuários a capacidade de acessar informações, serviços e 
entretenimento de forma independente; 
▪ Fator de ranqueamento que pode fortalecer ou comprometer o SEO; 
▪ Sites acessíveis, sendo mais fáceis de usar, geralmente requerem menos 
suporte para os usuários. 
 
 
 Design para Front End – Página 22 de 112 
 Metodologias CSS 
Metodologias CSS (ou arquitetura CSS) são padrões de nomenclatura para 
organizar códigos de CSS, ou seja, uma forma de escrever os nomes de ids e classes 
de forma lógica e de fácil entendimento no geral. Existem muitas metodologias CSS 
e neste capítulo aprenderemos sobre algumas delas. 
 
OOCSS 
Esta metodologia utiliza conceitos de design orientado a objetos a fim de 
fornecer estrutura para CSS, baseado na aparência do objeto em vez do conteúdo ou 
funcionalidade. 
▪ Separa estrutura da skin: 
‒ Propriedade de estrutura: refere-se ao tamanho e posição dos 
elementos (height, width, margin, padding, overflow etc.); 
‒ Propriedade de skin: refere-se ao aspecto visual dos elementos (color, 
border, box-shadow, font, opacity etc.). 
▪ Separa contêiner do conteúdo: estilos com base em atributos em vez de 
localização. Exemplo: todos os elementos com a classe de call-to-action terão 
a mesma aparência, independentemente da marca ou localização. 
Exemplo de HTML usando OOCSS: 
 
 
 Design para Front End – Página 23 de 112 
 
Exemplo de CSS usando OOCSS: 
 
Vantagem: 
▪ Melhor consistência; 
▪ Facilidade de manutenção. 
Desvantagem: 
▪ Documentação vaga; 
 
 
 Design para Front End – Página 24 de 112 
▪ Não há padrão de nomenclatura que diferencie classes de estruturação e de 
skins. 
 
SMACSS 
Esta metodologia se resume em um sistema de categorização para conjuntos 
de regras. 
Categorias: 
▪ Base: estabelecer os padrões para cada elemento (não utilizam seletores com 
classes ou IDs); 
▪ Layout: elementos agregadores, como header, footer e sidebar. Por padrão, 
usa-se l- como prefixo nos IDs e classes; 
▪ Módulo: demais componentes da página, usando classes com nomes 
significativos à sua funcionalidade; 
▪ Estado: estado visualmente dentro dos componentes do design (visible/hidden, 
active/inactive etc.). Por padrão, usa-se is- como prefixo nos IDs e classes; 
▪ Tema: declarações que impactam na aparência de forma genérica (cores 
padrões, por exemplo). 
Exemplo de HTML usando SMACSS: 
 
 
 Design para Front End – Página 25 de 112 
 
Exemplo de CSS usando SMACSS: 
 
Vantagem: 
▪ Semântica clara para melhor entendimento; 
 
 
 Design para Front End – Página 26 de 112 
▪ Mais fácil de reestruturar, caso seja necessária uma mudança no HTML. 
Desvantagem: 
▪ Não nomeia elementos descendentes, sendo difícil empregar em grandes 
aplicações. 
 
BEM 
BEM (Block, Element, Modifier) é uma abordagem baseada em componentes 
para desenvolvimento web. A ideia por trás disso é dividir a interface do usuário em 
blocos independentes. Isso torna o desenvolvimento fácil e rápido, mesmo com uma 
interface de usuário complexa, e permite a reutilização do códigoexistente sem copiar 
e colar. 
▪ Block: componente de página logicamente e funcionalmente independente, 
podendo ser o mais alto nível de abstração (header, footer) ou em nível de 
componente (graph, tabs); 
▪ Element: parte constituinte de um bloco que não pode ser usada fora dele; 
▪ Modifier: define a aparência e o comportamento de um bloco ou elemento. 
 
 
 
 
 
 Design para Front End – Página 27 de 112 
Outras metodologias 
Mais algumas metodologias: 
▪ SuitCSS: usa características comuns do OOCSS, SMACSS e BEM. 
Convenciona 3 categorias de classes: utilitárias (estruturas de baixo nível), 
componentes e estado (usando prefixo is- para IDs e classes). 
▪ Atomic CSS: abordagem à arquitetura CSS que favorece pequenas classes de 
propósito único com nomes baseados em função visual. 
▪ Inverted Triangle CSS (ITCSS): tenta abordar a especificidade do seletor 
usando a prioridade natural do CSS. As folhas de estilo são transferidas para 
camadas 10 com base em sua finalidade. 
Existem muitas outras metodologias (Semantic CSS, Point North, TitleCSS, 
IdiomaticCSS, KickoffCSS, DRY CSS, entre outras), você pode pesquisar para ver 
qual se enquadra melhor no seu estilo de programação e no seu projeto. 
 
 
 
 Design para Front End – Página 28 de 112 
 Boas Práticas em Desenvolvimento 
Boas práticas são padrões de código e melhores práticas para um 
desenvolvimento mais limpo, consistência, fácil de entender e reutilizável. Não existe 
uma regra absoluta para boas práticas, por isso, aqui será mostrado regras gerais de 
vários artigos e depoimento de programadores. 
No Lighthouse da Google, é possível ver uma pontuação se o seu site está 
de acordo com boas práticas no geral, em acessibilidade e de performance: 
 
 
Boas Práticas: HTML 
▪ Sempre use o HTML com doctype (<!DOCTYPE html>); 
▪ Use <blockquote> e <dl> (lista de definição) quando apropriado; 
▪ Listas devem ser criadas por uma tag <ul>, <ol>, ou <dl>, nunca por um 
conjunto de <div> ou <p>; 
 
 
 Design para Front End – Página 29 de 112 
▪ Use a tag <label> para rotular cada campo de um formulário. O atributo “for” 
deve conectar o rótulo ao campo, para que os usuários possam clicar no rótulo 
e assim ser direcionado ao campo associado; 
▪ Não use o atributo “size” diretamente nos campos, em vez disso, use a 
propriedade width do CSS; 
▪ Comente o fechamento de <div> mostrando que o elemento está sendo 
fechado (id ou class do elemento). Isso ajuda quando tem muita indentação e 
muitos elementos aninhados; 
▪ Tabelas não devem ser utilizadas para layouts de página; 
▪ Em tabelas, use os elementos <thead>, <tbody> e <th> apropriadamente; 
▪ Use iniciais em caixa alta para títulos e cabeçalhos; 
▪ Na marcação de títulos, nunca use apenas caixa alta ou baixa. O correto é usar 
a propriedade CSS text-transform: uppercase/lowercase para isso. 
 
Boas Práticas: CSS 
▪ Carregue seu CSS através de arquivos externos, condensando-os para ter o 
menor número possível. Coloque a importação dentro do elemento <head> da 
página; 
▪ Nunca use @import para o importar, use sempre o elemento <link>; 
▪ Não faça estilos elementos <style> ou em linha (inline) no documento. É difícil 
para manutenção e para rastrear os estilos; 
▪ Para equalizar as diferenças entre browsers, use CSS reset ou similares; 
▪ Use classes e ID da forma correta: ID para elementos que ocorrem uma única 
vez dentro de um documento e classes para elementos que se repetem; 
 
 
 Design para Front End – Página 30 de 112 
▪ Nunca use !important. Entenda os princípios de estilo em cascata e 
especificidade de seletores para colocar os estilos da maneira certa; 
▪ Evite seletores “caros” (como o seletor curinga - *), pois eles não são 
otimizados para performance; 
▪ Evite qualificar seletores de ID como “div#myid”, ou seletores de classe como 
“table.results”. Isso prejudica na performance das páginas web porque pode 
haver milhares de elementos DOM carregados com isso; 
▪ Aprenda sobre o modelo de caixa do navegador, é essencial para entender o 
layouts CSS; 
▪ Seletores CSS devem estar em uma linha e cada propriedade em sua própria 
linha abaixo dele. As declarações devem ser indentadas com 2 a 4 espaços; 
▪ Use aninhamento (nesting) para melhor compreensão do código. Insira um 
reforço com 2 ou 4 espaços para estilos filhos; 
▪ Deve ser evitado CSS em uma única linha por causar problemas com o 
controle de versão do arquivo e compreensão do mesmo; 
▪ Use metodologias CSS para organizar a nomenclatura de ids, classes e 
seletores em geral; 
▪ Use abreviação do CSS em casos como margin e padding; 
▪ Você nunca deve usar imagens para criar espaços em branco; 
▪ Defina um estilo padrão para títulos (h1-h6), incluindo cabeçalhos com links. 
Para esses elementos de base, é importante declará-los no topo do seu 
documento CSS e manter a consistência do estilo do site; 
▪ Use h1-h6 de forma coerente, considerando a hierarquia dos elementos; 
▪ Estilos para links devem ser declarados diferentes estilos para o estado hover, 
active, link e visited. Eles devem ser diferentes do texto padrão. 
 
 
 Design para Front End – Página 31 de 112 
Boas Práticas: JavaScript 
▪ A maior parte do código deve estar em arquivos externos. Para melhor 
performance, eles devem ser incluídos no fim da tag body; 
▪ Faça a detecção usando recursos adequados, não confie apenas na string 
user-agent; 
▪ Não utilize document.write(); 
▪ Todas as variáveis booleanas devem começar com "is"; 
▪ Nomeie variáveis e funções de forma lógica. Por exemplo: popUpAdIGTI, em 
vez de myPopup; 
▪ Variáveis devem ter nomes com significado de sua utilização, por isso, não 
faça reduções exageradas ao nomear variáveis; 
▪ Variáveis de configuração e constantes devem ficam no começo do arquivo; 
▪ Faça com que seu código seja facilmente reutilizável, esforce-se para criar 
funções que possam ser generalizadas, ter parâmetros e valores de retorno; 
▪ Comente o código de forma que ele seja facilmente entendido por qualquer 
programador; 
▪ Use comentários de linha inteira. Usar <!-- --> prejudica a leitura do código; 
▪ Quanto menos variáveis globais, melhor; 
▪ O uso de espaços deve seguir convenções de leitura inglesa (por exemplo: 
colocar espaço depois de :); 
▪ As variáveis JavaScript têm que ser escritas em letras minúsculas ou 
camelCase; 
▪ Todo ID e declarações de classes em CSS devem ser escritas usando apenas 
letras minúsculas. Não use traços, nem sublinhados; 
 
 
 Design para Front End – Página 32 de 112 
▪ Converta número com parseInt(). 
 
Boas Práticas: Acessibilidade 
▪ Marcação e semântica coerente; 
▪ Correto uso semântico das tags, atributos e descrições; 
▪ Conteúdo textual para todo conteúdo não-textual (atributo “alt” em imagens, 
gráficos e outros conteúdos não-textuais); 
▪ Escreva um resumo do conteúdo para serem usados por leitores de tela 
(screen-readers); 
▪ Use um fundo claro com um texto escuro ou vice-versa para dar leitura com 
alto contraste. Opção: colocar opções de cores light/dark no site; 
▪ Todas as imagens devem ter descrição (alt); 
▪ Não usar captcha (letras distorcidas); 
▪ Não usar teclado virtual; 
▪ Não ter conteúdo sobreposto (popups); 
▪ Ter atalhos no teclado (principalmente tab); 
▪ Botões com frase em imagem (texto alternativo); 
▪ Não use vermelho e verde juntos para fazer distinções entre funcionalidades 
chaves - uma porcentagem de pessoas não serão capazes de distingui-los. 
 
 
 Design para Front End – Página 33 de 112 
 
 
Boas Práticas: Performance 
▪ Veja a performance do site pelo Lighthouse do Google ou GTMetrix, eles dão 
boas sugestões de como melhorar o site; 
 
 
 Design para Front End – Página 34 de 112 
 
▪ Configure apropriadamente o cache dos cabeçalhos; 
▪ Reduza o tamanho das imagens com otimizadores (smush it, por exemplo); 
▪ CSS e JavaScript devem ser minificados (minified) no ladodo servidor; 
▪ Servir CSS e JavaScript usando gzip; 
▪ CSS devem ser concatenados juntos para reduzir o número de conexões 
HTTP com dependências ao longo do carregamento da página; 
▪ JavaScript deve ser concatenado; 
▪ Não use blocos <script> em linha no HTML, pois eles bloqueiam a 
renderização e oneram o tempo de carregamento de página. 
 
 
 Design para Front End – Página 35 de 112 
 CSS Estilos 
Aqui estudaremos resumidamente o CSS - Cascating Style Sheet (ou Folha 
de Estilo em Cascata). A sintaxe do CSS é composta por um seletor e um bloco de 
declaração: 
 
Fonte: W3School. 
 
Propriedades CSS 
Existem muitas propriedades CSS para modificar os elementos HTML de 
várias formas. Podemos resumi-las em 6 categorias: 
▪ Tamanho: font-size, width, height, margin, padding etc. 
▪ Cor: color, background-color etc. 
▪ Variações: font-weight, text-decoration, shadow, border, cursor etc. 
▪ Posicionamento: position, align, flex, grid, float etc. 
▪ Conteúdo: background-image, content, @import, @media etc. 
▪ Animação: animation, transform, transition etc. 
 
 
 
 
 
 Design para Front End – Página 36 de 112 
Modelo de Caixa CSS 
Todos os elementos HTML podem ser considerados caixas. Em CSS, o termo 
"modelo de caixa" é usado quando se fala em design e layout. Ele é essencialmente 
uma caixa que envolve todos os elementos HTML. Consiste em: margens, bordas, 
preenchimento e o conteúdo real. A imagem abaixo ilustra o modelo da caixa: 
 
Fonte: https://www.w3schools.com/css/css_boxmodel.asp. 
Explicação das diferentes partes: 
▪ Content (Conteúdo) - o conteúdo da caixa, onde o texto e as imagens 
aparecem; 
▪ Padding (Margem interna) - limpa uma área ao redor do conteúdo. O 
preenchimento é transparente; 
▪ Border (Borda) - uma borda que circunda o preenchimento e o conteúdo; 
▪ Margin (Margem externa) - limpa uma área fora da borda. A margem é 
transparente. 
https://www.w3schools.com/css/css_boxmodel.asp
 
 
 Design para Front End – Página 37 de 112 
O modelo de caixa nos permite adicionar uma borda ao redor dos elementos 
e definir o espaço entre eles. 
Para definir a largura (width) e a altura (height) de um elemento corretamente 
em todos os navegadores, você precisa saber como funciona o modelo de caixa. 
Importante ressaltar que, ao definir as propriedades de largura e altura de um 
elemento com CSS, você apenas define a largura e a altura da área de conteúdo. 
Para calcular o tamanho total de um elemento, você também deve adicionar 
preenchimento, bordas e margens. 
 
Seletores 
Os seletores CSS são usados para "encontrar" (ou selecionar) os elementos 
HTML que você deseja estilizar. Podemos dividir os seletores CSS em cinco 
categorias: 
▪ Seletores simples (selecione os elementos com base no nome, id, classe). 
Seletor Descrição 
* Seletor universal. 
E Elemento do tipo E (obs.: um elemento 
herda a formatação dos 
ancestrais). 
E,F,G Elementos dos tipos E, F e G. 
.c Elementos da classe c. 
E.c Elementos do tipo E da classe C. 
#i Elementos com atributo id igual a i. 
▪ Seletores combinadores (selecione os elementos com base em uma relação 
específica entre eles). 
 
 
 
 Design para Front End – Página 38 de 112 
Seletor Descrição 
E F Elemento F, descendente de E. 
E > F Elemento F, filho de E. 
E + F Elemento F, imediatamente precedido 
de E. 
E ~ F Elemento F, precedido de E (isto é, 
irmão). 
E:not(S) Elemento E que não seja S. 
▪ Seletores de pseudo-classe (selecione os elementos com base em um 
determinado estado). 
▪ Seletores de pseudo-elementos (selecione e estilize uma parte de um 
elemento). 
▪ Seletores de atributos (selecione os elementos com base em um atributo ou 
valor de atributo). 
Seletor Descrição 
E[foo] Elemento que contenha o atributo “foo”. 
E[foo=”bar”] Elemento com o atributo “foo” que tenha 
exatamente o valor “bar”. 
E[foo~=”bar”] Elemento com o atributo “foo” que tenha 
o valor “bar” em uma 
lista separada por espaços. 
E[foo^=”bar”] Elemento com o atributo “foo” que 
comece com o valor “bar”. 
E[foo$=”bar”] Elemento com o atributo “foo” que 
termina com o valor “bar”. 
E[foo*=”bar”] Elemento com o atributo “foo” com valor 
que contenha a substring “bar”. 
E[foo|=”pt”] Elemento com o atributo “foo” contendo 
uma lista de valores separadas por 
hífen que comece com “pt”. 
 
 
 Design para Front End – Página 39 de 112 
Funções 
As funções CSS são usadas como um valor para várias propriedades CSS. 
Função Descrição 
attr() Retorna o valor de um atributo do 
elemento selecionado. 
calc() Permite que você execute cálculos para 
determinar os valores das propriedades 
CSS. 
cubic-bezier() Define uma curva de Bézier cúbica. 
hsl() Define as cores usando o modelo Hue-
Saturation-Lightness (HSL). 
hsla() Define cores usando o modelo Hue-
Saturation-Lightness-Alpha (HSLA). 
linear-gradient() Define um gradiente linear como 
imagem de fundo. Defina pelo menos 
duas cores (de cima para baixo). 
radial-gradient() Define um gradiente radial como 
imagem de fundo. Defina pelo menos 
duas cores (centro para as bordas). 
repeating-linear-gradient() Repete um gradiente linear. 
repeating-radial-gradient() Repete um gradiente radial. 
rgb() Define cores usando o modelo Red-
Green-Blue (RGB). 
rgba() Define cores usando o modelo Red-
Green-Blue-Alpha (RGBA). 
var() Insere o valor de uma propriedade 
personalizada. 
 
 
 
 Design para Front End – Página 40 de 112 
 CSS Pseudo atributos 
Pseudo atributos são atributos especiais adicionados aos elementos 
dependendo de uma ação ou de uma condição específica. Existem 3 tipos de 
“pseudo” em CSS: 
▪ Pseudo-classe é usada para definir um estado especial de certo elemento; 
▪ Pseudo-seletor (que faz parte das pseudo-classes) é usado para modificar um 
elemento especificado que está em determinada posição (filho) de outro 
elemento; 
▪ Pseudo-elemento CSS é usado para estilizar partes específicas de um 
elemento. 
 
Pseudo-classes 
▪ :active - Elemento ativo (link); 
▪ :visited - Elemento (link) que já foi clicado (visitado); 
▪ :hover - Elemento em que o mouse está sobre; 
▪ :link - Todos os links não visitados; 
▪ :checked - Elemento marcado (<input>); 
▪ :disabled - Elemento desativado (<input>); 
▪ :empty - Elemento que não tem filhos; 
▪ :enabled - Elemento ativado (<input>); 
▪ :focus - Elemento que está em foco; 
▪ :in-range - Elementos com um valor dentro de um intervalo especificado 
(<input>); 
 
 
 Design para Front End – Página 41 de 112 
▪ :invalid - Elemento inválido (<input>); 
▪ :not(selector) - Elemento que não é o seletor; 
▪ :optional - Elementos sem atributo "required" (<input>); 
▪ :out-of-range - Elementos com um valor fora de um intervalo especificado 
(<input>); 
▪ :read-only - Elementos com um atributo "read-only" especificado (<input>); 
▪ :read-write - Elementos sem um atributo "read-only" especificado (<input>); 
▪ :required - Elementos com atributo "required" (<input>); 
▪ :root - Elemento raiz do documento; 
▪ :target - O elemento #news ativo atual (clicado em um URL contendo o 
elemento âncora); 
▪ :valid - Elementos com um valor válido (<input>). 
 
Pseudo-seletores 
▪ :first-child - Seleciona cada elemento que é o primeiro filho de seu pai; 
▪ :first-of-type - Seleciona o primeiro elemento de seu pai que satisfaz a condição 
de tipo; 
▪ :last-child - Seleciona todos os elementos que são os últimos filhos de seu pai; 
▪ :last-of-type - Seleciona último elemento de seu pai que satisfaz a condição; 
▪ :nth-child(n) - Seleciona o elemento de seu pai na posição n que satisfaz a 
condição; 
 
 
 Design para Front End – Página 42 de 112 
▪ :nth-last-child(n) - Seleciona último elemento de seu pai que satisfaz a 
condição; 
▪ :nth-last-of-type(n) - Seleciona cada elemento que satisfaz a condição de 
posição como filho de seu pai, contando a partir do último filho; 
▪ :nth-of-type(n) - Seleciona cada elementoque satisfaz a condição de tipo e de 
posição como filho de seu pai; 
▪ :only-of-type - Seleciona cada elemento que é o único elemento de seu pai; 
▪ :only-child - Seleciona cada elemento que é o único filho de seu pai. 
 
Pseudo-elementos 
▪ ::after - Pode ser usado para inserir algum conteúdo depois do conteúdo de um 
elemento; 
▪ ::before - Pode ser usado para inserir algum conteúdo antes do conteúdo de 
um elemento; 
▪ ::first-letter - Usado para adicionar um estilo especial à primeira letra de um 
texto; 
▪ ::first-line - Usado para adicionar um estilo especial à primeira linha de um 
texto; 
▪ ::selection - Corresponde à parte de um elemento que é selecionado por um 
usuário. 
 
 
 
 Design para Front End – Página 43 de 112 
 CSS Animações 
Uma animação permite que um elemento mude gradualmente de um estilo 
para outro. Você pode alterar quantas propriedades CSS quiser, quantas vezes 
quiser. As animações são muito usadas com o CSS transform. 
 
CSS Transform 
É possível animar os elementos de diversas formas e um atributo muito usado 
é o CSS transform, que permite mover, girar, redimensionar e inclinar elementos. 
Resumo das propriedades: 
Propriedade Descrição 
translate(x,y) Define uma translação 2D, movendo o elemento ao 
longo dos eixos X e Y. 
translateX(x) Define uma tradução 2D, movendo o elemento ao longo 
do eixo X. 
translateY(y) Define uma tradução 2D, movendo o elemento ao longo 
do eixo Y. 
rotate(angle) Define uma rotação 2D, o ângulo é especificado no 
parâmetro. 
scale(x,y) Define uma transformação de escala 2D, alterando a 
largura e altura dos elementos. 
scaleX(x) Define uma transformação de escala 2D, alterando a 
largura do elemento. 
scaleY(x) Define uma transformação de escala 2D, alterando a 
altura do elemento. 
skew(x,y) Define uma transformação de inclinação 2D ao longo 
dos eixos X e Y. 
skewX() Define uma transformação de inclinação 2D ao longo do 
eixo X. 
skewY() Define uma transformação de inclinação 2D ao longo do 
eixo Y. 
 
 
 Design para Front End – Página 44 de 112 
matrix(n,n,n,n,n,n) Define uma transformação 2D, usando uma matriz de 
seis valores. 
 
CSS Animation 
Para usar o CSS animation, você deve primeiro especificar alguns quadros-
chave (@keyframes) para a animação. Os keyframes contêm os estilos que o 
elemento terá em determinados momentos. Para fazer uma animação funcionar, você 
deve vincular a animação a um elemento adicionando as seguintes propriedades: 
▪ animation-name: nome da animação. Deve ser adicionado ao elemento que 
fará a animação; 
▪ animation-duration: duração da animação. Se ela não for especificada, a 
animação não funciona. A duração pode ser em segundos, milisegundos, 
porcentagem; 
▪ animation-timing-function (opcional): estabelece curvas de aceleração 
predefinidas, como ease ou linear. A propriedade animation-timing-function 
pode ter os seguintes valores: 
‒ ease - especifica uma animação com um início lento, depois rápido e, 
a seguir, termina lentamente (este é o padrão); 
‒ linear - especifica uma animação com a mesma velocidade do início 
ao fim; 
‒ easy-in - especifica uma animação com um início lento; 
‒ ease-out - especifica uma animação com um final lento; 
‒ easy-in-out - especifica uma animação com início e fim lentos; 
‒ cubic-bezier (n, n, n, n) - permite definir seus próprios valores em uma 
função cubic-bezier. 
 
 
 Design para Front End – Página 45 de 112 
▪ animation-delay (opcional): o tempo entre o elemento sendo carregado e o 
início da sequência de animação. Valores negativos também são permitidos, e 
se usar valores negativos, a animação começará como se já tivesse sido 
reproduzida por X segundos; 
▪ animation-direction (opcional): define se uma animação deve ser reproduzida 
para frente, para trás ou em ciclos alternados. A propriedade animation-
direction pode ter os seguintes valores: 
‒ normal - a animação é reproduzida normalmente (para frente). Este é o 
padrão; 
‒ reverse - a animação é reproduzida na direção reversa (para trás); 
‒ alternate - a animação é reproduzida primeiro para a frente e depois 
para trás; 
‒ alternate-reverse - a animação é reproduzida primeiro para trás e depois 
para a frente. 
▪ animation-iteration-count (opcional): o número de vezes que a animação deve 
ser executada. É possível usar o valor infinite para fazer a animação continuar 
para sempre. 
▪ animation-fill-mode (opcional): essa propriedade especifica um estilo para o 
elemento de destino quando a animação não está sendo reproduzida (antes 
de começar, depois de terminar ou ambos). A propriedade animation-fill-mode 
pode ter os seguintes valores: 
‒ none - valor padrão. A animação não aplicará nenhum estilo ao 
elemento antes ou depois de sua execução; 
‒ forwards - o elemento manterá os valores de estilo definidos pelo último 
quadro-chave (depende da direção e da contagem da iteração da 
animação); 
 
 
 Design para Front End – Página 46 de 112 
‒ backwards - o elemento obterá os valores de estilo definidos pelo 
primeiro quadro-chave (depende da direção da animação) e os manterá 
durante o período de atraso da animação; 
‒ both - a animação seguirá as regras para frente e para trás, estendendo 
suas propriedades em ambas as direções. 
▪ animation-play-state (opcional): pausa/reproduz a animação. 
As animações também podem ser escritas de forma abreviada com as 
seguintes propriedades: animation-name, animation-duration, animation-timing-
function, animation-delay, animation-iteration-count e animation-direction. 
Resumo das propriedades de animação: 
Propriedade Valores da propriedade 
animation-name nome 
animation-duration Xs, Xms, % 
animation-timing-function ease, ease-out, ease-in, ease-in-out, linear, cubic-
bezier(x1, y1, x2, y2) 
animation-delay Xs, Xms 
animation-direction normal, reverse, alternate, alternate-reverse 
animation-iteration-count X, infinite 
animation-fill-mode forwards, backwards, both, none 
animation-play-state paused, running 
 
Exemplos de animação 
1. Animação com delay de 2 segundos e duração de 5 segundos, onde a div se 
move para diferentes posições e muda a cor de fundo. Ela acontece 
infinitamente e anima para frente e para trás de forma alternada: 
 
 
 
 Design para Front End – Página 47 de 112 
div { 
 width: 100px; 
 height: 100px; 
 background-color: red; 
 position: relative; 
 animation-name: example; 
 animation-duration: 5s; 
 animation-timing-function: linear; 
 animation-delay: 2s; 
 animation-iteration-count: infinite; 
 animation-direction: alternate; 
 } 
 
@keyframes example { 
 0% {background-color:red; left:0px; top:0px;} 
 25% {background-color:yellow; left:200px; top:0px;} 
 50% {background-color:blue; left:200px; top:200px;} 
 75% {background-color:green; left:0px; top:200px;} 
 100% {background-color:red; left:0px; top:0px;} 
 } 
2. Animação que roda automaticamente, onde a div começa com a cor vermelha, 
com 0.3 do seu tamanho e em formato circular (border-radius: 100%), e termina 
com a cor amarela, com 1.5 do seu tamanho e em formato quadrado. Ela 
acontece infinitamente e anima para frente e para trás de forma alternada: 
#animation-2 { 
 height: 100px; 
 width: 100px; 
 margin: 0 auto; 
 background-color: red; 
 animation-name: animation2; 
 animation-duration: 1.5s; 
 animation-timing-function: ease-out; 
 animation-delay: 0; 
 animation-direction: alternate; 
 animation-iteration-count: infinite; 
 animation-fill-mode: none; 
 animation-play-state: running; 
 } 
 
 @keyframes animation2 { 
 0% { 
 transform: scale(.3); 
 background-color: red; 
 border-radius: 100%; 
 } 
 50% { 
 background-color: orange; 
 } 
 100% { 
 transform: scale(1.5); 
 background-color: yellow; 
 
 
 Design para Front End – Página48 de 112 
 } 
 } 
3. Animação dupla: 
a. Pulse: mudança de cor contínua (vermelho para laranja); 
b. Segunda: mudança de posição em dois estágios: em 50%, depois 80% 
e finaliza na posição inicial. 
#animation-3 { 
 height: 100px; 
 width: 100px; 
 margin: 0 auto; 
 background-color: red; 
 animation: 
 pulse 3s ease infinite alternate, 
 nudge 5s linear infinite alternate; 
 border-radius: 100%; 
 } 
 
@keyframes pulse { 
 0%, 100% { 
 background-color: red; 
 } 
 50% { 
 background-color: orange; 
 } 
} 
 
@keyframes nudge { 
 0%, 100% { 
 transform: translate(0, 0); 
 } 
 
 50% { 
 transform: translate(150px, 0); 
 } 
 
 80% { 
 transform: translate(-150px, 0); 
 } 
} 
 
 
 
 Design para Front End – Página 49 de 112 
 Noções de UI e UX 
UX (user experience) Design é o processo de projetar produtos físicos ou 
digitais que são úteis, fáceis de usar e oferecem uma ótima experiência na interação 
com eles. No processo de criação de um produto, o UX Designer deve passar por 
várias etapas: 
 
Fonte: CANZIBA, 2018. 
1. Descoberta e Planejamento: é o primeiro estágio do processo de UX, onde 
primeiro tocamos/discutimos a ideia por trás de nosso produto. O objetivo 
dessa etapa é que a equipe tenha uma ideia clara sobre o produto que irá 
projetar e desenvolver. Discutimos a ideia do projeto e a visão do cliente, 
fazemos entrevistas, analisamos o orçamento e desenhamos o roteiro. 
2. Estratégia UX: é aqui que as equipes realizam pesquisas profundas 
relacionadas à ideia que foi fornecida por um cliente para criar a que queremos 
construir para nós mesmos. Nessa fase é onde entendemos o cliente, os 
competidores, os usuários, os objetivos do negócio, os stakeholders e fazemos 
medições. 
3. Pesquisa UX: concentra-se em entender o produto em si, o comportamento do 
usuário com o ele, suas necessidades, dores e motivações para usar nossos 
produtos. Nessa etapa são realizadas pesquisas, a exploração do problema, 
testes e revisão do que foi feito. 
 
 
 Design para Front End – Página 50 de 112 
4. Análise UX: é nessa etapa que medimos a interação entre um usuário e a 
interface do usuário; muitas vezes, neste caso, pode ser um aplicativo, um 
produto digital ou até mesmo o próprio design. É onde são feitas análises de 
caso de uso, as personas e a estrutura de dados. 
5. Design: é nessa etapa que desenvolvemos o design do produto em si. Aqui 
são feitos os modelos no Sketch, a prototipagem, o design visual e os fluxos 
de interação. 
6. Produção: é nessa etapa, que pode começar com o design do processo de 
UX, especialmente quando o desenvolvimento do o produto se inicia, já que é 
a fase em que começa a dar feedback sobre um produto, que podemos ver, 
tocar e sentir visualmente. Nela são feitos testes, medições, feedback e 
aperfeiçoamento do produto. 
Para alcançar essa ótima experiência, Peter Morville desenvolveu a 
ferramenta UX Honeycomb, que explica as várias facetas do UX design: 
 
Fonte: WESOLKO. 2016. 
Cada faceta do UX design pode ser definida por este diagrama como: 
 
 
 Design para Front End – Página 51 de 112 
▪ Utilizável (usable): o sistema no qual o produto ou serviço é entregue deve ser 
simples e fácil de usar. Os sistemas devem ser projetados de forma familiar e 
fácil de entender. A curva de aprendizado pela qual um usuário deve passar 
deve ser a mais curta e indolor possível. 
▪ Útil (useful): o produto ou serviço de uma empresa precisa ser útil e preencher 
uma necessidade. Se o produto ou serviço não for útil ou atender aos desejos 
ou necessidades do usuário, não há um propósito real para o produto em si. 
▪ Desejável (desirable): a estética visual do produto, serviço ou sistema precisa 
ser atraente e fácil de traduzir. O design deve ser mínimo e direto ao ponto. 
▪ Localizável (findable): as informações precisam ser localizáveis e fáceis de 
navegar. Se o usuário tiver um problema, ele deve ser capaz de encontrar uma 
solução rapidamente. A estrutura de navegação também deve ser configurada 
de forma que faça sentido. 
▪ Acessível (accessible): o produto ou serviços devem ser projetados de forma 
que até mesmo pessoas com deficiência possam ter a mesma experiência de 
usuário que os outros. 
▪ Credível (credible): a empresa e seus produtos ou serviços precisam ser 
confiáveis. 
A partir dessas várias facetas é que temos o valor do produto, ou seja, uma 
ótima experiência do usuário. 
UI, por outro lado, é a parte em que projetamos interfaces de usuário para 
diferentes softwares de computador, aplicativos móveis, videogames e até mesmo 
para máquinas diferentes, como uma interface ATM, de máquina de lavar, de telas de 
carro ou qualquer interface física e digital que nosso usuário tenha que interagir. É 
nela onde projetamos algo mais direcionado para o produto em si, por exemplo: a 
forma dos botões, os campos de formulário, etc. 
 
 
 Design para Front End – Página 52 de 112 
As interfaces do usuário (user interface) são os pontos de acesso onde os 
usuários interagem com os designs. Eles vêm em três formatos: 
▪ Interfaces gráficas do usuário (GUIs) - os usuários interagem com 
representações visuais em painéis de controle digital. A área de trabalho de 
um computador é uma GUI. 
▪ Interfaces controladas por voz (VUIs) - os usuários interagem com elas por 
meio de suas vozes. A maioria dos assistentes inteligentes - por exemplo, Siri 
no iPhone e Alexa nos dispositivos Amazon - são VUIs. 
▪ Interfaces baseadas em gestos - os usuários se envolvem com espaços de 
design 3D por meio de movimentos corporais: por exemplo, em jogos de 
realidade virtual (VR). 
A grande diferença entre UI e UX é que UX analisa a experiência geral do 
produto, enquanto a UI se concentra mais na aparência, como fontes, cores, botões, 
layout e espaços. Observe o exemplo abaixo: 
 
Fonte: CANZIBA, 2018 
Para ter bons resultados na implementação da UI ao lado do front-end, deve 
haver uma grande colaboração entre a equipe de design e a equipe de front-end. 
Obter insights sobre o produto desde os estágios iniciais dará aos desenvolvedores 
front-end tempo para pesquisar diferentes tipos de estruturas que eles podem usar 
 
 
 Design para Front End – Página 53 de 112 
durante o processo de desenvolvimento, como Bootstrap, Bulma, Tailwind, Material 
Design ou Foundation. Eles também podem preparar facilmente o espaço de trabalho 
para esse momento ao decidir sobre diferentes ferramentas, como CSS, pré-
processadores, como SASS ou LESS, ferramentas de automação, como gulp ou 
grunt, e até mesmo frameworks JavaScript, como Angular, React ou Vue. 
 
Design Systems 
De acordo com HACQ (2019), Design Systems “é a única fonte de verdade 
que agrupa todos os elementos que permitirão às equipes projetar, realizar e 
desenvolver um produto” (tradução livre). Ele é um documento vivo que possui todos 
componentes de UI e padrões visuais de uma empresa, marca, produto ou 
experiência. Um bom design system é o que vai unir a identidade do produto com os 
princípios da empresa, as melhores práticas de usabilidade e acessibilidade para 
construir componentes e padrões visuais que atendam aos usuários. 
Mais que padrões visuais, o Design System expressa também a mensagem 
que a empresa ou produto quer passar para seu usuário final, e serve para facilitar a 
comunicação com os diferentes times (desenvolvimento, design, produto etc.). É um 
documento muito importante para manter a consistência visual e a experiência de uso 
como um todo, e isso fica fácil tendo os padrões bem definidos. 
Com o Design System, os desenvolvedores são capazes de entender qual 
sistema de grid foi usado no estágio de design sendo então mais fácil para eles 
decidirem se devem ir com alguns frameworks prontos, como Bootstrap, ou criar algo 
novo do zero. Além disso, oDesign System também dará aos desenvolvedores mais 
insights, fazendo-os entender quais tipos de componentes de UI serão incluídos na 
interface do usuário, por exemplo, qualquer componente exclusivo em comparação 
com os padrão (botões, entradas, formulários, guias e assim por diante), qualquer 
layout exclusivo ou se há componentes de design extras para os próximos recursos. 
 
 
 Design para Front End – Página 54 de 112 
 
 
Fonte: HACQ, 2019. 
Não existe uma estrutura padrão em relação ao que um Design Systems deve 
ter, isso depende da necessidade da equipe e do tipo de projeto. De uma forma geral, 
um Design Systems possui a seguinte estrutura: 
 
 
 Design para Front End – Página 55 de 112 
 
Fonte: SERRADAS, 2018. 
Como é possível ver pela imagem, a estrutura é dividida em 4 grandes blocos: 
▪ Blocos de construção (building blocks): é onde se encontra a paleta de cor, a 
tipografia, definição de grid, iconografia etc. Ou seja, é o bloco onde são 
definidos os padrões básicos de design. 
▪ Biblioteca de Padrões (Pattern Library): é uma “subclasse no sistema de 
design, é o conjunto de padrões de design para uso em uma empresa” 
(SERRADAS, 2018). Ou seja, é onde se encontram os templates, módulos, 
componentes e elementos que serão usados por padrão. Essa parte pode ser 
construída apenas a parte visual ou já ter os códigos de cada elemento para 
implementação. 
▪ Regras (rules): onde se encontram as regras de design, diretrizes de 
implementação e diretrizes editoriais. Ou seja, é onde são definidos as regras 
de o que deve ser implementado, onde e de qual forma. 
▪ Guia de estilos (style guide): é “uma documentação que descreve o próprio 
sistema de design: como os produtos devem parecer e se comportar, padrões 
 
 
 Design para Front End – Página 56 de 112 
de interface do usuário como tamanho de fonte, cores, botões e etc.” 
(SERRADAS, 2018). 
Muitas empresas possuem seu Design System disponível para o público, 
abaixo estão alguns exemplos para se ter como referência: 
Material Design - https://material.io/. 
 
Atlassian - https://atlassian.design/. 
 
 
 
 
https://material.io/
https://atlassian.design/
 
 
 Design para Front End – Página 57 de 112 
Polaris - https://polaris.shopify.com/. 
 
 
Atomic Design 
O design atômico é uma metodologia composta por cinco estágios distintos 
trabalhando juntos para criar sistemas de design de interface de uma maneira mais 
deliberada e hierárquica. Os cinco estágios do projeto atômico são: 
 
Fonte: FROST, 2018. 
1. Átomos: servem como blocos de construção básicos que abrangem todas as 
nossas interfaces de usuário. Eles incluem elementos HTML básicos, como 
rótulos de formulários, entradas, botões e outros que não podem ser divididos, 
mas sem deixar de ser funcionais. 
https://polaris.shopify.com/
 
 
 Design para Front End – Página 58 de 112 
2. Moléculas: são grupos relativamente simples de elementos de UI funcionando 
juntos como uma unidade. Por exemplo, um rótulo de formulário, entrada de 
pesquisa e botão podem ser unidos para criar uma molécula de formulário de 
pesquisa. 
 
Fonte: FROST, 2018. 
3. Organismos: são componentes UI relativamente complexos compostos por 
grupos de moléculas e/ou átomos e/ou outros organismos. Esses organismos 
formam seções distintas de uma interface. 
 
Fonte: FROST, 2018. 
Enquanto alguns organismos podem consistir em diferentes tipos de 
moléculas, outros organismos podem consistir na mesma molécula repetida 
continuamente. Por exemplo, em uma loja de roupas, podemos ter vários módulos de 
produtos dentro de um organismo. 
4. Modelos (templates): são objetos de nível de página que colocam 
componentes em um layout e articulam a estrutura de conteúdo subjacente do 
design. 
 
 
 Design para Front End – Página 59 de 112 
 
Fonte: FROST, 2018. 
Esse modelo de página inicial exibe todos os componentes de página 
necessários funcionando juntos, o que fornece contexto para essas moléculas e 
organismos relativamente abstratos. Ao elaborar um sistema de design eficaz, é 
fundamental demonstrar como os componentes se parecem e funcionam juntos no 
contexto de um layout para provar que as peças somam um todo que funciona bem. 
Outra característica importante dos modelos é que eles se concentram na 
estrutura de conteúdo subjacente da página e não no conteúdo final. 
5. Páginas: são instâncias específicas de modelos que mostram a aparência de 
uma UI com conteúdo representativo real no local. Além de demonstrar a 
interface final como seus usuários a verão, as páginas são essenciais para 
testar a eficácia do sistema de design subjacente. É no estágio da página que 
 
 
 Design para Front End – Página 60 de 112 
podemos dar uma olhada em como todos esses padrões se mantêm quando 
o conteúdo real é aplicado ao sistema de design. 
 
Fonte: FROST, 2018. 
As páginas também fornecem um local para articular variações em modelos, 
o que é crucial para estabelecer sistemas de design robustos e confiáveis. 
Vantagens em usar o Atomic Design 
▪ O design atômico se aplica a todas as interfaces de usuário, não apenas às 
baseadas na web. 
▪ Uma das maiores vantagens que o design atômico oferece é a capacidade de 
alternar rapidamente entre o abstrato e o concreto. 
▪ Com ele, temos a separação limpa entre estrutura e conteúdo. 
 
 
 Design para Front End – Página 61 de 112 
 
Fonte: FROST, 2018. 
 
 
 Design para Front End – Página 62 de 112 
 CSS Layout 
As técnicas de layout de página CSS nos permitem pegar os elementos 
contidos em uma página da web e controlar onde eles são posicionados, os outros 
elementos ao redor deles, seu contêiner pai e a janela/viewport principal. 
 
Fluxo normal do CSS 
Elementos em bloco (display: block): 
▪ Os elementos aparecem empilhados uns sobre os outros; 
▪ O conteúdo de um elemento de nível de bloco é 100% da largura de seu 
elemento pai e tem a mesma altura de seu conteúdo. 
Elementos em linha (display: inline): 
▪ Os elementos aparecem um ao lado do outro; 
▪ O conteúdo de um elemento de nível de linha tem a mesma altura e largura de 
seu conteúdo. 
Elementos em bloco e linha (display: inline-block): 
▪ É a junção dos comportamentos dos valores inline + block: é possível definir 
uma largura (width) e altura (height) como no display: block e é possível deixar 
um elemento do lado do outro, da mesma forma que fazemos com o display: 
inline. 
 
 
 Design para Front End – Página 63 de 112 
 
Fonte: http://devfuria.com.br/html-css/display/. 
 
Os primórdios do layout web 
▪ Layout de tabela (legado) 
Antes mesmo de CSS básico ser suportado de forma confiável em 
navegadores, os desenvolvedores web também costumavam usar tabelas para 
layouts de páginas da web inteiras, colocando seus cabeçalhos, rodapés, colunas 
diferentes etc. em várias linhas e colunas da tabela. 
Problemas ao usar o layout de tabela: são inflexíveis, muito pesados na 
marcação, difíceis de depurar e semanticamente errados (por exemplo, usuários de 
leitores de tela têm problemas para navegar nos layouts de tabelas). 
 
Fonte: https://www.pngwing.com/pt/free-png-tcyby. 
http://devfuria.com.br/html-css/display/
https://www.pngwing.com/pt/free-png-tcyby
 
 
 Design para Front End – Página 64 de 112 
▪ Float (legado) 
Float tem sido comumente usado para criar layouts de sites inteiros com 
várias colunas de informações flutuantes para que fiquem lado a lado. A manipulação 
dos elementos com float é comumente usado junto com elementos de margem, borda, 
altura/largura etc. 
 
Fonte: https://css-tricks.com/almanac/properties/f/float/. 
 
CSS Flexbox 
O módulo Flexbox Layout (Caixa Flexível) visa fornecer uma forma mais 
eficiente de dispor, alinhar e distribuir o espaço entre os itens em um contêiner, 
mesmo quando seu tamanho é desconhecido e/ou dinâmico (daí a palavra “flex”). 
Características: 
▪ Foco no fluxo deconteúdo; 
▪ Usado para projetar layouts unidimensionais simplificados, com uma 
disposição em linha reta; 
▪ Define propriedades para o pai (contêiner) e seus filhos (itens); 
https://css-tricks.com/almanac/properties/f/float/
 
 
 Design para Front End – Página 65 de 112 
▪ É mais indicado para os componentes de aplicativos e layouts em pequena 
escala. 
 
Fonte: https://css-tricks.com/snippets/css/a-guide-to-flexbox/. 
Comandos de Flexbox: 
▪ Flex contêiner (pai): 
‒ display: flex; - Define o elemento como um flex contêiner, tornando os 
seus filhos flex-itens. 
‒ flex-direction: row | row-reverse | column | column-reverse; - Define a 
direção dos flex itens. 
‒ flex-wrap: wrap | nowrap | wrap-reverse; - Define se os itens devem 
quebrar ou não a linha. 
‒ flex-flow: <flex-direction> <flex-wrap>; - Atalho para as propriedades 
flex-direction e flex-wrap. 
‒ justify-content: flex-start | flex-end | center | space-between | space-
around | space-evenly; - Alinha os itens flex no contêiner de acordo com 
a direção. 
‒ align-items: stretch | flex-start | flex-end | center | baseline; - Alinha os 
flex itens de acordo com o eixo do contêiner. 
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 
 
 Design para Front End – Página 66 de 112 
‒ align-content: flex-start | flex-end | center | space-between | space-
around | space-evenly | stretch; - Alinha as linhas do contêiner em 
relação ao eixo vertical (só funciona se existir mais de uma linha de flex-
itens). 
 
Fonte: https://css-tricks.com/snippets/css/a-guide-to-flexbox/. 
▪ Flex itens (filhos): 
‒ order: 0; - Modifica a ordem dos flex itens. 
‒ flex-grow: 0; - Define a habilidade de um flex item crescer. 
‒ flex-shrink: 1; - Define a capacidade de redução de tamanho do item. 
‒ flex-basis; - Indica o tamanho inicial do flex item antes da distribuição do 
espaço restante. 
‒ align-self: auto; - serve para definirmos o alinhamento específico de um 
único flex item dentro do nosso contêiner. 
 
 
 
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 
 
 Design para Front End – Página 67 de 112 
CSS Grid 
CSS Grid Layout (também conhecido como “Grid”), é um sistema de layout 
bidimensional, baseado em grade, que visa nada menos do que mudar 
completamente a maneira como projetamos interfaces de usuário baseadas em 
grade. 
Características: 
▪ Foco na posição de conteúdo; 
▪ Usado para criação de layouts bidimensionais de complexidade maior; 
▪ Define propriedades para linhas e colunas, como uma tabela; 
▪ É ideal para organizar a estrutura de um esquema com elementos de nível 
mais elevado, como cabeçalhos, rodapés, seções e sidebar. 
 
Fonte: https://css-tricks.com/snippets/css/complete-guide-grid/. 
Comandos de Grid: 
https://css-tricks.com/snippets/css/complete-guide-grid/
 
 
 Design para Front End – Página 68 de 112 
▪ Grid contêiner (pai): 
‒ display: grid; - Define o elemento 
como um grid contêiner. 
‒ grid-template-column: (3, 1fr); - 
Define o número total de colunas 
que serão criadas no grid. 
‒ grid-template-rows: auto; - 
Define a quantidade de linhas no 
grid. 
‒ grid-template-areas: “area area area”; - Define áreas específicas no grid. 
O ponto (.) é usado para criar áreas vazias. 
‒ gap: <grid-row-gap> <grid-column-gap>; - Define o gap (espaço) entre 
os elementos do grid (linhas e colunas). 
‒ grid-auto-columns: 1fr; - Define o 
tamanho das colunas do grid implícito 
que são geradas automaticamente 
quando um elemento é posicionado em 
uma coluna que não foi previamente 
definida. 
‒ grid-auto-rows: 1fr; - Define o tamanho 
das linhas do grid implícito que são 
geradas automaticamente quando um 
elemento é posicionado em uma linha que não foi definida. 
‒ place-items: <justify-items><align-items>; - Justifica os itens do grid em 
relação ao eixo x (horizontal) e ao eixo y (vertical). 
 
 
 Design para Front End – Página 69 de 112 
‒ place-content: <justify-content><align-content>; - Justifica o conteúdo 
dos itens do grid em relação ao eixo x (horizontal) e ao eixo y (vertical) 
em relação à célula. 
 
 
Fonte: https://css-tricks.com/snippets/css/complete-guide-grid/. 
▪ Grid itens (filhos): 
‒ grid-column: 3 / span 2; - Define quais colunas serão ocupadas pelo grid 
item. 
‒ grid-row: 3 / 4; - Define quais linhas serão ocupadas pelo grid item. 
https://css-tricks.com/snippets/css/complete-guide-grid/
 
 
 Design para Front End – Página 70 de 112 
‒ grid-area: header; - Define a área do item do grid. 
‒ place-self: center stretch; - Justifica o item do grid em relação ao eixo x 
(horizontal) e ao eixo y (vertical) e em relação à célula. 
 
 
 
 Design para Front End – Página 71 de 112 
 Técnicas de Design Responsivo 
Durante a elaboração de um projeto, é importante pensar na responsividade 
da aplicação para diferentes dispositivos. Existem dois padrões que normalmente são 
usados: o Responsive Design e o Adaptive Design. 
 
Responsive Design 
Responsive Design (ou Design Responsivo) é fluido e se adapta ao tamanho 
da tela, independentemente do dispositivo de destino. Esse padrão usa media queries 
CSS para alterar estilos com base no dispositivo de destino, como tipo de exibição, 
largura, altura etc., e apenas um deles é necessário para que o site se adapte às telas 
diferentes. 
 
Fonte: http://www.cuellarstudio.com/hello-world/. 
O design responsivo não oferece tanto controle quanto o adaptativo, mas 
exige muito menos trabalho para construir e manter. Os layouts responsivos também 
são fluidos e, embora os adaptativos possam usar, e usam, porcentagens para dar 
http://www.cuellarstudio.com/hello-world/
 
 
 Design para Front End – Página 72 de 112 
uma sensação mais fluida ao dimensionar, eles podem, novamente, causar um salto 
quando uma janela é redimensionada. 
 
Adaptive Design 
Adaptive Design (ou design adaptável) usa layouts estáticos baseados em 
pontos de interrupção que não respondem, uma vez que são carregados inicialmente. 
Adaptive funciona para detectar o tamanho da tela e carregar o layout apropriado para 
ele – geralmente é projetado um site adaptável para seis larguras de tela comuns: 
▪ 320; 
▪ 480; 
▪ 760; 
▪ 960; 
▪ 1200; 
▪ 1600. 
Este design é útil para adaptar um site existente a fim de torná-lo mais 
compatível com dispositivos móveis. Isso permite que você controle o design e 
desenvolva para viewports múltiplas e específicas. O número de viewports que será 
usado para programar as páginas depende inteiramente do programador. No entanto, 
ele oferece um certo controle (por exemplo, sobre o conteúdo e o layout) que não 
existe necessariamente com o design responsivo. 
 
 
 
 
 
 
 Design para Front End – Página 73 de 112 
 
Fonte: http://www.cuellarstudio.com/hello-world/. 
Geralmente, você começaria projetando para uma janela de visualização de 
baixa resolução (mobile-first) e aumentaria para garantir que o design não fosse 
restringido pelo conteúdo. Como mencionado anteriormente, é padrão projetar para 
seis resoluções. No entanto, você pode tomar uma decisão mais informada, 
observando sua análise da web para os dispositivos mais comumente usados e, em 
seguida, projetando para essas janelas de visualização. 
 
Responsive vs Adaptive Design 
À primeira vista, parece que o adaptativo requer mais trabalho, pois você 
precisa projetar layouts para no mínimo seis larguras. No entanto, responsivo pode 
ser mais complexo, pois o uso indevido de consultas de mídia (ou mesmo não as 
usar) pode causar problemas de exibição e desempenho. O design responsivo é 
geralmente a técnica preferida apenas por causa do trabalho contínuo que o design 
adaptativo exige. 
Responsive design é mais usado por ser mais rápido em desenvolvimento e 
manutenção, mas Adaptive design é mais performático e tem uma melhor usabilidade 
http://www.cuellarstudio.com/hello-world/
 
 
 Design para Front End –