1
00:00:00,780 --> 00:00:06,390
Alors, maintenant, allons-y et doublez ce balisage qui est tout ce que j'ai fait ici.

2
00:00:06,720 --> 00:00:12,690
J'ai utilisé des mots légèrement différents légèrement différents bacon ipsum entre ces paragraphes.

3
00:00:12,810 --> 00:00:19,310
Donc je vais juste copier ces deux plus dans le h t m l Mais là encore, ce n'est pas l'accent ici.

4
00:00:19,350 --> 00:00:26,340
Donc, ce que nous voulons à nouveau assurez-vous que nous allons prendre ce à partir de zéro, donc c'est div classe égale postes.

5
00:00:26,850 --> 00:00:33,870
Et certains d'entre vous pourrait se demander pourquoi j'ai même pris la peine de mettre div un div avec classe égale post autour de tout.

6
00:00:33,900 --> 00:00:35,710
Cela fonctionnerait bien sans cela.

7
00:00:35,820 --> 00:00:37,880
Il s'agit vraiment de regrouper les choses ensemble.

8
00:00:38,100 --> 00:00:42,810
Je préférerais avoir un énorme gâchis où un blog saigne dans un autre.

9
00:00:42,810 --> 00:00:52,910
J'aime avoir des choses contenues un peu pour que je sais que c'est un poste et il se termine ici, donc c'est plus juste à mon avis garder le code un peu propre.

10
00:00:53,340 --> 00:01:05,530
Donc nous voulions avoir une date nommée date ou date classique et cette date est le 11 décembre 2015.

11
00:01:05,820 --> 00:01:07,750
Sauf que.

12
00:01:07,830 --> 00:01:12,640
Ensuite, nous avons eu un H2 et que H-2.

13
00:01:12,720 --> 00:01:18,510
C'est un autre article qui est un autre article terrible.

14
00:01:18,840 --> 00:01:19,950
Ne recommandez pas de le lire.

15
00:01:19,950 --> 00:01:21,490
C'est juste du bacon.

16
00:01:21,780 --> 00:01:25,500
Je vais donc aller de l'avant et copier cette citation à nouveau.

17
00:01:25,830 --> 00:01:26,990
C'est un paragraphe.

18
00:01:27,060 --> 00:01:30,490
La classe est égale à citer la pâte qui dans.

19
00:01:30,630 --> 00:01:32,870
Et puis nous avons deux autres paragraphes ici.

20
00:01:33,130 --> 00:01:40,800
Un et enfin le dernier bit de balisage dont nous avons besoin.

21
00:01:40,800 --> 00:01:42,000
Le deuxième paragraphe.

22
00:01:42,000 --> 00:01:43,950
Voilà.

23
00:01:44,640 --> 00:01:49,000
Alors voyons comment cela ressemble.

24
00:01:49,080 --> 00:01:54,910
Donc, une chose que je remarque, c'est que nous avons un peu moins d'espace entre les messages ici.

25
00:01:54,960 --> 00:01:56,760
Donc, celui-ci se heurte à cela.

26
00:01:56,760 --> 00:02:05,220
La date du 11 décembre, nous voulons certainement un peu d'espacement, comme nous pouvons le voir dans la partie gauche de ce pourrait être parce que le HRR que nous manquons.

27
00:02:05,220 --> 00:02:09,020
Bien que je pense que ce que nous devons faire est juste ajouter dans une certaine marge entre les messages de blog.

28
00:02:09,150 --> 00:02:11,780
Commençons donc par obtenir ce h r in.

29
00:02:12,570 --> 00:02:15,690
Nous n'avons donc pas vraiment vu l'élément H R vraiment dans la pratique.

30
00:02:15,690 --> 00:02:19,410
C'est très simple à utiliser ressemble à ceci.

31
00:02:19,410 --> 00:02:27,540
C'est réellement auto-fermeture ne prend rien, c'est qu'il n'a pas de balise de fermeture ou tout contenu interne juste une règle horizontale char.

32
00:02:27,540 --> 00:02:30,200
Si nous rafraîchissons ce que vous verrez.

33
00:02:30,210 --> 00:02:35,940
Donc, cela nous donne cette ligne qui traverse et qui ordinairement est très bien.

