SlideShare uma empresa Scribd logo
1 de 43
Simplificando o full stack
desenvolvimento web na prática
Sou Marianna
Comunicação em Mídias Digitais
Desenvolvedora web na Yuppie e faladeira
qualquer rede social: @mariannactx
Oi!
Agenda
SCRUM
Vamos usar algumas
ferramentas dessas
metodologias para
agilizar as entregas
com qualidade
GIT
Pra versionar nosso
projeto.
Terminal
Deixa o
desenvolvimento mais
ágil e transparente
HTML + CSS
De que adianta um
programa robusto se o
usuário não consegue
usar bem, né?
PHP e Websockets
Sincronia
MySQL
Banco de dados
Servidor local
Pro conteúdo dinâmico
funcionar
Javascript
Vamos tornar possível
umas animações
bacanas e sincronia
também
O jogo
“
Como usuário, preciso acessar um
console que se conecte ao jogo e
que me permita jogar tanto de um
celular quanto de um computador
guardando os meus resultados
para exibir em um ranking
backlog
Apresentação da oficina
Estrutura do projeto
Visual do projeto
1ª entrega
Banco de dados do projeto
Requisitar o banco de dados do projeto
Receber notificações quando algo for modificado
2ª entrega
Tá tudo bem
Configuração do
ambiente
Qual sistema operacional você usa?
E a IDE? E o navegador?
Vai controlar as versões do seu projeto?
git
sua área de trabalho
atual
arquivos monitorados
árvore do repositório
cd /var/www/html
mkdir -m mtss-2018
git init
git status
nano index.html
[]
git status
git add index.html
git commit -m “Commit inicial”
git status
git log
backlog
Apresentação da oficina
Estrutura do projeto
Visual do projeto
1ª entrega
Banco de dados do projeto
Requisitar o banco de dados do projeto
Receber notificações quando algo for modificado
2ª entrega
HTML + CSS
Ajustando o layout da aplicação
2
Licença livre para uso pessoal e
comercial
GraphicBurger License
All resources available for
download on GraphicBurger,
including but not limited to, (...), are
royalty free for use in both personal
and commercial projects.
graphicburger.com/flat-design-ui-components/
codepen.io/jlalovi/pen/bIyAr
HTML + CSS
Tela inicial
2
TÍTULO
LOGO
Rank
ing
TECLADO GAMEPAD
TÍTULO
LOGO
Rank
ing
TECLADO GAMEPAD
Nome do usuário
Cores
JOGAR!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titulo</title>
<link rel="stylesheet" href="css/ui/style.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/player.js"></script>
</head>
<body>
<div class="main-container">
<header class="block"></header>
<div class="left-container container"></div>
<div class="right-container container"></div>
<div class="modal-container container"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titulo</title>
<link rel="stylesheet" href="css/ui/style.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/player.js"></script>
</head>
<body>
<div class="main-container">
<header class="block"></header>
<div class="left-container container"></div>
<div class="right-container container"></div>
<div class="modal-container container"></div>
</div>
</body>
</html>
<div class="menu-box block">
<h2 class="titular">AÇÃO</h2>
<a><img src="caminho da imagem"></a>
</div>
<form id="form-player" method="POST" action="" onsubmit="newPlayer(this);">
<div class="enter-user-name block">
<div class="input-container">
<input type="text" name="apelido" placeholder="apelido" class="email text-input">
<div class="input-icon envelope-icon-acount">
<span class="fontawesome-user scnd-font-color"></span>
</div>
</div>
<div class="input-container">
<div class="base-colors">
<input type="radio" name="cor" class="color" >
</div>
</div>
<button type="submit" class="subscribe button">JOGAR!</button>
</div>
</form>
HTML + CSS
Centralizar controles
2
body {
text-align: center;
}
#keyboard {
font-family: sans-serif;
display:inline-block;
margin: 10% auto;
box-shadow: 0 0.2em 0 0.05em
#222;
}
.row > div[data-pressed],
.row > div.active:active {
background: #ccc;
color: #515C8C;
position: relative;
top: 0.2em;
box-shadow: 0 0 0 0.05em #394264;
}
.row > div[data-pressed] > *,
.row > div.active:active > *{
color: #515C8C;
}
HTML + CSS
Teclas do teclado
2
.active, .active > * {
color: #394264;
}
.active{
background: #ddd;
color: #394264;
font-weight: bold;
cursor: pointer;
box-shadow: 0 0.2em 0 0.05em
rgb(36, 43, 73);
}
.row > div[data-pressed],
.row > div.active:active {
background: #ccc;
color: #515C8C;
position: relative;
top: 0.2em;
box-shadow: 0 0 0 0.05em #394264;
}
.row > div[data-pressed] > *,
.row > div.active:active > *{
color: #515C8C;
}
HTML + CSS
Botões do gamepad
2
.cross#up:active,
.cross#down:active,
.cross#left:active,
.cross#right:active {
box-shadow: inset 0 0 0
4px #555;
}
.cross#left:active,
.cross#right:active{
z-index: 998;
}
#jump:active{
box-shadow: inset 0 4px 1px
rgba(23, 111, 23, 0.9);
}
Introdução a lógica
Com javascript e dev tools
4
Conceitos básicos
◉ Variáveis
◉ Tipagem
◉ Arrays
◉ Operadores
◉ Estruturas de controle
9
2 5 9
5
2
Javascript
Som nos botões
5
var corners = document.getElementsByClassName("corner");
for( var corner in corners){
if(!isNaN(corner)) {
corners[corner].addEventListener("touchstart", function (e) {
cornerSound.play();
});
corners[corner].addEventListener("touchend", function (e) {
cornerSound.play();
});
}
}
var crosses = document.getElementsByClassName("cross");
for( var cross in crosses){
if(!isNaN(cross)) {
crosses[cross].addEventListener("touchstart", function (e) {
cornerSound.play();
});
crosses[cross].addEventListener("touchend", function (e) {
cornerSound.play();
});
}
}
var corners = document.getElementsByClassName("corner");
for( var corner in corners){
addBtnSound(corner, corners[corner]);
}
var crosses = document.getElementsByClassName("cross");
for( var cross in crosses){
addBtnSound(cross, crosses[cross]);
}
function addBtnSound(key, btn){
if(!isNaN(key)) {
btn.addEventListener("touchstart", function (e) {
cornerSound.play();
});
btn.addEventListener("touchend", function (e) {
cornerSound.play();
});
}
}
addBtnSound("corner");
addBtnSound("cross");
function addBtnSound(btnClass){
var btns = document.getElementsByClassName(btnClass);
for( var key in btns) {
var btn = btns[key];
if (!isNaN(key)) {
btn.addEventListener("touchstart", function (e) {
btn.play();
});
btn.addEventListener("touchend", function (e) {
btn.play();
});
}
}
}
["corner", "cross"].forEach(function(btnClass){
var btns = document.getElementsByClassName(btnClass);
for( var key in btns) {
var btn = btns[key];
if (!isNaN(key)) {
btn.addEventListener("touchstart", function (e) {
btn.play();
});
btn.addEventListener("touchend", function (e) {
btn.play();
});
}
}
});
["corner", "cross"].forEach(function(btnClass){
var btns = document.getElementsByClassName(btnClass);
for( var key in btns) {
var btn = btns[key];
if (!isNaN(key)) {
["touchstart", "touchend"].forEach(function(event){
btn.addEventListener(event, function () {
btn.play();
});
});
}
}
});
var classes = ["corner", "cross"];
for(var classKey in classes){
var btns = document.getElementsByClassName(classes[classKey]);
for( var key in btns) {
if (!isNaN(key)) {
var btn = btns[key];
var events = ["touchstart", "touchend"];
for(var eventKey in events){
btn.addEventListener(events[eventKey], function () {
cornerSound.play();
});
}
}
}
};
backlog
Apresentação da oficina
Estrutura do projeto
Visual do projeto
1ª entrega.
Banco de dados do projeto
Requisitar o banco de dados do projeto
Receber notificações quando algo for modificado
2ª entrega
PHP
E servidor local
6
Banco de dados
Let’s start with the first set of slides
7
backlog
Apresentação da oficina
Estrutura do projeto
Visual do projeto
1ª entrega
Banco de dados do projeto
Requisitar o banco de dados do projeto
Receber notificações quando algo for modificado
2ª entrega
backlog
Apresentação da oficina
Estrutura do projeto
Visual do projeto
1ª entrega
Banco de dados do projeto
Requisitar o banco de dados do projeto
Receber notificações quando algo for modificado
2ª entrega
backlog
Apresentação da oficina
Estrutura do projeto
Visual do projeto
1ª entrega
Banco de dados do projeto
Requisitar o banco de dados do projeto
Receber notificações quando algo for modificado
2ª entrega.
Comunidades
◉ fb.com/womentechmarkers
◉ grudepb.slack.com
perguntas?
Obrigada!

Mais conteúdo relacionado

Mais procurados

11 Java Script - Exemplos com eventos
11 Java Script - Exemplos com eventos11 Java Script - Exemplos com eventos
11 Java Script - Exemplos com eventosCentro Paula Souza
 
Ganhando tempo com Task Runners
Ganhando tempo com Task RunnersGanhando tempo com Task Runners
Ganhando tempo com Task RunnersFabio Carvalho
 
Edição de conteúdo web usando Javascript de ponta a ponta
Edição de conteúdo web usando Javascript de ponta a pontaEdição de conteúdo web usando Javascript de ponta a ponta
Edição de conteúdo web usando Javascript de ponta a pontaJorge Walendowsky
 

Mais procurados (6)

11 Java Script - Exemplos com eventos
11 Java Script - Exemplos com eventos11 Java Script - Exemplos com eventos
11 Java Script - Exemplos com eventos
 
JQuery
JQueryJQuery
JQuery
 
Java script aula 07 - eventos
Java script   aula 07 - eventosJava script   aula 07 - eventos
Java script aula 07 - eventos
 
Ganhando tempo com Task Runners
Ganhando tempo com Task RunnersGanhando tempo com Task Runners
Ganhando tempo com Task Runners
 
jQuery
jQueryjQuery
jQuery
 
