1
00:00:00,780 --> 00:00:06,390
Quindi il prossimo andiamo avanti e duplichiamo questo markup che è tutto ciò che ho fatto qui.

2
00:00:06,720 --> 00:00:12,690
Ho usato parole leggermente diverse leggermente diverso pancetta ipsum tra questi paragrafi.

3
00:00:12,810 --> 00:00:19,310
Quindi copierò questi due in h t m l Ma di nuovo non è il punto focale qui.

4
00:00:19,350 --> 00:00:26,340
Quindi, cosa vogliamo di nuovo, assicuriamoci di prendere questo da zero, quindi la classe div è uguale a post.

5
00:00:26,850 --> 00:00:32,880
E alcuni di voi potrebbero chiedersi perché mi sia anche preso il disturbo di mettere div div con post di pari

6
00:00:32,880 --> 00:00:33,870
livello postare su tutto.

7
00:00:33,900 --> 00:00:35,710
Funzionerebbe bene senza quello.

8
00:00:35,820 --> 00:00:37,880
Si tratta davvero di raggruppare le cose insieme.

9
00:00:38,100 --> 00:00:42,810
Preferirei avere un pasticcio gigante in cui un post sul blog sanguina in un altro.

10
00:00:42,810 --> 00:00:48,570
Mi piace avere le cose contenute un po 'così che so che questo è un post e finisce qui, quindi

11
00:00:49,020 --> 00:00:52,910
è più o meno a mio avviso mantenere il codice un po' pulito.

12
00:00:53,340 --> 00:01:05,530
Quindi volevamo avere un div chiamato data o data classica e quella data è l'11 dicembre 2015.

13
00:01:05,820 --> 00:01:07,750
Salvalo.

14
00:01:07,830 --> 00:01:12,640
Poi abbiamo avuto un H2 e quell'H-2.

15
00:01:12,720 --> 00:01:18,510
Questo è un altro articolo che è un altro terribile articolo.

16
00:01:18,840 --> 00:01:19,950
Non raccomandare di leggerlo.

17
00:01:19,950 --> 00:01:21,490
Si tratta solo di pancetta.

18
00:01:21,780 --> 00:01:25,500
Quindi andrò avanti e copierò di nuovo questa citazione.

19
00:01:25,830 --> 00:01:26,990
Che è un paragrafo

20
00:01:27,060 --> 00:01:30,490
La classe equivale al preventivo dell'incollatura in.

21
00:01:30,630 --> 00:01:32,870
E poi abbiamo altri due paragrafi qui.

22
00:01:33,130 --> 00:01:40,800
Uno e infine l'ultimo bit di markup di cui abbiamo bisogno.

23
00:01:40,800 --> 00:01:42,000
Il secondo paragrafo

24
00:01:42,000 --> 00:01:43,950
Eccoci.

25
00:01:44,640 --> 00:01:49,000
Quindi vediamo come appare.

26
00:01:49,080 --> 00:01:54,910
Quindi una cosa che sto notando è che abbiamo un po 'meno spazio tra i post qui.

27
00:01:54,960 --> 00:01:56,760
Quindi questo si imbatte in questo.

28
00:01:56,760 --> 00:02:02,670
La data dell'11 dicembre vogliamo sicuramente una piccola spaziatura lì come possiamo vedere nella parte sinistra di quello

29
00:02:02,670 --> 00:02:05,220
potrebbe essere perché la HRR che ci manca.

30
00:02:05,220 --> 00:02:09,020
Anche se penso che quello che dobbiamo fare è aggiungere un po 'di margine tra i post del blog.

31
00:02:09,150 --> 00:02:11,780
Quindi iniziamo facendo questo.

32
00:02:12,570 --> 00:02:15,690
Quindi non abbiamo realmente visto l'elemento H R nella pratica.

33
00:02:15,690 --> 00:02:19,410
È molto semplice da usare proprio come questo.

34
00:02:19,410 --> 00:02:24,810
In realtà, l'auto-chiusura non prende nulla è non ha alcun tag di chiusura o qualsiasi contenuto

35
00:02:24,960 --> 00:02:27,540
interno solo una regola orizzontale di char.

36
00:02:27,540 --> 00:02:30,200
Se aggiorniamo ciò che vedrai.

37
00:02:30,210 --> 00:02:35,940
Quindi questo ci dà questa linea e questo normalmente va bene.

38
00:02:35,940 --> 00:02:40,830
Alla maggior parte delle persone piace però disegnarli un po ', quindi questo è veramente debole.

