1
00:00:00,360 --> 00:00:01,140
Bem vindo de volta.

2
00:00:01,320 --> 00:00:06,480
Então, agora que temos a estrutura da pasta configurada e nós criamos nossos arquivos. Nós vamos

3
00:00:06,480 --> 00:00:10,020
passar algum tempo neste vídeo criando a estrutura da equipe atual.

4
00:00:10,020 --> 00:00:12,590
Então, os elementos que precisamos para nossa lista de tarefas.

5
00:00:12,990 --> 00:00:18,060
Comecemos por dar uma olhada na versão final em que estamos trabalhando ao

6
00:00:18,090 --> 00:00:19,270
longo desta unidade.

7
00:00:19,650 --> 00:00:21,400
Então, aqui está a lista final para fazer.

8
00:00:21,600 --> 00:00:26,490
E os grandes elementos que temos aqui temos um título aqui.

9
00:00:26,570 --> 00:00:29,200
Você tem um botão aqui algum tipo de elemento.

10
00:00:29,340 --> 00:00:36,510
Nós temos uma entrada de texto aqui tipo de entrada igual ao texto e, então, este é um poço e cada um

11
00:00:36,510 --> 00:00:38,580
deles é um aliado naquele UL.

12
00:00:39,030 --> 00:00:44,960
E, em seguida, cada botão aqui é um período em que estamos mostrando e escondendo e mudando.

13
00:00:44,970 --> 00:00:50,000
E também precisamos de algum tipo de elemento para conter tudo e usaremos apenas um dispositivo para fazer isso.

14
00:00:50,040 --> 00:00:59,070
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,

15
00:00:59,070 --> 00:01:01,230
em seguida, alguns intervalos lá também.

16
00:01:01,230 --> 00:01:07,110
é criando uma lista feia para fazer, que funciona e depois voltando e adicionando no C S.

17
00:01:07,110 --> 00:01:12,660
Então, começaremos escrevendo alguns idosos, não é C Cs real e apenas para que você

18
00:01:12,690 --> 00:01:14,590
saiba o caminho sobre isso,

19
00:01:14,640 --> 00:01:20,280
Então, eu quero chegar à carne desta, que é a consulta J e a lógica de fazer novas para fazer

20
00:01:20,280 --> 00:01:24,380
e excluí-las e então vamos voltar e adicionar algumas das coisas bonitas no final.

21
00:01:24,610 --> 00:01:24,860
ESTÁ BEM.

22
00:01:24,870 --> 00:01:26,990
Então vamos começar com o HD.

23
00:01:27,300 --> 00:01:34,380
e vamos dar-lhe um recipiente de identificação e vamos colocar tudo dentro dessa div e, em

24
00:01:34,380 --> 00:01:44,280
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.

25
00:01:44,280 --> 00:01:46,640
Eu vou fazer uma div

26
00:01:46,990 --> 00:01:50,580
Então, o tipo de entrada é igual ao texto.

27
00:01:50,580 --> 00:01:52,380
E vamos ver como isso está se formando.

28
00:01:52,680 --> 00:02:00,650
Eu vou me livrar do fundo roxo por agora e vamos aqui.

29
00:02:01,200 --> 00:02:04,230
E também vou me livrar desse alerta.

30
00:02:04,230 --> 00:02:06,270
Então vamos fazer isso agora.

31
00:02:06,270 --> 00:02:07,240
Aqui vamos nós.

32
00:02:07,790 --> 00:02:08,140
ESTÁ BEM.

33
00:02:08,190 --> 00:02:12,420
Então, temos a nossa opinião, temos o nosso texto para o H-1.

34
00:02:12,600 --> 00:02:15,450
Acho que devemos chegar à lista do doht do.

35
00:02:15,690 --> 00:02:18,970
E então a próxima coisa que faremos é adicionar a UL.

36
00:02:19,080 --> 00:02:24,240
Então, vamos fazer essas mudanças na lista Dasch do.

37
00:02:24,240 --> 00:02:30,660
E depois disso vamos adicionar a nossa UL e cada uma delas é encontrar dentro de lá.

38
00:02:30,660 --> 00:02:35,130
E vamos começar por adicionar em três ou quatro Tutu's iniciais.

39
00:02:35,430 --> 00:02:38,640
Então eu irei para as

40
00:02:42,450 --> 00:02:48,350
roupas novas da Potions e também iremos visitar Hagrid.

41
00:02:48,360 --> 00:02:48,630
Tudo bem.

