Formação Web Design / Front-End

Conteúdo do curso

HTML/HTML5

• Diferença entre HTML e HTML5
• Estrutura básica de uma página HTML
  • head
  • title
  • meta
  • body
• listas ordenadas e não ordenadas
• Tabela
• Formulários
  • Entrada de dados (text, password, checkbox, radio ...)
• Links
• Parágrafos
• Imagens
• Divisões
• Integração com CSS e JavaScript (jquery)

HTML5 - ELEMENTOS SEMÂNTICOS

• header
• nav
• article
• aside
• section
• footer

 CSS - CSS3 (Formatação e Criação de Layouts)

• Demonstração das vantagens obtidas com CSS
• Ligação com HTML
• Seletores
• Identificadores
• Classes
• pseudo-classes
• CSS Formatação
• Formatando o corpo do documento
• Formatando links
• Formatando formulários
• Formatando textos
• Utilizando fonts externas no site
• Parágrafos
• Títulos
• Cor, tamanho, fonte e decoração do texto
• Trabalhando com margens.
• Trabalhando com espaçamentos interno
• Trabalhando com bordas
• Bordas arredondadas
• Sombra
• Sombra em texto
• Transição

 CSS LAYOUTS RESPONSIVOS

• Layouts fixos e flexíveis de várias colunas
• Layouts baseados em várias resoluções.
• Layout Vertical (Single Scroll)
• Layouts responsivos (Adaptáveis a smartphones e tablets)
• Flexbox
• Media Queries
• Css para impressão

Aplicação de plugins JavaScript e Introdução ao Jquery

• Aplicando Jquery em um layout vertical (single page)
• Poupup (Sem bloqueio do browser) com Jquery
• Slideshow em Jquery
• Galeria de imagens
• Modificando elementos html e css com Jquery
• Menu mobile com jquery

UI Design para Web

• Ferramenta: Figma
• Conceitos gerais de Ui Design
  • Imagens, Cores, Tipografia, Grid...
• Camadas
• Guias e Réguas
• Trabalhando com textos
• Recorte de imagens
• Criando uma UI de um projeto
• Exportando imagens para web 

Bootstrap

• Sistema de Grid
• Layouts
• Introdução a Design Responsivo
• Tabelas
• Formulários com Bootstrap
• Botões
• Imagens
• Carousel
• Dropdowns
• Navegação
• Alertas
• Modal
• Tabs
• Utilização de ícones

JavaScript Básico

• Declaração de variáveis
• Condições
• Funções

JQuery

• Entendendo a Sintaxe do JQuery
• Seletores
  • O que são
  • Funcionamento dos Seletores
  • Manipulando Seletores Simples e Compostos
  • Manipulando atributos e visibilidades
• Manipulação de Elementos HTML com JQUERY
• Manipulação de CSS com JQUERY
  • Adicionando e Removendo classes
  • Manipulando o valor do atributo
  • Manipulando conteúdos html
  • Manipulando conteúdos textual
  • Principais métodos de manipulação de conteúdo
  • Principais métodos de manipulação de estilo

• Eventos
  • Introdução
  • Eventos no JQuery
  • click() e dblclick()
  • Eventos do teclado keydown(), keyup() e keypress()
  • Eventos de mouse mousedown(), mouseup(), mouseover(), mouseout() e mousemove()
  • load()

• Forms
  • Elementos de formulário

• Efeitos
  • Show
  • Hide
  • fadeIn
  • fadeOut

• Validação de Dados
• Menu
• Mascara - MaskedInput
• Ajax com JQuery
• Métodos de Elemento DOM

Outrus Plugins em Jquery

• Scroller
• Loading

SASS

• Instalando o Sass
• @import
• @extend
• Variáveis com Sass
• Mixins
• Mixins com parâmetros

Criação de gráficos

DICAS DE VENDA E NEGOCIAÇÃO DE SITES

Ao longo do curso, vamos abordar assuntos relacionados a relacionamento com cliente. 

• Dicas de negociação
• Dicas de como cobrar
• Briefing
• Proposta
• Relatórios com Google Analytics - Visão geral
• Domínios e hospedagens de sites
• Colocando um site no ar

 Ao final do curso o aluno irá projetar um site aplicando todo o conhecimento adquirido ao longo do curso.

• Diferencial COTI: Aulas baseadas em projetos, onde criamos 'marcas fictícias' e desenvolvemos os sites.

• Diferencial 2: Nosso curso não é dividido em módulos, ou seja, interagimos todas as ferramentas de modo que o aluno desenvolva em conjunto o layout, trabalhe as imagens e crie as animações, deixando as aulas mais interativas e agradáveis aos alunos.