Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Plano de Ensino - Front End

Plano de Ensino

HTML5

  • História
  • Evolução
  • Semântica
  • Acessibilidade
  • API's

CSS3

  • História
  • Evolução
  • Padrões Web
  • Tableless
  • CSS3
    • Font face
      • Media Queries (link com Responsive Web Design)
      • SVG
      • URI
      • Transitions
      • Transforms
      • Drafts
        • Regions
        • Flex box ...

JavaScript

  • História
    • Início (ALGOL, SmalTalk, Self, Scheme)
    • Influências (Java + Self + Scheme)
    • Origem (Engelbart + WWW)
    • Transições (Mocha -> LiveScript -> JavaScript -> ECMAScript)
    • Netscape vs. Microsoft (JavaScript/ECMAScript vs. JScript)
  • O JavaScript
    • Partes Ruins
    • Partes Boas
    • Objetos
    • Protótipos
    • Eventos
    • Patterns
    • Boas Práticas
  • AJAX
  • jQuery
  • Modernizr
  • Chrome Dev Tools

Um tópico a parte e muito bacana para abordar, seria sobre Workflow. Neste ponto seria abordado sobre produtividade, ferramentas, recursos e tecnologias.

Workflow

  • Ambiente de Produção e Desenvolvimento

  • Performance

  • Pré-processadores

  • Minificação e Concatenação de Arquivos

  • Frameworks

    • Descrição
    • Porque devo utilizar?
    • Quando não utilizar
    • Opções para JS
    • Opções para CSS
  • Back-End

    • Node.js / Npm [+]
    • MongoDB [+]
  • Tools

    • Yeoman [+]
    • Bower
    • Grunt
  • GIT e GitHub

===

Experimento 01

1. Desenvolva um Website, com 3 páginas à sua escolha, utilizando o conceito responsivo (lembre-se das boas práticas).
2. Utilize o Chrome Dev Tools para observar os seus resultados de performance.
3. Utilize um dos pré-processadores CSS mencionados acima.
4. Use o Bower para injetar as suas dependências.
5. Use o Grunt para agilizar o seu ambiente de trabalho. Crie tarefas para minificação, concatenação e compilação (se preferir, utilize o LiveReload).
6. Envie o seu projeto para um repositório no GitHub, utilizando os comandos do GIT no seu terminal.

===

[+] Ítens que merecem mais atenção, porém podem ser apresentados. =]

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.