1
00:00:00,780 --> 00:00:06,390
Então, em seguida, vamos continuar e simplesmente duplicar essa marcação, o que é tudo o que fiz aqui.

2
00:00:06,720 --> 00:00:12,690
Eu usei palavras ligeiramente diferentes com um bacon ipsum ligeiramente diferente entre esses parágrafos.

3
00:00:12,810 --> 00:00:19,310
Então, vou copiar esses dois para o h t m l Mas, novamente, esse não é o foco aqui.

4
00:00:19,350 --> 00:00:26,340
Então, o que queremos novamente, certifique-se de que vamos apenas pegar isso do zero, então é div divisão igual a postagens.

5
00:00:26,850 --> 00:00:32,880
E alguns de vocês podem estar se perguntando por que eu mesmo incomodava colocar div um div com a classe igual a postagem

6
00:00:32,880 --> 00:00:33,870
em torno de tudo.

7
00:00:33,900 --> 00:00:35,710
Isso funcionaria bem sem isso.

8
00:00:35,820 --> 00:00:37,880
Realmente é apenas sobre agrupar as coisas.

9
00:00:38,100 --> 00:00:42,810
Preferiria ter uma bagunça gigante onde uma postagem de blog sangrava para outra.

10
00:00:42,810 --> 00:00:48,570
Eu gosto de ter coisas contidas um pouco para que eu saiba que este é um post e ele termina

11
00:00:49,020 --> 00:00:52,910
aqui, então é mais sobre a minha opinião mantendo o código um pouco limpo.

12
00:00:53,340 --> 00:01:05,530
Então, queríamos ter uma div chamada data ou data clássica e essa data é 11 de dezembro de 2015.

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

14
00:01:07,830 --> 00:01:12,640
Então nós tivemos um H2 e aquele H-2.

15
00:01:12,720 --> 00:01:18,510
Este é outro artigo que é outro artigo terrível.

16
00:01:18,840 --> 00:01:19,950
Não recomendo que você leia.

17
00:01:19,950 --> 00:01:21,490
É apenas sobre bacon.

18
00:01:21,780 --> 00:01:25,500
Então, eu vou seguir em frente e copiar esta citação novamente.

19
00:01:25,830 --> 00:01:26,990
O que é um parágrafo.

20
00:01:27,060 --> 00:01:30,490
A classe é igual à citação que cola que em.

21
00:01:30,630 --> 00:01:32,870
E então temos mais dois parágrafos aqui.

22
00:01:33,130 --> 00:01:40,800
Um e, finalmente, o último bit de marcação que precisamos.

23
00:01:40,800 --> 00:01:42,000
O segundo parágrafo.

24
00:01:42,000 --> 00:01:43,950
Aqui vamos nós.

25
00:01:44,640 --> 00:01:49,000
Então vamos ver como isso parece.

26
00:01:49,080 --> 00:01:54,910
Então, uma coisa que percebo é que temos um pouco menos espaçamento entre as postagens aqui.

27
00:01:54,960 --> 00:01:56,760
Então, este apenas se depara com isso.

28
00:01:56,760 --> 00:02:02,670
A data de 11 de dezembro, definitivamente queremos um pouco de espaçamento, como podemos ver na parte esquerda do que

29
00:02:02,670 --> 00:02:05,220
poderia ser porque o HRR que estamos perdendo.

30
00:02:05,220 --> 00:02:09,020
Embora eu pense que o que precisamos fazer é apenas adicionar alguma margem entre as postagens do blog.

31
00:02:09,150 --> 00:02:11,780
Então vamos começar por fazer isso entrar.

32
00:02:12,570 --> 00:02:15,690
Então, na verdade, não vimos realmente o elemento H R na prática.

33
00:02:15,690 --> 00:02:19,410
É muito simples de usar apenas parece assim.

34
00:02:19,410 --> 00:02:24,810
Na verdade, o fechamento automático não leva nada é que ele não possui nenhuma tag de fechamento ou

35
00:02:24,960 --> 00:02:27,540
qualquer conteúdo interno apenas uma regra horizontal de caracteres.

36
00:02:27,540 --> 00:02:30,200
Se atualizarmos o que você verá.

37
00:02:30,210 --> 00:02:35,940
Então, isso nos dá essa linha em curso e isso normalmente está bem.

38
00:02:35,940 --> 00:02:40,830
A maioria das pessoas gosta de modelar isso um pouco, então esse é realmente fraco.

