Cooking Script

Segue um guia de estudos com tópicos a serem estudados para nivelamento e apresentação externa no grupo CookingScript.

A História da Internet;
- Evolução da Internet;
- Timeline dos principais acontecimentos importantes da internet;
- Entendendo o problema de compatibilidade entre navegadores;
- Sugimento da W3C;
A saga do HTML;
- Conceitos básicos sobre tags;
- Conceitos básicos sobre atributos;
- Id e Classes;
- Cabeçalho de um HTML;
- Atributos personalizados com o Data;
- Hieararquia de Títulos e sua importância para o SEO;
- Criação e utilização de Divs para Organização e Posicionamento dos Elementos;
- Principais acontecimentos e a evolução até a chegada do HTML5;
- Novidades do HTML5;
- Novos elementos do HTML5 e suas funções semânticas;
Revisão sobre o funcionamento do protocolo HTTP;
- Como a internet funciona?
- Modelo Cliente e Servidor;
- HTTPS - A segurança da informação;
Padrões de Projeto Web;
- O que são?
- Quando e onde usar?
- O padrão MVC para web;
- Como e onde usar?
- Definição dos cenários: Front-End e Back-End;
- Integrações entre Front-End e Back-End;
O que é uma API?
- REST;
- RESTFULL;
- JSON;
JavaScript Vanilla; (https://www.youtube.com/watch?v=vEROU2XtPR8&list=PLillGF-RfqbbnEGy3ROiLWk7JMCuSyQtX)
- Tipos de Dados;
  - Number;
  - String;
  - Array;
  - Object;
- Como declarar uma variável;
- Tipos de parões para nomenclatura de variáveis;
  - CamelCase;
  - PartialCase;
  - Underscore;
- Arrays;
  - Criando Arrays;
  - Tipos de Dados Variados em Arrays
  - O comando arr.lenght;
  - O comando arr.sort();
  - O comando arr.reverse();
  - Percorrendo um array com for;
  - Percorrendo um array com while;
  - Percorrendo um array com foreach;
- Comandos condicionais;
  - if;
  - else;
  - else if;
  - switch;
- Objetos;
  - Objetos Literais;
  - Objetos Construtores;
  - Padrões de Construtores;
- Eventos;
- Validação de Formulários;
Preparação do ambiente de trabalho
- Instalação e configuração de servidor web;
- Soluções simplistas para projetos Front-End;
- Apache e Nginx para projetos com Back-End;
- Configurando um Ambiente de Trabalho no Digital Ocean:
  - https://github.com/diogocezar/dctb-digital-ocean-for-zombies
  - https://education.github.com/pack
Gerenciadores de Pacotes;
- Conhecendo o npm (NodeJS);
- Conhecendo o bower;
Versionamento de Arquivos com o GIT;
- Visão geral e principais recursos para gerenciamento de arquivos com a ferramenta GIT;
- Instalando o GIT;
- Criando um repositório;
- Clonando um repositório existente;
- Fazendo enviando e recuperando dados de um repositório;
- Fazendo Pull Request em um repositório;
GitHub;
Ferramentas Adicionais
- GitLab - Hospede seu projeto Gratuitamente;
- c9.io - O Google Docs dos Programadores;
Conhecendo alguns Editores de Texto;
- Sublime Text (Utilizaremos o Sublime Text);
  - https://github.com/diogocezar/dctb-sublime
- Atom;
- VSCode;
- Brackets;
O processo de desenvolvimento web;
- https://github.com/diogocezar/dctb-web-project
Front-End;
- CSS
  - Seletores;
  - Pseudo-seletores;
    - after;
    - before;
    - hover;
    - active;
  - Posicionamento com Absolute, Relative e Float;
  - Posicionamento com Flex;
    - https://github.com/diogocezar/dctb-flex
    - http://flexboxfroggy.com/
  - Posicionamento com Grid;
    - https://github.com/diogocezar/dctb-grid
    - http://cssgridgarden.com/
  - Efeitos visuais com CSS3;
  - Sistema de Grids para Responsividade;
  - Frameworks CSS
    - Materialize;
    - Bootstrap;
    - Foundation;
  - Unidades de medidas absolutas e relativas;
    - em;
    - rem;
    - vh;
    - vw;
Conhecendo o Can i Use? (https://caniuse.com/)
Conhecendo Pré-Processadores de CSS:
- SASS (Trabalharemos com SASS)
  - https://github.com/diogocezar/dctb-sass
- LESS
SVG;
- Animações com SVG;
- O que são imagens vetoriais;
- Tipos de inserções SVG (inline, arquivos externos…)
- Como criar um Logotipo Responsivo;
- Como aplicar efeitos visuais em SVGS;
- Otimizações
- Por que é importante realizar otimizações em suas imagens?
Conhecendo as Recomendações do Google para avaliar e melhorar a performance do seu site;
- https://developers.google.com/speed/pagespeed/insights/?hl=pt-BR
Aprendendo a Debugar um Site com o Google Chrome DevTools
- https://www.youtube.com/playlist?list=PLiGzvgwA5Gmgnq5vPjJxW52hDiX3ndL53
Conhecendo os Schemas
- O que são?
- Como utilizar schemas;
- Utilizando o validador do Google
  - https://search.google.com/structured-data/testing-tool/u/0/?hl=pt-BR
Conhecendo a Nova Especificação JavaScript ES6;
- Quando usar?
- Novas Variáveis;
- Arrow Functions;
- Templates Literais;
- Promisses;
- Classes;
- Async/Await;
Ferramentas de automação;
- Por que utilizar?
- O que podemos fazer?
- Minificações;
- Automações;
- Watch em seu ambiente de trabalho;
- Ferramentas:
  - Gulp
  - Grunt;
Conhecendo alguns Frameworks para desenvolvimento Front-End;
- Por que são importantes?
- Quando utilizá-los?
- AngularJS;
- ReactJS;
- Vue.js;
SEO
- O que é SEO?
- Técnicas para obter uma boa indexação;
MetaTags;
- Meta Tag OG;
- Meta Tags para Facebook;
- Meta Tags para o Twitter;
- Meta Tags para o Google Plus;
Robots.txt;
Google Analytics;
- Conhecendo o Google Analytics
  - https://analytics.google.com/analytics/web/
- Conhecendo o Google WebMaster
  - https://www.google.com/intl/pt-BR/webmasters/#?modal_active=none
- Identificando a ação dos usuários em sua página;
Criando uma estrutura básica em NodeJS;
O que é um banco de dados NOSQL;
- Quais as suas vantagens e desvantagens?
Utilizando o NodeJS para criar uma estrutura de servidor web com Express;
Demonstração da aplicação em RealTime com NodeJS + MongoBD e WebSockets;
Criando uma aplicação real time em NodeJS para consumir dados de uma API Externa; (Twitter);
Conhecendo o Firebase;
- Conhecendo uma aplicação de Chat em Realtime com Firebase;
Trabalhando com JQuery;
Conhecendo alguns plugins essenciais do JQuery;

CollabCodeTech/collabcode-roadmap-frontend

Cooking Script

Links Interessantes