Fundamentos do Web Design Responsivo – Udacity

R$0,00

Neste curso você vai aprender os fundamentos do web design responsivo com Pete LePage do Google,  criando sua própria página web responsiva que funcionará bem em qualquer dispositivo – smartphone, tablet, desktop ou qualquer outro.

Entre para Acessar

Descrição do Curso

A maneira como as pessoas navegam na web está mudando rapidamente – cada vez menos os usuários acessam a web em uma mesa na frente de um monitor grande com um teclado e mouse. A web está cada vez mais usada em dispositivos portáteis como smartphones e tablets. Ao projetar um site para ser responsivo, ele funcionará bem em qualquer dispositivo que seus usuários estejam usando.


Pré-requisitos

Você deve ter facilidade em ler e escrever HTML e CSS. Também deverá ser capaz de inspecionar e modificar sites usando ferramentas de desenvolvimento do navegador.


O que você irá aprender

Você vai começar a explorar o que faz um site ágil e como alguns padrões comuns de design responsivo funcionam em diferentes dispositivos. A partir daí, você vai aprender como criar seu próprio layout responsivo usando media queries do CSS e a tag viewport. Conforme você avança, você vai testar com pontos de interrupção maiores e menores, e otimização de texto para leitura.


Conteúdo

Overview

Este curso é composto por 5 aulas. A primeira é uma visão geral de design responsivo e introduz a maneira de mudar o seu pensamento a medida em que você vai do projeto desktop, ao design responsivo. Lições 2, 3, 4 e 5 irão cobrir os conceitos teóricos importantes de design responsivo, e inclui diversos exercícios práticos para implementar o que você aprendeu.

Lição 1: Por que Responsivo?

O que é web design responsivo e por que é importante? Que tipos de dispositivos devem ser o alvo de nosso projeto? Como podemos aproveitar melhor as diferentes capacidades de cada dispositivo para proporcionar grandes experiências para os usuários? Você também vai se certificar de que seu ambiente de desenvolvimento está pronto para começar.

Assuntos abordados:

  • O que é design responsivo?
  • Por que o trabalho de design responsivo para qualquer dispositivo?
  • Depuração remota e emulação no navegador.

Lição 2: Começando Pequeno

A melhor maneira de começar é começar pequeno e construir a partir disso. Nesta lição, vamos cobrir os principais componentes que fazem um site ficar ótimo em uma tela pequena, incluindo a definição da janela de exibição, a adicição de conteúdo e o dimensionamento do conteúdo para a janela de exibição. Você vai começar o projeto cidade natal, certificando-se de que ele fique bom em uma tel pequena.

Assuntos abordados:

  • Por que começar pequeno e construir?
  • O que é a janela de exibição?
  • Redimensionar o conteúdo para a janela de exibição.
    • Evitando itens de tamanhos estáticos.
  • Componentes de toque, e por que eles devem ser grandes.

Lição 3: Construindo

Uma vez que você tenha uma página otimizada para telas pequenas, é hora de começar a pensar sobre como eles vão parecer em telas maiores. Saiba como usar media queries CSS para adicionar pontos de interrupção que mudam o layout de acordo com o tamanho da tela ou outras características do dispositivo.

Assuntos abordados:

  • media queries CSS.
  • O que é um ponto de interrupção, e como escolher um.
  • Usando o flexbox CSS para modificar o layout.

Lição 4: Padrões Responsivos Comuns

Agora que você domina os conceitos básicos de design responsivo, você vai aprender e praticar alguns dos padrões de projeto de layout comum usados em sites. Você também vai fazer uma iteração no projeto cidade natal, criar pontos de interrupção para tablet e desktop layouts usando os padrões desta lição.

Assuntos abordados:

  • Padrão Mostly Fluid.
  • Padrão Drop Pattern.
  • Padrão Layout Shifter.
  • Padrão Off Canvas.

Lição 5: Otimizações

Aprenda estratégias para pontos de interrupção secundários utilizados para ajustar as margens ou padding em um elemento, ou aumentar o tamanho da fonte para torná-lo mais natural no layout. Você também vai aprender sobre estratégias para lidar com tabelas e legibilidade de texto ideal. No final da aula, você vai fazer uma iteração pela última vez no site cidade natal, adicionando pontos de interrupção secundários para realmente fazer a experiência se destacar.

Assuntos abordados:

  • Pontos de interrupção secundários.
  • Otimizar o layout de texto.
    • tamanho da fonte.
    • comprimento da linha ideal.
  • tabelas responsivas, e estratégias para lidar com elas.

Detalhes do Curso

Certificado

Não possui

Duração

~ duas semanas

Idioma

Inglês (Legendado)

Instituição

Udacity

Nível

Intermediário

Avaliações

Não há avaliações ainda.

Seja o primeiro a avaliar “Fundamentos do Web Design Responsivo – Udacity”

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *