Bem vindo de volta.
Então, agora que temos a estrutura da pasta configurada e nós criamos nossos arquivos. Nós vamos
passar algum tempo neste vídeo criando a estrutura da equipe atual.
Então, os elementos que precisamos para nossa lista de tarefas.
Comecemos por dar uma olhada na versão final em que estamos trabalhando ao
longo desta unidade.
Então, aqui está a lista final para fazer.
E os grandes elementos que temos aqui temos um título aqui.
Você tem um botão aqui algum tipo de elemento.
Nós temos uma entrada de texto aqui tipo de entrada igual ao texto e, então, este é um poço e cada um
deles é um aliado naquele UL.
E, em seguida, cada botão aqui é um período em que estamos mostrando e escondendo e mudando.
E também precisamos de algum tipo de elemento para conter tudo e usaremos apenas um dispositivo para fazer isso.
Então, precisamos de um div dentro dessa div, vamos fazer um H-1 um texto inserir um UL com um monte de aliados e,
em seguida, alguns intervalos lá também.
é criando uma lista feia para fazer, que funciona e depois voltando e adicionando no C S.
Então, começaremos escrevendo alguns idosos, não é C Cs real e apenas para que você
saiba o caminho sobre isso,
Então, eu quero chegar à carne desta, que é a consulta J e a lógica de fazer novas para fazer
e excluí-las e então vamos voltar e adicionar algumas das coisas bonitas no final.
ESTÁ BEM.
Então vamos começar com o HD.
e vamos dar-lhe um recipiente de identificação e vamos colocar tudo dentro dessa div e, em
vez disso, essa div terá um H1 e ele apenas dirá para fazer uma lista e então nós vamos tenha uma entrada de texto.
Eu vou fazer uma div
Então, o tipo de entrada é igual ao texto.
E vamos ver como isso está se formando.
Eu vou me livrar do fundo roxo por agora e vamos aqui.
E também vou me livrar desse alerta.
Então vamos fazer isso agora.
Aqui vamos nós.
ESTÁ BEM.
Então, temos a nossa opinião, temos o nosso texto para o H-1.
Acho que devemos chegar à lista do doht do.
E então a próxima coisa que faremos é adicionar a UL.
Então, vamos fazer essas mudanças na lista Dasch do.
E depois disso vamos adicionar a nossa UL e cada uma delas é encontrar dentro de lá.
E vamos começar por adicionar em três ou quatro Tutu's iniciais.
Então eu irei para as
roupas novas da Potions e também iremos visitar Hagrid.
Tudo bem.
Então, temos três para fazer isso na nossa lista.
Uma lista muito pouco importante até agora, mas temos nossa entrada de texto H-1 e nossos três aliados dentro dela.
Bem, vamos agora adiante e adicione um botão de exclusão e não vamos ter este botão de eliminação de
lixo com todo o estilo para começar que virá depois.
Nós vamos apenas ter um botão mais simples e na verdade não será um botão.
Isso vai ficar assim.
Então, a letra X sobre a qual podemos clicar e se clicarmos nesse X, ele irá excluir isso para fazer.
E é só assim que começamos, em vez de ter a carta, ser parte da mentira,
embora eu use uma extensão para uma extensão com uma letra X.
Então, vamos copiar isso.
Temos três espadas.
Cada um tem uma letra X lá atualizando.
Nada parece diferente.
Mas agora podemos selecionar esse período separadamente e vamos adicionar um ouvinte rápido.
Então, quando clicamos nesse período, queremos excluir isso para fazer ou toda essa mentira.
ESTÁ BEM.
Então, essa é toda a marcação básica que precisamos.
Vamos fazer um pequeno pedaço de estilo.
A primeira coisa que faremos é o centro desta div. Então, o div é um contêiner de ID.
Vamos aqui e selecione isso em nosso arquivo CSSA selecione o recipiente arrumado e vamos dar um bom plano de fundo cinza
apenas para começar e ver o que recebemos.
Você pode ver a div vai todo o caminho.
Vamos em frente e adicione um com para que ele não vá todo o caminho.
E então tentaremos centrá-lo no meio da tela para que a largura faça é trezentos
e sessenta e seis.
E se salvarmos isso, é exatamente a mesma largura que eu tenho com a versão final.
Então, 360 pixels e, então, a próxima coisa que queremos, claro, é o centro.
E a maneira mais fácil é usar esse truque de margem.
Então estabelecemos a margem na parte superior e inferior para ser zero e esquerda e direita para ser Ahto.
E se atualizarmos agora, temos um ótimo centro para fazer uma lista.
Então, isso é todo o tempo e avaliar que podemos fazer para começar aqui.
Vamos adicionar algumas coisas à medida que as precisamos.
E então, uma vez que obtemos a funcionalidade básica, nos concentraremos em fazer isso bonito e obter o
direito, você conhece as animações e os efeitos, os desvanecimentos e as lâminas e fazendo com que as coisas pareçam e
se sintam muito mais agradáveis.
OK, então, no próximo vídeo, vamos começar a escrever um inquérito