Curso de

Front-end básico

Descrição do curso

• Total de Aulas propostas: 4
• Total de horas por Aula: 8
• Dias da semana: sábados
• Início do Curso: A definir.
• Término do curso: A definir.

Introdução Geral e Controle de Versão

• O que um Frontend, Backend, Webdesigner faz (e não faz).
• Mercado de trabalho
• Cliente e Servidor
• Detalhes gerais do curso (citar e detalhar as Tecnologias, ferramentas, processos em geral)
• Usabilidade e o papel do Front-ender
• Preparando o nosso ambiente
• Sublime Text em geral
  • Diferença editor e IDE
  • Package Control
  • Instalando um pacote
  • Shortcodes
• Apresentação do projeto que será construído
• Estruturando as pastas do projeto
• O que é o W3C?
• O que é HTML?
• Versões do HTML
• Incorporando HTML ao projeto
• Definição detalhada sobre GIT e sobre o que é um Controle de versão
• Instalação
• Comandos básicos do git
• Conversa sobre Github, Bitbucket, Opensource etc..
• Clone, Fork, Merge, Pull Request na prática
• Subindo nosso projeto para o Github

HTML

• Conversa sobre HTML e HTML5
• Tags Html
  • HTML
  • HEAD
  • TITLE
  • Body
  • Cabeçalhos
  • Parágrafos
  • Listas
  • Divs
  • Spans
  • Links
  • Inspetor do Browser
• Boas práticas
  • Identação
  • Nomenclatura

• Estruturando o HTML do nosso projeto
• Novas Tags HTML5
  • Section
  • Header
  • Main
  • Article
  • Menu
  • Aside
  • Audio
  • Video
  • Figure
  • FigCaption
  • Tabelas
  • Imagens
• O que é Semântica?
• Melhorando a semântica do nosso projeto com as novas tags

CSS

• O que é CSS?
• Conversa sobre CSS e CSS3
• Propriedades, Seletores, Atributos (básico)
• Novas Propriedades, Seletores, Atributos (CSS3)
• Semântica em CSS
• Incorporando alguns estilos CSS em nosso projeto
• Adicionando pequenas animações e transições
• Unidades de Medida
• Design Responsivo / Fluído e Adaptável
• Media Queries e tag viewport
• Definição de Mobile-First
• Frameworks CSS (Bootstrap e/ou Foundation)
• Deixando nosso projeto responsivo

Javascript

• O que é Javascript?
• Conversa mais detalhada sobre Javascript
• O que é o ECMAScript?
• Variáveis
• Operadores
• Funções
• Controle de Repetição e Fluxo
• Arrays
• Objetos
• Melhores Práticas
• Inserindo Javascript no Projeto
• O que é Jquery?
• Básico de Jquery
• Adicionando Interações com Jquery

Fontes de Referência / estudo / Encerramento

• Conversa sobre as principais fontes de referência e estudo para o desenvolvimento
• A importância do auto-didatismo
• Encerramento do Curso