34
00:02:35,940 --> 00:02:40,830
La plupart des gens mais comme style de ces un peu de sorte que celui-ci est vraiment faible.

35
00:02:40,950 --> 00:02:52,310
Je ne sais pas si vous pouvez le dire, mais il est fondamentalement obtenir un peu plus épais et puis à traîner sur les bords et il ya quelques grandes ressources et des choses en ligne que vous pouvez utiliser pour le style tout char.

36
00:02:52,410 --> 00:03:00,840
Et la raison pour laquelle ils ont ajouté ceci ici est que je voulais vous forcer à chercher quelque chose et à essayer de trouver des styles que vous n'avez pas écrit vous-même.

37
00:03:00,840 --> 00:03:04,830
Donc, je vais vous montrer exactement ce que je ferais pour trouver des styles H R.

38
00:03:04,830 --> 00:03:09,170
Je voudrais juste Google HDR style et voir ce que nous obtenons.

39
00:03:09,390 --> 00:03:13,320
Et vous pouvez voir que j'ai effectivement cliqué sur deux d'entre eux avant.

40
00:03:13,890 --> 00:03:20,280
Donc, nous avons des styles simples pour chaque pot et vous pouvez voir qu'il ya quelques options ici.

41
00:03:20,460 --> 00:03:23,290
Donc, ils pensent que c'est celui avec lequel je suis allé ici.

42
00:03:23,550 --> 00:03:25,980
Mais essayons juste un comme ceci.

43
00:03:25,980 --> 00:03:31,440
Cliquez sur le code et tout ce que nous avons à faire est de les copier.

44
00:03:31,440 --> 00:03:36,780
Ce sont deux styles et copier ce vers le bas et nous n'avons pas.

45
00:03:36,900 --> 00:03:45,460
Je ne veux pas penser que vous avez besoin de comprendre chaque ligne ici parce que c'est quelque chose qui est assez avancé et genre de hacky que vous pouvez voir cette personne dit.

46
00:03:45,480 --> 00:03:57,600
Pas vraiment censé travailler, mais la seule chose que nous voulons faire est de s'assurer que ceux-ci vont être de sélectionner notre H R et donc ce que c'est de faire est de laisser HRO avec la classe de style 7 que nous n'avons pas.

47
00:03:57,870 --> 00:04:06,670
Alors choisissons un char et voyons ce que cela ressemble.

48
00:04:06,690 --> 00:04:08,120
Actualisez la page.

49
00:04:08,150 --> 00:04:09,270
OK, nous y allons.

50
00:04:09,360 --> 00:04:11,400
Donc, personnellement, je ne me soucie pas de celui-là.

51
00:04:11,430 --> 00:04:14,700
Je vais utiliser celui-ci ici ce genre de sentiers off.

52
00:04:14,700 --> 00:04:17,240
N'hésitez pas à faire ce que vous voulez et jouez avec.

53
00:04:17,610 --> 00:04:25,420
Mais encore une fois, le fait est que je voulais que vous essayiez de trouver quelque chose d'externe que vous n'écriviez pas et je voulais vous montrer que c'est parfaitement bien de le faire.

54
00:04:25,560 --> 00:04:27,100
Je ne fais que copier ça.

55
00:04:27,270 --> 00:04:29,220
Je n'ai pas écrit ça.

56
00:04:29,500 --> 00:04:34,520
Besoin de se débarrasser de ces styles ici et mettre cela en.

57
00:04:35,400 --> 00:04:46,370
Donc, tout ce qu'ils font, c'est qu'ils semblent fixer une bordure sur le HRO, donc pas de hauteur de bordure qui est juste un pixel, puis cette image de fond qui est un gradient.

58
00:04:46,550 --> 00:04:48,870
Et c'est ainsi qu'ils obtiennent cet effet de gradient.

59
00:04:48,870 --> 00:04:51,970
Donc, si nous rafraîchissons Maintenant, vous y allez.

60
00:04:52,110 --> 00:04:55,710
Nous avons ce beau gradient effet ici et si nous voulions.

61
00:04:55,710 --> 00:04:59,530
En fait, je préfère celui-ci donc je vais juste aller de l'avant et garder celui-ci.

