1
00:00:01,240 --> 00:00:04,800
OK, alors allons-y et créez ce blog à partir de zéro.

2
00:00:04,920 --> 00:00:06,620
Alors n'hésitez pas à suivre ici.

3
00:00:06,630 --> 00:00:11,530
Je vais passer de la création d'un nouveau fichier jusqu'à la fin de ce blog ici.

4
00:00:12,000 --> 00:00:13,880
Donc, la première chose que nous allons faire.

5
00:00:14,070 --> 00:00:19,750
Je vais garder la solution ouverte juste pour que je puisse faire référence et assurez-vous que nous avons la couleur correcte et les tailles de police.

6
00:00:20,040 --> 00:00:35,990
Mais la première chose que nous voulons vraiment faire est d'obtenir nos fichiers mis en place afin que j'ai deux fichiers d'un blog qui HMO et il n'a rien en elle à ce jour, sauf le blog titre et il est lié à une feuille de style appelé Blog Dotsie SS C'est vide .

7
00:00:36,030 --> 00:00:38,760
Donc, c'est juste que vous connaissez les deux fichiers dont nous aurons besoin.

8
00:00:39,090 --> 00:00:41,170
Et maintenant, allons-y et remplissez-les.

9
00:00:41,790 --> 00:00:44,950
Nous devons donc décider quand faire quelque chose comme ça.

10
00:00:44,970 --> 00:00:46,540
Où allons-nous commencer.

11
00:00:46,560 --> 00:00:57,420
Et je pense que la meilleure solution est de commencer avec une partie de ce marquage dans notre âge G-mail et le style d'une partie de celui-ci, mais nous n'avons pas à obtenir tout leur parfait mot à mot avant que nous avons réellement les choses de style.

12
00:00:57,780 --> 00:01:04,290
Je commencerais par vous mettre un paragraphe ou deux et un de ces en-têtes dans notre corps.

13
00:01:04,290 --> 00:01:14,130
Et pour ce faire, c'est le texte Lorem Ipsum, sauf que c'est bacon ipsum qui est juste ajouter bacon ipsum dot com.

14
00:01:14,130 --> 00:01:17,340
Cliquez sur me donner du bacon et copier juste un des paragraphes.

15
00:01:17,610 --> 00:01:24,330
Je vais juste utiliser ce que j'ai ici, mais les mots ne sont pas si importants, tant qu'ils sont des mots là.

16
00:01:24,660 --> 00:01:26,840
Donc, si vous voulez utiliser bacon ipsum aller de l'avant.

17
00:01:26,940 --> 00:01:34,520
Mais si vous n'avez pas si vous vous opposez au bacon, vous pouvez choisir n'importe quel autre ipsum ou simplement faire vos propres mots ou effectivement mettre votre propre blog là-bas.

18
00:01:34,560 --> 00:01:35,810
Ce serait idéal.

19
00:01:36,030 --> 00:01:44,070
Et puis je vais aussi mettre l'un des titres ici et une note, il pourrait faire sens pour faire de ces un H1 tous les deux.

20
00:01:44,070 --> 00:01:50,820
Mais généralement la règle est que vous voulez avoir un H-1 sur la page, il devrait être la plus grande chose sur votre page.

21
00:01:50,850 --> 00:01:55,420
Donc parce que nous avons plusieurs de chacun sont des titres multiples ici plusieurs titres d'article.

22
00:01:55,500 --> 00:02:11,360
Je vais aller avec H-2, mais à la fin de la journée, ça n'a pas d'importance du tout parce que nous allons tout changer, nous allons changer la taille de police que nous allons changer La couleur et toutes les choses qui seraient fixées en le faisant un H1 contre la nature à ces différences seront éliminés de toute façon.

23
00:02:11,640 --> 00:02:22,210
Donc je vais aller avec H-2 et je vais juste dire que c'est mon premier article pas le titre le plus créatif, mais l'enregistrer.

24
00:02:22,410 --> 00:02:24,220
Et nous allons juste prévisualiser pour commencer.

25
00:02:24,630 --> 00:02:27,300
Ouvrez-le donc.

26
00:02:27,360 --> 00:02:27,870
D'ACCORD.

27
00:02:27,930 --> 00:02:30,090
Donc, il ya notre blog jusqu'à présent.

28
00:02:30,960 --> 00:02:33,100
Nous avons donc un tas de décisions à prendre.

29
00:02:33,120 --> 00:02:38,620
La première chose que je pourrais commencer, c'est que ce corps ait cette frontière.

30
00:02:39,180 --> 00:02:42,110
Donc j'ai fourni les couleurs dans la dernière vidéo.

31
00:02:42,120 --> 00:02:56,240
Je vais juste copier cette couleur ici et je vais donner le plan d'eau donc je vais sélectionner le corps et puis tout ce que nous avons à faire est de dire frontière et c'est 20 pixels solides cette couleur grise.

