Fale com a gente no WhatsApp Fale com a gente no WhatsApp

Curso de HTML5 + CSS3 - Web design responsivo

Aprenda os “ingredientes” para se criar um web design responsivo como: layout flexível, mídias flexíveis e Media Queries

Nível Iniciante Categoria Desenvolvimento Front-end

  • Curso com 04h01 de vídeos
  • Certificado com 10 horas
  • 12 exercícios

Sobre o curso

Por muitas vezes, um mesmo site é acessado por diversos tipos de dispositivos diferentes. É cada vez mais necessário que tenhamos que adaptar nossos sites para a quantidade gigantesca de diferentes tamanhos de tela. Precisamos nos manter sempre atualizados para podermos entregar um produto de qualidade.

Foi pensando nessa necessidade que criamos esse curso. No decorrer do curso iremos entender como funciona os medias queries e como podemos usar essa propriedade para deixar nosso site 100% adaptável. No final do curso, para praticar o que vamos aprender, iremos construir uma página simples, porém, muito rica na parte de adaptação da página para qualquer tipo de dispositivo

Por muitas vezes, um mesmo site é acessado por diversos tipos de dispositivos diferentes. É cada vez mais necessário que tenhamos que adaptar nossos sites para a quantidade gigantesca de diferentes tamanhos de tela. Precisamos nos manter sempre atualizados para podermos entregar um produto de qualidade.

Foi pensando nessa necessidade que criamos esse curso. No decorrer do curso iremos entender como funciona os medias queries e como podemos usar essa propriedade para deixar nosso site 100% adaptável. No final do curso, para praticar o que vamos aprender, iremos construir uma página simples, porém, muito rica na parte de adaptação da página para qualquer tipo de dispositivo

O que irá aprender?

Entre vários outros conteúdos conheceremos:

  • Usar os media queries.
  • Responsividade das imagens.
  • Flexbox responsivo.
  • Trabalhar com grid layout em diversos breakpoints.
  • Veremos o que são breakpoints.
  • Criaremos um projeto 100% responsivo do zero.

Pra quem é esse curso?

Esse curso é voltado para desenvolvedores que querem entender e se aprofundar na questão da responsividade da página, boas práticas e como se trabalhar com diversas ferramentas em diferentes tamanhos de telas.

Quais os pré-requisitos para esse curso?

Os pré-requisitos não são obrigatórios, são apenas sugestões. Eles dão uma base de parte do conhecimento que é interessante ter para um bom aproveitamento nesse curso.

Metodologia

  • Videoaulas
  • Texto e imagens
  • Início Imediato
  • Testes de aprendizado

Sobre o professor

Amauri Blanco Corrêa

Amauri Blanco Corrêa

Estudante de Análise e Desenvolvimento de Sistemas, apaixonado por tecnologia. Atualmente focado na área de front-end e iniciando uma grande e brilhante caminhada tanto profissionalmente quanto pessoalmente nesse universo que é a programação.