39
00:02:40,950 --> 00:02:46,710
Eu não sei se você pode dizer, mas é basicamente ficando um pouco mais grosso e depois arrastando

40
00:02:46,710 --> 00:02:52,310
as bordas e há alguns recursos excelentes e coisas on-line que você pode usar para modelar qualquer char.

41
00:02:52,410 --> 00:02:57,960
E a razão pela qual eles adicionaram isso aqui é que eu queria forçá-lo a procurar algo e a

42
00:02:58,530 --> 00:03:00,840
tentar encontrar alguns estilos que você não escreveu.

43
00:03:00,840 --> 00:03:04,830
Então vou mostrar-lhe exatamente o que eu faria para encontrar alguns estilos de H R.

44
00:03:04,830 --> 00:03:09,170
Gostaria apenas do estilo HD do Google e ver o que recebemos.

45
00:03:09,390 --> 00:03:13,320
E você pode ver que eu realmente clique em dois deles antes.

46
00:03:13,890 --> 00:03:20,280
Então nós temos estilos simples para cada frascos e você pode ver algumas opções aqui.

47
00:03:20,460 --> 00:03:23,290
Então eles acham que é esse o que eu fui aqui.

48
00:03:23,550 --> 00:03:25,980
Mas vamos tentar um como este.

49
00:03:25,980 --> 00:03:31,440
Clique no código e tudo o que temos a fazer é copiá-los.

50
00:03:31,440 --> 00:03:36,780
Estes são dois estilos e copiem isso e não o fazemos.

51
00:03:36,900 --> 00:03:41,970
Eu não quero pensar que você precisa entender todas as linhas aqui, porque esta é algumas coisas que são

52
00:03:42,180 --> 00:03:45,460
bastante avançadas e tipo de hacke, como você pode ver, esta pessoa diz.

53
00:03:45,480 --> 00:03:50,280
Não é realmente suposto funcionar, mas a única coisa que queremos fazer é garantir que estes

54
00:03:50,280 --> 00:03:56,910
vão selecionar nossa H R e então o que isso está fazendo é deixar HRO com a classe de estilo 7 que

55
00:03:56,910 --> 00:03:57,600
não temos.

56
00:03:57,870 --> 00:03:59,760
ver o que isso parece.

57
00:04:04,020 --> 00:04:06,670
Então, vamos selecionar um char e vamos

58
00:04:06,690 --> 00:04:08,120
Recarregue a página.

59
00:04:08,150 --> 00:04:09,270
Ok, então vamos lá.

60
00:04:09,360 --> 00:04:11,400
Então eu pessoalmente não me importo com esse.

61
00:04:11,430 --> 00:04:14,700
Eu vou usar este aqui, esse tipo de trilhas.

62
00:04:14,700 --> 00:04:17,240
Sinta-se livre para fazer o que quiser e brincar com ele.

63
00:04:17,610 --> 00:04:23,280
Mas, novamente, o ponto era que eu queria que você tentasse encontrar algo externo que você não escreveu e eu

64
00:04:23,280 --> 00:04:25,420
quero mostrar que é totalmente bom fazer isso.

65
00:04:25,560 --> 00:04:27,100
Então estou apenas copiando isso.

66
00:04:27,270 --> 00:04:29,220
Não escrevi isso.

67
00:04:29,500 --> 00:04:34,520
Preciso se livrar desses estilos aqui e colocar isso dentro.

68
00:04:35,400 --> 00:04:42,870
Então, tudo o que eles estão fazendo é parecer que eles estão definindo uma borda no HRO, então sem altura de borda que é apenas um pixel e,

69
00:04:43,200 --> 00:04:46,370
em seguida, essa imagem de plano de fundo que é um gradiente.

70
00:04:46,550 --> 00:04:48,870
E assim é como eles conseguem esse efeito de gradiente.

71
00:04:48,870 --> 00:04:51,970
Então, se atualizarmos Agora você vai.

72
00:04:52,110 --> 00:04:55,710
Nós temos esse efeito de gradiente agradável aqui e se nós quiséssemos.

73
00:04:55,710 --> 00:04:59,530
Eu realmente prefiro esse, então eu vou seguir em frente e manter esse.

74
00:04:59,760 --> 00:05:00,350
Por cima disto.

