- Node.js - https://nodejs.org/en/
- Visual Studio Code - https://code.visualstudio.com/
- Angular CLI - https://angular.io/cli
Trecho de código para adicionar o normalize:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous" />Mais informações sobre o box-sizing: https://tableless.github.io/iniciantes/manual/css/box-model.html
Mais informações sobre o height: 100%: https://imasters.com.br/css/por-que-height-100-nao-funciona
:root {
--background-color: #EAEAEA;
--primary-color: #EA1D25;
--secondary-color: #FFFFFF;
--text-color: #5C6369;
--text-color-light: rgba(92, 99, 105, 0.45);
--positive-variation-color: #87D883;
--negative-variation-color: #F55A5F;
}
* {
box-sizing: border-box;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
background-color: var(--background-color);
font-family: 'Segoe UI', sans-serif;
}- Guia completo do Flexbox - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- Flexbox Froggy - https://flexboxfroggy.com/
- Conceitos básicos de Flexbox - https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
- Conceitos básicos do CSS Grid - https://tableless.com.br/um-pouco-sobre-css-grid-layout/
- Guia completo do CSS Grid - https://css-tricks.com/snippets/css/complete-guide-grid/
- Unidades de medidas relativas - https://desenvolvimentoparaweb.com/css/unidades-css-rem-vh-vw-vmin-vmax-ex-ch/
- Entendendo o Hoisting do javascript - https://medium.com/opensanca/hoisting-em-javascript-9f22b1f78448
- Um pouco sobre Promises e assincronismo - https://medium.com/trainingcenter/entendendo-promises-de-uma-vez-por-todas-32442ec725c2
- Template Strings / Interpolação de Strings - https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Template_literals
- Tipos do Typescript - https://bognarjunior.wordpress.com/2018/09/16/typescript-tipos-de-dados/
- Property Binding - https://angular.io/guide/property-binding
- Binding de atributos - https://angular.io/guide/attribute-binding
- Inputs e Outputs - https://angular.io/guide/inputs-outputs
- Diretivas Básicas - https://angular.io/guide/built-in-directives
header.component.css:
.header {
width: 100%;
padding: 1rem 1.5rem;
...
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}stock-card.component:
.stock-card-container {
width: 21.375rem;
height: 13.8125rem;
background-color: var(--secondary-color);
...
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.stock-card-container:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}- GitHub - https://github.com/
- angular-cli-ghpages - https://github.com/angular-schule/angular-cli-ghpages/#readme
"scripts": {
....
"deploy": "ng deploy --base-href=https://<seu-usuario>.github.io/<repositorio>/",
...
}Será necessário substituir o <seu-usuário> pelo seu nome de usuário do Github e o <repositorio> pelo nome do repositório criado anteriormente.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent