Como deixar o Layout Responsivo no seu site |

Рет қаралды 23,215

Күн бұрын

Aprenda responsividade na prática com este tutorial sobre como transformar seu site num layout responsivo através do uso de ferramentas de desenvolvedor do seu navegador, o visual studio code e códigos CSS: media screen, container, propriedades CSS e mais.
Comece um teste com seu próprio projeto!
💻Capítulos:
00:00 - 00:37 - Introdução: Sites Responsivos
00:38 - 01:52 - Como visualizar o site para mobile (dispositivos móveis)
01:53 - 04:45 - Media screen, Media query e container no CSS
04:46 - 07:26 - Melhorias nas propriedades CSS
07:27 - 08:45 - Footer do site
08:46 - 09:08 - Faça seu próprio projeto responsivo e compartilhe
09:09 - 09:38 - Estude Front-End na Alura!
📄 Inscreva-se na Newsletter com conteúdos de Imersão, aprendizagem e Tecnologia da Alura, com emails do nosso CEO: www.alura.com.br/imersao
📲 Siga nosso conteúdo para Devs e Techers:
Instagram: / aluraonline
Facebook: / aluracursosonline
🎧 Podcast Hipsters.Tech: open.spotify.com/show/2p0Vx75...

Пікірлер: 38

@alura Жыл бұрын

➡Se interessou? Venha estudar a nossa formação de HTML e CSS para projetos web: www.alura.com.br/formacao-html-css

@mauricioaugusto642 Жыл бұрын

A Alura me surpreendeu demais. Achei uma das melhores plataformas para aprender programação. Gosto de usar muito para relembrar conceitos básicos.

@alura Жыл бұрын

Que feedback legal, Maurício. 🥹💙 Pode contar sempre com a gente, viu? É um prazer mergulhar com você nessa jornada. E se precisar de qualquer apoio com os estudos, pode nos chamar! 😉

@samuelferreira5745 Жыл бұрын

simples e objetivo. Alura a melhor escola de Tecnologia.

@alura Жыл бұрын

A gente fica feliz demais com feedbacks como esse, Samuel! 🥰 Obrigada por mergulhar com a gente nessa jornada. 💙

@BorisZaidan Ай бұрын

Mais de 2 semanas quebrando a cabeça, para colocar uma tela de login responsiva, assistir seu video em menos de 15 minutos consegui. obrigado!!

@angelosilvano1100 Жыл бұрын

Alura é a melhor plataforma de Tecnologia, 😊

@alura Жыл бұрын

Obrigada pelo reconhecimento, Angelo! É um prazer mergulhar no mundo da tecnologia com você! 💙

@higorproenca2648 Жыл бұрын

Excelente! Esse vídeo veio em um ótimo momento em que eu preciso justamente adaptar uma página para outros dispositivos

@alura Жыл бұрын

Que bom saber que te ajudamos, Higor! 🥰 Obrigada por nos acompanhar 💙 Pode contar com a gente!

@CynaraPeixoto Жыл бұрын

Eu tenho um Yoda igualzinho a ele! Comprei pra decoração do quarto do meu bebê, que era todo decorado com coisas do Star Wars (antes de voltar a ser modinha por conta de Disney)

@guteninja764 20 күн бұрын

The goat os back

@assiszang6191 Жыл бұрын

Eu realmente preciso ver mais vídeos como esse, sou backend a 7 anos e quando tenho q fazer algo no front chega me dar um frio no stômago 😂🤡

@alura Жыл бұрын

Hahahaha Assis, aqui no canal tem bastante conteúdo sobre esse tema que pode te ajudar.💙 Além disso, na plataforma, temos a Escola Front-End, que vai te ajudar do básico ao avançado e com certeza esse frio na barriga irá sumir. 😅😍 Acessa aqui: www.alura.com.br/escola-front-end Qualquer dúvida, chama a gente em alguma de nossas redes sociais, ok? 🤿💙

@Mognatti Жыл бұрын

Os cursos dessa instrutora são muito bons. Essa mina é braba dms

@alura Жыл бұрын

El é incrível, né?! A gente fica feliz demais em saber que curte os cursos. 🤿💙

@alexgondev Жыл бұрын

Eu fiz esse curso. Muito bom. Ótima didática!