39
00:02:40,950 --> 00:02:46,710
Non so se puoi dirlo, ma fondamentalmente si sta facendo un po 'più denso e poi si stacca sui

40
00:02:46,710 --> 00:02:52,310
bordi e ci sono alcune grandi risorse e cose in linea che puoi usare per disegnare qualsiasi carattere.

41
00:02:52,410 --> 00:02:57,960
E il motivo per cui hanno aggiunto questo qui è che volevo costringerti a cercare qualcosa e cercare di trovare

42
00:02:58,530 --> 00:03:00,840
alcuni stili che non hai scritto tu stesso.

43
00:03:00,840 --> 00:03:04,830
Quindi ti mostrerò esattamente cosa farei per trovare alcuni stili H R.

44
00:03:04,830 --> 00:03:09,170
Vorrei solo lo stile di Google HDR e vedere cosa otteniamo.

45
00:03:09,390 --> 00:03:13,320
E puoi vedere che in realtà ho cliccato su due di loro prima.

46
00:03:13,890 --> 00:03:20,280
Quindi abbiamo stili semplici per ogni barattolo e puoi vedere che ci sono alcune opzioni qui.

47
00:03:20,460 --> 00:03:23,290
Quindi pensano che sia quello con cui sono andato proprio qui.

48
00:03:23,550 --> 00:03:25,980
Ma proviamo solo uno come questo.

49
00:03:25,980 --> 00:03:31,440
Clicca sul codice e tutto ciò che dobbiamo fare è copiare questi.

50
00:03:31,440 --> 00:03:36,780
Questi sono due stili e copiarlo e non lo facciamo.

51
00:03:36,900 --> 00:03:41,970
Non voglio pensare che tu abbia bisogno di capire ogni riga qui perché questo è qualcosa di piuttosto

52
00:03:42,180 --> 00:03:45,460
avanzato e di tipo hacky come puoi vedere questa persona dice.

53
00:03:45,480 --> 00:03:50,280
Non dovrebbe funzionare, ma l'unica cosa che vogliamo fare è assicurarsi che questi stiano selezionando

54
00:03:50,280 --> 00:03:56,910
la nostra H R e quindi ciò che sta facendo è far sì che HRO abbia una classe di stile 7

55
00:03:56,910 --> 00:03:57,600
che non abbiamo.

56
00:03:57,870 --> 00:03:59,760
solo come si presenta.

57
00:04:04,020 --> 00:04:06,670
Quindi selezioniamo un carattere e vediamo

58
00:04:06,690 --> 00:04:08,120
Ricarica la pagina.

59
00:04:08,150 --> 00:04:09,270
OK, quindi andiamo.

60
00:04:09,360 --> 00:04:11,400
Quindi personalmente non mi interessa per quello.

61
00:04:11,430 --> 00:04:14,700
Userò questo qui quel tipo di scia.

62
00:04:14,700 --> 00:04:17,240
Sentiti libero di fare quello che vuoi e divertirti.

63
00:04:17,610 --> 00:04:23,280
Ma di nuovo il punto era che volevo che provassi e trovassi qualcosa di esterno che non hai scritto e

64
00:04:23,280 --> 00:04:25,420
voglio mostrarti che è del tutto bello farlo.

65
00:04:25,560 --> 00:04:27,100
Quindi sto solo copiando questo.

66
00:04:27,270 --> 00:04:29,220
Non ho scritto questo.

67
00:04:29,500 --> 00:04:34,520
Devi liberarti di questi stili qui e metterlo dentro

68
00:04:35,400 --> 00:04:42,870
Quindi tutto quello che stanno facendo è che sembra che stiano impostando un bordo sull'HRO, quindi nessuna altezza del bordo che è solo un pixel

69
00:04:43,200 --> 00:04:46,370
e quindi questa immagine di sfondo che è una sfumatura.

70
00:04:46,550 --> 00:04:48,870
E così è così che ottengono quell'effetto sfumato.

71
00:04:48,870 --> 00:04:51,970
Quindi se ci aggiorniamo ora eccoti.

72
00:04:52,110 --> 00:04:55,710
Abbiamo questo gradevole effetto sfumato qui e se lo volessimo.

73
00:04:55,710 --> 00:04:59,530
In realtà preferisco questo, quindi vado avanti e manterrò questo.

74
00:04:59,760 --> 00:05:00,350
Oltre questo.

