Como deixar o Layout Responsivo no seu site |

Подписаться 445 тыс.

Просмотров 23 тыс.

50% 1

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...

Наука

Опубликовано:

2 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 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!!

@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)

@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? 🤿💙

@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!

@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. 🤿💙

@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! 💙

@alexgondev Год назад

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

@alura Год назад

Que bom que curtiu, Alex ! Valeu pelo carinho 💙

@matheusporezeli1555 Год назад

Mônica melhor instrutora😊❤️

@alura Год назад

Mônica é incrível mesmo! 💙

@FialhoHaniel Год назад

Sensacional

@alura Год назад

Ficamos felizes que esteja gostando, Fialhão 💙

@guteninja764 10 дней назад

The goat os back

@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).

@oviniciosneves Год назад

Sou fã da Moni!

@alura Год назад

A Moni é incrível mesmo 🤩💙

@tales890 7 месяцев назад

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

@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?

@romeumaier1838 Год назад

hundredth like

@nossamusik 4 месяца назад

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

@FzAndrade 3 месяца назад

olha na documentação

@jonathansoares7936 8 месяцев назад

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 8 месяцев назад

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!

@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! 😉💙