1
00:00:01,240 --> 00:00:04,800
OK quindi andiamo avanti e creare questo blog da zero.

2
00:00:04,920 --> 00:00:06,620
Quindi sentiti libero di seguire qui.

3
00:00:06,630 --> 00:00:11,530
Ho intenzione di passare dalla creazione di un nuovo file fino alla fine di questo blog qui.

4
00:00:12,000 --> 00:00:13,880
Quindi la prima cosa che vorremmo fare.

5
00:00:14,070 --> 00:00:18,540
Continuerò a mantenere aperta la soluzione solo per poterla fare riferimento e accertarmi di avere colori corretti

6
00:00:18,540 --> 00:00:19,750
e dimensioni dei caratteri.

7
00:00:20,040 --> 00:00:25,690
è ottenere i nostri file impostati in modo da avere due file su un blog che HMO e non

8
00:00:25,730 --> 00:00:33,870
ha nulla al suo interno, tranne il blog del titolo ed è collegato a un foglio di stile chiamato Blog Dotsie SS Quello è vuoto .

9
00:00:33,970 --> 00:00:35,990
Ma la prima cosa che vogliamo davvero

10
00:00:36,030 --> 00:00:38,760
Quindi questo è solo tu che conosci i due file di cui avremo bisogno.

11
00:00:39,090 --> 00:00:41,170
E ora andiamo avanti e riempiteli.

12
00:00:41,790 --> 00:00:44,950
Quindi dobbiamo decidere quando fare qualcosa del genere.

13
00:00:44,970 --> 00:00:46,540
Da dove iniziamo

14
00:00:46,560 --> 00:00:52,440
E penso che la soluzione migliore sia iniziare con alcuni di questi markup nella nostra epoca G-mail e disegnare alcuni di essi,

15
00:00:52,440 --> 00:00:57,060
ma non dobbiamo ottenere tutto ciò che è la parola perfetta prima ancora che si realizzino le cose.

16
00:00:57,780 --> 00:01:04,290
Quindi vorrei iniziare mettendo un paragrafo o due e una di queste intestazioni nel nostro corpo.

17
00:01:04,290 --> 00:01:11,700
E per fare questo questo è il testo di Lorem Ipsum ad eccezione del bacon ipsum che è solo aggiungere bacon ipsum dot com.

18
00:01:14,130 --> 00:01:17,340
Clicca su dammi pancetta e copia semplicemente uno dei paragrafi.

19
00:01:17,610 --> 00:01:24,000
Userò solo quello che ho qui, ma le parole non sono così importanti purché siano parole lì.

20
00:01:24,660 --> 00:01:26,840
Quindi se vuoi usare bacon ipsum vai avanti.

21
00:01:26,940 --> 00:01:32,550
Ma se non lo fai, se ti opponi al bacon puoi scegliere qualsiasi altro ipsum o semplicemente inventare le tue parole

22
00:01:32,550 --> 00:01:34,520
o mettere il tuo post sul tuo blog.

23
00:01:34,560 --> 00:01:35,810
Sarebbe l'ideale.

24
00:01:36,030 --> 00:01:41,400
dei titoli qui e una nota potrebbe aver senso renderli entrambi un H1.

25
00:01:41,400 --> 00:01:44,070
E poi inserirò anche solo uno

26
00:01:44,070 --> 00:01:49,800
Ma generalmente la regola è che vuoi avere un H-1 sulla pagina che dovrebbe essere la cosa più grande

27
00:01:49,800 --> 00:01:50,820
della tua pagina.

28
00:01:50,850 --> 00:01:55,420
Quindi, poiché abbiamo più di ciascuno sono più titoli qui più titoli di articoli.

29
00:01:55,500 --> 00:02:00,840
Ho intenzione di andare con H-2 ma alla fine della giornata non ha importanza perché stiamo andando a stile tutto

30
00:02:01,200 --> 00:02:05,760
ciò che stiamo andando a cambiare la dimensione del carattere che stiamo andando a cambiare il il

31
00:02:05,760 --> 00:02:11,090
colore e tutte le cose che sarebbero state impostate rendendolo un H1 contro natura a quelle differenze saranno comunque eliminate.

32
00:02:11,640 --> 00:02:19,830
dirò solo che questo è il mio primo articolo, non il titolo più creativo, ma salvarlo.

33
00:02:19,830 --> 00:02:22,210
Quindi andrò con H-2 e

34
00:02:22,410 --> 00:02:24,220
E vediamo solo l'anteprima per iniziare.

35
00:02:24,630 --> 00:02:27,300
Quindi aprilo.

36
00:02:27,360 --> 00:02:27,870
OK.

37
00:02:27,930 --> 00:02:30,090
Quindi c'è il nostro blog finora.

38
00:02:30,960 --> 00:02:33,100
Quindi abbiamo un sacco di decisioni da prendere.

39
00:02:33,120 --> 00:02:38,620
Il primo posto che potrei iniziare è ottenere che questo corpo abbia questo confine.

40
00:02:39,180 --> 00:02:42,110
Quindi ho fornito i colori nell'ultimo video.

