‫Instructeur : Commençons
‫maintenant à vraiment créer notre modèle de base.
‫Donc le modèle sur lequel tous les autres
‫modèles seront basés plus tard.
‫Donc, fondamentalement, nous allons convertir un fichier html normal, qui
‫se trouve dans les fichiers de démarrage, en un modèle Pug.
‫Donc, en gros, nous allons commencer à
‫créer la mise en page de cette page.
‫Donc cet en-tête ici et aussi le pied de page.
‫D'accord, pas le contenu bien sûr,
‫parce que nous allons ensuite construire plus dynamiquement un
‫peu plus tard, d'accord.
‫Mais nous laisserons tout
‫prêt, afin que nous puissions ensuite injecter tout ce contenu réel
‫dans ce modèle de base global.
‫Alors, faisons-le maintenant.
‫Et commençons en fait par nous débarrasser
‫de tout ce contenu que nous avions ici.
‫C'était donc juste pour
‫vous montrer les différentes fonctionnalités de Pug.
‫Et maintenant, ouvrons cet aperçu. html, afin que
‫nous puissions le convertir ici en Pug.
‫D'accord, c'était donc le fichier html d'origine que
‫j'ai créé pour concevoir la page de présentation que
‫nous venons de voir rendue dynamiquement.
‫D'accord, c'est donc ce que nous avons en tête et
‫en fait, allons de l'avant et copions tout ce code, afin que
‫nous puissions ensuite convertir ce qui manque ici.
‫D'accord, donc le contenu de notre titre est celui-ci,
‫et donc copions-le, puis débarrassons-nous,
‫et c'est donc le contenu de la page principale, n'est-ce pas.
‫Ensuite, nous avons déjà le favicon, et aussi le style.
‫Donc, ce qui nous manque, c'est essentiellement ce
‫truc ici, pour la
‫réponse du développement Web, et aussi ce lien de police Google, d'accord.
‫Donc, en commençant
‫par cela, insérez donc une
‫feuille de style, puis saisissons simplement cette
‫référence et remplaçons-la par des guillemets simples.
‫D'accord, alors je veux aussi définir ces deux-là,
‫alors coupons-les ici, et
‫convertissons simplement tout ce que nous avons ici.
‫D'accord.
‫Oh et aussi les guillemets simples.
‫D'accord, mettons celui-ci à la fin,
‫et c'est donc notre chapeau pour notre modèle.
‫Ensuite, jetons un coup d'œil à l'en-tête.
‫D'accord, en gros, nous avons tout cet élément ici, avec
‫juste un en-tête de sorte que la barre gris foncé que vous avez
‫vue en haut de la page.
‫Et donc
‫copions ceci et mettons-le ici.
‫Donc, c'est beaucoup de code
‫et vous verrez à quel point ce sera peu de code plus tard, une
‫fois que nous aurons traduit cela en Pug.
‫D'accord, et ici, mettons maintenant un
‫commentaire visible dans notre html, en disant HEADER.
‫D'accord, et donc en fait, c'est sans le tiret.
‫Ainsi, dans le code VS, lorsque j'appuie sur le raccourci
‫de commentaire, il crée automatiquement un commentaire Pug.
‫Mais ici, je veux vraiment juste un
‫commentaire, qui est également disponible dans la sortie html.
‫Donc, de toute façon, créons maintenant l'élément d'en-tête et
‫voyons ce que nous avons ici.
‫Nous avons donc header avec la classe de header.
‫Et tout ce que nous devons faire pour spécifier
‫une classe, c'est DOT puis le nom de la classe.
‫Alors, en-tête à nouveau.
‫Ensuite, là-dedans, nous avons un élément nav.
‫Et donc, indentation, puis nav. nav qui est à nouveau le nom
‫de la classe, puis nous
‫avons également un autre nom de classe, et
‫donc, un autre point.
‫Et c'est tout.
‫Donc visites guidées.
‫Donc, si vous connaissez un peu l'architecture CSS,
‫vous voyez peut-être que j'utilise l'architecture BEM.
‫Et donc, la navigation est le
‫bloc et ici, ces visites sont un modificateur.
‫Et ici, ce trait de soulignement signifie
‫qu'il s'agit d'un bloc ou
‫en fait d'un élément.
‫Donc bloc, élément et modificateur.
‫D'accord, donc ce n'est pas
‫vraiment important, mais je voulais juste le mentionner.
‫Quoi qu'il en soit, à l'intérieur de la
‫navigation, nous avons un élément de lien.
‫Donc, a, avec la classe de nav__el.
‫Ensuite, ici, nous avons cet attribut href, et donc,
‫rappelez-vous que nous utilisons des parenthèses, puis
‫href,
‫et le définissons sur rien.
‫Donc, fondamentalement, c'est ce que signifie ce hachage ici.
‫Et puis, simplement le contenu, donc
‫toutes les tournées.
‫Ensuite, nous avons ce formulaire ici, mais
‫en fait, nous n'allons pas l'implémenter
‫à ce stade.
‫Alors débarrassons-nous en.
‫Très bien et c'est donc notre navigation.
‫Donc, ce code
‫ici est fondamentalement équivalent à ceci.
‫Et donc ensuite, nous avons ce logo d'en-tête.
‫Donc, nouvelle ligne, mais un niveau en arrière,
‫dans l'indentation pour que ce soit au même
‫niveau que la navigation.
‫Donc, tout comme c'est ici, à droite.
‫Maintenant, quand c'est
‫un div, nous n'avons même pas besoin de dire div. headerlogo, dans ce cas.
‫Ainsi, lorsqu'il s'agit
‫d'un div, qui est en quelque sorte l'élément de bloc standard en
‫html, tout ce dont nous avons besoin
‫est le point et cela créera automatiquement un élément div.
‫Ensuite, là-dedans, nous avons cette
‫image, et cela nécessite bien sûr quelques attributs, qui
‫sont d'abord la source.
‫Donc image, logo, blanc. png, puis aussi
‫le texte alternatif, d'accord.
‫Ensuite, nous avons cette autre navigation ici, et encore une
‫fois, c'est au même niveau
‫que la première navigation et cette div.
‫Revenez donc à un niveau dans
‫l'indentation et créez un nouvel élément de navigation avec la
‫classe nav et la classe nav user.
‫Ensuite, là-dedans, il y a
‫un lien,
‫très similaire à celui-ci, alors copions-le simplement pour gagner du temps.
‫Et puis ici, c'est écrit, Mes réservations.
‫Puis un autre, et en fait, copions-le à nouveau avec la différence
‫qu'il n'a pas ce contenu, mais à
‫la place il a un peu plus de contenu à l'intérieur.
‫Donc ça.
‫Donc, très facile encore, image, avec
‫la source, . jpg.
‫Et il a aussi un
‫nom de classe, alors modifions ici avec le point.
‫Donc, nav, image de l'utilisateur.
‫Et puis simplement un span disant Jonas.
‫Et, comme vous
‫pouvez le voir, ce sera en fait la partie
‫dynamique de cet en-tête.
‫Et donc en fait, tout cela ici deviendra
‫un point au début.
‫D'accord, mais de toute façon, finissons maintenant de coder cette partie ici.
‫Donc en gros, ces deux
‫boutons, donc le bouton de connexion et le bouton d'inscription.
‫Donc, bien sûr, vous n'aurez pas le
‫bouton de connexion et le bouton d'inscription en
‫même temps pour avoir cette navigation utilisateur ici.
‫Donc mes réservations et ensuite le nom de l'utilisateur, d'accord.
‫Mais encore une fois, mettons cela ici pour le moment,
‫puis commentons ce dont nous n'avons pas besoin.
‫Donc, bouton, élément de navigation, et également élément de
‫navigation, puis le modificateur cta pour l'inscription.
‫Et en fait, il y en a aussi un avant cela pour la connexion, n'est-ce pas.
‫Alors, c'est celui-ci.
‫D'accord et c'est en fait ça.
‫C'est donc l'en-tête,
‫et vous voyez que ce code
‫ici est équivalent à tout ce que nous avons ici
‫qui semble beaucoup plus déroutant, si vous
‫me demandez au moins.
‫Alors, supprimez cela, et comme je l'ai
‫dit, cette navigation utilisateur ici,
‫cette partie ne sera disponible que
‫lorsque quelqu'un sera connecté.
‫Et donc pour l'instant, commentons complètement tout cela.
‫Très bien, nous avons ensuite le contenu et ajoutons donc un autre commentaire ici
‫et dans notre html,
‫en fait tout ce que
‫nous allons ajouter maintenant est
‫cette section ici avec la classe de vue d'ensemble.
‫Parce qu'alors, c'est là que nous avons
‫toutes ces cartes de contenu,
‫qui encore une fois, pour l'instant, nous n'y inclurons pas.
‫Encore une fois, ce que
‫nous faisons maintenant n'est vraiment qu'un squelette, pour ainsi dire.
‫Très bien, donc section. Aperçu.
‫Aperçu.
‫Et pour l'instant, mettons simplement un h1 ici avec
‫le nom de la tournée qui arrive en tant que variable.
‫D'accord et bien sûr, cette
‫section ici doit être au même niveau que cet en-tête, super.
‫Il ne nous manque donc plus que le pied de page
‫à la fin de la page.
‫Alors allons-y et c'est parti.
‫Prenons tout ça.
‫Et cela devrait en fait être un élément de pied de
‫page, pas seulement un div ordinaire.
‫Donc un élément de pied de page avec la classe de pied de page, puis un
‫div, avec la classe de logo de pied de page,
‫et encore une fois, je n'ai même pas besoin de spécifier l'élément div.
‫Ensuite, nous avons une image ici,. png et j'espère
‫donc que taper tout cela par vous-même, à la main en gros,
‫vous permettra de mieux comprendre comment tout cela fonctionne.
‫D'accord, c'est donc alt et maintenant cette navigation de
‫pied de page, donc une liste non
‫ordonnée, et maintenant là-dedans, nous avons quelques éléments
‫d'élément de liste.
‫Alors listez l'élément, et puis là-dedans il y a un
‫lien dans chacun d'eux.
‫Donc, un avec le href de nulle part fondamentalement.
‫Et puis, À propos de nous.
‫Maintenant, ici dans cette situation, n'avoir besoin
‫de cette ligne
‫supplémentaire que pour spécifier ce li, n'est pas vraiment idéal.
‫Et donc ce que
‫nous pouvons faire ici, c'est
‫d'utiliser un deux-points, comme celui-ci, puis de tout mettre sur la même ligne.
‫Et donc cela fonctionnera toujours comme s'il y avait
‫une nouvelle ligne avec une indentation,
‫mais nous permettant fondamentalement de tout faire sur la même ligne.
‫D'accord, alors pour une raison quelconque, la coloration
‫syntaxique cesse de
‫fonctionner, mais bon, ce n'est pas si important.
‫Alors téléchargez les candidatures, devenez
‫guide, métiers.
‫Et c'est en fait ça.
‫Ensuite, nous avons ce pied de
‫page, le droit d'auteur, et donc ici, nous avons juste un tas de texte.
‫Il précise donc le symbole
‫du droit d'auteur ici, et c'est de Jonas Schmedtmann.
‫Donc, c'est moi et comme dans tous mes autres cours,
‫je veux que vous sachiez que vous êtes libre
‫d'utiliser ce projet pour vous-même.
‫Donc en gros pour le mettre dans votre portfolio ou pour
‫montrer à qui vous voulez, que vous avez construit
‫ce projet dans mon cours.
‫Maintenant, ce que vous ne pouvez pas faire, c'est créer votre propre
‫cours basé sur ce projet.
‫Et c'est triste que je sois même obligé de le dire,
‫mais bien sûr il y a eu des
‫gens qui ont utilisé mon projet, essentiellement pour mettre des cours
‫gratuits sur YouTube, où ils ont copié mes projets, un par un.
‫D'accord, alors laissez-moi l'écrire ici.
‫Pour vos propres besoins, sauf pour
‫produire bien sûr, vos propres cours ou tutoriels.
‫D'accord et c'est tout.
‫Très bien, c'est
‫donc la traduction du squelette que nous
‫avons ici, à l'exception bien sûr du contenu.
‫D'accord, nous n'avons plus besoin de ça.
‫Et, juste pour finir, jetons un coup d'œil
‫et en effet, voici notre contenu.
‫Maintenant, ceci semble un peu déplacé parce que ce texte
‫de copyright ici est si long.
‫Donc, cette navigation de pied de page essentiellement.
‫Mais puisqu'il s'agit d'un conteneur flexible, nous devrions
‫pouvoir résoudre ce problème
‫avec un contenu justifié, flex-end, pas celui-ci.
‫D'accord, et ne vous inquiétez pas si vous n'êtes pas
‫familier avec CSS, ou même Flexbox, il s'agit simplement
‫de résoudre visuellement le
‫petit problème que nous avons eu ici.
‫Cherchons donc pied de page ici.
‫Nous voilà.
‫Corrigez cela ici, et
‫si nous rechargeons
‫maintenant, oui, alors nous sommes bons, parfaits.