Formação Web Design / Front-End

Carga horária: 60hs

Curso ideal para quem deseja entrar no mercado de trabalho front-end e também deseja criar sites modernos e responsivos (que se adaptam aos dispositivos móveis) por conta própria como um verdadeiro Web Designer.

O curso começa com conceitos básicos e fundamentais do html e css e avança por bootstrap, Javascript, Jquery e Sass.

Além de toda a preocupação com o desenvolvimento de sites, o curso também aborda temas importantes como: Dicas de como cobrar, Montagem de Proposta, e muito mais.

Inscreva-se agora!  Inscreva-se agora!

Próximas turmas

Frequência Horário Início Término Valor Tipo
Segunda, Quarta e Sexta 09:00/13:00h 16/11/2020 18/12/2020 10x R$250,00 Presencial/online
Sábado 13:00/17:00h 09/01/2021 08/05/2021 10xR$250,00 Presencial/online
Segunda, Quarta e Sexta 09:00/13:00h 11/01/2021 15/02/2021 10xR$250,00 Presencial/online
Terça e Quinta 18:00/22:00h 12/01/2021 02/03/2021 10xR$250,00 Presencial/online

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

Adobe Photoshop CC para WEB

  • Tratamento de imagens para Web com o Adobe Photoshop CC
  • Configurando o Photoshop CC para WEB
  • Principais Ferramentas
  • Camadas
  • Guias e Réguas
  • Trabalhando com textos
  • Recorte de imagens
  • Criação de Layout no Photoshop CC
  • Exportando imagens para web 

Bootstrap 4

  • 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 3

  • 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
    • Blur(), change(), focus(), select()
  • Efeitos
    • Show
    • Hide
    • fadeIn
    • fadeOut
  • Validação de Dados
  • Menu
  • Mascara - MaskedInput
  • Ajax com JQuery
  • Métodos de Elemento DOM
  • Load

Outrus Plugins em Jquery

  • Scroller
  • Loading
  • Efeitos com Parallax

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

Separamos uma parte do curso para abordar assuntos relacionados a negociação 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. (São pelo menos 7 modelos de 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.