@alura Жыл бұрын

Que bom que curtiu, Alex ! Valeu pelo carinho 💙

@klebercoelho99 10 ай бұрын

putz, me ajudou d+ esse vídeo, aprendi umas técnicas que eu não sabia, vlwwwwwwwww

@alura 10 ай бұрын

Que ótimo saber que te ajudamos, Kleber! 🤩 Obrigada por nos acompanhar, conta com a gente! 💙

@FialhoHaniel Жыл бұрын

Sensacional

@alura Жыл бұрын

Ficamos felizes que esteja gostando, Fialhão 💙

@matheusporezeli1555 Жыл бұрын

Mônica melhor instrutora😊❤️

@alura Жыл бұрын

Mônica é incrível mesmo! 💙

@oviniciosneves Жыл бұрын

Sou fã da Moni!

@alura Жыл бұрын

A Moni é incrível mesmo 🤩💙

@romeumaier1838 Жыл бұрын

hundredth like

@raulenriquefishman2616 6 ай бұрын

Parabens pelo Português. Vamos "SE" aventurar.

@Quitti.1 4 ай бұрын

Então basicamente, eu preciso abrir a condição ali no começo e depois ir alinhando tudo, de acordo com as classes que tenho no site, um por um, seguindo e olhando o modelo "mobile", certo?

@nossamusik 4 ай бұрын

Existem inúmeras resoluções de celulares, para cada uma delas o layout vai sofrer mudanças, sem falar, das sobreposições que acontecem, ou seja, você ajusta uma responsividade para uma tela, quando vai ajustar para outro dispositivo, desconfigura o que fez antes.

@FzAndrade 3 ай бұрын

você pode fazer a mesma coisa incluindo todos os tipos de layout (ou a maioria deles).

@tales890 8 ай бұрын

Ela ensina bem. Só que ai já é pra quem tem uma boa base msm.

@danielleitepereira6766 Жыл бұрын

Alguém sabe onde eu acesso o curso para criar esse site do zero?

@alura Жыл бұрын

Oie, Daniel! 🤗 O curso é esse aqui: www.alura.com.br/curso-online-html-css-praticando-html-css Se precisar de alguma ajuda durante seus estudos, pode nos chamar! 😉💙

@nossamusik 4 ай бұрын

Porque vc usa "vh" e "2em" ao inves de "%" e "px" ?

@FzAndrade 3 ай бұрын

olha na documentação

@jonathansoares7936 9 ай бұрын

Uma coisa que fico em dúvida, é normal algumas telas de celulares ficarem diferentes, as vezes cortadas? tem cel de largura menor que n fica legal... teria que fazer várias medias pra cada tipo de cel? Não é assim que vejo no curso, então queria entender melhor. Wuando tem figma só usam um número pra responsividade mobile. Só que não é todos os cels ficam bons. O que fica bom em um de 414px, não fica legal no de largura 360px por exemplo. Tem algo a mais que usa pra ficar perfeito de fato em todas as telas mobile?

@antonioevaldo4325 9 ай бұрын

Oi, Jonathan, tudo bem? Ao codificar páginas web, o ideal é que não hajam bugs ou problemas de layout, independente do tamanho de tela. Uma gama de tamanhos de tela que sugiro que o seu site seja responsivo seria de 360px a 2048px, que certamente já comporta a grande maioria dos usuários. O ideal é que a pessoa designer faça o design do mesmo site para diferentes tamanhos de tela (no figma, por exemplo), normalmente atendendo celulares, tablets e computadores. Então é comum ver um figma onde cada página do site tem três versões de tamanho dela, por exemplo: 360px, 768px e 1440px. E quanto aos tamanhos de tela superiores a 1440px ou que estão entre esses valores? Nesse caso, cabe a nós termos a habilidade de construir código HTML e CSS que se adapte bem a praticamente qualquer tamanho de tela, e isso envolve uma série de boas práticas, para além das media queries, como: evitar medidas absolutas e utilizar medidas que se adaptem ao tamanho da tela ou ao elemento pai; utilizar flexbox e grid para ajudar os elementos a se posicionarem de forma dinâmica; evitar definir larguras fixas; entre outras práticas. Espero ter ajudado!