1
00:00:01,240 --> 00:00:04,800
OK, então vamos em frente e crie este blog a partir do zero.

2
00:00:04,920 --> 00:00:06,620
Então, sinta-se livre para seguir aqui.

3
00:00:06,630 --> 00:00:11,530
Eu irei de criar um novo arquivo até o final deste blog aqui.

4
00:00:12,000 --> 00:00:13,880
Então, a primeira coisa que queremos fazer.

5
00:00:14,070 --> 00:00:18,540
Eu vou manter a solução aberta apenas para que eu possa fazer referência e ter certeza de que temos cores

6
00:00:18,540 --> 00:00:19,750
corretas e tamanhos de fonte.

7
00:00:20,040 --> 00:00:25,690
fazer é que nossos arquivos sejam configurados, então eu tenho dois arquivos de um blog que o HMO e

8
00:00:25,730 --> 00:00:33,870
não tem nada até agora, exceto o título do blog e está vinculado a uma folha de estilo chamada Blog Dotsie SS. Isso está vazio .

9
00:00:33,970 --> 00:00:35,990
Mas a primeira coisa que realmente queremos

10
00:00:36,030 --> 00:00:38,760
Então, isso é só você conhece os dois arquivos que precisaremos.

11
00:00:39,090 --> 00:00:41,170
E agora vamos continuar e preenchê-los.

12
00:00:41,790 --> 00:00:44,950
Então, temos que decidir quando estão fazendo algo assim.

13
00:00:44,970 --> 00:00:46,540
Por onde começamos.

14
00:00:46,560 --> 00:00:52,440
E eu acho que a melhor solução é começar com algumas dessas marcas em nosso G-mail de idade e desenhar algumas delas,

15
00:00:52,440 --> 00:00:57,060
mas não precisamos obter tudo o que são palavras-chave perfeitas antes de nós realmente gostar de coisas.

16
00:00:57,780 --> 00:01:04,290
Então, eu começaria por colocar um parágrafo ou dois e um desses cabeçalhos em nosso corpo.

17
00:01:04,290 --> 00:01:11,700
E para fazer isso, este é o texto de Lorem Ipsum, exceto que é bacon ipsum, que é apenas adicionar bacon ipsum dot com.

18
00:01:14,130 --> 00:01:17,340
Clique em me dar bacon e simplesmente copie um dos parágrafos.

19
00:01:17,610 --> 00:01:24,000
Eu só vou usar o que eu tenho aqui, mas as palavras não são tão importantes, desde que sejam palavras lá.

20
00:01:24,660 --> 00:01:26,840
Então, se você quiser usar bacon ipsum, vá em frente.

21
00:01:26,940 --> 00:01:32,550
Mas se você não fizer caso de bacon você pode escolher qualquer outro ipsum ou simplesmente fazer suas próprias palavras ou

22
00:01:32,550 --> 00:01:34,520
realmente colocar sua própria postagem no blog lá.

23
00:01:34,560 --> 00:01:35,810
Isso seria ideal.

24
00:01:36,030 --> 00:01:41,400
títulos aqui e uma nota que pode fazer sentido fazer com que estes um H1 os dois.

25
00:01:41,400 --> 00:01:44,070
E então, eu também vou colocar um dos

26
00:01:44,070 --> 00:01:49,800
Mas geralmente a regra é que você quer ter um H-1 na página que deveria ser a maior coisa

27
00:01:49,800 --> 00:01:50,820
em sua página.

28
00:01:50,850 --> 00:01:55,420
Então, porque temos múltiplos de cada um são vários títulos aqui vários títulos de artigos.

29
00:01:55,500 --> 00:02:00,840
Eu vou com a H-2, mas no final do dia, não importa, porque vamos desenhar tudo sobre

30
00:02:01,200 --> 00:02:05,760
isso, vamos mudar o tamanho da fonte, vamos mudar o cor e todas as

31
00:02:05,760 --> 00:02:11,090
coisas que seriam definidas tornando-se um H1 contra a natureza dessas diferenças serão eliminadas de qualquer maneira.

32
00:02:11,640 --> 00:02:19,830
só vou dizer que este é o meu primeiro artigo, não o título mais criativo, mas que o salve.

33
00:02:19,830 --> 00:02:22,210
Então eu vou com H-2 e

34
00:02:22,410 --> 00:02:24,220
E vamos apenas visualizar isso para começar.

35
00:02:24,630 --> 00:02:27,300
Então abra isso.

36
00:02:27,360 --> 00:02:27,870
ESTÁ BEM.

37
00:02:27,930 --> 00:02:30,090
Então, há nosso blog até agora.

38
00:02:30,960 --> 00:02:33,100
Então, temos um monte de decisões a tomar.

39
00:02:33,120 --> 00:02:38,620
O primeiro lugar que eu posso começar é fazer com que este corpo tenha essa fronteira.

40
00:02:39,180 --> 00:02:42,110
Então eu forneci as cores no último vídeo.

