Salut, tout le monde, bienvenue.
Encore une fois, je vais te demander d'arrêter d'apprendre et de commencer à coder et à pratiquer.
Et nous allons utiliser le même exemple que nous avons utilisé lors de notre première pause de codage.
Donc je voulais vous montrer ce qu'était notre ancienne page, juste ici.
Et voyez comment nous pouvons le transformer en quelque chose qui ressemble un peu plus à
notre nouvelle page ici,
où nous avons mis en œuvre certaines de nos marges, paddings, largeurs et hauteurs.
Bon, alors allons-y et commençons.
La première chose que je veux faire est d'utiliser exactement la même feuille de style que j'ai utilisée pour
la première.
Il n'est absolument pas nécessaire de recréer votre feuille de style lorsque vous pouvez simplement
l'utiliser et la modifier, ou si vous le souhaitez, utiliser deux feuilles de style.
Je vais en utiliser un seul.
Et la première chose que je vais corriger est le fait
que j'ai fait ce que vous pourriez appeler une erreur dans ma version antérieure.
J' ai deux règles de style h1.
Ce n'est pas un problème.
Le navigateur appliquera tous ces styles.
Mais ce que je voulais vraiment faire, c'était que je voulais styler le body tag.
Alors, regardons à quoi ça ressemble en ce moment.
Et revenons à notre version actuelle.
Et on y va.
Ça semble déjà un peu mieux que ce que nous avions.
Bon, maintenant que je suis sur un bon point de départ pour quand je commence,
parlons des différentes choses que nous pouvons styler sur notre page, d'accord ?
Une des premières choses que je veux faire est que je veux ajouter un peu de
marge à ma page.
Si vous regardez ici, il n'y a pas beaucoup d'espace entre le bord de la page et
le navigateur réel.
Je veux ajouter un peu.
Vous pouvez ajouter un peu, vous pouvez ajouter beaucoup.
En fait, pendant que nous codons aujourd'hui, je vais en ajouter beaucoup, juste pour que vous puissiez voir les effets.
Alors, comment faites-vous ça ?
Comment ajouter cet espace entre l'élément et ses voisins ?
Allez et on va ajouter une marge.
Et, comme je l'ai dit, je pense que je vais le rendre un peu plus prononcé que dans
le code que j'ai montré juste là.
Je vais aller de l'avant et faire 4%.
Donc quand on fera ça, je retournerai à la page.
Je vais recharger.
Et vous pouvez voir que tout est en quelque sorte emménagé, d'accord ?
Marge ajoute juste un peu d'espace et le rend plus attrayant visuellement pour vos utilisateurs, d'
accord ?
Pensons à d'autres choses que nous voulons faire.
De toute évidence, je veux probablement ajouter un peu d'espace entre
mes liens et le bas du texte.
Donc c'est un peu différent.
Je ne dis pas de séparer les éléments,
je dis que j'ai besoin de plus d'espace entre ma frontière et l'élément lui-même.
Donc, dans ce cas, ce que nous voulons utiliser n'est pas la marge, nous voulons modifier le rembourrage.
Allons voir où nous pensons faire ça.
Bon, donc j'ai besoin d'ajouter du rembourrage à l'intérieur de l'en-tête entier.
Alors allons-y et
je vais le changer pour, rembourrage, encore une fois vous pouvez choisir tout ce que vous voulez.
Vous pouvez utiliser des pixels, vous pouvez utiliser des pourcents.
Je vais aller de l'avant dans ce cas, je vais juste mettre en pixels.
Et je vais dire s'il vous plaît ajouter 15 pixels d'espace entre la bordure et le bas.
Alors, rafraîchissez, oh, assurez-vous que je sauve.
Et rafraîchissez, et
vous pouvez voir que j'ai ajouté du rembourrage tout autour de tout le truc.
Si je voulais vraiment que le rembourrage soit sur le fond,
j'aurais pu dire le fond de rembourrage, ou le rembourrage à droite, ou le rembourrage à gauche.
D' accord, allons de l'avant et stylisons autre chose.
Une des grandes choses que j'ai changées, c'est qu'au lieu d'avoir
un sous l'autre, j'ai changé ces choses pour qu'elles soient à côté de l'autre.
Alors rappelez-vous, par défaut, les sections sont des blocs, elles sont des blocs d'affichage,
ce qui signifie ne laissez personne d'autre venir à côté de moi.
Afin de le changer afin
qu'ils soient à côté de l'autre, nous pouvons soit utiliser inline ou inline-block.
Presque toujours lorsque vous avez ce choix, vous allez utiliser en ligne,
car lorsque vous utilisez en ligne, vous pouvez inclure une hauteur et une largeur.
Bon, retournez à mon fichier CSS.
Je ne veux pas changer d'en-tête.
Je pense que je suis assez douée avec h1.
Le Nav, le H2, oh, tu sais quoi ?
Je n'ai rien que je puisse changer ici, alors allons-y et
mettons-nous une nouvelle étiquette.
Section, d'accord, je veux ces trois sections l'une à côté de l'autre.
Donc ce que je pourrais faire, c'est que je pourrais choisir 400 pixels chacun.
Eh bien, cela signifierait que le navigateur doit être d'au moins 1 200 pixels.
Je pourrais choisir 150 pixels chacun.
Ça veut dire qu'ils seront vraiment maigre même s'ils n'ont pas besoin de l'être.
Donc, utilisons des pourcentages.
Je vais utiliser 30%, pas 33%, parce que je veux donner un peu de place au coude pour les
paddings, les marges, les bordures, etc.
Bon, allons-y et regardons tout de suite, je veux voir à quoi ça ressemble.
Vous pouvez voir que j'ai fait 30%, mais ils ne sont toujours pas à côté de l'autre.
C' est parce qu'ils sont toujours bloqués.
Changeons-les en inline-block, Display.
Et espérons le meilleur.
On y va.
J' ai les trois choses l'une à côté de l'autre.
Toujours pas exactement comme nous le voulons, mais c'est pas à pas.
Il fait ce petit progrès à la fois.
Je vais aller de l'avant et corriger ce fait qu'ils ne sont pas tous alignés au sommet.
Et je vais dire float : gauche ; rafraîchir et nous nous rapprochons,
nous nous rapprochons, mais il y a encore quelque chose qui ne va pas.
D' abord, ils sont écrasés.
Je n'aime pas qu'ils soient tous écrasés ensemble.
Alors, comment séparez-vous les différents éléments les uns des autres ?
Comment ajouter un peu d'espace entre les éléments ?
D' accord, si on était en classe, j'aurais un élève qui est comme ooh, oh,
je sais, oui, c'est de la marge, d'accord ?
Marge, je vais juste mettre une marge d'un côté, disons juste Margin-droite.
Et je vais faire quelque chose de petit comme 2%.
D' accord, on se rapproche.
On se rapproche.
Toujours pas tout à fait ce que nous voulions, mais c'est ainsi que cela fonctionne.
Vous ajoutez un peu.
Vous vous ajustez.
Vous ajoutez un peu.
Donc, l'un des gros problèmes ici est que lorsque vous flottez des choses vers la gauche, ou
lorsque vous flottez des choses,
une fois que vous avez fini de flotter lorsque vous ne voulez pas que ces éléments suivants flottent.
En fait, tu dois entrer et dire, oh, mais je ne veux pas flotter cette partie.
Donc, une fois que nous avons fini avec ces trois sections,
nous ne voulons pas que le pied de page soit aussi les avoir à côté d'eux.
Allons donc et ajustons le code du pied de page.
En bas.
Très bien, si vous vous souvenez si vous ne voulez pas que les choses flottent à côté de vous,
nous allons utiliser clair : les deux, ce
qui signifie ne laissez rien flotter de chaque côté de moi.
Oh, beaucoup mieux, non ?
Ça a l'air beaucoup, beaucoup mieux.
Et à part le fait que j'ai des couleurs bizarres,
nous sommes très proches ici.
En fait, j'aime le gris sur l'en-tête et le pied de page donc
je vais le laisser.
Mais ce que je veux faire, c'est que je veux rendre cette photo plus petite.
Cette petite icône ici, faisons en sorte qu'elle ressemble un peu plus à ça.
Et c'est très simple pour l'approche que nous allons utiliser en ce moment.
Allons-y.
Je vais ajouter une image.
Et je vais aller de l'avant et juste le coder en dur maintenant.
Donc, je vais faire 75 pixels.
Oups, je vais devoir dire largeur:75px.
Jetons un coup d'oeil à ce qu'on a fait.
Ouais, ça a l'air bien.
Si je ne l'aimais pas et que je voulais jouer avec, je n'irais pas ici et
essayer 100, puis 80, puis 52.
Ce que je ferais, c'est que j'irais ici et refaisais Inspecter Element à nouveau.
Et je voudrais, oh, faire ce cuz beaucoup plus grand sinon tout semble vraiment fou.
Et j'irais dans l'image et
je dirais, d'accord, à quoi ça ressemble si à la place je fais 150 pixels ?
Est-ce que ça a l'air mieux ?
Ou oups, je ne veux pas faire ça.
Ou si je fais 125 pixels ?
Est-ce que j'aime ça ?
Choisissez une valeur que vous aimez, et
une fois que vous trouvez quelque chose qui vous convient, copiez cette valeur dans la feuille de style.
Cuz si je le rafraîchis en ce moment, mes valeurs d'élément d'inspection disparaissent.
Allons ici, réparons-le, sauve-le et rafraîchissons-le.
Très bien, donc c'est génial, ce
sont les types de choses que je veux que tu fasses dans cette classe.
Je veux que vous attrapiez un fichier HTML et que vous disiez ooh, puis-je changer ça ?
Que puis-je faire pour le rendre différent ?
De toute évidence, cette page que nous avons créée ici n'est pas un produit fini.
Ce n'est pas exactement comme vous voudriez qu'il soit sur le web.
Donc, nous allons continuer à apprendre de nouvelles choses et
nous allons continuer à coiffer les choses de différentes manières.
Et comme vous continuez à pratiquer, vous êtes confiant et
votre capacité va vraiment grandir.
Et c'est ce que je veux.
Je veux que votre confiance soit
très élevée d'ici la fin de la quatrième semaine que vous pouvez le faire.
Alors bonne chance.