41
00:02:42,120 --> 00:02:47,850
Sto solo andando a copiare questo colore qui e ho intenzione di dare il corpo dell'acqua, quindi

42
00:02:47,850 --> 00:02:56,240
selezionerò il corpo e quindi tutto ciò che dobbiamo fare è dire confine ed è di 20 pixel in tinta unita questo colore grigio.

43
00:02:56,370 --> 00:02:57,930
E diamo un'occhiata.

44
00:02:58,560 --> 00:02:59,090
OK.

45
00:02:59,220 --> 00:03:04,410
Quindi non sembra proprio il modo in cui vorremmo che guardasse, ma è lì che abbiamo il confine.

46
00:03:05,580 --> 00:03:08,350
Facciamo a grandezza naturale in modo che possiamo davvero confrontare.

47
00:03:09,120 --> 00:03:13,740
Quindi un'altra cosa che noterete è che il nostro confine è un problema che va

48
00:03:13,740 --> 00:03:16,390
avanti fino a quando l'intero corpo occupa l'intera pagina.

49
00:03:16,560 --> 00:03:19,500
Contro qui il corpo occupa solo una parte della pagina.

50
00:03:19,560 --> 00:03:21,890
E poi c'è spazio su entrambi i lati.

51
00:03:21,930 --> 00:03:27,180
Poi c'è anche la spaziatura all'interno che non abbiamo perché le nostre parole nel nostro testo vanno

52
00:03:27,180 --> 00:03:28,550
dritte contro il confine.

53
00:03:28,590 --> 00:03:31,820
Iniziamo risolvendo il problema e risolvendolo.

54
00:03:31,860 --> 00:03:33,520
Certo che hai bisogno di imbottitura.

55
00:03:33,630 --> 00:03:35,930
Quindi questo è un riempimento di 20 pixel su tutti i lati.

56
00:03:35,970 --> 00:03:40,430
Puoi vedere che c'è del padding in basso, a sinistra e a destra.

57
00:03:40,470 --> 00:03:50,560
Quindi nel corpo assegneremo il riempimento di 20 pixel su tutti e quattro i lati e otteniamo questo OK.

58
00:03:50,580 --> 00:03:52,510
Quindi questo è un po 'più vicino.

59
00:03:52,530 --> 00:03:58,230
La prossima cosa su cui dovremmo lavorare è ottenere la larghezza corretta e non

60
00:03:58,230 --> 00:04:07,350
è solo questione di ottenere la larghezza delle dimensioni corrette quando è a schermo intero, ma anche quando si restringe vedrete che rimane

61
00:04:07,350 --> 00:04:14,730
di 700 pixel rimane a 700 pixel per un po 'e poi si restringe, si restringe e si ridimensiona.

62
00:04:15,360 --> 00:04:17,730
Quindi vogliamo essere sicuri che possiamo farlo accadere.

63
00:04:17,820 --> 00:04:19,660
Quindi useremo un po 'di trucco.

64
00:04:19,830 --> 00:04:24,220
E poi l'altra cosa che vuoi fare è assicurarti che sia centrato proprio adesso.

65
00:04:24,360 --> 00:04:25,330
Beh, non possiamo davvero dirlo.

66
00:04:25,350 --> 00:04:28,210
Ma non è centrato sarà sul lato sinistro.

67
00:04:28,230 --> 00:04:30,850
Quindi andiamo avanti e aggiungere prima l'interno.

68
00:04:31,700 --> 00:04:41,310
Quindi diciamo con 700 pixel e risparmia e questo è quello di cui stavo parlando a sinistra e vogliamo centrare nel mezzo

69
00:04:41,310 --> 00:04:47,250
e per farlo possiamo usare l'auto o il trucco automatico del margine di cui

70
00:04:47,250 --> 00:04:49,660
avevo parlato nella casella modello video.

71
00:04:50,100 --> 00:04:54,920
Quindi stabiliremo un margine e useremo solo la scorciatoia.

72
00:04:55,050 --> 00:05:01,190
Quindi faremo zero pixel in alto e in basso e quindi Otto a sinistra ea destra.

73
00:05:01,230 --> 00:05:03,900
Ricorda quando facciamo solo due qui anziché quattro.

74
00:05:04,020 --> 00:05:06,640
Questo è alto e basso e questo è a destra ea sinistra.

75
00:05:07,230 --> 00:05:14,100
In tal modo, la centriamo automaticamente per noi, ma poi noterai dandogli un valore zero in alto e in basso

76
00:05:14,100 --> 00:05:15,740
ora è proprio in alto.

77
00:05:16,020 --> 00:05:17,870
E questo qui non lo è.

78
00:05:17,880 --> 00:05:18,720
Abbiamo un po 'di spazio.

79
00:05:18,720 --> 00:05:20,950
Ci sono 20 pixel proprio lì.

80
00:05:21,210 --> 00:05:22,630
Quindi questa è una soluzione semplice.

81
00:05:22,770 --> 00:05:26,350
Solo la stessa linea cambia di nuovo a 20 P x.

82
00:05:26,370 --> 00:05:27,490
Abbiamo bisogno della x