41
00:02:42,120 --> 00:02:47,850
Eu apenas vou copiar esta cor aqui e vou dar o corpo de água, então

42
00:02:47,850 --> 00:02:56,240
vou selecionar o corpo e então tudo o que temos a fazer é dizer borda e é 20 pixels sólidos dessa cor cinza.

43
00:02:56,370 --> 00:02:57,930
E vamos verificar isso.

44
00:02:58,560 --> 00:02:59,090
ESTÁ BEM.

45
00:02:59,220 --> 00:03:04,410
Então, não parece bem que queremos que olhe, mas está chegando, nós temos a fronteira.

46
00:03:05,580 --> 00:03:08,350
Vamos fazer o tamanho completo para que possamos realmente comparar.

47
00:03:09,120 --> 00:03:13,740
Então, outra coisa que você notará é que nossa fronteira existe um problema que é todo

48
00:03:13,740 --> 00:03:16,390
o caminho todo o corpo ocupa toda a página.

49
00:03:16,560 --> 00:03:19,500
Até aqui, o corpo só ocupa parte da página.

50
00:03:19,560 --> 00:03:21,890
E então há espaçamento em ambos os lados.

51
00:03:21,930 --> 00:03:27,180
Então também há o espaçamento no interior que não temos porque nossas palavras em nosso texto são

52
00:03:27,180 --> 00:03:28,550
direto contra a fronteira.

53
00:03:28,590 --> 00:03:31,820
Então, vamos começar por solucionar esse problema e consertar isso.

54
00:03:31,860 --> 00:03:33,520
Claro que você precisa de estofamento.

55
00:03:33,630 --> 00:03:35,930
Então, este é um preenchimento de 20 pixels em todos os lados.

56
00:03:35,970 --> 00:03:40,430
Você pode ver que há preenchimento na parte inferior e esquerda e direita também.

57
00:03:40,470 --> 00:03:50,560
Então, no corpo, vamos apenas atribuir 20 pixels de preenchimento nos quatro lados e nós conseguimos isso.

58
00:03:50,580 --> 00:03:52,510
Então está um pouco mais perto.

59
00:03:52,530 --> 00:03:58,230
A próxima coisa em que devemos trabalhar é obter a largura correta e não é

60
00:03:58,230 --> 00:04:07,350
apenas uma questão de obter a largura para ser o tamanho certo quando é tela cheia, mas também, à medida que encolhe, você verá que

61
00:04:07,350 --> 00:04:14,730
ele permanece, isso é 700 pixels. permanece em 700 pixels por um tempo e depois encolhe e encolhe e escala.

62
00:04:15,360 --> 00:04:17,730
Então queremos garantir que possamos conseguir que isso aconteça.

63
00:04:17,820 --> 00:04:19,660
Então vamos usar um pouco de truque.

64
00:04:19,830 --> 00:04:24,220
E então, a outra coisa que você quer fazer é certificar-se de que está centrado agora.

65
00:04:24,360 --> 00:04:25,330
Bem, nós realmente não podemos dizer.

66
00:04:25,350 --> 00:04:28,210
Mas não está centrado, será no lado esquerdo.

67
00:04:28,230 --> 00:04:30,850
Então, vamos em frente e adicione o primeiro.

68
00:04:31,700 --> 00:04:41,310
Então, digamos, com 700 pixels e salve e isso é o que eu estava falando sobre o lado esquerdo e queremos nos concentrar no meio e

69
00:04:41,310 --> 00:04:47,250
para fazer isso, podemos usar o auto ou o truque automático de margem que eu havia

70
00:04:47,250 --> 00:04:49,660
falado na caixa modelo de vídeo.

71
00:04:50,100 --> 00:04:54,920
Então, vamos definir uma margem e vamos apenas usar o atalho.

72
00:04:55,050 --> 00:05:01,190
Então, vamos fazer zero pixels de cima e de baixo e, em seguida, Otto à esquerda e a direita.

73
00:05:01,230 --> 00:05:03,900
Lembre-se quando apenas fazemos dois aqui em vez de quatro.

74
00:05:04,020 --> 00:05:06,640
Isto é superior e inferior e isso é esquerdo e direito.

75
00:05:07,230 --> 00:05:14,100
Então, isso os concentra automaticamente para nós, mas você notará, dando-lhe um zero de cima e de baixo, agora

76
00:05:14,100 --> 00:05:15,740
está em frente ao topo.

77
00:05:16,020 --> 00:05:17,870
E este aqui não é.

78
00:05:17,880 --> 00:05:18,720
Temos algum espaço.

79
00:05:18,720 --> 00:05:20,950
Há 20 pixels ali mesmo.

80
00:05:21,210 --> 00:05:22,630
Então, essa é uma solução simples.

81
00:05:22,770 --> 00:05:26,350
Apenas a mesma linha muda de volta para 20 P x.

82
00:05:26,370 --> 00:05:27,490
Nós precisamos do x.