32
00:02:56,370 --> 00:02:57,930
Et vérifions ça.

33
00:02:58,560 --> 00:02:59,090
D'ACCORD.

34
00:02:59,220 --> 00:03:05,120
Donc, il ne semble pas tout à fait la façon dont nous voudrions qu'il regarde, mais il est d'y arriver, nous avons la frontière.

35
00:03:05,580 --> 00:03:08,350
Faisons-le en taille réelle afin que nous puissions vraiment comparer.

36
00:03:09,120 --> 00:03:16,390
Donc, une autre chose que vous remarquerez est que notre frontière il ya un problème qui est il va tout le chemin tout le corps prend toute la page.

37
00:03:16,560 --> 00:03:19,500
Versus ici le corps ne prend qu'une partie de la page.

38
00:03:19,560 --> 00:03:21,890
Et puis il ya espacement de chaque côté.

39
00:03:21,930 --> 00:03:28,550
Ensuite, il ya aussi l'espacement à l'intérieur que nous n'avons pas parce que nos mots dans notre texte aller tout droit contre la frontière.

40
00:03:28,590 --> 00:03:31,820
Commençons donc par résoudre ce problème et y remédier.

41
00:03:31,860 --> 00:03:33,520
Bien sûr, vous avez besoin de rembourrage.

42
00:03:33,630 --> 00:03:35,930
Il s'agit donc de 20 pixels de rembourrage sur tous les côtés.

43
00:03:35,970 --> 00:03:40,430
Vous pouvez voir qu'il ya rembourrage en bas et la gauche et la droite aussi.

44
00:03:40,470 --> 00:03:50,560
Donc, dans le corps, nous allons attribuer un rembourrage de 20 pixels sur les quatre côtés et nous obtenons ce OK.

45
00:03:50,580 --> 00:03:52,510
Donc, c'est un peu plus près.

46
00:03:52,530 --> 00:04:15,360
La prochaine chose que nous devrions travailler sur est d'obtenir la largeur correcte et ce n'est pas seulement une question d'obtenir la largeur pour être la bonne taille quand il est plein écran, mais aussi comme il se rétrécit, vous verrez qu'il reste à 700 pixels Reste à 700 pixels pendant un certain temps, puis il se rétrécit et se rétrécit et s'échelonne.

47
00:04:15,360 --> 00:04:17,730
Donc, nous voulons nous assurer que nous pouvons faire en sorte que cela se produise.

48
00:04:17,820 --> 00:04:19,660
Donc nous allons utiliser un peu d'une astuce.

49
00:04:19,830 --> 00:04:24,220
Et puis la seule autre chose que vous voulez faire est de s'assurer qu'il est centré en ce moment.

50
00:04:24,360 --> 00:04:25,330
Eh bien nous ne pouvons pas vraiment dire.

51
00:04:25,350 --> 00:04:28,210
Mais il n'est pas centré, il va être sur le côté gauche.

52
00:04:28,230 --> 00:04:30,850
Alors allons de l'avant et ajoutez l'intérieur d'abord.

53
00:04:31,700 --> 00:04:49,660
So let's say avec 700 pixels et d'économiser et c'est ce que je parlais à gauche et nous voulons centre dans le milieu et de faire que nous pouvons utiliser l'auto ou la marge auto truc dont j'avais parlé dans la boîte Modèle de vidéo.

54
00:04:50,100 --> 00:04:54,920
Nous allons donc fixer une marge et nous allons utiliser le raccourci.

55
00:04:55,050 --> 00:05:01,190
Donc, nous allons faire zéro pixels en haut et en bas, puis Otto à gauche et à droite.

56
00:05:01,230 --> 00:05:03,900
Rappelez-vous quand nous faisons deux ici plutôt que quatre.

57
00:05:04,020 --> 00:05:06,640
C'est haut et bas et c'est à gauche et à droite.

58
00:05:07,230 --> 00:05:15,740
Donc, cela les centres pour nous automatiquement, mais alors vous remarquerez en lui donnant un top zéro et le bas, il est maintenant à droite contre le sommet.

59
00:05:16,020 --> 00:05:17,870
Et celui-ci n'est pas là.

60
00:05:17,880 --> 00:05:18,720
Nous avons un peu d'espace.

61
00:05:18,720 --> 00:05:20,950
Il y a 20 pixels là.

62
00:05:21,210 --> 00:05:22,630
C'est donc une solution simple.

63
00:05:22,770 --> 00:05:26,350
Juste la même ligne de changement que de retour à 20 P x.

64
00:05:26,370 --> 00:05:27,490
Nous avons besoin du x.

65
00:05:27,510 --> 00:05:30,580
Nous n'avons pas avant parce que quand il est zéro, vous pouvez juste laisser à zéro.