83
00:05:27,510 --> 00:05:30,580
Non l'abbiamo fatto perché quando è zero puoi lasciarlo a zero.

84
00:05:30,720 --> 00:05:33,970
Ma quando c'è un numero abbiamo bisogno del prossimo.

85
00:05:33,990 --> 00:05:36,110
OK, quindi sembra abbastanza vicino.

86
00:05:36,120 --> 00:05:46,440
L'unica cosa è che, mentre riduciamo, vogliamo che rimanga 700 pixel finché non può più dire 700 pixel.

87
00:05:46,470 --> 00:05:52,440
E vogliamo che si riduca ed è abbastanza facile farlo che in realtà

88
00:05:52,440 --> 00:05:59,400
tutto ciò che vogliamo fare è cambiarlo in larghezza massima e poi assegnarlo con una percentuale.

89
00:05:59,700 --> 00:06:03,760
E ciò che dice è renderlo 80 percento quando è necessario.

90
00:06:03,900 --> 00:06:07,540
Ma al massimo farlo 700 pixel.

91
00:06:07,620 --> 00:06:09,780
Quindi ti mostrerò come appare quando aggiorni.

92
00:06:09,780 --> 00:06:16,410
Nulla cambia perché viene aggiunto a un massimo di settecento pixel, quindi controlla se l'80 percento sarebbe più di

93
00:06:16,410 --> 00:06:19,180
700 pixel, cosa che sarebbe in questo caso.

94
00:06:19,200 --> 00:06:27,840
Quindi rimane a 700 rimane ancora a 700 fino a qui proprio dove inizia a ridursi.

95
00:06:27,840 --> 00:06:31,250
Ecco dove l'80 percento ora è inferiore a 700 pixel.

96
00:06:31,770 --> 00:06:32,030
OK.

97
00:06:32,040 --> 00:06:35,370
Quindi ora abbiamo il nostro corpo di base istituito.

98
00:06:35,370 --> 00:06:39,330
La prossima cosa che mi piacerebbe fare qui è far andare la nostra puttana.

99
00:06:39,330 --> 00:06:49,300
Quindi, di nuovo, se andiamo alle note che ho dall'ultimo video, il font è chiamato Source sense pro.

100
00:06:49,320 --> 00:06:54,370
Quindi andiamo avanti e andare su Google phos e cercare la fonte invia Pro.

101
00:06:54,540 --> 00:07:00,540
Quindi l'ho aperto qui, ma ancora una volta sono solo i caratteri di Google con la barra delle lettere

102
00:07:01,530 --> 00:07:06,860
e basta fare una ricerca per una fonte che manda pro proprio qui, aggiungi alla raccolta.

103
00:07:07,140 --> 00:07:09,990
E ora abbiamo una scelta che i pesi dei font vogliamo.

104
00:07:10,250 --> 00:07:15,540
detto questo nel video originale, ma questo è solo il normale carattere del font del peso 400.

105
00:07:15,540 --> 00:07:17,390
E in realtà non ti ho

106
00:07:17,520 --> 00:07:19,220
E questo è un peso più pesante.

107
00:07:19,230 --> 00:07:20,050
È piegato.

108
00:07:20,100 --> 00:07:22,090
Quindi vogliamo entrambi.

109
00:07:22,440 --> 00:07:26,970
Così normale in grassetto 400 700 e basta.

110
00:07:26,970 --> 00:07:29,700
Andiamo qui e copia questo link.

111
00:07:29,700 --> 00:07:37,180
Ora possiamo sbarazzarci dei caratteri Google e andremo al nostro HMO e incolleremo il link.

112
00:07:37,950 --> 00:07:41,530
E ora abbiamo la possibilità di usare il senso della fonte.

113
00:07:42,180 --> 00:07:51,100
Quindi assegniamolo a entrambi i paragrafi e ai due anni e vogliamo anche che sia in queste date.

114
00:07:51,270 --> 00:07:58,620
Quindi quello che potremmo fare è selezionare il paragrafo e dire font fonte source sense pro e potremmo fare la

115
00:07:58,620 --> 00:08:00,290
stessa cosa per H-1.

116
00:08:00,990 --> 00:08:03,640
Ma questo non è un buon uso del nostro successo.

117
00:08:03,780 --> 00:08:07,950
Il nostro codice sarà un po 'ripetitivo ogni elemento su cui vogliamo usarlo.

118
00:08:07,950 --> 00:08:10,230
Dovremmo andare e aggiungere questo in

119
00:08:10,770 --> 00:08:15,140
Quindi ciò che facciamo è semplicemente applicarlo al corpo.

120
00:08:15,690 --> 00:08:19,420
E giocando nel corpo ogni cosa al suo interno la erediterà.

121
00:08:19,470 --> 00:08:30,360
Quindi, fonte della famiglia di font e pro e salva l'aggiornamento e ci andiamo sempre con H-1 o H-2 e

122
00:08:30,360 --> 00:08:32,100
abbiamo un paragrafo.

123
00:08:32,810 --> 00:08:34,560
Quindi sembra abbastanza buono finora.