1
00:00:00,360 --> 00:00:01,140
Ben tornato.

2
00:00:01,320 --> 00:00:06,480
Quindi ora che abbiamo configurato la struttura delle cartelle e abbiamo creato i nostri file, passeremo un

3
00:00:06,480 --> 00:00:10,020
po 'di tempo in questo video per creare l'effettiva struttura del team.

4
00:00:10,020 --> 00:00:12,590
Quindi gli elementi di cui abbiamo bisogno per la nostra lista delle cose da fare.

5
00:00:12,990 --> 00:00:18,060
Iniziamo dando un'occhiata alla versione finale a cui stiamo lavorando nel corso

6
00:00:18,090 --> 00:00:19,270
di questa unità.

7
00:00:19,650 --> 00:00:21,400
Quindi ecco la lista finale da fare.

8
00:00:21,600 --> 00:00:26,490
E i grandi elementi che abbiamo qui abbiamo un titolo proprio qui.

9
00:00:26,570 --> 00:00:29,200
Hai un pulsante qui una sorta di elemento.

10
00:00:29,340 --> 00:00:36,510
Abbiamo un input di testo qui il tipo di input è uguale al testo e quindi questo è un pozzo e ognuno di

11
00:00:36,510 --> 00:00:38,580
questi è un alleato in quell'UL.

12
00:00:39,030 --> 00:00:44,960
E poi ogni pulsante qui è un intervallo che stiamo mostrando e nascondendo e cambiando con.

13
00:00:44,970 --> 00:00:50,000
E abbiamo anche bisogno di una sorta di elemento per contenere tutto e useremo solo un dispositivo per farlo.

14
00:00:50,040 --> 00:00:59,070
Quindi abbiamo bisogno di un div all'interno di quel div, faremo in modo che un H-1 inserisca un testo in un UL con un gruppo di alleati

15
00:00:59,070 --> 00:01:01,230
e poi anche un po 'di span.

16
00:01:01,230 --> 00:01:07,110
un elenco di cose brutto che funzioni e poi tornando indietro e aggiungendo nella C S.

17
00:01:07,110 --> 00:01:12,660
Quindi inizieremo scrivendo un po 'di tempo con lui, senza C Ss e solo per

18
00:01:12,690 --> 00:01:14,590
farti sapere come faremo creando

19
00:01:14,640 --> 00:01:20,280
Quindi voglio arrivare alla carne di questo che è la query di J e la logica di fare di nuovo

20
00:01:20,280 --> 00:01:24,380
da fare e cancellarli e poi torneremo e aggiungeremo alcune cose carine alla fine.

21
00:01:24,610 --> 00:01:24,860
OK.

22
00:01:24,870 --> 00:01:26,990
Quindi iniziamo con l'HD.

23
00:01:27,300 --> 00:01:34,380
diamo un contenitore di ID e metteremo tutto all'interno di quel div e poi

24
00:01:34,380 --> 00:01:44,280
invece quel div avrà un H1 e dirà solo di fare lista e poi faremo avere un input di testo

25
00:01:44,280 --> 00:01:46,640
Creerò un div e gli

26
00:01:46,990 --> 00:01:50,580
Quindi il tipo di input è uguale al testo.

27
00:01:50,580 --> 00:01:52,380
E vediamo solo come si sta formando.

28
00:01:52,680 --> 00:02:00,650
Per ora mi libererò dello sfondo viola e andiamo qui.

29
00:02:01,200 --> 00:02:04,230
E mi libererò anche di questo avviso.

30
00:02:04,230 --> 00:02:06,270
Quindi facciamolo ora.

31
00:02:06,270 --> 00:02:07,240
Eccoci.

32
00:02:07,790 --> 00:02:08,140
OK.

33
00:02:08,190 --> 00:02:12,420
Quindi abbiamo il nostro input, abbiamo il nostro testo per l'H-1.

34
00:02:12,600 --> 00:02:15,450
Suppongo che dovremmo farlo in una lista di cose da fare.

35
00:02:15,690 --> 00:02:18,970
E poi la prossima cosa che faremo è aggiungere l'UL.

36
00:02:19,080 --> 00:02:24,240
Quindi facciamo queste modifiche alla lista di Dasch do.

37
00:02:24,240 --> 00:02:30,660
E dopo ciò aggiungeremo nella nostra UL e ognuno di loro è mentire dentro di noi.

38
00:02:30,660 --> 00:02:35,130
E iniziamo aggiungendo in tre o quattro Tutu di avviamento.

39
00:02:35,430 --> 00:02:38,640
Quindi andrò alle nuove vesti della

40
00:02:42,450 --> 00:02:48,350
classe di Pozioni e aggiungeremo anche la visita a Hagrid.

