filipeveronezi / happy

Projeto Happy da NLW 3

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

šŸš€ Projeto Happy

Projeto Happy desenvolvido atravƩs da NLW #3 da Rocketseat.


LiƧƵes aprendidas / Novas descobertas

Day 1

  • UtilizaĆ§Ć£o de unidades de medida relativas %, vw, vh, rem e em para melhor visualizaĆ§Ć£o independente do tamanho da tela;
  • OrganizaĆ§Ć£o de cĆ³digo com Prettier e boas prĆ”ticas em HTML e CSS;
  • UtilizaĆ§Ć£o do Figma para criaĆ§Ć£o de protĆ³tipos e consulta de "nĆŗmeros mĆ”gicos" para estilizaĆ§Ć£o;
  • IntroduĆ§Ć£o a animaƧƵes CSS;
  • CSS Flexbox.

Day 2

  • UtilizaĆ§Ć£o de funƧƵes no CSS como clamp() e min() que auxiliam ainda mais na responsividade;
  • OrganizaĆ§Ć£o de cĆ³digo relacionando ordenaĆ§Ć£o HTML com ordenaĆ§Ć£o CSS;
  • ManipulaĆ§Ć£o de mapas interativos atravĆ©s da biblioteca LeafletJS;
  • InteraĆ§Ć£o com cĆ³digos HTML via JS;
  • ManipulaĆ§Ć£o de variĆ”veis globais;
  • CSS Grid.

Day 3

  • UtilizaĆ§Ć£o de formulĆ”rios:
    • PreparaĆ§Ć£o de variĆ”veis para JS;
    • EstilizaĆ§Ć£o com CSS;
    • UtilizaĆ§Ć£o de inputs do tipo hidden;
  • UtilizaĆ§Ć£o de arrow functions;
  • ManipulaĆ§Ć£o de elementos da DOM.

Day 4

  • InstalaĆ§Ć£o e utilizaĆ§Ć£o do Node.js para inĆ­cio do Back-end;
  • UtilizaĆ§Ć£o do gerenciador de pacotes npm para instalaĆ§Ć£o dos pacotes:
    • express
    • nodemon
  • ConfiguraĆ§Ć£o de um servidor em Javascript;
  • Conceito de rotas;
  • UtilizaĆ§Ć£o do Handlebars para comunicaĆ§Ć£o do Front-end com o Back-end;
  • Conceito de pĆ”ginas dinĆ¢micas.

Day 5

  • UtilizaĆ§Ć£o de #each e #if com Handlebars;
  • ImportĆ¢ncia da Template Engine para pĆ”ginas dinĆ¢micas;
  • SQL;
  • DistribuiĆ§Ć£o e definiĆ§Ć£o de responsabilidades;
  • CondiƧƵes ternĆ”rias;
  • ImportĆ¢ncia das classes CSS quando ocorre mudanƧa de tag;
  • Ferramentas de debug;

About

Projeto Happy da NLW 3


Languages

Language:Handlebars 39.8%Language:CSS 33.2%Language:JavaScript 27.0%