Curso gratuito Fundamentos do Design Responsivo

Há alguns anos o uso dos dispositivos móveis para navegação na web vem crescendo cada vez mais. A praticidade de levar a internet no bolso para todos os lugares aumentou consideravelmente a participação dos dispositivos móveis nos resultados dos relatórios de acesso. E se você ainda não tem um site ou um blog responsivo você está perdendo tráfego e dinheiro! O ser humano preza pela facilidade, nós gostamos de obter as informações e realizar as nossas tarefas de forma mais ágil e rápida. Essa busca pela facilidade é frustrada quando alguém entra no site da sua empresa e não consegue navegar corretamente ou ler o que está na tela do smartphone, e a solução instantânea para essa frustração digital é sair do site e buscar outra fonte de informação (se for o caso, é claro). Pronto, você perdeu uma visita e, quem sabe, algum dinheiro.

Vídeo de apresentação do curso de Fundamentos do Design Responsivo para Web (este está em inglês)

A Udacity tem um curso gratuito de Fundamentos do Design Responsivo para Web feito em parceria com o Google! As aulas são online, com legendas em português, super práticas e fáceis de entender para quem já tem algum conhecimento em CSS e HTML. E se você não tiver este conhecimento inicial pode fazer o curso gratuito de Introdução ao HTML e CSS, também da Udacity.

Os cursos são ótimos para você que é um blogueiro e quer fazer ajustes básicos no seu blog mas não entende nada de CSS e fica quebrando a cabeça ao tentar consertar alguma coisa. As lições são interativas, isto é, entre as aulas você fará alguns testes para verificar se você está realmente aprendendo.

Design Responsivo – Flexbox e Media Queries

Media Query e CSS Flexbox, essas são duas técnicas que facilitarão muito a sua vida quando o assunto é responsividade. A Media Query é uma técnica que lhe permite fazer mudanças no CSS do site baseadas no tamanho da janela de visualização do dispositivo onde o site está sendo acessado. Por exemplo, é possível criar uma media query para fazer com que nas telas maiores do que 481px o logo do seu site seja exibido na esquerda do cabeçalho; ou por outro lado, você pode criar uma media query para exibir o logo centralizado em telas menores do que 480px.

Media Query CSS
Media Query no curso de Fundamentos do Design Responsivo para Web

Já o CSS Flexbox permite que você reordene a posição das DIVs do seu site de acordo com o tamanho da janela de visualização do dispositivo, permitindo que um trecho do site que fica mais próximo do rodapé em uma tela grande seja exibido próximo ao cabeçalho quando o site for visualizado em um smartphone, por exemplo.

Udacity Design Responsivo para web
Tela do curso mostrando o uso do Flexbox

Outra dica relacionada com o tema, mas que não está neste curso da Udacity é o “CSS Grid Layout”, uma especificação do W3C mais recente. Você pode saber mais sobre ela nestes links:

https://drafts.csswg.org/css-grid/#intro (em inglês)
https://imasters.com.br/desenvolvimento/adeus-flexbox-bem-vindo-css-grid-layout/
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout (em inglês)

Não pretendo entrar em detalhes sobre essas duas técnicas agora, pois irei falar delas em um outro artigo sobre dicas para CSS. E se você gostou do que viu aqui e quiser aprender mais basta se inscrever na Udacity e fazer o curso de Design Responsivo.

Deixe uma resposta