Curso de CSS3 - Design Responsivo Avançado

Curso de

CSS3 - Design Responsivo Avançado

Aprenda os “ingredientes” para se criar um web design responsivo como: Layout flexível, mídias flexíveis (inclusive imagens) e Media Queries.

Por apenas 6x de

R$ 27,48

Quero fazer este curso!

Informações sobre o curso

Sobre o curso

Ethan Marcotte (idealizador do conceito), inspirado pelo conceito de arquitetura responsiva – no qual prédios inteiros podem ser feitos para “responder” às pessoas que nele se encontram, alterando a opacidade de vidros para conferir maior privacidade para quem está no recinto e até mesmo mudar a posição de suas paredes para beneficiar o tipo de pessoas que por ele transita – pensou: "E se os sites também se adaptassem aos dispositivos que os acessam?".

Devido à grande popularização de dispositivos diversos com acesso à web e da necessidade de proporcionar uma boa e facilitada experiência para os que acessam web sites destes dispositivos, ter o conhecimento para desenvolver um site/sistema responsivo é um fator fundamental para o seu sucesso.

E este curso irá lhe mostrar como usar o CSS para deixar suas aplicações web responsivas, você também aprenderá sobre conceitos, como definir as medidas da aplicação e sobre como calcular a relatividade para o web design responsivo.

Ao longo do curso outras dicas e conselhos para melhorar sua aplicação também serão informados, deixando assim claro quando e como usar as técnicas responsivas propostas pelo curso.

Conhecimentos adquiridos

Você iniciará o curso de Design Responsivo do TreinaWeb Cursos aprendendo sobre a diferença entre Front-end e back-end, o conceito do que é o web design responsivo, desenvolvimento “em camadas” e como surgiu o web design responsivo.

Neste curso você aprenderá sobre os ingredientes para um web design responsivo, que são, entre outros, criar um layout, imagens e mídias flexíveis. Para aplicar isso em seus projetos ao longo do curso você aprenderá sobre a teoria e como aplicar tais conceitos em suas aplicações.

Neste curso você aprenderá como usar o CSS para criar designs responsivos e aprender sobre os tipos de medida em CSS fundamentais para que você possa criar tais layouts, então ao longo do curso você aprender sobre mas medidas em pixel (px), em (em), porcentagem (%), ex (ex), centímetros (cm), milímetros (mm), polegadas (in), pontos (pt), picas (pc) e outros tipos de medida CSS.

Outro tema que será abordado e você aprenderá neste curso é a criação da fórmula para calcular a relatividade em web design responsivo, aprenderá sobre imagens, mídia e outros tipos de recursos flexíveis e aprenderá a usar imagens independentes de resolução.

E para fechar o curso com chave de ouro, no projeto final você aprenderá a criar uma página completa com web design responsivo.

Quais os pré-requisitos para esse curso?

Os pré-requisitos não são obrigatórios, mas eles dão uma base de parte do conhecimento necessário que se precisa ter para fazer esse curso.

Carga horária do curso

1h20

Curso com 1h20 horas de vídeos

40h

Curso com certificado de 40 horas

Ambiente do curso

  • Google Chrome Canary
  • Firefox
  • Sublime Text 2

Metodologia

  • Vídeo-aulas
  • Texto e imagens
  • Início imediato
  • Exemplos práticos

Satisfação garantida ou seu dinheiro de volta!

Conteúdo programático

Tópicos do Curso

  1. Códigos, imagens, diagramas etc.

    Introdução
  2. Códigos, imagens, diagramas etc.

    Ambiente de trabalho
  3. Códigos, imagens, diagramas etc.

    Front-end e back-end
  4. Códigos, imagens, diagramas etc.

    Front-end
  5. Códigos, imagens, diagramas etc.

    Back-end
  6. Códigos, imagens, diagramas etc.

    E o web design responsivo?
  7. Códigos, imagens, diagramas etc.

    Desenvolvimento “em camadas”
  8. Códigos, imagens, diagramas etc.

    Como surgiu o web design responsivo?
  9. Códigos, imagens, diagramas etc.

    Håkon Wium Lie, o criador das CSS
  10. Códigos, imagens, diagramas etc.

    Um pouco de (uma triste) história
  11. Vídeoaula com duração de: 00:10:58

    HTML5 e semântica
  12. Códigos, imagens, diagramas etc.

    Vantagens em se usar CSS
  13. Códigos, imagens, diagramas etc.

    Ethan Marcotte, o criador do web design responsivo
  14. Códigos, imagens, diagramas etc.

    Pronto para o desenvolvimento web moderno?
  15. Vídeoaula com duração de: 00:13:24

    O CSS3
  16. Códigos, imagens, diagramas etc.

    Ingredientes para um web design responsivo
  17. Códigos, imagens, diagramas etc.

    Layout flexível
  18. Códigos, imagens, diagramas etc.

    Imagens e mídia flexíveis
  19. Códigos, imagens, diagramas etc.

    Media Queries
  20. Códigos, imagens, diagramas etc.

    Receita pronta
  21. Códigos, imagens, diagramas etc.

    Layout flexível
  22. Códigos, imagens, diagramas etc.

    Tipos de medida em CSS
  23. Códigos, imagens, diagramas etc.

    Pixel (px)
  24. Códigos, imagens, diagramas etc.

    Em (em)
  25. Códigos, imagens, diagramas etc.

    Percent (%)
  26. Códigos, imagens, diagramas etc.

    Ex (ex)
  27. Códigos, imagens, diagramas etc.

    Centimeters (cm), Millimeters (mm), Inches (in), Points (pt), Picas (pc)
  28. Códigos, imagens, diagramas etc.

    Outros tipos de medida CSS
  29. Códigos, imagens, diagramas etc.

    Na prática...
  30. Códigos, imagens, diagramas etc.

    Fórmula para calcular a relatividade em web design responsivo
  31. Códigos, imagens, diagramas etc.

    Media Queries
  32. Códigos, imagens, diagramas etc.

    A revolução dos pixels
  33. Códigos, imagens, diagramas etc.

    Meta tag viewport
  34. Códigos, imagens, diagramas etc.

    Media Types
  35. Códigos, imagens, diagramas etc.

    Media Queries
  36. Códigos, imagens, diagramas etc.

    Como usar Media Queries
  37. Códigos, imagens, diagramas etc.

    Media Features
  38. Códigos, imagens, diagramas etc.

    Operadores lógicos
  39. Códigos, imagens, diagramas etc.

    Breakpoints
  40. Vídeoaula com duração de: 00:14:51

    Trabalhando com Breakpoints
  41. Códigos, imagens, diagramas etc.

    Imagens e mídia flexíveis
  42. Códigos, imagens, diagramas etc.

    Imagens flexíveis
  43. Códigos, imagens, diagramas etc.

    Outros tipos de recursos flexíveis
  44. Códigos, imagens, diagramas etc.

    Outras soluções para recursos flexíveis
  45. Vídeoaula com duração de: 00:24:58

    Modernizr
  46. Códigos, imagens, diagramas etc.

    Bate-papo sobre desempenho na web
  47. Códigos, imagens, diagramas etc.

    A questão de desempenho em mídias responsivas
  48. Códigos, imagens, diagramas etc.

    Imagens independentes de resolução
  49. Códigos, imagens, diagramas etc.

    Projeto Final: página completa com web design responsivo
  50. Códigos, imagens, diagramas etc.

    Mobile First
  51. Códigos, imagens, diagramas etc.

    Considerações sobre recorte, montagem e interações
  52. Códigos, imagens, diagramas etc.

    Arquivos e tecnologias usadas
  53. Códigos, imagens, diagramas etc.

    Projeto Final: codificação
  54. Códigos, imagens, diagramas etc.

    HTML “desconstruído”
  55. Vídeoaula com duração de: 00:16:16

    Bootstrap
  56. Códigos, imagens, diagramas etc.

    Explorando o CSS
  57. Códigos, imagens, diagramas etc.

    Códigos completos
  58. Códigos, imagens, diagramas etc.

    Conselhos finais

Vantagens de estudar no Treinaweb

Início imediato! Não é necessário aguardar a formação de turmas.

Defina o horário que quiser e estude de onde estiver.

Após o curso, você ainda tem 2 anos para revisar o conteúdo.

Assim que finalizar, receba o certificado em casa, sem custo adicional.

Escolha o dispositivo que preferir: PC, Tablet ou Smartphone.

Se surgir alguma dúvida, basta perguntar aos nossos instrutores.

Satisfação garantida ou seu dinheiro de volta.

40h

Curso com certificado de 40 horas

O que os alunos dizem?

O curso me fez ter muita clareza sobre a importância e técnicas de desenvolvimento de layout responsivos.

Você pediu e nós te ouvimos!

Conheça os nossos planos de assinatura

30% OFF
Iniciante
De 12x R$ 99
12x 69 reais
ou por R$ 828,00 à vista
  • 1 ano de acesso a todos os cursos
  • Cursos novos toda semana
  • Certificados digitais
  • Suporte com SLA de 4 horas úteis
    Suporte exclusivo, feito diretamente por nossos professores. SLA = Tempo médio para resposta.
  • Lançamentos e atualizações
  • Plano de estudos individual
    Plano de estudos desenvolvido junto a um professor orientador
Matricule-se
30% OFF
Profissional
De 12x R$ 199
12x 139 reais
ou por R$ 1.668,00 à vista
  • 3 anos de acesso a todos os cursos
  • Cursos novos toda semana
  • Certificados digitais
  • Suporte com SLA de 4 horas úteis
    Suporte exclusivo, feito diretamente por nossos professores. SLA = Tempo médio para resposta.
  • Lançamentos e atualizações
  • Plano de estudos individual
    Plano de estudos desenvolvido junto a um professor orientador
Matricule-se
30% OFF
Especialista
De 12x R$ 256
12x 179 reais
ou por R$ 2.148,00 à vista
  • 5 anos de acesso a todos os cursos
  • Cursos novos toda semana
  • Certificados digitais
  • Suporte com SLA de 4 horas úteis
    Suporte exclusivo, feito diretamente por nossos professores. SLA = Tempo médio para resposta.
  • Lançamentos e atualizações
  • Plano de estudos individual
    Plano de estudos desenvolvido junto a um professor orientador
Matricule-se

Se desejar, você também pode adquirir apenas esse curso (sem escolher um dos planos):

Curso de CSS3 - Design Responsivo Avançado

CSS3 - Design Responsivo Avançado

6x R$ 27,48

R$ 164,90 à vista

Quero apenas este curso!

Cursos relacionados