42
00:02:48,630 --> 00:02:51,740
Então, temos três para fazer isso na nossa lista.

43
00:02:51,750 --> 00:02:59,630
Uma lista muito pouco importante até agora, mas temos nossa entrada de texto H-1 e nossos três aliados dentro dela.

44
00:02:59,680 --> 00:03:06,150
Bem, vamos agora adiante e adicione um botão de exclusão e não vamos ter este botão de eliminação de

45
00:03:06,150 --> 00:03:09,820
lixo com todo o estilo para começar que virá depois.

46
00:03:09,840 --> 00:03:15,030
Nós vamos apenas ter um botão mais simples e na verdade não será um botão.

47
00:03:15,180 --> 00:03:16,460
Isso vai ficar assim.

48
00:03:16,590 --> 00:03:23,400
Então, a letra X sobre a qual podemos clicar e se clicarmos nesse X, ele irá excluir isso para fazer.

49
00:03:23,460 --> 00:03:28,830
E é só assim que começamos, em vez de ter a carta, ser parte da mentira,

50
00:03:28,830 --> 00:03:32,840
embora eu use uma extensão para uma extensão com uma letra X.

51
00:03:33,330 --> 00:03:38,200
Então, vamos copiar isso.

52
00:03:38,340 --> 00:03:39,810
Temos três espadas.

53
00:03:39,990 --> 00:03:44,080
Cada um tem uma letra X lá atualizando.

54
00:03:44,100 --> 00:03:45,160
Nada parece diferente.

55
00:03:45,450 --> 00:03:51,810
Mas agora podemos selecionar esse período separadamente e vamos adicionar um ouvinte rápido.

56
00:03:51,840 --> 00:03:56,890
Então, quando clicamos nesse período, queremos excluir isso para fazer ou toda essa mentira.

57
00:03:57,290 --> 00:03:57,530
ESTÁ BEM.

58
00:03:57,540 --> 00:03:59,820
Então, essa é toda a marcação básica que precisamos.

59
00:04:00,060 --> 00:04:02,750
Vamos fazer um pequeno pedaço de estilo.

60
00:04:02,790 --> 00:04:09,300
A primeira coisa que faremos é o centro desta div. Então, o div é um contêiner de ID.

61
00:04:09,720 --> 00:04:21,330
Vamos aqui e selecione isso em nosso arquivo CSSA selecione o recipiente arrumado e vamos dar um bom plano de fundo cinza

62
00:04:22,020 --> 00:04:26,430
apenas para começar e ver o que recebemos.

63
00:04:26,430 --> 00:04:28,670
Você pode ver a div vai todo o caminho.

64
00:04:28,860 --> 00:04:32,590
Vamos em frente e adicione um com para que ele não vá todo o caminho.

65
00:04:32,820 --> 00:04:39,900
E então tentaremos centrá-lo no meio da tela para que a largura faça é trezentos

66
00:04:39,900 --> 00:04:41,840
e sessenta e seis.

67
00:04:42,120 --> 00:04:48,930
E se salvarmos isso, é exatamente a mesma largura que eu tenho com a versão final.

68
00:04:48,930 --> 00:04:53,870
Então, 360 pixels e, então, a próxima coisa que queremos, claro, é o centro.

69
00:04:54,210 --> 00:04:57,000
E a maneira mais fácil é usar esse truque de margem.

70
00:04:57,150 --> 00:05:02,760
Então estabelecemos a margem na parte superior e inferior para ser zero e esquerda e direita para ser Ahto.

71
00:05:03,570 --> 00:05:07,640
E se atualizarmos agora, temos um ótimo centro para fazer uma lista.

72
00:05:07,680 --> 00:05:11,650
Então, isso é todo o tempo e avaliar que podemos fazer para começar aqui.

73
00:05:11,700 --> 00:05:13,760
Vamos adicionar algumas coisas à medida que as precisamos.

74
00:05:13,950 --> 00:05:18,930
E então, uma vez que obtemos a funcionalidade básica, nos concentraremos em fazer isso bonito e obter o

75
00:05:18,930 --> 00:05:24,780
direito, você conhece as animações e os efeitos, os desvanecimentos e as lâminas e fazendo com que as coisas pareçam e

76
00:05:24,780 --> 00:05:26,470
se sintam muito mais agradáveis.

77
00:05:27,060 --> 00:05:29,870
OK, então, no próximo vídeo, vamos começar a escrever um inquérito