75
00:05:00,350 --> 00:05:05,380
Potrei cambiare un po 'il colore in modo che sia un grigio più chiaro, ma continuiamo a tenerlo per ora.

76
00:05:05,580 --> 00:05:11,250
Ma abbiamo ancora questo problema che è il nostro prossimo post sul blog che sta iniziando troppo presto e abbiamo bisogno

77
00:05:11,250 --> 00:05:13,090
di aggiungere un po 'di spazio lì.

78
00:05:13,410 --> 00:05:17,940
Quindi tutto ciò che dobbiamo fare è aggiungere un po 'di margine.

79
00:05:18,360 --> 00:05:25,680
Quindi questa è in realtà una bella coincidenza che abbiamo questo post wrapper per blog in ogni post perché possiamo

80
00:05:25,950 --> 00:05:31,090
aggiungere un margine alla fine di ogni post in modo da aggiungere spazio qui.

81
00:05:32,220 --> 00:05:34,210
Quindi tutto ciò che dobbiamo fare è selezionare.

82
00:05:34,230 --> 00:05:36,560
Lascia che ti mostri solo il post della classe.

83
00:05:36,630 --> 00:05:37,810
Questo è un post.

84
00:05:38,160 --> 00:05:39,580
Quindi andiamo qui.

85
00:05:39,670 --> 00:05:50,370
È come il margine postale e facciamo 20 pixel e non solo margine.

86
00:05:50,490 --> 00:05:59,600
Facciamolo sul fondo, quindi solo il mese di marzo e il fondo si aggiornano e sembra abbastanza vicino.

87
00:06:00,210 --> 00:06:06,000
qui abbiamo uno spazio un po 'più grande di quello che facciamo qui ed è perché questo o quello

88
00:06:06,000 --> 00:06:13,050
che abbiamo aggiunto è in realtà al di fuori della classe post, quindi non è influenzato da quel margine che abbiamo aggiunto.

89
00:06:13,050 --> 00:06:15,140
Quindi l'ultimo piccolo problema qui è che

90
00:06:15,150 --> 00:06:19,490
Quindi, se lo facessimo, sposteremo semplicemente il carattere A.

91
00:06:19,500 --> 00:06:20,160
Dov'è.

92
00:06:20,160 --> 00:06:25,510
Qui andiamo in fondo al post e siamo freschi.

93
00:06:25,590 --> 00:06:27,960
Puoi vedere se otteniamo la spaziatura che vogliamo.

94
00:06:28,600 --> 00:06:36,210
OK, quindi se volessimo sperimentare e ottenere quello esatto, torneremmo a quel punto H. R. stili e provare alcuni

95
00:06:36,300 --> 00:06:37,730
degli altri.

96
00:06:37,890 --> 00:06:41,970
Ma quello che voglio davvero mostrare di nuovo è che possiamo incorporare altri stili in.

97
00:06:42,010 --> 00:06:46,770
Non dobbiamo sapere esattamente come funzionano, anche se è una buona idea essere curiosi

98
00:06:46,770 --> 00:06:48,080
e cercare di capirlo.

99
00:06:48,930 --> 00:06:53,790
Quindi spero che ti sia piaciuto realizzare questo progetto in un blog semplice e minimale e per ora.

100
00:06:53,790 --> 00:06:56,430
Ovviamente non funziona come un blog.

101
00:06:56,430 --> 00:07:01,390
Non ci sono commenti che non possiamo aggiungere in un nuovo post con alcun tipo di interfaccia.

102
00:07:01,470 --> 00:07:06,600
a javascript e quando in particolare e arriviamo al back-end e abbiamo un database e abbiamo un server

103
00:07:06,600 --> 00:07:11,670
che va in un framework chiamato Express, in realtà andremo a prendere questo blog e trasformarlo in un

104
00:07:12,050 --> 00:07:17,610
vero blog in cui possiamo aggiungere un post utilizzando un modulo che possiamo commentare e possiamo fare altre cose come votare.

105
00:07:17,970 --> 00:07:20,840
Dobbiamo effettivamente modificare il vecchio noi stessi, ma quando arriviamo

106
00:07:21,060 --> 00:07:22,410
Quindi sarà davvero eccitante.

107
00:07:22,410 --> 00:07:24,350
Lo useremo per valutarlo.

108
00:07:24,360 --> 00:07:28,540
È relativamente bello cercando relativamente poche righe.

109
00:07:29,040 --> 00:07:31,200
OK Ci vediamo quando copriamo javascript