Edição de conteúdo web usando Javascript de ponta a ponta
Edição de conteúdo web usando Javascript de ponta a pontaEdição de conteúdo web usando Javascript de ponta a ponta
Edição de conteúdo web usando Javascript de ponta a ponta
 

Semelhante a Full Stack

JQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEBJQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEBLuciano Borges
 
MIRA - Um framework Javascript para construção de interfaces adaptativas em a...
MIRA - Um framework Javascript para construção de interfaces adaptativas em a...MIRA - Um framework Javascript para construção de interfaces adaptativas em a...
MIRA - Um framework Javascript para construção de interfaces adaptativas em a...Ezequiel Bertti
 
Introdução de web
Introdução de webIntrodução de web
Introdução de webSedu
 
Evoluindo a experiência web no SporTV Play com React
Evoluindo a experiência web no SporTV Play com ReactEvoluindo a experiência web no SporTV Play com React
Evoluindo a experiência web no SporTV Play com ReactGuilherme Garnier
 
Navegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza BastosNavegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza BastosiMasters
 
Windows Azure 5/8 - Recursos adicionais do Windows Azure
Windows Azure 5/8 - Recursos adicionais do Windows AzureWindows Azure 5/8 - Recursos adicionais do Windows Azure
Windows Azure 5/8 - Recursos adicionais do Windows AzureVitor Ciaramella
 
Apps Web em Wicket e Scala no GlassFish Java EE 6
Apps Web em Wicket e Scala no GlassFish Java EE 6Apps Web em Wicket e Scala no GlassFish Java EE 6
Apps Web em Wicket e Scala no GlassFish Java EE 6Bruno Borges
 
Angular JS, você precisa conhecer
Angular JS, você precisa conhecerAngular JS, você precisa conhecer
Angular JS, você precisa conhecermeet2Brains
 
Mini Curso de jQuery Lambda3/Globalcode
Mini Curso de jQuery Lambda3/GlobalcodeMini Curso de jQuery Lambda3/Globalcode
Mini Curso de jQuery Lambda3/GlobalcodeVictor Cavalcante
 
Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_Rodrigo Urubatan
 
