‫Très bien, les gars, alors maintenant nous allons commencer le balisage de la zone de présentation où se trouve la navigation, la tête ou
‫tout ce genre de choses, et nous allons également le styliser.
‫Mais avant de commencer, je veux juste mentionner que j'utilise la plus jolie extension pour le code
‫vocal.
‫Donc, si j'ai quelque chose qui n'est pas conforme, comme mettre le slinky ici et je l'enregistre, le répare automatiquement
‫car dans mes paramètres, je l'ai configuré pour formater lors de l'enregistrement.
‫Donc, si vous voulez cette extension, vous pouvez simplement cliquer sur les extensions ici et rechercher simplement la plus jolie.
‫Et c'est celui-ci ici.
‫Formateur de code donc plus joli.
‫Et si vous l'installez et que vous souhaitez qu'il se formate lors de la sauvegarde comme le mien, alors vous voulez simplement accéder
‫à vos paramètres.
‫Donc, si vous cliquez sur le petit rouage ici et allez dans les paramètres ou que vous contrôlez le
‫karma ou commandez le karma et recherchez simplement le format lors de l'enregistrement, et c'est juste ici.
‫Vous voulez que cette case soit cochée si vous voulez cette fonctionnalité.
‫Et je veux juste le mentionner parce que vous pourriez voir que parfois, lorsque je sauvegarde, cela changera un
‫peu.
‫Et c'est pourquoi c'est juste que ça ne change rien au code ou quoi que ce soit.
‫Il s'agit simplement de le formater de manière plus lisible.
‫OK, alors commençons ici dans le corps.
‫Je vais donc me débarrasser du H1 et nous allons continuer et créer l'en-tête.
‫OK, donc tout ce que nous faisons en ce moment va être enveloppé dans une balise header et je
‫vais lui donner une idée du header dash home.
‫Maintenant, la raison pour laquelle je fais l'accueil de l'en-tête est que la page d'accueil dans les pages intérieures est très
‫différente en termes d'en-tête dans le menu.
‫Ainsi, les pages intérieures vont en fait avoir une idée de l'en-tête et nous allons les styliser différemment.
‫D'accord.
‫Et puis à l'intérieur ici, je vais mettre une classe de conteneur, qui est une classe utilitaire qui sera
‫utilisée encore et encore pour notre contenu.
‫Et puis mettons notre NAV et je vais vous donner une idée de la navigation du tableau de bord principal, d'accord ?
‫Et puis certains d'entre eux dans certains cas, si vous voulez utiliser la classe, c'est très bien.
‫Je l'utilise essentiellement pour des choses qui sont juste, vous savez, pour cet élément unique, puis des classes plus
‫pour les utilitaires.
‫Nous allons en fait créer un fichier d'accès aux utilitaires où nous mettrons comme les boutons de conteneur, les arrière-plans,
‫des choses comme ça, tout ce qui est fondamentalement un utilitaire.
‫Alors ici, mettons le logo.
‫Je vais donc faire une image avec l'idée de logo et la source va être dans le dossier image
‫puis le logo, PMG.
‫Et encore une fois, j'ai inclus le SD, si vous voulez le modifier et changer les initiales ou quelque
‫chose comme ça pour ALZ, nous dirons simplement, je ne connais pas mon portfolio.
‫OK, alors voyons.
‫Sous l'image, on va mettre le savoir qui va avoir les liens.
‫Nous allons donc faire un élément de liste.
‫Faisons un A en fait, je vais lui donner une classe de courant puisqu'il s'agit de la page
‫d'index, cela va aller à l'index HTML et nous dirons à la maison, puis copions cela quatre fois, puis nous ' va
‫avoir le propos.
‫Et je vais juste mettre en évidence ce courant de classe et il a contrôlé deux fois puis s'en débarrasser.
‫OK, donc environ va aller à environ chaque HTML.
‫Nous avons également du travail HTML.
‫Alors travaillez et prenons contact et contactons HTML.
‫OK, ce sont donc nos liens maintenant sous le NAV, nous allons mettre le contenu de notre en-tête.
‫Je vais donc
‫lui donner une classe de contenu Dasch d'en-tête et nous allons avoir un H1 et dire, je vais faire des cafés, je suis John the.
‫Et puis c'est là que le texte de type va entrer en jeu.
‫JavaScript va donc être utilisé pour cela.
‫Et encore une fois, je ne vais pas vraiment passer en revue le code JavaScript.
‫Je fais, comme je l'ai dit, que le Turrill est sur YouTube.
‫Cependant, nous devons mettre notre span ici car c'est ce à quoi JavaScript va s'accrocher pour
‫insérer ce texte, ce type de texte.
‫Je vais donc lui donner une classe de type tiret de texte, d'accord ?
‫Et nous allons donner à cela des attributs de données spéciaux que JavaScript peut essentiellement saisir
‫et lire.
‫Nous voulons donc donner un tableau de poids et je vais le définir sur trois mille.
‫C'est donc essentiellement le temps que cela va prendre en millisecondes après avoir tapé, vous savez, photographe ou tout ce
‫que nous avons mis et ensuite tapé la chose suivante.
‫Et puis il va également prendre en compte les mots de tiret de données.
‫Et je vais utiliser des guillemets simples ici parce que cela va prendre quelques parenthèses et ensuite tout mot
‫que nous voulons dans le type de fait ira entre guillemets doubles.
‫Alors je vais dire photographe.
‫Et mettez une virgule et nous ferons le concepteur si vous refaites cela pour votre propre portefeuille, vous
‫pouvez évidemment les modifier, puis le tiret de l'interface utilisateur, USX Dev.
‫OK, donc le JavaScript va s'accrocher à ceux-ci et ajouter cet effet de type.
‫Donc, sous le H1, ajoutons un paragraphe, je vais lui donner une classe de plomb, qui va être une classe
‫utilitaire juste pour agrandir un peu la taille de la police et disons.
‫Je me spécialise dans.
‫Conception graphique, interface utilisateur, USX et photographie, et puis la dernière chose que nous voulons ici est une balise A avec la classe des battements et de la lumière du tableau de bord,
‫elle va être formatée comme un bouton et elle va aller au travail sur
‫la page HTML .
‫Et en ce qui concerne le texte, nous dirons simplement voir mon travail.
‫D'accord.
‫Je vais donc économiser et vous pouvez voir que les choses sont plus jolies, ce qui rend les choses un peu plus lisibles.
‫Il a mis tous ces attributs sur des lignes séparées.
‫Alors maintenant, jetons un coup d'œil et remarquons que c'est juste du blanc parce que nous avons en fait défini le corps du texte pour qu'il
‫soit blanc.
‫Donc, la prochaine chose sur laquelle nous allons travailler est le succès ou le culot.
‫Et nous allons ajouter cette grande image d'arrière-plan pour que nous puissions réellement voir le texte.
‫Passons donc au succès de Main Dot.
‫Et nous avons l'en-tête home, le header dash home, puis les pages intérieures vont avoir le header dash
‫inor.
‫Donc, ce que je vais faire, c'est dire en-tête et nous ferons I d en-tête.
‫Maintenant, il n'y aura pas d'idée réelle de l'en-tête de cet en-tête home et de l'en-tête interne.
‫Donc ici, je vais utiliser l'esperluette, tiret à la maison, OK, puis nous le ferons sur tiret inor.
‫Donc, tout ce qui concerne l'en-tête home ira ici, puis l'intérieur ira en bas.
‫Donc, pour l'en-tête home, faisons l'arrière-plan et nous allons le définir sur notre variable.
‫N'oubliez pas que nous avons une variable d'image BGI qui contient l'emplacement de l'image d'arrière-plan et que nous ne
‫ferons aucune répétition.
‫Je vais faire le centre et je vais le positionner correctement.
‫Alors centrez-vous à droite.
‫Et puis nous voulons qu'il couvre toute la zone.
‫Et pour ce qui est de la hauteur, nous allons occuper toute la page.
‫Nous allons donc faire une centaine de hauteurs de fenêtres, puis assurons-nous simplement que les couleurs sont blanches.
‫Très bien, donc si nous allons de l'avant et sauvegardons cela et que nous revenons maintenant, nous pouvons voir l'image.
‫Travaillons maintenant sur ce logo car évidemment c'est c'est géant.
‫Donc, le logo et la barre de navigation, pendant que nous y sommes, jetons un coup d'œil à l'intérieur de l'en-tête home.
‫Droit.
‫Cependant, nous allons également utiliser la barre de navigation et le logo à l'intérieur de l'en-tête.
‫D'accord, nous ne voulons donc pas l'intégrer dans l'un d'eux ou dans l'en-tête car il n'y a aucune idée d'en-tête.
‫Je vais donc mettre ça en dehors de ça.
‫Alors ici, faisons le logo et nous ferons la navigation principale.
‫OK, donc pour le logo, faisons, faisons une largeur de 70 pixels.
‫Je devrais probablement mettre le sélecteur, voyons, c'est un I. RÉ. Donc logo avec 70 pixels et faisons
‫une hauteur de 70 pixels.
‫Maintenant, vous ne voudrez peut-être pas utiliser d'image, vous voudrez peut-être utiliser du texte ou comme un H1 avec une idée de logo.
‫Donc je vais aussi ajouter une couleur de blancs et je vais aussi la mettre en majuscule.
‫Donc, le texte transforme en majuscule juste au cas où ce n'est pas une image.
‫Donc, si nous enregistrons cela, nous jetons un coup d'œil.
‫Maintenant, le logo est plus petit, on peut voir le reste du contenu.
‫Maintenant, avant de passer à la NAV principale, centrons cela avec la classe de conteneur.
‫D'accord?
‫Rappelez-vous, il est là.
‫L'étoffe est emballée dans un conteneur.
‫Maintenant, comme je l'ai dit, je vais créer le fichier SACE d'un utilitaire que nous pouvons utiliser partiellement pour des choses comme des boutons et
‫des trucs comme ça.
‫Créons donc un nouveau fichier dans le dossier d'accès appelé Underscore Utilities, DOT Success.
‫Et ici, je vais mettre notre classe de conteneur.
‫Nous avons maintenant une variable appelée website avec celle que nous avons dans le dossier config.
‫Fixons donc le maximum avec à une variable de site Web avec.
‫Très bien, et puis je vais juste ajouter un peu de rembourrage sur le côté, donc c'est
‫jusqu'à un virgule cinq REM, puis faisons margin auto pour le pousser au milieu, puis déborder caché afin que rien ne sorte
‫de son conteneur.
‫OK, et maintenant nous devons importer le fichier de cet utilitaire.
‫Donc, en haut ici après la configuration, nous allons introduire des utilitaires et gardons cela.
‫Et si nous revenons maintenant, vous pouvez voir que tout est poussé au milieu.
‫OK, continuons donc à travailler sur le NAV principal, qui est essentiellement le logo dans la liste ici.
‫Alors redescendons.
‫Et voyons, mai nav, mettons un I. RÉ. du Maine, vous savez, dash nav du Maine, d'accord ?
‫Et nous pouvons intégrer le U. S. à l'allié, je devrais dire au nord-ouest.
‫Je peux Nesto Ulli, les liens, des trucs comme ça.
‫Maintenant, toute la navigation du Maine, y compris le logo et tout, je vais en fait régler cela pour
‫afficher Flex comme je le ferais habituellement.
‫Je n'utiliserais pas la grille pour quelque chose comme ça.
‫Et puis je vais justifier le contenu avec un espace entre les deux parce que je veux le logo d'un côté et puis
‫les USA de l'autre côté.
‫Et faisons juste un haut rembourré juste pour pousser tout un peu vers le bas.
‫Nous allons faire une pièce, d'accord, puis nous pourrons intégrer ici le U. S. , qui sera également display flex car
‫nous voulons que les éléments de liste à l'intérieur soient des éléments flex.
‫Alors faisons-le.
‫Faisons Eli.
‫Et ce qui est bien comme nous pouvons, nous pouvons imbriquer tout cela dans la navigation principale, tout comme nous le faisons
‫dans le HTML.
‫Nous allons donc simplement ajouter un peu de rembourrage ici.
‫Faisons donc une pièce, puis un virgule cinq sur les côtés, puis le lien.
‫OK, donc Link, je sais que j'ai fait une décoration de texte globale aucun, mais je vais le refaire ici.
‫Même chose avec la couleur.
‫C'est trop blanc et je veux que ce soit tout en majuscules.
‫Je vais donc transformer le texte en majuscule et je vais faire une bordure en bas.
‫Et cela peut paraître un peu bizarre, mais je vais faire trois pixels, transparent, solide.
‫Maintenant, la raison pour laquelle je fais transparent est parce que je veux avoir un effet de survol.
‫Lorsque nous la survolons, une ligne apparaît en dessous.
‫Mais si je ne mets pas de bordure ici et que je le fais simplement en survolant, cela va essentiellement pousser le texte
‫vers le haut pour lui donner la bordure.
‫Et je ne veux pas de ce genre d'effet.
‫Je veux juste que la frontière apparaisse.
‫OK, donc nous voulons le rendre transparent dans un premier temps.
‫Et puis je vais aussi ajouter un fond de rembourrage.
‫C'est à zéro virgule cinq REM et puis je vais aussi ajouter une transition.
‫Cela a donc un effet lisse.
‫Nous voulons donc changer la couleur de la bordure parce que c'est ce qui va changer au survol.
‫Nous allons donc dire la couleur de la bordure, zéro virgule cinq secondes.
‫OK, maintenant je veux planer.
‫Donc, à l'intérieur de cette balise ou d'un sélecteur, devrais-je dire, je peux faire un point esperluette.
‫Je veux dire, Colen Hover.
‫OK, ce sera donc l'effet de survol et je vais définir la couleur de la bordure sur la couleur variable du tiret
‫moyen.
‫OK, donc nous définissons cela déjà dans notre config.
‫Maintenant, je veux aussi que le lien actuel ait une bordure.
‫Je vais donc faire un courant de classe esperluette qui sera un courant dans la navigation et je
‫vais définir la couleur de la bordure et la définir sur comment l'appellent-ils.
‫Couleur principale.
‫Je vais donc appeler la couleur du tableau de bord principal.
‫Très bien, alors gardons ça et nous allons jeter un œil.
‫Donc ça a l'air plutôt bien.
‫C'est donc tout ce truc qui est la navigation principale.
‫C'est la boîte de Fleck, et nous avons un espace entre pour la NAV principale.
‫Et puis le U. S. est également une boîte flexible où chaque élément de liste est un élément flexible et vous pouvez voir la bordure.
‫Et maintenant, quand je survole, ça s'estompe en quelque sorte.
‫Si je n'avais pas fait la bordure transparente pour commencer, cela ferait juste un petit tic-tac lorsque je survolerais.
‫Je ne veux pas ça.
‫D'accord.
‫Donc ça a l'air plutôt bien.
‫Voyons donc.
‫Passons au contenu de l'en-tête de sorte que fondamentalement ce genre de choses ici et ensuite nous apporterons
‫également notre fichier JavaScript.
‫Voyons donc.
‫Descendons à l'en-tête.
‫Et nous voulons l'être.
‫Voyons voir, nous voulons être dans la maison de l'en-tête, donc à l'intérieur ici, disons que le contenu de l'en-tête aide parfois simplement
‫à commenter ce genre de choses.
‫Sa maison.
‫Très bien, donc le contenu de l'en-tête.
‫C'est une classe de contenu de tiret d'en-tête, alignons tout au centre.
‫Donc, le texte s'aligne au centre et je vais ajouter un rembourrage supérieur de 20 pour cent.
‫OK, puis je vais prendre le H1 qui se trouve dans le contenu de l'en-tête afin que nous puissions le tester comme ceci.
‫Et je vais définir la taille de la police pour qu'elle soit assez grande.
‫Je vais faire pour le forum et je vais lui donner une hauteur de ligne d'un virgule deux.
‫D'accord.
‫Jetons donc un œil à cela.
‫OK, maintenant ceci ici a une classe de bouton lumineux, qui va être un utilitaire.
‫Alors, occupons-nous-en pendant que nous y sommes.
‫Nous allons donc entrer dans les utilitaires et je vous ai montré ceci dans la dernière section, comment étendre essentiellement un sélecteur
‫ou un style d'extension.
‫Je vais donc utiliser seulement deux boutons et nous allons créer comme un style de bouton partagé de base.
‫Je vais donc utiliser un signe de pourcentage et dire tiret de bouton, tiret partagé.
‫OK, donc tous les boutons seront partagés.
‫Ces styles vont être affichés en ligne, en bloc de ligne et voir un peu de remplissage.
‫Donc zéro virgule huit RAM et faisons-en deux, puis je veux qu'ils passent tous sur Hova.
‫Alors disons transition et je vais juste faire tout zéro virgule cinq secondes.
‫Nous allons mettre la frontière à zéro.
‫Et plaçons le curseur sur un pointeur, OK, car c'est maintenant pour les boutons et les liens.
‫Ici, nous aurons BTN et je souhaite ajouter quelques options différentes ici, nous aurons donc le bouton, le bouton principal lumineux
‫et le bouton sombre.
‫Alors faisons esperluette moyenne.
‫Cela concernera donc une classe de bouton de tiret moyen et nous voulons étendre la
‫classe ou le style de bouton partagé, nous voulons donc faire le pourcentage de BTN partagé.
‫Nous voulons donc étendre tout ce qui précède, puis la couleur pour le moment, je vais simplement la
‫définir pour la définir sur une couleur sombre.
‫Mais plus tard, nous allons en fait utiliser cette fonction de définition de la couleur du texte que je vous ai montrée dans
‫la dernière section.
‫Faisons donc la couleur de fond, qui va être la couleur principale, de sorte que pour le moment ce soit ce
‫jaune.
‫Mais bien sûr, vous pouvez modifier cela dans la configuration.
‫Très bien, et puis je vais juste prendre cette copie deux fois et faisons de celle-ci la lumière.
‫Ce sera donc le bouton du tableau de bord.
‫Nous allons étendre tout en gardant la couleur sombre ici.
‫Et puis l'arrière-plan sera la couleur claire.
‫Très bien, et ensuite ici.
‫Faisons sombre.
‫Le bouton partagé mettra la couleur claire ici, puis l'arrière-plan sera la couleur sombre.
‫Maintenant, en ce qui concerne le survol, je veux en fait que l'un de ces boutons, lorsque vous le survolez, ait
‫la couleur principale comme arrière-plan.
‫D'accord.
‫Donc, la façon dont je vais procéder est de sortir de ce bouton et nous allons le dire pour Button.
‫Et puis ici, nous pouvons réellement faire comme la classe.
‫Nous pourrions faire la classe équivaut à quelque chose.
‫Cependant, je ne veux en inclure qu'une partie.
‫Tout ce qui a les boutons tirent à l'intérieur de la classe à laquelle je veux m'accrocher afin que nous
‫puissions mettre un caractère de carotte ici, qui est shift shift puis numéro six et ensuite égal à et nous allons le régler simplement sur le tiret bouton.
‫OK, et puis nous voulons du charbon et planer.
‫Donc, n'importe quelle classe, n'importe quel bouton avec la classe des boutons tire sur n'importe quoi, ce sera en vigueur
‫pour l'instant.
‫Nous voulons aussi des liens avec la même chose.
‫Donc je vais juste copier ça et nous allons faire une balise A avec ce truc.
‫Faisons aussi si c'est une entrée avec la classe, donc nous ferons une entrée.
‫OK, donc n'importe lequel d'entre eux s'il s'agit de Harvard, alors faisons de la couleur d'arrière-plan la couleur principale.
‫OK, donc ça nous fait juste gagner de la place ici.
‫Maintenant, je vais ajouter quelques autres classes utilitaires.
‫Nous utilisons déjà la classe principale, nous voulons donc l'inclure définitivement.
‫Donc LEED va juste avoir une taille de police d'un virgule trois RAM et ajoutons également un peu de bas
‫de marge.
‫Alors on en fera deux.
‫Et puis je veux aussi avoir un centre de texte juste pour centrer quelque chose si nous le voulons.
‫Nous allons donc simplement placer le texte sur une ligne au centre.
‫D'accord.
‫Alors gardons cela et retournons en arrière et jetons un coup d'œil.
‫Et vous pouvez voir que nous avons notre bouton.
‫Et lorsque nous la survolons, nous obtenons cette couleur principale.
‫Il se trouve qu'il est jaune, mais nous pourrions facilement le changer dans la configuration pour qu'il soit de n'importe quelle couleur.
‫Et cela changerait cette couleur ici changerait.
‫D'accord.
‫Donc, la dernière chose que je veux faire dans cette vidéo est cette partie ici.
‫Je souhaite ajouter le script JavaScript pour que cela fonctionne réellement.
‫Et encore une fois, je ne vais pas passer en revue le code JavaScript réel.
‫Si vous le souhaitez, vous pouvez consulter le tutoriel.
‫En fait, ce que je vais faire, c'est mettre un commentaire.
‫Voyons.
‫Allons à l'index HTML en bas ici et je vais coller un commentaire sur le didacticiel
‫lui-même.
‫Nous allons donc dire type effect tutorial, puis incluons simplement le script.
‫Nous voulons donc faire de la sauce à J. S. machine à écrire J. S. enregistrez-le, revenez en arrière et cela fonctionne.
‫OK, donc le script est la façon dont il fonctionne, il regarde simplement où il se trouve.
‫Le span regarde ça ici, regarde le temps d'attente, il regarde les différents mots.
‫Si vous souhaitez modifier les mots, vous pouvez simplement les modifier ici.
‫D'accord.
‫Donc je pense que nous sommes bons pour le moment.
‫Dans la prochaine vidéo, nous allons passer à la partie suivante, qui sera la spécialité du développeur,
‫les différentes icônes, des trucs comme ça, le processus créatif avec les transitions.
‫Donc, nous allons entrer dans cela ensuite.