41
00:02:48,360 --> 00:02:48,630
Tutto ok.

42
00:02:48,630 --> 00:02:51,740
Quindi ne abbiamo tre per farlo nella nostra lista.

43
00:02:51,750 --> 00:02:59,630
Elenco molto insignificante finora, ma abbiamo il nostro H-1, il nostro input di testo e i nostri tre alleati al suo interno.

44
00:02:59,680 --> 00:03:06,150
Bene, ora andiamo avanti e aggiungiamo un pulsante di eliminazione e non abbiamo intenzione di avere questo cestino può eliminare

45
00:03:06,150 --> 00:03:09,820
il pulsante con tutto lo stile per iniziare che verrà dopo.

46
00:03:09,840 --> 00:03:15,030
Avremo semplicemente un pulsante più semplice e in realtà non sarà nemmeno un pulsante.

47
00:03:15,180 --> 00:03:16,460
Assomiglierà a questo.

48
00:03:16,590 --> 00:03:23,400
Quindi la lettera X su cui possiamo cliccare e se clicchiamo su quella X, la cancellerà.

49
00:03:23,460 --> 00:03:28,830
E questo è solo il modo in cui inizieremo invece di fare in modo che la lettera faccia parte della

50
00:03:28,830 --> 00:03:32,840
bugia, anche se ho intenzione di usare una spanna così lunga con una lettera X.

51
00:03:33,330 --> 00:03:38,200
Quindi copiamolo.

52
00:03:38,340 --> 00:03:39,810
Abbiamo tre spand.

53
00:03:39,990 --> 00:03:44,080
Ognuno ha una lettera X aggiornata.

54
00:03:44,100 --> 00:03:45,160
Niente sembra diverso.

55
00:03:45,450 --> 00:03:51,810
Ma ora possiamo selezionare quell'intervallo separatamente e aggiungeremo un ascoltatore veloce.

56
00:03:51,840 --> 00:03:56,890
Quindi, quando clicchiamo su questo intervallo, vogliamo cancellare questo da fare o questa intera bugia.

57
00:03:57,290 --> 00:03:57,530
OK.

58
00:03:57,540 --> 00:03:59,820
Quindi questo è tutto il markup di base di cui abbiamo bisogno.

59
00:04:00,060 --> 00:04:02,750
Facciamo un piccolo pezzetto di stile.

60
00:04:02,790 --> 00:04:09,300
La prima cosa che faremo è centrare questo div Quindi il div è il contenitore ID.

61
00:04:09,720 --> 00:04:21,330
Entriamo qui e selezioniamo che nel nostro file CSSA selezioniamo il contenitore ordinato e diamo un bello sfondo Grigio

62
00:04:22,020 --> 00:04:26,430
solo per iniziare e vedere cosa otteniamo.

63
00:04:26,430 --> 00:04:28,670
Puoi vedere che il div si estende fino in fondo.

64
00:04:28,860 --> 00:04:32,590
Andiamo avanti e aggiungiamo un con in modo che non vada completamente attraverso.

65
00:04:32,820 --> 00:04:39,900
E poi proveremo a centrarlo al centro dello schermo, quindi la larghezza

66
00:04:39,900 --> 00:04:41,840
andrà a trecentosessantasei.

67
00:04:42,120 --> 00:04:48,930
E se lo salviamo è solo la stessa larghezza che ho con la versione finale.

68
00:04:48,930 --> 00:04:53,870
Quindi 360 pixel e poi la prossima cosa che vogliamo fare è ovviamente centrarla.

69
00:04:54,210 --> 00:04:57,000
E il modo più semplice è usare quel trucco marginale.

70
00:04:57,150 --> 00:05:02,760
Quindi impostiamo il margine in alto e in basso in modo da essere zero e il sinistro e il diritto di essere Ahto.

71
00:05:03,570 --> 00:05:07,640
E se ci aggiorniamo ora abbiamo un bel centro per fare la lista.

72
00:05:07,680 --> 00:05:11,650
Quindi è tutto il tempo necessario e valutiamo che possiamo fare per iniziare qui.

73
00:05:11,700 --> 00:05:13,760
Aggiungeremo alcune cose in base alle nostre esigenze.

74
00:05:13,950 --> 00:05:18,930
E poi, una volta che avremo le funzionalità di base, concentreremo l'attenzione su come rendere bello

75
00:05:18,930 --> 00:05:24,780
questo e ottenere il diritto di conoscere le animazioni e gli effetti, le dissolvenze e le diapositive e rendere

76
00:05:24,780 --> 00:05:26,470
le cose solo molto più belle.

77
00:05:27,060 --> 00:05:29,870
OK, nel prossimo video inizieremo a scrivere qualche domanda