Java mais ágil que nunca no desenvolvimento Web
Java mais ágil que nunca no desenvolvimento WebJava mais ágil que nunca no desenvolvimento Web
Java mais ágil que nunca no desenvolvimento WebBruno Borges
 

Semelhante a Full Stack (20)

HTML + CSS
HTML + CSSHTML + CSS
HTML + CSS
 
Wicket 2008
Wicket 2008Wicket 2008
Wicket 2008
 
JQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEBJQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEB
 
MIRA - Um framework Javascript para construção de interfaces adaptativas em a...
MIRA - Um framework Javascript para construção de interfaces adaptativas em a...MIRA - Um framework Javascript para construção de interfaces adaptativas em a...
MIRA - Um framework Javascript para construção de interfaces adaptativas em a...
 
Html dom, eventos, jquery
Html dom, eventos, jqueryHtml dom, eventos, jquery
Html dom, eventos, jquery
 
Introdução de web
Introdução de webIntrodução de web
Introdução de web
 
Evoluindo a experiência web no SporTV Play com React
Evoluindo a experiência web no SporTV Play com ReactEvoluindo a experiência web no SporTV Play com React
Evoluindo a experiência web no SporTV Play com React
 
Html5 workshop
Html5 workshopHtml5 workshop
Html5 workshop
 
Navegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza BastosNavegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza Bastos
 
HTML
HTMLHTML
HTML
 
Less
LessLess
Less
 
Windows Azure 5/8 - Recursos adicionais do Windows Azure
Windows Azure 5/8 - Recursos adicionais do Windows AzureWindows Azure 5/8 - Recursos adicionais do Windows Azure
Windows Azure 5/8 - Recursos adicionais do Windows Azure
 
Apps Web em Wicket e Scala no GlassFish Java EE 6
Apps Web em Wicket e Scala no GlassFish Java EE 6Apps Web em Wicket e Scala no GlassFish Java EE 6
Apps Web em Wicket e Scala no GlassFish Java EE 6
 
Angular JS, você precisa conhecer
Angular JS, você precisa conhecerAngular JS, você precisa conhecer
Angular JS, você precisa conhecer
 
Mini Curso de jQuery Lambda3/Globalcode
Mini Curso de jQuery Lambda3/GlobalcodeMini Curso de jQuery Lambda3/Globalcode
Mini Curso de jQuery Lambda3/Globalcode
 
Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_
 
Java mais ágil que nunca no desenvolvimento Web
Java mais ágil que nunca no desenvolvimento WebJava mais ágil que nunca no desenvolvimento Web
Java mais ágil que nunca no desenvolvimento Web
 
Java e Cloud Computing
Java e Cloud ComputingJava e Cloud Computing
Java e Cloud Computing
 
Dinamizando Sites Estáticos
Dinamizando Sites EstáticosDinamizando Sites Estáticos
Dinamizando Sites Estáticos
 
jQuery
jQueryjQuery
jQuery
 

