MÓDULO 1

- Afinal, o que é Design Responsivo?
- Quais softwares ou tecnologias você precisa saber antes
- Todo site hoje em dia precisa ser responsivo
- O que torna um site responsivo
- Navegando por sites responsivos
- Quantas telas temos hoje em dia

MÓDULO 2

- Quando decidir por um design responsivo
- Viewport
- Densidade de telas
- Vertical e horizontal
- Media Querie - Um item importante no design responsivo
- Layout fluído
- Imagens podem ser responsivas
- Desempenho do site - Um ponto fundamental
- Formulários podem ser responsivos
- Regras de Media Querie - Importando CSS

MÓDULO 3

- Qual melhor editor HTML
- Conhecendo o Dreamweaver
- O que é Media Querie
- Media Types
- Width
- Height
- Device Width
- Device Height
- Min - Max Combinações
- Orientation
- Aspect ratio - Device aspect ratio
- Color
- Color index Monochrome
- Resolution
- Scan
- Grid
- Operadores
- Criando regras complexas para iPhones
- Criando regras complexas para Galaxy S
- Criando regras complexas para iPads
- Criando regras complexas para outros Tablets e Smartphones
- Regra para iPhone e Galaxy

MÓDULO 4

- Necessidade vs Modismo
- Fluxo de trabalho
- O cliente realmente sabe o que é Design responsivo?
- Planejamento de Medias e Breakpoint
- Para quais navegadores será criado
- Wireframe e Mockup
- Contextos e necessidades diferentes para usuários mobile
- HTML5 Semântico - Uma excelente prática
- Testes de Layouts - Softwares e simuladores

MÓDULO 5

- Como será o fluxo de trabalho com o cliente
- Briefing enquanto cliente
- Briefing enquanto empresa
- Wireframe
- Mockup - Criando Layout - Header
- Mockup - Criando Layout - Box cursos
- Mockup - Criando Layout - Banner
- Mockup - Criando Layout - Rodapé
- Mockup - Criando Layout - Rodapé - Parte 2
- Mockup - Criando Layout - Rodapé - Parte 3
- Mockup - Criando Layout para Tablet
- Mockup - Criando Layout para Mobile

MÓDULO 6

- O que é HTML 5
- O que é semântica
- Diferença entre HTML e HTML semântico
- CSS e CSS3 para HTML 5
- Personalizando o Dreamweaver
- Elemento Main
- Elemento header
- Elemento section
- Elemento Nav
- Elemento article
- Elemento footer
- Elemento aside
- Novos elementos de formulários
- Definindo a melhor estrutura para um site em HTML semântico

MÓDULO 7

- Diferentes maneiras de transformar PSD em HTML e CSS
- Definindo um site no Dreamweaver
- Versão Desktop - Topo
- Versão Desktop - Menu
- Versão Desktop - Web font
- Versão Desktop - Banner
- Versão Desktop - Box cursos
- Versão Desktop - Box cursos - Repetição
- Versão Desktop - Rodapé
- Versão Desktop - Rodapé parte 2
- Versão Desktop - Rodapé parte 3
- Versão Desktop - Apache servidor web
- Versão Desktop - Rodapé parte 4
- Versão Desktop - Rodapé parte 5
- Versão Desktop - Rodapé parte 6
- Versão Desktop - Banner em Slider e menu fixo

MÓDULO 8

- Versão Desktop - Page
- Versão Desktop - Categoria
- Versão Desktop - Single cursos
- Versão Desktop - Correção abas mais vistos
- Versão Desktop - Correção abas mais vistos parte 2
- Versão Desktop - Facebook Dinâmico
- Versão Desktop - Box diferente

MÓDULO 9

- O que vamos criar agora?
- Versão Tablet - Definindo regra Media Querie
- Versão Tablet - Banner
- Versão Tablet - Corpo listando apenas 3 colunas
- Versão Tablet - Rodapé
- Versão Tablet - Corrigindo bugs e inserindo meta view port
- Versão Tablet - Page
- Versão Tablet - Categoria
- Versão Tablet - Single

MÓDULO 10

- O que vamos aprender agora?
- Quando o media querie pode não ser bem vindo
- Detectando mobile
- Versão mobile - topo
- Versão mobile - Menu
- Versão mobile - Menu carrinho
- Versão mobile - Loop de cursos
- Versão mobile - Rodapé
- Versão mobile - Page
- Versão mobile - Categoria
- Versão mobile - Single
- Versão mobile - Single parte 2

MÓDULO 11

- Ajustando Media querie
- Corração para orientação paisagem
- Testando nos dispositivos

MÓDULO 12

- Como este curso pode mudar sua vida