OK, alors allons-y et créez ce blog à partir de zéro.
Alors n'hésitez pas à suivre ici.
Je vais passer de la création d'un nouveau fichier jusqu'à la fin de ce blog ici.
Donc, la première chose que nous allons faire.
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.
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 .
Donc, c'est juste que vous connaissez les deux fichiers dont nous aurons besoin.
Et maintenant, allons-y et remplissez-les.
Nous devons donc décider quand faire quelque chose comme ça.
Où allons-nous commencer.
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.
Je commencerais par vous mettre un paragraphe ou deux et un de ces en-têtes dans notre corps.
Et pour ce faire, c'est le texte Lorem Ipsum, sauf que c'est bacon ipsum qui est juste ajouter bacon ipsum dot com.
Cliquez sur me donner du bacon et copier juste un des paragraphes.
Je vais juste utiliser ce que j'ai ici, mais les mots ne sont pas si importants, tant qu'ils sont des mots là.
Donc, si vous voulez utiliser bacon ipsum aller de l'avant.
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.
Ce serait idéal.
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.
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.
Donc parce que nous avons plusieurs de chacun sont des titres multiples ici plusieurs titres d'article.
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.
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.
Et nous allons juste prévisualiser pour commencer.
Ouvrez-le donc.
D'ACCORD.
Donc, il ya notre blog jusqu'à présent.
Nous avons donc un tas de décisions à prendre.
La première chose que je pourrais commencer, c'est que ce corps ait cette frontière.
Donc j'ai fourni les couleurs dans la dernière vidéo.
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.
Et vérifions ça.
D'ACCORD.
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.
Faisons-le en taille réelle afin que nous puissions vraiment comparer.
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.
Versus ici le corps ne prend qu'une partie de la page.
Et puis il ya espacement de chaque côté.
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.
Commençons donc par résoudre ce problème et y remédier.
Bien sûr, vous avez besoin de rembourrage.
Il s'agit donc de 20 pixels de rembourrage sur tous les côtés.
Vous pouvez voir qu'il ya rembourrage en bas et la gauche et la droite aussi.
Donc, dans le corps, nous allons attribuer un rembourrage de 20 pixels sur les quatre côtés et nous obtenons ce OK.
Donc, c'est un peu plus près.
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.
Donc, nous voulons nous assurer que nous pouvons faire en sorte que cela se produise.
Donc nous allons utiliser un peu d'une astuce.
Et puis la seule autre chose que vous voulez faire est de s'assurer qu'il est centré en ce moment.
Eh bien nous ne pouvons pas vraiment dire.
Mais il n'est pas centré, il va être sur le côté gauche.
Alors allons de l'avant et ajoutez l'intérieur d'abord.
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.
Nous allons donc fixer une marge et nous allons utiliser le raccourci.
Donc, nous allons faire zéro pixels en haut et en bas, puis Otto à gauche et à droite.
Rappelez-vous quand nous faisons deux ici plutôt que quatre.
C'est haut et bas et c'est à gauche et à droite.
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.
Et celui-ci n'est pas là.
Nous avons un peu d'espace.
Il y a 20 pixels là.
C'est donc une solution simple.
Juste la même ligne de changement que de retour à 20 P x.
Nous avons besoin du x.
Nous n'avons pas avant parce que quand il est zéro, vous pouvez juste laisser à zéro.
Mais quand il ya un nombre, nous avons besoin de la prochaine.
OK, c'est assez proche.
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.
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.
Et ce que cela dit est de le rendre 80 pour cent lorsque vous avez besoin.
Mais à un maximum de 700 pixels.
Alors je vais vous montrer ce que cela ressemble quand vous rafraîchir.
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.
Donc, il reste à 700 reste encore à 700 jusqu'à ce que là où il commence à se rétrécir.
C'est là que 80 pour cent est maintenant inférieur à 700 pixels.
D'ACCORD.
Alors maintenant, nous avons notre corps de base mis en place.
La prochaine chose que je voudrais faire ici est d'obtenir notre Funt aller.
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.
Alors allons de l'avant et de la tête à Google phos et chercher source envoie Pro.
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.
Et maintenant, nous avons le choix des poids de police que nous voulons.
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.
Et c'est un poids plus lourd.
Il est plié.
Nous allons donc vouloir les deux.
Donc normal en gras 400 700 et c'est tout.
Nous allons ici et copiez ce lien.
Nous pouvons nous débarrasser des polices de Google maintenant et nous allons aller à notre HMO et collez juste ce lien dedans.
Et maintenant, nous avons la capacité d'utiliser le sens source.
Donc, nous allons l'assigner aux deux paragraphes et deux ans et nous voulons aussi qu'il soit sur ces dates.
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.
Mais ce n'est pas vraiment une bonne utilisation de notre succès.
Notre code va être un peu répétitif chaque élément sur lequel nous voulons l'utiliser.
Nous devrions aller y ajouter.
Donc, ce que nous faisons à la place, il suffit de l'appliquer au corps.
Et en jouant dans le corps, tout ce qu'il contient l'héritera.
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.
Donc cela semble assez bon jusqu'à présent.