Full Stack

  • 1. Simplificando o full stack desenvolvimento web na prática
  • 2. Sou Marianna Comunicação em Mídias Digitais Desenvolvedora web na Yuppie e faladeira qualquer rede social: @mariannactx Oi!
  • 3. Agenda SCRUM Vamos usar algumas ferramentas dessas metodologias para agilizar as entregas com qualidade GIT Pra versionar nosso projeto. Terminal Deixa o desenvolvimento mais ágil e transparente HTML + CSS De que adianta um programa robusto se o usuário não consegue usar bem, né? PHP e Websockets Sincronia MySQL Banco de dados Servidor local Pro conteúdo dinâmico funcionar Javascript Vamos tornar possível umas animações bacanas e sincronia também
  • 5. “ Como usuário, preciso acessar um console que se conecte ao jogo e que me permita jogar tanto de um celular quanto de um computador guardando os meus resultados para exibir em um ranking
  • 6. backlog Apresentação da oficina Estrutura do projeto Visual do projeto 1ª entrega Banco de dados do projeto Requisitar o banco de dados do projeto Receber notificações quando algo for modificado 2ª entrega
  • 8. Configuração do ambiente Qual sistema operacional você usa? E a IDE? E o navegador? Vai controlar as versões do seu projeto?
  • 9. git sua área de trabalho atual arquivos monitorados árvore do repositório
  • 10. cd /var/www/html mkdir -m mtss-2018 git init git status nano index.html [] git status git add index.html git commit -m “Commit inicial” git status git log
  • 11. backlog Apresentação da oficina Estrutura do projeto Visual do projeto 1ª entrega Banco de dados do projeto Requisitar o banco de dados do projeto Receber notificações quando algo for modificado 2ª entrega
  • 12. HTML + CSS Ajustando o layout da aplicação 2
  • 13. Licença livre para uso pessoal e comercial GraphicBurger License All resources available for download on GraphicBurger, including but not limited to, (...), are royalty free for use in both personal and commercial projects. graphicburger.com/flat-design-ui-components/ codepen.io/jlalovi/pen/bIyAr
  • 14. HTML + CSS Tela inicial 2
  • 17. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titulo</title> <link rel="stylesheet" href="css/ui/style.css"> <link rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="js/player.js"></script> </head> <body> <div class="main-container"> <header class="block"></header> <div class="left-container container"></div> <div class="right-container container"></div> <div class="modal-container container"></div> </div> </body> </html>
  • 18. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titulo</title> <link rel="stylesheet" href="css/ui/style.css"> <link rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="js/player.js"></script> </head> <body> <div class="main-container"> <header class="block"></header> <div class="left-container container"></div> <div class="right-container container"></div> <div class="modal-container container"></div> </div> </body> </html>
  • 19. <div class="menu-box block"> <h2 class="titular">AÇÃO</h2> <a><img src="caminho da imagem"></a> </div>
  • 20. <form id="form-player" method="POST" action="" onsubmit="newPlayer(this);"> <div class="enter-user-name block"> <div class="input-container"> <input type="text" name="apelido" placeholder="apelido" class="email text-input"> <div class="input-icon envelope-icon-acount"> <span class="fontawesome-user scnd-font-color"></span> </div> </div> <div class="input-container"> <div class="base-colors"> <input type="radio" name="cor" class="color" > </div> </div> <button type="submit" class="subscribe button">JOGAR!</button> </div> </form>
  • 21. HTML + CSS Centralizar controles 2
  • 22. body { text-align: center; } #keyboard { font-family: sans-serif; display:inline-block; margin: 10% auto; box-shadow: 0 0.2em 0 0.05em #222; } .row > div[data-pressed], .row > div.active:active { background: #ccc; color: #515C8C; position: relative; top: 0.2em; box-shadow: 0 0 0 0.05em #394264; } .row > div[data-pressed] > *, .row > div.active:active > *{ color: #515C8C; }
  • 23. HTML + CSS Teclas do teclado 2
  • 24. .active, .active > * { color: #394264; } .active{ background: #ddd; color: #394264; font-weight: bold; cursor: pointer; box-shadow: 0 0.2em 0 0.05em rgb(36, 43, 73); } .row > div[data-pressed], .row > div.active:active { background: #ccc; color: #515C8C; position: relative; top: 0.2em; box-shadow: 0 0 0 0.05em #394264; } .row > div[data-pressed] > *, .row > div.active:active > *{ color: #515C8C; }
  • 25. HTML + CSS Botões do gamepad 2
  • 26. .cross#up:active, .cross#down:active, .cross#left:active, .cross#right:active { box-shadow: inset 0 0 0 4px #555; } .cross#left:active, .cross#right:active{ z-index: 998; } #jump:active{ box-shadow: inset 0 4px 1px rgba(23, 111, 23, 0.9); }
  • 27. Introdução a lógica Com javascript e dev tools 4
  • 28. Conceitos básicos ◉ Variáveis ◉ Tipagem ◉ Arrays ◉ Operadores ◉ Estruturas de controle 9 2 5 9 5 2
  • 30. var corners = document.getElementsByClassName("corner"); for( var corner in corners){ if(!isNaN(corner)) { corners[corner].addEventListener("touchstart", function (e) { cornerSound.play(); }); corners[corner].addEventListener("touchend", function (e) { cornerSound.play(); }); } } var crosses = document.getElementsByClassName("cross"); for( var cross in crosses){ if(!isNaN(cross)) { crosses[cross].addEventListener("touchstart", function (e) { cornerSound.play(); }); crosses[cross].addEventListener("touchend", function (e) { cornerSound.play(); }); } }
  • 31. var corners = document.getElementsByClassName("corner"); for( var corner in corners){ addBtnSound(corner, corners[corner]); } var crosses = document.getElementsByClassName("cross"); for( var cross in crosses){ addBtnSound(cross, crosses[cross]); } function addBtnSound(key, btn){ if(!isNaN(key)) { btn.addEventListener("touchstart", function (e) { cornerSound.play(); }); btn.addEventListener("touchend", function (e) { cornerSound.play(); }); } }
  • 32. addBtnSound("corner"); addBtnSound("cross"); function addBtnSound(btnClass){ var btns = document.getElementsByClassName(btnClass); for( var key in btns) { var btn = btns[key]; if (!isNaN(key)) { btn.addEventListener("touchstart", function (e) { btn.play(); }); btn.addEventListener("touchend", function (e) { btn.play(); }); } } }
  • 33. ["corner", "cross"].forEach(function(btnClass){ var btns = document.getElementsByClassName(btnClass); for( var key in btns) { var btn = btns[key]; if (!isNaN(key)) { btn.addEventListener("touchstart", function (e) { btn.play(); }); btn.addEventListener("touchend", function (e) { btn.play(); }); } } });
  • 34. ["corner", "cross"].forEach(function(btnClass){ var btns = document.getElementsByClassName(btnClass); for( var key in btns) { var btn = btns[key]; if (!isNaN(key)) { ["touchstart", "touchend"].forEach(function(event){ btn.addEventListener(event, function () { btn.play(); }); }); } } });
  • 35. var classes = ["corner", "cross"]; for(var classKey in classes){ var btns = document.getElementsByClassName(classes[classKey]); for( var key in btns) { if (!isNaN(key)) { var btn = btns[key]; var events = ["touchstart", "touchend"]; for(var eventKey in events){ btn.addEventListener(events[eventKey], function () { cornerSound.play(); }); } } } };
  • 36. backlog Apresentação da oficina Estrutura do projeto Visual do projeto 1ª entrega. Banco de dados do projeto Requisitar o banco de dados do projeto Receber notificações quando algo for modificado 2ª entrega
  • 38. Banco de dados Let’s start with the first set of slides 7
  • 39. backlog Apresentação da oficina Estrutura do projeto Visual do projeto 1ª entrega Banco de dados do projeto Requisitar o banco de dados do projeto Receber notificações quando algo for modificado 2ª entrega
  • 40. backlog Apresentação da oficina Estrutura do projeto Visual do projeto 1ª entrega Banco de dados do projeto Requisitar o banco de dados do projeto Receber notificações quando algo for modificado 2ª entrega
  • 41. backlog Apresentação da oficina Estrutura do projeto Visual do projeto 1ª entrega Banco de dados do projeto Requisitar o banco de dados do projeto Receber notificações quando algo for modificado 2ª entrega.

Notas do Editor

  1. Explicar efeitos do margin quando o display é block (ele move o elemento pai). Então, provavelmente, tem algum elemento com margin por aí que tá afetando.
  2. Explicar efeitos do margin quando o display é block (ele move o elemento pai). Então, provavelmente, tem algum elemento com margin por aí que tá afetando.
  3. Explicar efeitos do margin quando o display é block (ele move o elemento pai). Então, provavelmente, tem algum elemento com margin por aí que tá afetando.
  4. Explicar efeitos do margin quando o display é block (ele move o elemento pai). Então, provavelmente, tem algum elemento com margin por aí que tá afetando.
  5. Explicar efeitos do margin quando o display é block (ele move o elemento pai). Então, provavelmente, tem algum elemento com margin por aí que tá afetando.
  6. Explicar efeitos do margin quando o display é block (ele move o elemento pai). Então, provavelmente, tem algum elemento com margin por aí que tá afetando.
  7. Explicar efeitos do margin quando o display é block (ele move o elemento pai). Então, provavelmente, tem algum elemento com margin por aí que tá afetando.
  8. Explicar no console