62
00:04:59,760 --> 00:05:00,350
Sur ceci.

63
00:05:00,350 --> 00:05:05,380
Je pourrais changer la couleur un peu de sorte qu'il est un gris plus clair, mais gardons cela pour l'instant.

64
00:05:05,580 --> 00:05:13,090
Mais nous avons encore ce problème qui est notre prochain post blog commence trop tôt et nous avons besoin d'ajouter un peu d'espace là-bas.

65
00:05:13,410 --> 00:05:17,940
Donc, tout ce que nous devons faire, c'est ajouter un peu d'une marge.

66
00:05:18,360 --> 00:05:31,090
Donc, c'est vraiment une belle coïncidence que nous avons ce blog post wrapper autour de chaque poste, car nous pouvons simplement ajouter une marge au bas de chaque poste de sorte que va ajouter de l'espace ici.

67
00:05:32,220 --> 00:05:34,210
Donc, tout ce que nous devons faire est de sélectionner.

68
00:05:34,230 --> 00:05:36,560
Permettez-moi de vous montrer le poste de classe.

69
00:05:36,630 --> 00:05:37,810
C'est un poste.

70
00:05:38,160 --> 00:05:39,580
Alors nous allons juste ici.

71
00:05:39,670 --> 00:05:50,370
C'est comme la marge poste et faisons 20 pixels et pas seulement la marge.

72
00:05:50,490 --> 00:05:59,600
Faisons-le juste sur le bas donc seulement Mars et le fond rafraîchir et qui est à la recherche assez proche.

73
00:06:00,210 --> 00:06:15,140
Donc, le dernier petit problème ici est que nous avons un peu plus d'espace ici que nous le faisons ici et c'est parce que ce ou que nous avons ajouté est en fait en dehors de la classe post donc il n'est pas affecté par cette marge que nous avons ajouté.

74
00:06:15,150 --> 00:06:19,490
Donc, si nous faisions cela, nous déplaçons simplement l'A char.

75
00:06:19,500 --> 00:06:20,160
Où est-ce.

76
00:06:20,160 --> 00:06:25,510
Ici nous allons au fond de la poste et nous sommes frais.

77
00:06:25,590 --> 00:06:27,960
Vous pouvez voir si nous obtenons l'espacement que nous voulons.

78
00:06:28,600 --> 00:06:37,730
OK, donc si nous voulions expérimenter et obtenir cet exact, nous allons revenir à ce H.R. styles et essayer certains des autres.

79
00:06:37,890 --> 00:06:41,970
Mais ce que je veux vraiment montrer à nouveau, c'est que nous pouvons incorporer d'autres styles.

80
00:06:42,010 --> 00:06:48,080
Nous n'avons pas vraiment à savoir exactement comment ils fonctionnent bien que c'est une bonne idée d'être curieux et d'essayer de comprendre.

81
00:06:48,930 --> 00:06:53,790
Alors j'espère que vous avez aimé faire de ce projet à nice simple minimal blog et pour l'instant.

82
00:06:53,790 --> 00:06:56,430
Évidemment, il ne fonctionne pas réellement comme un blog.

83
00:06:56,430 --> 00:07:01,390
Il n'y a aucun commentaire que nous ne puissions ajouter dans un nouveau message avec n'importe quel type d'interface.

84
00:07:01,470 --> 00:07:20,840
Nous devons réellement modifier le vieilli lui hors de nous-mêmes, mais quand nous arrivons à javascript et quand en particulier et nous arrivons à l'extrémité arrière et nous avons une base de données et nous avons un serveur allant dans un cadre appelé Express, nous allons réellement prendre ce blog Et de le transformer en un véritable blog où nous pouvons ajouter un post en utilisant un formulaire que nous pouvons commenter et nous pouvons faire d'autres choses comme voter.

85
00:07:21,060 --> 00:07:22,410
Ce sera donc vraiment excitant.

86
00:07:22,410 --> 00:07:24,350
Nous allons l'utiliser pour l'évaluer.

87
00:07:24,360 --> 00:07:28,540
Il est relativement agréable de chercher relativement peu de lignes.