Conteúdo programático

  1. O que é design responsivo

    Nesta aula aprenderemos os conceitos de um layout responsivo, veremos exemplos e criaremos a base para seguir adiante com o curso

    6 aulas
    • Apresentação
    • O que é responsividade
    • O que são breakpoints
    • Características e exemplos responsivos
    • CSS Pixel, Device pixel ratio e Viewport
    • Questionário
  2. Responsividade na prática

    Nesta aula aprenderemos a criar nosso próprio container e manipular imagens da forma correta.

    6 aulas
    • O código-fonte deste curso está no GitHub!
    • Criando o próprio container
    • Como funciona os media queries
    • Deixando imagens responsivas
    • Definindo imagem por tamanho de tela
    • Questionário
  3. Flexbox responsivo

    Já nessa segunda aula, nós vamos ver como usar o flexbox ao nosso favor, deixando os elementos totalmente responsivos de adaptáveis.

    6 aulas
    • Deixando conteúdo flexível com wrap
    • Adaptando o gap para telas menores
    • Alterando direction do flex-container
    • Propondo exercício de fixação
    • Resolução do exercício
    • Questionário
  4. Grid layout Responsivo

    Na terceira aula do nosso curso, aprenderemos a usa o grid em todos os tamanhos de tela.

    9 aulas
    • Trabalhando com colunas relativas
    • Adaptando colunas para vários tamanhos de telas
    • Adicionando tamanho mínimo e máximo para os elementos em grid
    • Trabalhando com autofit responsivo
    • Desafio 01
    • Resolução do desafio 01
    • Desafio 02
    • Resolução do desafio 02
    • Questionário
  5. Projeto prático para exercitar

    Nessa última aulas criaremos um projeto totalmente responsivo do zero, utilizando tudo que aprendemos no decorrer do curso.

    9 aulas
    • Apresentação do projeto
    • Estruturando o header do projeto
    • Estilizando o header
    • Criando a primeira section
    • Iniciando a section dos cards
    • Finalizando o desktop com footer
    • Adaptando header para mobile
    • Ajustes nos cards
    • Ajustes finais e finalização do projeto
Download da ementa

Cursos relacionados

Algumas das formações onde esse curso está inserido

Utilizada e amada por milhares! Veja mais opiniões reais

  • Ótimo Curso!

    Depoimento - Gabriel
    HTML5 + CSS3 - Web design responsivo
    Gabriel São José do Rio Preto / SP
  • top demais! Muito obrigado!

  • Esse curso ficou excelente! Eu já fiz alguns fronts e sempre digo que não gosto de fazer front porque me bato demais com o CSS. Já fiz alguns cursos, vi tutoriais no YouTube e CSS nunca fez muito sentido pra mim. Eu até consigo chegar no resultado esperado, mas com muita labuta. Depois de fazer essa trilha de HTML e CSS tudo ficou muito mais claro pra mim. Tudo fez muito mais sentido e acredito que daqui em diante é muito provável que a minha opinião sobre front vai mudar.

  • Curso bem rico, cheio de dicas muito boas para tornar websites responsivos, com dicas sobre imagens, texto, flex, grid e até mesmo mobile. Finalmente aprendi a fazer o "menu de hamburguer", embora tenha nele alguns conteúdos que não foram de aulas que ppeguei até então (position absolute, transform: translateY). Muito bom! Eu só queria ainda mais e mais dicas, talvez como um upgrade do curso. Quero aprender todo tipo de dica para tornar meus websites super responsivos!

  • Excelente curso, totalmente preparatório, com a junção de cursos passados, já da para criar páginas com mais propriedade, agradeço muito a TW!

  • Excelente curso com ótima didática!

  • O curso foi muito produtivo aprendi muito com as aulas , parabéns mesmo

  • Excelente didática, estou realizando um trabalho para a faculdade e o curso me ajudou demais.

  • Uma ótima revisão. muito bom!

    Depoimento - Gianfranco
    HTML5 + CSS3 - Web design responsivo
    Gianfranco São Paulo / SP

Plano de acesso total!

Tenha um ano de acesso completo a todos os cursos da plataforma, incluindo novos lançamentos, mentoria de carreira e suporte direto com os professores!

Um ano de acesso completo

Contrate agora e tenha acesso ilimitado a todo o nosso portfólio. Isso inclui:

  • 1 ano de acesso a todos os cursos
  • Cursos novos toda semana
  • Suporte direto com professores
  • Aplicativos para Android e iOS
  • Plano de carreira personalizado
  • Certificados digitais inclusos
  • Suporte com SLA de 4 horas úteis
  • Acesso offline através dos apps
Por apenas
12x R$ 75,00 sem juros, no cartão de crédito
Matricule-se agora
Garantia incondicional de satisfação
Garantia incondicional de satisfação

Confiamos tanto nos resultados dos nossos cursos, que criamos uma garantia incondicional de satisfação para você, que são 7 dias de teste!