Fale com a gente no WhatsApp 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

Formação em que esse curso está inserido

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

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

  • Ótimo Curso!

    Depoimento - Gabriel
    HTML5 + CSS3 - Web design responsivo
    Gabriel São José do Rio Preto / SP
  • 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!

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

  • Esse curso para mim foi um desafio que eu recebi na empresa que eu trabalho, me fizerem uma proposta para eu aprender e me certificar em C# .NET em 90 dias. Esse curso foi minha salvação! Agora vamos para o Intermediário e por fim o Avançado!!! Agradeço...

    Depoimento - David
    C# (C Sharp) Básico
    David Fortaleza / CE
  • Bom, já tinha um conhecimento em programação C#, resolvi fazer o básico só por fazer e me surpreendi, vi muitas coisas novas, entendi melhor vários conceitos, enfim, estou a caminho do intermediário e recomento é um ótimo curso.

    Depoimento - Roberto
    C# (C Sharp) Básico
    Roberto Itaquaquecetuba / SP
  • Ótimo curso! Realmente bastante esclarecedor e didático. O conteúdo é bem completo, abrangendo diversos assuntos de forma dinâmica e complementar, o que ajuda, e muito, no aprendizado e na visão de aplicabilidade. Além de todo o ambiente e dos recursos disponíveis tornarem o estudo mais amigável e menos cansativo.

    Depoimento - Dimitrius
    C# (C Sharp) Básico
    Dimitrius Três Corações / MG
  • Já fui e paguei caro por um curso de C# que não me instruiu em nada, pois não tinha o conhecimento básico. Aí arrisquei no TreinaWeb, pois sempre tive preconceito com cursos assim... a distancia. Sempre achei que presencial com uma pessoa ali do seu lado era a melhor forma... estava enganado... Ótimo curso, didática excelente. E vamos agora para o Intermediário. Vlw equipe do TreinaWeb

    Depoimento - Leonardo
    C# (C Sharp) Básico
    Leonardo Nilópolis / RJ
  • Curso Excelente, otimos professores, explicação muito boa...ja estou adquirindo o proximo curso c# avançado. Indico para qualquer um e garanto um dos melhores curso que ja fiz. Parabens a toda equipe.

    Depoimento - Fabrício
    C# (C Sharp) Básico
    Fabrício Cariacica / ES

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
R$ 99,00 ECONOMIZE R$ 600,00
12x R$ 49,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!