75
00:05:00,350 --> 00:05:05,380
Eu posso mudar a cor um pouco para que seja um cinza mais claro, mas vamos manter isso por enquanto.

76
00:05:05,580 --> 00:05:11,250
Mas ainda temos esse problema que é nosso nosso próximo post do blog está começando muito cedo

77
00:05:11,250 --> 00:05:13,090
e precisamos adicionar algum espaço lá.

78
00:05:13,410 --> 00:05:17,940
Então, tudo o que precisamos fazer é adicionar um pouco de margem.

79
00:05:18,360 --> 00:05:25,680
Então, esta é realmente uma boa coincidência que temos esse wrapper de post do blog em todas as postagens, porque podemos apenas

80
00:05:25,950 --> 00:05:31,090
adicionar uma margem para o final de cada postagem para que isso acrescente espaço aqui.

81
00:05:32,220 --> 00:05:34,210
Então, tudo o que precisamos fazer é selecionar.

82
00:05:34,230 --> 00:05:36,560
Deixe-me mostrar-lhe o post da classe.

83
00:05:36,630 --> 00:05:37,810
Essa é uma publicação.

84
00:05:38,160 --> 00:05:39,580
Então, vamos apenas aqui.

85
00:05:39,670 --> 00:05:50,370
É como margem de postagem e vamos fazer 20 pixels e não apenas margem.

86
00:05:50,490 --> 00:05:59,600
Vamos apenas fazê-lo no fundo, então só março e fundo se refrescam e isso está bastante próximo.

87
00:06:00,210 --> 00:06:06,000
que temos um pouco mais de espaço aqui do que fazemos aqui e isso é porque isso ou aquilo

88
00:06:06,000 --> 00:06:13,050
que adicionamos é realmente fora da classe de postagem, de modo que não está sendo afetada por essa margem que nós adicionamos.

89
00:06:13,050 --> 00:06:15,140
Então, o último pequeno problema aqui é

90
00:06:15,150 --> 00:06:19,490
Então, se fizéssemos, apenas movemos o A char.

91
00:06:19,500 --> 00:06:20,160
Onde fica isso.

92
00:06:20,160 --> 00:06:25,510
Aqui vamos para o final do post e estamos frescos.

93
00:06:25,590 --> 00:06:27,960
Você pode ver se conseguimos o espaçamento que nós queremos.

94
00:06:28,600 --> 00:06:36,210
Ok, então, se nós quiséssemos experimentar e obter esse exato, só retornaríamos a esse H. R. estilos e tente alguns

95
00:06:36,300 --> 00:06:37,730
dos outros.

96
00:06:37,890 --> 00:06:41,970
Mas o que eu realmente quero mostrar novamente é que podemos incorporar outros estilos.

97
00:06:42,010 --> 00:06:46,770
Nós realmente não precisamos saber exatamente como eles funcionam, embora seja uma boa idéia ter curiosidade

98
00:06:46,770 --> 00:06:48,080
e tentar descobrir isso.

99
00:06:48,930 --> 00:06:53,790
Então, espero que você tenha gostado de fazer este projeto para um simples e mínimo blog simples e por enquanto.

100
00:06:53,790 --> 00:06:56,430
Obviamente, na verdade, ele não funciona como um blog.

101
00:06:56,430 --> 00:07:01,390
Não há comentários que não podemos adicionar em uma nova postagem com qualquer tipo de interface.

102
00:07:01,470 --> 00:07:06,600
mesmos, mas quando chegamos ao javascript e quando, em particular, chegamos ao back-end e temos um banco de dados

103
00:07:06,600 --> 00:07:11,670
e temos um servidor indo em um framework chamado Express nós realmente vamos levar esse blog e transformá-lo em

104
00:07:12,050 --> 00:07:17,610
um blog real onde podemos adicionar uma postagem usando um formulário que podemos comentar e podemos fazer outras coisas como votação.

105
00:07:17,970 --> 00:07:20,840
Nós temos que realmente editar o envelhecer para fora de nós

106
00:07:21,060 --> 00:07:22,410
Então isso vai ser realmente emocionante.

107
00:07:22,410 --> 00:07:24,350
Vamos usar isso, avaliá-lo.

108
00:07:24,360 --> 00:07:28,540
É relativamente bom procurar relativamente poucas linhas.

109
00:07:29,040 --> 00:07:31,200
OK, vou vê-lo quando cobrimos o javascript