66
00:05:30,720 --> 00:05:33,970
Mais quand il ya un nombre, nous avons besoin de la prochaine.

67
00:05:33,990 --> 00:05:36,110
OK, c'est assez proche.

68
00:05:36,120 --> 00:05:46,470
La seule chose est que, comme nous rétrécissons, nous voulons que cela reste 700 pixels jusqu'à ce qu'il ne peut plus dire 700 pixels.

69
00:05:46,470 --> 00:05:59,400
Et nous voulons qu'il se rétrécisse et il est assez facile de faire que, en fait, tout ce que nous voulons faire est de changer cette largeur max, et nous allons lui attribuer un pourcentage avec.

70
00:05:59,700 --> 00:06:03,760
Et ce que cela dit est de le rendre 80 pour cent lorsque vous avez besoin.

71
00:06:03,900 --> 00:06:07,540
Mais à un maximum de 700 pixels.

72
00:06:07,620 --> 00:06:09,780
Alors je vais vous montrer ce que cela ressemble quand vous rafraîchir.

73
00:06:09,780 --> 00:06:19,180
Rien ne change parce qu'il est ajouté à un maximum de sept cents pixels de sorte qu'il vérifie si 80 pour cent serait plus de 700 pixels qu'il serait dans ce cas.

74
00:06:19,200 --> 00:06:27,840
Donc, il reste à 700 reste encore à 700 jusqu'à ce que là où il commence à se rétrécir.

75
00:06:27,840 --> 00:06:31,250
C'est là que 80 pour cent est maintenant inférieur à 700 pixels.

76
00:06:31,770 --> 00:06:32,030
D'ACCORD.

77
00:06:32,040 --> 00:06:35,370
Alors maintenant, nous avons notre corps de base mis en place.

78
00:06:35,370 --> 00:06:39,330
La prochaine chose que je voudrais faire ici est d'obtenir notre Funt aller.

79
00:06:39,330 --> 00:06:49,300
Donc encore une fois si nous allons aux notes que j'ai de la dernière vidéo, la police s'appelle Source sense pro.

80
00:06:49,320 --> 00:06:54,370
Alors allons de l'avant et de la tête à Google phos et chercher source envoie Pro.

81
00:06:54,540 --> 00:07:06,860
Donc, je l'ai ouvert ici, mais là encore, c'est juste Google dot com slash polices et juste faire une recherche pour une source envoie pro ici ajouter à l'utilisation de la collection.

82
00:07:07,140 --> 00:07:09,990
Et maintenant, nous avons le choix des poids de police que nous voulons.

83
00:07:10,250 --> 00:07:17,390
Et en fait, je ne vous ai pas dit cela dans la vidéo originale, mais ce n'est que le visage de police normale du poids de la police 400.

84
00:07:17,520 --> 00:07:19,220
Et c'est un poids plus lourd.

85
00:07:19,230 --> 00:07:20,050
Il est plié.

86
00:07:20,100 --> 00:07:22,090
Nous allons donc vouloir les deux.

87
00:07:22,440 --> 00:07:26,970
Donc normal en gras 400 700 et c'est tout.

88
00:07:26,970 --> 00:07:29,700
Nous allons ici et copiez ce lien.

89
00:07:29,700 --> 00:07:37,180
Nous pouvons nous débarrasser des polices de Google maintenant et nous allons aller à notre HMO et collez juste ce lien dedans.

90
00:07:37,950 --> 00:07:41,530
Et maintenant, nous avons la capacité d'utiliser le sens source.

91
00:07:42,180 --> 00:07:51,100
Donc, nous allons l'assigner aux deux paragraphes et deux ans et nous voulons aussi qu'il soit sur ces dates.

92
00:07:51,270 --> 00:08:00,290
Donc, ce que nous pourrions faire est de choisir le paragraphe et de dire source de la famille de la police sense pro et nous pourrions faire la même chose pour H-1.

93
00:08:00,990 --> 00:08:03,640
Mais ce n'est pas vraiment une bonne utilisation de notre succès.

94
00:08:03,780 --> 00:08:07,950
Notre code va être un peu répétitif chaque élément sur lequel nous voulons l'utiliser.

95
00:08:07,950 --> 00:08:10,230
Nous devrions aller y ajouter.

96
00:08:10,770 --> 00:08:15,140
Donc, ce que nous faisons à la place, il suffit de l'appliquer au corps.

97
00:08:15,690 --> 00:08:19,420
Et en jouant dans le corps, tout ce qu'il contient l'héritera.

98
00:08:19,470 --> 00:08:32,100
Donc source de la famille de polices et pro et sauver rafraîchir et là nous allons nous jamais H-1 l'utiliser ou H-2 et nous avons un paragraphe.

99
00:08:32,810 --> 00:08:34,560
Donc cela semble assez bon jusqu'à présent.