83
00:05:27,510 --> 00:05:30,580
Nós não fizemos antes, porque quando é zero, você pode simplesmente deixá-lo em zero.

84
00:05:30,720 --> 00:05:33,970
Mas quando há um número, precisamos do próximo.

85
00:05:33,990 --> 00:05:36,110
OK, então está parecendo muito perto.

86
00:05:36,120 --> 00:05:46,440
A única coisa é que, à medida que diminuímos, queremos que isso permaneça 700 pixels até não poder dizer mais 700 pixels.

87
00:05:46,470 --> 00:05:52,440
E queremos diminuir e é muito fácil fazer isso, na verdade, tudo o que

88
00:05:52,440 --> 00:05:59,400
queremos fazer é mudar isso para ser a largura máxima e então vamos atribuir uma porcentagem.

89
00:05:59,700 --> 00:06:03,760
E o que isso diz é torná-lo 80 por cento quando você precisa.

90
00:06:03,900 --> 00:06:07,540
Mas no máximo, faça 700 pixels.

91
00:06:07,620 --> 00:06:09,780
Então, vou mostrar o que isso parece quando você atualiza.

92
00:06:09,780 --> 00:06:16,410
Nada muda porque é adicionado ao máximo setecentos pixels, portanto verifica se 80 por cento seriam mais de

93
00:06:16,410 --> 00:06:19,180
700 pixels, o que seria nesse caso.

94
00:06:19,200 --> 00:06:27,840
Então fica em 700 ainda fica em 700 até aqui onde começa a encolher.

95
00:06:27,840 --> 00:06:31,250
É aí que 80% agora tem menos de 700 pixels.

96
00:06:31,770 --> 00:06:32,030
ESTÁ BEM.

97
00:06:32,040 --> 00:06:35,370
Então, agora temos o nosso corpo básico configurado.

98
00:06:35,370 --> 00:06:39,330
A próxima coisa que eu gostaria de fazer aqui é começar o nosso Funt.

99
00:06:39,330 --> 00:06:49,300
Então, novamente, se vamos às notas que eu tenho do último vídeo, a fonte é chamada Source sense pro.

100
00:06:49,320 --> 00:06:54,370
Então, vamos em frente e dirija-nos ao Google phos e procure por fontes que enviam o Pro.

101
00:06:54,540 --> 00:07:00,540
Então eu tenho isso aberto aqui, mas novamente é apenas o Google dot com slash fontes e

102
00:07:01,530 --> 00:07:06,860
apenas fazer uma busca por uma fonte envia pro aqui adicionado ao uso da coleção.

103
00:07:07,140 --> 00:07:09,990
E agora temos uma escolha de pesos de fontes que queremos.

104
00:07:10,250 --> 00:07:15,540
no vídeo original, mas esse é apenas o rosto de fonte normal do peso da fonte 400.

105
00:07:15,540 --> 00:07:17,390
E na verdade não contei isso

106
00:07:17,520 --> 00:07:19,220
E este é um peso mais pesado.

107
00:07:19,230 --> 00:07:20,050
Está dobrado.

108
00:07:20,100 --> 00:07:22,090
Então vamos querer esses dois.

109
00:07:22,440 --> 00:07:26,970
Tão normal em negrito 400 700 e é isso.

110
00:07:26,970 --> 00:07:29,700
Nós vamos aqui e copiem este link.

111
00:07:29,700 --> 00:07:37,180
Nós podemos nos livrar das fontes do Google agora e vamos para o nosso HMO e apenas colar esse link.

112
00:07:37,950 --> 00:07:41,530
E agora temos a capacidade de usar o sentido da fonte.

113
00:07:42,180 --> 00:07:51,100
Então, vamos atribuir isso a dois parágrafos e idade dois e também queremos que seja nessas datas.

114
00:07:51,270 --> 00:07:58,620
Então, o que nós poderíamos fazer é selecionar o parágrafo e dizer fonte fonte da fonte pro pro e nós poderíamos

115
00:07:58,620 --> 00:08:00,290
fazer o mesmo para H-1.

116
00:08:00,990 --> 00:08:03,640
Mas esse não é um bom uso do nosso sucesso.

117
00:08:03,780 --> 00:08:07,950
Nosso código será um pouco repetitivo em cada elemento em que queremos usá-lo.

118
00:08:07,950 --> 00:08:10,230
Teríamos que ir e adicionar isso.

119
00:08:10,770 --> 00:08:15,140
Então o que fazemos é simplesmente aplicá-lo ao corpo.

120
00:08:15,690 --> 00:08:19,420
E, jogando no corpo, tudo dentro dele o herdará.

121
00:08:19,470 --> 00:08:30,360
Então fonte de fonte de fonte e pro e economizar atualizar e lá vamos nós sempre H-1 usá-lo ou H-2 e nós

122
00:08:30,360 --> 00:08:32,100
temos um parágrafo.

123
00:08:32,810 --> 00:08:34,560
Então, isso parece muito bom até agora.