Créer votre portfolio en ligne sans écrire de code

1. Introduction: Salut, je m'appelle Mat. Je suis designer et évangéliste ici à Webflow à San Francisco. Webflow est un outil qui vous permet de concevoir et de développer des sites web en même temps. Il fonctionne directement dans votre navigateur et il est à 100 % visuel. Ainsi, vous pouvez créer des sites Web réactifs dynamiques sans écrire une seule ligne de code. Vous pouvez commencer à concevoir votre site Web à partir d'un Canvas vierge afin qu'il n'y ait aucune restriction dans votre vision créée. Ou vous pouvez commencer à partir d'un modèle et tweeter rapidement les styles et le contenu qui s'adaptent à vous, votre entreprise ou à votre marque. Webflow héberge également un système de gestion de contenu totalement visuel afin que vous puissiez créer un blog unique, portfolio, un site de ventilation, ou tout ce dont vous avez besoin, sans jamais penser au code. Lorsque vous êtes prêt à lancer votre site Web, nous offrons un hébergement rapide, sécurisé et stable sous un domaine personnalisé. Aujourd'hui, nous allons créer un site Web pour héberger votre portfolio afin que, que vous soyez designer, écrivain, photographe ou tout ce qui précède, vous puissiez créer quelque chose d'unique pour mettre en valeur votre travail. Certaines des choses dont nous parlerons aujourd'hui sont l'importance de construire une présence en ligne, pourquoi vous devez être en ligne et comment vous pouvez le faire sans être un développeur ou savoir comment écrire du code. Aujourd'hui, nous vivons dans un monde qui évolue si vite et nous absorbons constamment de nouvelles informations et faisons de nouvelles choses. Votre site de portefeuille doit également respecter ces règles. Auparavant, nous utilisions des choses comme les CV papier pour suivre le travail que nous avons fait, pour montrer aux clients potentiels ou aux personnes pour lesquelles nous voulions travailler. Mais maintenant, quelque chose comme ça n'est pas assez bon. Il nous faut quelque chose qui soit en ligne. Nous avons besoin de quelque chose qui est toujours à jour, quelque chose que vous pouvez montrer à tout moment à n'importe qui n'importe où sur la planète. C' est ce que nous allons construire aujourd'hui. 2. Aperçu du projet: Vous avez décidé de construire un site web. C' est génial. Mais quelles sont les premières étapes pour commencer ? Eh bien, cela dépend parfois du projet, mais souvent cela va dépendre de deux questions simples : sur quel est le but de votre site Web et ce que vous voulez qu'il accomplisse. Nous allons expliquer pourquoi ces questions sont importantes et les stratégies qui vous aident à définir quelles sont ces réponses. Le projet d'aujourd'hui est de construire un site Web personnalisé entièrement réactif à partir de zéro sans écrire une seule ligne de code. Nous allons le faire dans un trop appelé Web Flow. Mais vous pouvez utiliser n'importe quel outil que vous voulez. Beaucoup des principes que nous allons apprendre aujourd'hui peuvent être appliqués n'importe où sur le web. Je vais vous guider dans la construction de ce site ici. Un site Web de portefeuille simple mais unique qui comprend une barre de navigation mobile prête, tuiles de contenu dynamiques et un pied de page réactif. Nous concevrons et construirons également cette page détaillée qui mettra en valeur nos articles de portefeuille individuels, y compris une image principale et une description du projet. Le projet que je vais montrer aujourd'hui est pour un portfolio de designers. Mais le modèle peut être utilisé dans une grande variété de services créatifs comme la photographie ou l'écriture. Vous pouvez accéder à ce modèle et plus encore en accédant à webflow.com/templates. Nous avons également inclus un lien vers ce modèle gratuit dans la description du cours. Vous pouvez accéder à ces modèles à tout moment et même suivre le modèle pendant que je passe à travers le cours. L' une des choses qui rend Web Flow si unique est qu'il vous enseigne les principes de base du Web lorsque vous concevez vos propres sites Web afin que tout ce dont nous parlons aujourd'hui et tout ce que vous apprenez puisse être appliqué n'importe où sur le web. 3. Ce dont vous avez besoin pour commencer: Pour suivre ce cours, vous aurez besoin de quelques outils de base. Vous allez avoir besoin d'un ordinateur avec accès à Internet. Parce que Webflow est un outil en ligne, une connexion à Internet va être cruciale pour que vous puissiez mener à bien ce projet. Nous vous recommandons d'utiliser Google Chrome et c'est ce nous allons utiliser pour démontrer ce projet aujourd'hui. Comme je l'ai mentionné précédemment, vous n'avez pas besoin de connaissances préalables en développement pour compléter ce cours, mais une compréhension de base et certains principes web vous aideront certainement. La première partie de ce cours va décrire et expliquer beaucoup de ces principes Web, afin que vous puissiez suivre plus clairement, et parce que la plupart du site Web que nous allons construire aujourd'hui est axé sur le contenu, avoir une partie de ce contenu facilement accessible va rationaliser l'ensemble du processus. Des choses comme des images, du contenu, et peut-être même un logo seraient utiles lorsque vous suivez. Nous avons également inclus un lien vers un dossier où vous pouvez trouver tous les actifs que j'ai utilisés pour cette classe. Vous pouvez suivre avec ces actifs ou créer les vôtres. Si vous souhaitez créer vos propres ressources pour le site, il serait utile d'avoir un logiciel de retouche photo tel que Photoshop pour redimensionner, recadrer et créer des images. Lorsque vous utilisez des images sur le web, il est important d'utiliser des images de haute qualité afin qu'elles soient belles sur des appareils haute définition comme les iPhones, mais aussi d'être conscient de la taille. Le téléchargement d'images d'une taille supérieure à 250 kilo-octets peut ralentir votre site Web. Il est donc important d'essayer de garder ces tailles de fichiers faibles en particulier sur un site comme celui-ci, qui utilisera fortement les images dans la conception. part cela, nous espérons qu'en ayant juste un ordinateur et en accédant aux fichiers que nous avons affichés dans la description du cours, vous serez en mesure de passer à travers ce projet avec des couleurs volantes, et à la fin, vous aurez votre propre portfolio site Web pour montrer pour elle. 4. Les principes du Web: Comme je l'ai mentionné précédemment, avoir une bonne connaissance du développement web ou du codage n'est pas nécessaire pour ce cours, mais avoir une compréhension de base de certains des principes web, je pense qu'il est crucial et pleinement compréhensif et en profitant de ce que vous pouvez construire ici aujourd'hui. Je vais expliquer certains de ces concepts Web de base en utilisant ce guide de conception Web visuel que nous avons créé ici dans Webflow. Il se compose de six étapes différentes, chacune couvrant un concept web important que nous appliquerons dans le cours d'aujourd'hui. Le premier concept le plus important est celui du modèle de boîte. Le modèle de boîte est l'idée de penser aux éléments web comme des boîtes, tout comme nous le voyons ici avec cette structure de mise en page de prix. Ici, nous pouvons imaginer si chaque élément de notre page avait une boîte invisible qui l'a contournée, l'idée du modèle de boîte est que le web est constitué de ces boîtes, et que cette structure web ajoute simplement ces boîtes dans d'autres boîtes et les stylisant pour ajouter de l'espace et d'autres mises en page pour coexister ensemble d'une manière agréable. Dans cette section suivante, par exemple, nous pouvons déplacer ce texte de paragraphe dans ce bloc de tarification ici, et remarquer que c'est ainsi que fonctionne la structure HTML et Web. Les éléments s'empilent les uns sous les autres ou à l'intérieur de l'autre, ce qui est le meilleur moyen de construire une mise en page fluide et réactive du site Web. Maintenant, le modèle de boîte est le concept global des éléments Web et la façon dont ils fonctionnent ensemble, mais il est également important de comprendre les éléments individuels qui étaient ici aussi. En ce qui concerne la structure globale, nous allons utiliser ces trois éléments de structure principaux dans les sections, les conteneurs et les colonnes. Une section occupe 100 % de la largeur de son conteneur parent, qui serait la fenêtre du navigateur si vous l'ajoutez au corps. C' est idéal pour les grandes sections horizontales d'un site Web comme celui que nous voyons ici. Un conteneur est un bloc de 960 pixels de large centré au milieu du navigateur. Habituellement, la plupart du contenu du site Web est ajouté à l'intérieur du conteneur, de sorte qu'il est centré au milieu de notre page. L' utilisation de colonnes est le moyen le plus rapide de créer une mise en page de site Web unique. Pour éditer le nombre de colonnes que vous souhaitez ajouter est plus facile en sélectionnant nos colonnes, et dans ce panneau de paramètres, nous pouvons ajuster à la fois le nombre de colonnes que nous voulons et leur largeur. Nous pouvons également ajuster la façon dont nous voulons que nos colonnes réactives soient disposées sur différents appareils. C' est une combinaison de ces trois éléments qui constituera le site web que nous créons aujourd'hui. Maintenant que nous avons des éléments sur notre page, l'étape suivante est de styliser ces éléments, et sur le web, cela se fait via CSS, un langage de codage qui nous permet d'ajouter des styles comme la police, la couleur, hauteur de ligne, les dégradés, frontières, ombres, et bien plus encore. Ici, sur le côté gauche, nous avons un bouton qui a un style supplémentaire fait à lui faire où sur la droite nous avons un lien simple sans styles dessus. Ce que nous devons faire est d'abord ajouter une classe CSS. Une fois que nous l'aurons fait, nous aurons accès à une grande variété d'options de style. Comme l'ajout d'un espacement intérieur, ajustement de la couleur de la police ou de la taille de la police, ajout d'une couleur d'arrière-plan et même l'ajout de certains coins arrondis. CSS nous permet de concevoir sur le web d'une quantité presque illimitée de façons. Ce bouton est juste un petit exemple de cela. Nous allons utiliser beaucoup plus de styles CSS tout au long de notre formation web aujourd'hui. Les styles CSS sont également plus que des couleurs et des polices. En fait, CSS est aussi ce qui crée les mises en page que nous utilisons sur le web aussi. Le premier exemple ici nous montre comment les attributs CSS de marge et de remplissage nous permettent de créer l'espacement dont nous avons besoin pour nos éléments. Rembourrage est l'espacement qui constitue l'intérieur d' un élément dont la marge est l'espacement à l'extérieur. Utilisons à la fois la marge et le rembourrage sur ces éléments à droite afin que nous puissions le faire correspondre aux éléments de gauche. Je vais d'abord sélectionner ce wrapper externe qui contient tout le texte à l'intérieur de celui-ci. Ensuite, je peux maintenir Maj sur mon clavier et ajouter du rembourrage à l'intérieur de cet élément. Notez que lorsque nous ajoutons du remplissage, nous ajoutons de l'espace à l'intérieur de l'élément, créant de l'espace entre la bordure extérieure et le contenu à l'intérieur de celui-ci. Maintenant, nous allons ajouter une marge au texte individuel afin d'ajouter un espacement supplémentaire sur le bas. Ajoutons à la fois la marge et le rembourrage à ces balises afin qu'il corresponde à son partenaire sur la gauche. Ajoutons d'abord notre rembourrage, super, et maintenant une certaine marge. Parfait. Tout comme ça, CSS nous a permis de créer l'espacement dans la mise en page dont nous avons besoin ici. Une autre propriété CSS importante est la propriété display. éléments Web comme le paragraphe, le texte et les blocs div sont généralement donnés la valeur du bloc d'affichage, ce qui signifie qu'il remplit la largeur de la fenêtre parent et empile au-dessus des autres blocs comme nous le voyons ici. Sur la droite, nous verrons les mêmes éléments partout où ils sont disposés avec la propriété de inline-block. Inline-block rendra la largeur de l'élément conforme à la largeur du contenu à l'intérieur. Cela signifie que si le contenu est assez petit, ils peuvent s'empiler l'un à côté de l'autre. Remarquez ce qui se passe lorsque nous changeons ces boutons et liens pour afficher le bloc à la place. Ils prennent toute la largeur et s'empilent uns sur les autres au lieu de les côtoyer, car maintenant ils prennent toute la largeur de l'emballage. Le sujet suivant est de couvrir celui des styles en cascade, ce qui nous permet de créer facilement une variation d' éléments en ajoutant des classes supplémentaires au-dessus d'eux. Nous pouvons le montrer ici avec des exemples de boutons différents. Remarquez sur la gauche, nous avons trois boutons avec trois couleurs différentes, et sur la droite, nous avons trois boutons avec la même couleur. Eh bien, la raison pour laquelle ils sont de la même couleur, c'est parce qu'ils partagent la même classe. Remarquez si nous faisons un seul changement de style sur l'un d'eux, la même chose change pour chacun d'eux, ce qui est également un énorme avantage de CSS. Être capable de faire un changement à l'échelle du site pour aimer des éléments très rapidement. Pour que nous puissions apporter d'autres changements de style à ces éléments sans affecter les autres, nous devons ajouter une classe supplémentaire. Ajoutons une classe à celle-ci, puis changeons la couleur d'arrière-plan. Notez que cette fois, il n'a pas changé la couleur de tous les boutons, juste celui-ci. Faisons la même chose pour le prochain. Parfait. La dernière pièce dont je veux parler concerne le style mobile et la façon dont CSS fonctionne sur tous vos différents appareils. Avec le style CSS, les styles ne s'enfoncent que vers le bas, ce qui signifie que tous les styles que vous ajoutez à vos éléments sur le bureau suivront également sur vos appareils mobiles. en va de même pour la tablette ou l'un des autres appareils mobiles. Toute modification de style effectuée sera en cascade vers le bas. Par exemple, si nous apportons des modifications de style sur nos tablettes, il ne sera en cascade que sur nos petits appareils et, dans ce cas, remplacera tous les styles effectués sur le bureau. Il est également important de noter que les styles ne peuvent pas se traduire vers le haut, ce qui signifie que tous les styles que vous ajouteriez sur une tablette ne traduiraient pas jusqu'au bureau, ils ne traduiraient que vers le bas, et c'est tout. J' espère que cette vue d'ensemble du Web a été utile et qu'elle peut fournir des conseils au fur et à mesure que nous traversons ce cours. Pour le reste de ce cours, je ne vais pas plonger trop profondément dans des sujets web spécifiques. Nous allons entendre des choses comme le modèle de boîte et d'autres attributs CSS que nous avons déjà couverts tout au long du cours. 5. L'importance du contenu dans le design: À ce stade, nous devrions avoir une bonne compréhension de notre contenu et de la façon dont nous voulons l'utiliser sur nos sites. Parce qu'une grande partie de notre processus de conception va dépendre de notre contenu dynamique, nous devons y réfléchir à l'avance avant de commencer la phase de conception, explorant vraiment le concept de contenu d'abord. Vous profiterez pleinement de ce flux de travail au fur et à mesure que nous commencerons le processus de conception. Dans Webflow, nous pensons au contenu sous forme de collections, qui sont simplement des groupes de contenu qui sont organisés ensemble pour former un seul élément comme un billet de blog. J' ai déjà créé une poignée de collections ici, mais je vais vous montrer à quel point il est facile de créer une des vôtres. Nous commencerons par cliquer simplement sur le bouton « Nouvelle collection ». Maintenant, la première chose que nous devons faire est de nommer notre collection, qui est ce qui sera affiché dans le CMS plus tard. Dans ce cas, nous créons notre collection de projets. Maintenant, nous devons créer ce que l'URL sera pour nos éléments de projet individuels. Par exemple, si nous choisissons des projets, l'URL serait www.website.com/projects/le nom du projet. Maintenant, nous devons ajouter nos champs individuels ou du contenu qui constitueront ces projets. Le nom est déjà défini par défaut pour nous et sera simplement le nom du projet. Nous allons donc simplement cliquer sur « Ajouter un nouveau champ » et nous avons une variété d'options différentes ici, y compris un champ de texte brut, un champ de texte enrichi, une image, vidéo, un lien, un champ numérique, la date et l'heure, commutateur, la couleur et l'option , puis deux types différents de champs de référence. Commençons par ajouter notre champ d'image. Nous devons donner une étiquette à ce champ, que nous allons appeler l'image principale. Ce sera l'image principale que nous utilisons pour nos différents éléments de projet. Nous pouvons également fournir du texte d'aide, qui peut fournir des informations supplémentaires qui aideront les utilisateurs de CMS à mettre à jour ou à télécharger une nouvelle image. Ensuite, nous cliquons sur « Enregistrer ». Ajoutons maintenant notre description de projet, que nous allons utiliser comme champ de texte enrichi et cliquez sur « Enregistrer ». Enfin, je veux pouvoir ajouter une balise à ce projet et je vais le faire en établissant un lien vers une autre collection que j'ai déjà créée. Je peux le faire en utilisant le champ de référence unique , puis en sélectionnant la collection de balises de projet que j'ai déjà créée. Maintenant que nous avons tous les champs que nous voulons, nous pouvons créer notre collection. Au début, il n'y aura aucun élément, mais nous pouvons facilement les ajouter en cliquant sur le bouton « Nouveau projet ». Maintenant, tout ce dont nous avons besoin, c'est de remplir les champs individuels avec le contenu d'un de nos projets, que j'ai déjà sauvegardé. Ce projet s'appelle Dessins esquissés. Nous pouvons télécharger notre image principale depuis mon bureau, puis je vais coller un contenu qui fonctionnera comme notre description pour le projet, et enfin, pour la balise de projet, je vais sélectionner la marque. Là, nous l'avons. Maintenant que nous avons du contenu en place, nous pouvons commencer le processus de conception de notre page d'accueil. 6. Section du héros + navigation: Maintenant que nous avons toute notre configuration de contenu et que nous avons fait un bref aperçu de certains de nos principes de conception Web de base, nous allons maintenant aller dans et répliquer la création de cette page d'accueil que j'ai construite ici et qui se compose juste d'une simple section héros, suivi par cinq tuiles différentes que nous voyons ci-dessous, y compris une tuile à propos, derniers projets tuile qui tire cette image de votre dernier projet, les derniers messages, qui va tirer la dernière image de billet de blog, un embaucher moi puis quatre liens sur les réseaux sociaux. Nous allons également créer un pied de page qui sera à l'échelle du site. Pour concevoir cela, nous allons construire ceci visuellement dans notre outil Web Flow, et quand nous regardons ici, nous allons voir que nous commençons avec une toile vierge. Il n'y a rien ici. Donc, nous allons construire toute cette page à partir de zéro. Maintenant, nous allons commencer à utiliser certains de nos fondamentaux que nous avons appris dans la vidéo précédente, mais je vais essayer de vous éduquer au fur et à mesure. Maintenant, la première chose que nous voulons faire est d'ajouter une section pour notre section héros. Je vais donc aller dans le panneau Ajouter, puis faire glisser dans une section. Maintenant, la première chose que nous voulons faire après avoir ajouté des éléments est de leur donner un style afin que nous puissions leur attribuer des styles et des classes. Dans ce cas, donnons à cela une section de héros, et ajoutons un peu de rembourrage sur le haut et le bas juste pour que nous puissions avoir un peu d'espace. Allons de l'avant et ajoutons notre image de fond, qui va nous aider à remplir cet espace. Donc, si je fais défiler vers le bas jusqu'à notre section d'arrière-plan, je vais tirer ceci de nos actifs que nous avons déjà, et je vais utiliser cette image ici. Vous remarquerez dès maintenant que l'image est assez grande, donc elle ne peut pas tout à fait correspondre. Donc, nous allons utiliser cet attribut de couverture que je peux sélectionner, et je vais corriger cela au milieu. On y va. Maintenant, pour que nous puissions augmenter la taille de ceci, je ne vais pas ajouter de hauteur. Je vais plutôt commencer à ajouter du contenu. Si je vais de l'avant et si j'ajoute à nouveau le panneau et puis faites défiler vers le bas jusqu'à notre barre de navigation, je peux faire glisser dans la barre de navigation. En fait, je vais le glisser directement dans la section des héros. Dans ce cas, je veux donner notre classe de barre de navigation, appelons-le nav, et commençons à le styliser. D' abord, je veux ajouter un peu de rembourrage à l'intérieur. Je veux également changer la couleur de fond à cette couleur claire et transparente pour être claire au lieu de ce gris. Je veux aussi que cela soit absolument positionné en haut de la page. Dans ce cas, je peux choisir top, et nous remarquerons que c'est tout en haut. Maintenant, une chose que j'ai fait est que j'ai ajouté un peu d'espace supplémentaire sur le dessus aussi, juste pour le pousser légèrement vers le bas. Maintenant, nous avons la base de notre navigation. Nous avons besoin d'ajouter et de styliser des liens supplémentaires ainsi que d'ajouter notre logo. Pour le logo, tout ce que j'ai fait était de prendre un bloc de texte et de le faire glisser dans cette marque, puis je peux donner un cours à ce manuel, appelons-le notre texte de logo, et nous pouvons commencer à le styliser. Changeons la couleur en blanc. Nous allons augmenter la taille, et ajoutons nos textes. Nous y sommes. Je peux également styler ceci jusqu'à ce que je sois heureux avec elle. Allons de l'avant et simplement augmenter la taille un peu plus, aussi les hauteurs de ligne. Maintenant, ce que j'ai fait, c'est que j'ai ajouté une classe supplémentaire dans une balise. Donc, je peux simplement l'auditer. On y va. Maintenant, ce que je dois faire est de le centrer pour qu'il soit en ligne avec les liens que nous avons ici. Mais peut-être avant de le faire, allons de l'avant et stylisons nos liens aussi bien. Je vais cliquer sur ce premier lien, puis aller à un cours. Ajoutons une classe pour chacun d'entre eux. Donc, nous avons un lien de navigation, et nous allons ajuster la couleur. Faisons tout ça des bouchons. Je vais continuer avec cette police, qui est la police que nous avons sur notre corps, et je vais aussi augmenter un crénage entre les deux. On y va. Donc c'est notre lien. Mais notez que les autres liens n'ont pas suivi. C' est parce que nous devons toujours ajouter la classe, alors allons de l'avant et tapons notre classe et sélectionnez-la. Nous remarquerons que ces styles vont être reportés. On y va. Allons de l'avant et ajoutons les liens restants que nous avons, et nous pouvons commencer à ajouter le texte. Donc, nous avons notre maison, nous avons notre portfolio, nous avons une page A propos, et nous avons notre blog, et ensuite nous avons un bouton de contact, qui va être une classe légèrement différente. Donc encore une fois, je vais copier ceci, ce que je peux faire sur mon clavier, puis je vais ajouter le texte pour le contact. Ensuite, ici, je vais ajouter une classe supplémentaire qui va nous aider à le styliser en plus. Allons de l'avant et tapons contact. Ensuite, ici, nous pouvons faire des choses comme ajuster la couleur de fond. Je veux faire ce blanc avec une légère opacité, et puis je veux aussi diminuer le rembourrage que nous avons là-bas qui a été par défaut. Faisons le 10, et nous voulons aussi qu'il reste centré avec leurs liens, donc je vais ajouter une certaine marge sur le dessus. On y va. Je vais diminuer la taille de la police, ainsi que diminuer légèrement cette hauteur de ligne. On y va. Nous avons aussi eu quelques coins arrondis, juste légèrement. Ajoutez donc un rayon de quart arrondi de deux pixels. On y va. Je crois qu'il y avait aussi une marge supplémentaire sur le côté gauche, donc je peux ajouter, faisons 30 pixels. Super. On se rapproche. Allons de l'avant et ajustons ces liens de navigation juste un peu plus. Je vais diminuer la taille. Encore une fois, c'est la beauté d'utiliser un outil qui est déjà sur le web. Nous pouvons réellement prévisualiser cela autant que nous le voulons par ce lien d'aperçu et voir réellement ce que nous construisons dans l'environnement réel dans lequel il sera publié. Avec nos textes de logo, rappelez-vous, je voulais le centrer juste un peu donc je vais ajouter une marge sur le dessus, et nous pouvons ajuster cela jusqu'à ce que ça se sente bien. Ça a l'air bien. Maintenant, nous avons notre logo et notre barre de navigation en haut de la page. Nous avons également besoin d'ajouter notre texte de héros, que je peux simplement glisser dans. Je vais traîner dans un cap, et c'était notre H1. Je veux apporter des modifications supplémentaires. Tous nos H1 vont suivre le même style et ils sont centrés. On va changer la couleur en blanc. Je veux aussi faire tout ça. Il va diminuer la taille juste un peu. Le texte qui était ici, je peux aller de l'avant et taper ceci, et voilà. Maintenant, je peux faire les ajustements que je veux. En utilisant le rembourrage, je peux ajuster pour ajouter un peu d'espace supplémentaire. Remarquez que nous avons déjà un rembourrage sur le fond, c'est ajuster la hauteur de ce conteneur au fur et à mesure que nous allons. Ajoutons juste un peu plus parce que nous allons réellement ajouter notre conteneur en dessous de cela, et il va aller vers le haut dans cette section. Mais encore une fois, la beauté de le faire sur le web est que nous pouvons itérer au fur et à mesure que nous allons. Je vais quitter la section des héros comme ça pour l'instant. Allons de l'avant et passons à notre prochaine section. 7. Tuile à la page dynamique: Je vais glisser dans une nouvelle section, il suffit de la glisser dans notre corps. Encore une fois, je veux lui donner une classe supplémentaire. Appelons ceci juste notre classe de section. Ensuite, ici, je peux ajouter un peu de rembourrage, et ce sera la section que nous utilisons sur nos sites. J' aime mettre ça en place d'abord. Ensuite, je vais aussi ajouter une classe supplémentaire parce que dans ce cas, nous ne voulons pas de rembourrage sur le dessus. Allons de l'avant et savons. Appelons ça notre section supérieure. Alors dans ce cas, nous ne voulons pas avoir de rembourrage sur le dessus. Allons de l'avant et ajoutons dans notre conteneur, donc je peux simplement cliquer et notre conteneur est ajouté, et si nous regardons en arrière notre produit final, nous remarquerons que le conteneur est déplacé au-dessus de cette section de héros. Allons de l'avant et donnons une classe à ce conteneur. Appelons ça notre conteneur de héros, et remontons-le. Pour ce faire, nous devons l'avoir positionné par rapport afin que nous puissions obtenir cette position flèches ici, et allons de l'avant et la mettre à l'échelle vers le haut. Essayons 70 pixels, et nous serons sûrs de lui donner une couleur d'arrière-plan. On y va. Il y a aussi un rembourrage supplémentaire à l'intérieur. Faisons cinq pixels. Nous y sommes. Maintenant, nous avons ce conteneur qui monte dans notre section héros. Maintenant, nous devons ajouter le contenu qui va à l'intérieur. Si vous vous souvenez, nous avons les cinq tuiles. Chacun d'eux est de taille légèrement différente, les trois derniers étant les trois tiers. Allons de l'avant et ajoutons notre premier. Mais la première chose que je veux faire est en fait ajouter un bloc Div, qui va envelopper tout ce contenu, et puis je veux ajouter mes widgets à propos ou ma tuile à propos. Maintenant que nous avons un bloc Div, allons de l'avant et donnons-lui une classe. Ce que je vais faire avec ces classes, c'est en fait les nommer en fonction des tailles qu'ils vont prendre dans ce conteneur. dans ce cas, c'est notre bloc de 60, et il va prendre une largeur de 60 pour cent, et la hauteur va être de 300 pixels. On y va. Maintenant, à l'intérieur de ce bloc est l'endroit où nous avons notre image et l'emballage qui va être utilisé sur toutes nos différentes tuiles. Dans ce cas, nous allons glisser dans un bloc Div supplémentaire, qui frappe à la maison le fait du modèle de boîte de boîtes à l'intérieur d'autres boîtes, en ajoutant des éléments à l'intérieur d'autres éléments. Dans ce cours, nous allons donner notre tuile de héros, et nous allons nous assurer qu'elle est relative, et je vais vous dire pourquoi dans un instant, et il a une hauteur de 100 %. Remarquez qu'il va remplir ce conteneur de 60 blocs dans lequel on l'a mis. Maintenant, à l'intérieur de cette tuile de héros, nous avons notre image, ainsi que le texte qui étiquette la tuile. Je vais glisser dans un bloc Div de plus pour l'image. Appelons cela notre image de tuile. Alors voici ce que je veux, c'est que je veux qu'il soit positionné absolus, c'est pourquoi nous avons dû avoir le wrapper précédent est relatif, et je veux qu'il soit plein avec les hauteurs de 100 pour cent. Maintenant, remarquant à nouveau, il couvre toute l'image, allons de l'avant et prenons l'arrière-plan, et nous allons sélectionner cette image ici. On y va. C'est l'image que nous voulions, puis superposée sur le dessus est l'endroit où nous avons notre texte. Je vais revenir une fois de plus à notre panneau d'ajout, puis faire glisser un bloc de texte, et je veux que ce soit dans notre tuile de héros. Nous appellerons ceci notre texte de héros ou désolé, faisons du texte de tuile. Nous allons d'abord augmenter la taille, allons de l'avant et changer la couleur de la police, et je veux augmenter la taille de ce texte. Cela va également être positionné absolu. Nous voulons le déplacer dans ce coin en bas à gauche. Remarquez que ça se traduit là, mais en ce moment c'est derrière l'image. Utilisons notre index z ici, qui va le déplacer devant, donc maintenant nous obtenons une meilleure vue. Allons de l'avant et tapons le texte final avant de commencer à le coiffer. Dans ce cas, nous avons sur moi est ce que le texte va être. Allons de l'avant et stylisons-le pour qu'il ressemble à ce que nous avons à la fin. Le texte est un peu plus grand. Changeons la hauteur de la ligne. C' est un texte en gras pour que nous puissions l'ajuster pour qu'il soit ultra gras. Ensuite, nous l'avons aussi comme tous les casquettes. Ensuite, nous pouvons ajuster la taille maintenant que nous l'avons un peu plus grand. On y va. Une autre chose que nous devons faire est d'ajuster la position. ce moment, nous l'avons épinglé dans le coin inférieur gauche, allons de l'avant et le déplacer vers le haut. Faisons en fait 30 et 30. On y va. Une autre chose que nous avons fait était un style supplémentaire sur ce texte était d'ajouter une ombre technologique, et nous pouvons l'ajouter en allant à notre ombre technologique, et nous pouvons ajuster l'opacité juste pour qu'elle ne soit pas aussi audacieuse, et cela aidera à apparaître sur le images que nous avons. On y va. C'est notre sujet de tuile. Maintenant, la beauté de ce que je vais vous montrer ici va aussi reproduire le travail que nous avons déjà fait. Dans ce cas, je veux dupliquer cet objet entier ou 60 bloc, et je vais le dupliquer une fois de plus. Je vais utiliser copier-coller, et il va être collé ci-dessous pour l'instant, mais c'est parce que cela prend 60 pour cent, et si nous les ajoutons ensemble, ça ferait 120, c'est 100 pour cent de largeur. Allons de l'avant et ajustons ce bloc de 60 ici à une classe différente complètement. Dans ce cas, nous allons utiliser 40 blocs, et la largeur va être de 40 pour cent, et nous voulons également cette photo à gauche et la position relative. Allons de l'avant et flottons aussi vers la gauche, assurez-vous que les deux flottent vers la gauche, et ils le sont. Fantastique. Une autre chose que nous avons oublié de faire est d'ajouter la hauteur. Remarquez maintenant qu'il n'y a pas de hauteurs. Donc ici, nous pouvons faire 300 pixels, et remarquer maintenant que nous voyons le produit final. Ils ont l'air très semblables. Notez que celui sur le côté droit est toujours juste le 40 pour cent, celui sur la gauche est de 60 pour cent. Maintenant, sur notre produit final, nous avons ajouté un peu de séparation entre les différentes images. Allons de l'avant et ajoutons un peu de rembourrage. Si nous allons à notre panneau ici pour notre tuile de héros, allons de l'avant et ajouter un peu de rembourrage. Ajoutez-le sur nos différents blocs. Le bloc 60 et 40, allons de l'avant et allons à notre style et en maintenant le décalage sur mon clavier, je vais ajouter cinq pixels supplémentaires de chaque côté. Je veux faire la même chose ici. Si je clique sur ces éléments, je peux utiliser ces petits raccourcis ici et aller à mon bloc 40, et je vais faire la même chose. Allons de l'avant et ajoutons cinq pixels de chaque côté. On y va. C'est le côté supérieur. Nous avons aussi les trois éléments en bas, et encore une fois, je vais dupliquer exactement le même processus. Je vais prendre ce bloc 40 et utiliser des commandes CMI clavier, puis Command V, et je vais coller un de plus afin que nous puissions ajuster la classe différente ici. Au lieu du bloc 40, je vais changer ça si vous n'avez pas deviné un bloc de 33. Dans ce cas, nous le divisons en tiers et nous allons suivre le même schéma. Nous voulons qu'il flotte à gauche. Nous voulons changer la largeur à 33,33 pour cent avec une hauteur de 300 pixels. On y va. Maintenant, nous devons dupliquer cela deux fois de plus pour un total de trois. Allons de l'avant et faisons le Commandement C, Commandement V. Great. Tout comme nous l'avons fait avant, ajoutons notre rembourrage chaque côté pour que nous ayons les cinq pixels. On y va, donc on va aller quelque part. Maintenant, nous avons juste besoin de mettre à jour tous les contenus pour correspondre, puis aussi, changer ces icônes sociales ici. Donc, au lieu de l'image, nous allons ajouter quatre icônes sociales. Allons de l'avant et commençons par changer le texte. Dans ce cas, j'ai mes derniers projets. Ici, j'ai mes derniers messages. Alors, je m'engage. Ensuite, ici, nous allons échanger ça, donc je vais juste supprimer le texte pour l'instant. Échangeons certaines des images que nous avons ici. Rappelez-vous ce que j'ai dit plus tôt, les derniers projets et messages vont réellement tirer de nos derniers billets de blog et les derniers projets que nous les ajoutons. Rapidement, mettons à jour notre image de tuile ici, qui va être notre embauche, donc je vais ajouter une classe supplémentaire et je peux échanger cette photo d'arrière-plan. On y va. Maintenant, pour ceux-ci, cela va être légèrement différent, ce que nous devons faire est d'ajouter nos données dynamiques afin qu'il sache où tirer et mettre à jour l'image d'arrière-plan pour nous. Dans ce cas, nous allons de l'avant et allons à nouveau dans notre panneau Ajouter. Je vais prendre le contenu de notre liste dynamique et je veux le faire glisser dans notre tuile de héros. Je peux lier cela, et dans ce cas, nous avons nos projets et il tire nos projets ici. Maintenant, ce que je veux faire est de changer pour que le texte de la tuile et l'image de la tuile soient à l'intérieur de cette liste dynamique. Alors allons de l'avant et glissons ceux-ci dans notre élément dynamique. On y va. Maintenant qu'ils sont à l'intérieur de notre élément dynamique, je peux vraiment extraire et utiliser du contenu à l'intérieur. Dans ce cas, je peux aller à notre image de tuile et je peux sélectionner pour obtenir l'image de fond de notre image principale. Notez déjà qu'il tire dans notre image de fond de notre dernier projet. Nous pouvons vérifier cela en allant sur notre panneau de collection à gauche, allant à nos projets, croquis, et il y a l'image là-bas. C' est l'image qui est tirée. Maintenant, nous pouvons faire exactement la même chose pour nos derniers messages. Encore une fois, je vais aller de l'avant et glisser dans une liste dynamique et je veux la glisser dans notre tuile de héros. Cette fois, je vais le lier à nos blogs, qui est une collection que nous avons déjà créée. Encore une fois, c'est pourquoi il est si avantageux de commencer à concevoir avec du contenu en premier, que vous avez déjà créé ces ressources pour vous. Ensuite, je vais aller de l'avant et faire glisser nos différents éléments, nos textes de titre, et notre image de titre. Encore une fois, je vais aller de l'avant et aller à notre panneau de paramètres. J' ai besoin de cliquer sur notre image de titre et panneau de paramètres, puis obtenir l'image d'arrière-plan de notre blog, et là nous allons. Maintenant, nous avons une tuile mise à jour pour chaque quatre messages différents. Maintenant ce que je veux faire est de mettre à jour ceci ici, si nous allons à notre produit final pour être ce système de liaison à quatre quadrants ici avec ces différents comptes de médias sociaux. Dans ce cas, je vais aller de l'avant et supprimer mon image de titre afin que maintenant tout ce que j'ai est notre titre de héros. Maintenant, ce que je veux faire est d'ajouter en quatre blocs, je vais utiliser des blocs de liens, alors allons de l'avant et faites glisser un bloc de liens. Dans ce cas, je veux lui donner une classe qu'il va lui permettre de s' asseoir 1,5 de la largeur et 1,5 de la hauteur. Allons de l'avant et ajoutons une classe, bloc social, et je veux que la largeur soit 50 pour cent et je veux que la hauteur soit la moitié de ce que la hauteur est pour ces éléments, qui était que 300 pixels, donc dans ce cas, nous choisira 150 pixels. Juste pour qu'on ait une meilleure idée de ce qui se passe, allons-y et choisissons nos couleurs. J' ai enregistré les couleurs des icônes des réseaux sociaux que nous allons utiliser, en commençant par Twitter. Ajoutons notre image de fond, qui dans ce cas, sera l'icône Twitter que j'ai ici. La beauté des images de fond est que vous arrivez à les positionner directement au centre. En ce moment, c'est carrelé, je peux sélectionner Ne pas répéter. Ensuite, augmentons la taille de ce gars ici à 50 pixels, et il va rester comme non fixé. On y va. C' est notre bloc Twitter. Nous allons dupliquer cela quatre fois, donc la commande C, commande V, nous réutilisons les ressources que nous avons créées. Dans ce cas, je peux aller de l'avant et commencer à ajuster les couleurs pour ceux-ci. On dirait aussi qu'on va devoir ajuster un peu la taille, c'est bon. Donc bloc social, tapez une classe supplémentaire afin que nous puissions ajouter des styles supplémentaires, comme changer la couleur d'arrière-plan et ajuster l'icône. Dans ce cas, nous voulons qu'il soit à nouveau 50 pixels. Super. On a Pinterest ici. Ajoutons notre classe supplémentaire. Changeons la couleur d'arrière-plan, mettez à jour le graphique. Encore une fois, modifions la largeur pour être de 50 pixels. Enfin, nous avons notre compte dribble, alors allons de l'avant et ajoutons une classe supplémentaire. Échangez l'icône. Encore une fois, 50 pixels. Ensuite, changez la couleur d'arrière-plan ici. Maintenant, nous sommes presque prêts. Une chose que nous remarquerons est que nous avons encore un rembourrage supplémentaire. Je peux simplement ajuster cela de sorte qu'ils flottent tous vers la gauche. En fait, utilisons notre bloc social original pour qu'il l'ajoute à chacun de ces éléments afin que je puisse le flotter vers la gauche. On y va. Remarquez que c'est encore un peu plus haut. Allons de l'avant et diminuons la hauteur jusqu'à ce que nous nous sentons comme ça correspond, 145, qui a l'air bien. On y va. Nous avons l'air assez bien avec notre design ici. La dernière pièce dont nous avons besoin est d'ajouter notre pied de page, ce que nous allons couvrir dans notre prochaine vidéo. 8. Footer: La dernière pièce dont nous avons besoin est d'ajouter notre pied de page, qui va s'asseoir juste ici en bas. Encore une fois, continuons et ajoutons une nouvelle section, que je peux simplement glisser dans notre corps, que nous pouvons ajouter ici. Dans ce cas, je veux l'ajouter en bas. Laisse-moi fermer certains d'entre eux, et déplaçons le bas vers le bas. Dans ce cas, appelons ceci notre pied de page, notre section Pied de page, et nous pouvons ajouter un espacement supplémentaire. Changeons la couleur de fond ici. Utilisons un gris foncé. Maintenant, nous avons besoin du conteneur qui va contenir notre contenu. Allons de l'avant et allons à notre conteneur, et faisons-le glisser dans notre section. Maintenant, nous avons le conteneur pour contenir nos éléments individuels. Dans ce cas, ce que je veux faire est de faire glisser dans une colonne. Ajustez-le pour que nous ayons le logo sur le côté gauche par ici, et ensuite nous allons avoir les liens sur le côté droit. En fait, nous pouvons monter et extraire une partie du même contenu. Dans ce cas, je vais tirer cette marque, qui si nous regardons dans le panneau Navigator, c'est juste le bloc de lien qui entoure ce logo, et faites défiler vers le bas, je vais l'ajouter dans notre colonne. Je veux aussi répliquer ce que nous voyons ici avec nos liens de navigation. Ce que je peux faire est simplement d'aller à notre panneau Ajouter à nouveau, et faisons glisser un lien texte, et dans ce cas, nous pouvons utiliser le terme Nav Link pour obtenir la classe similaire, sauf que cette fois je vais aussi ajouter un classe supplémentaire de Lien de pied de page pour apporter des modifications supplémentaires. Par exemple, nous voulons qu'ils flottent vers la droite, et nous pouvons ajouter un espacement supplémentaire, et je vais supprimer le soulignement. Encore une fois, nous avons les différents liens. Nous avons 1, 2, 3, 4, et notre bouton Contact, alors continuons et ajoutons cela. Nous avons un et ⌘+C, ⌘+V, obtenez tous nos liens. Encore un. Parfait. Nous pouvons faire la même chose ici où nous pouvons ajouter la classe supplémentaire pour Contact, que nous verrons ici. Ajoutons un lien supplémentaire ou style supplémentaire afin que nous puissions les centrer un peu plus. On y va. Allons de l'avant et ajoutons le texte. Nous avons Contact, Blog, À propos, Portfolio et notre lien Accueil. Maintenant, une chose que nous n'avons pas couverte même avec le lien de navigation est à quel point il est facile de relier vos sites. moment, si nous allons dans notre panneau Pages, nous remarquerons que nous n'avons pas encore d'autres pages créées, mais ce qu'il pourra faire est notre lien Accueil, car cela existe, nous allons cliquer sur le lien, puis dans Paramètres, nous avons nos paramètres de lien, nous pourrions coller dans un lien direct légitime vers nos différents sites, nous pourrions également utiliser une page existante sur notre site, ce que nous allons faire, nous pouvons également utiliser un lien direct vers une section de notre page, que nous n'avons pas dans cette page, un e-mail ou un numéro de téléphone. Mais dans ce cas, nous allons utiliser notre maison. Notez que la couleur a changé en bleu. C' est parce que nous sommes dans un état actif. Une chose que nous pourrions faire est d'ajuster le style de ce lien pour cette page parce que nous sommes sur la page d'accueil. Allons-y et change-le pour peut-être ce bleu ici. On y va. Ça a l'air bien. Maintenant, c'est juste un appel que nous sommes sur la page d'accueil, et la même chose se produirait pour ces liens si nous étions sur leurs pages. Donc c'est notre page d'accueil. Une chose que nous devons encore faire est de nous assurer que cela fonctionne sur tous nos différents appareils, qui est ce que nous allons faire ensuite. 9. Rendre notre site Mobile-ready: Donc c'est notre page d'accueil. Une chose que nous devons encore faire est de nous assurer que cela fonctionne sur tous nos différents appareils. Maintenant dans le flux web, nous pouvons le faire avec ces panneaux ici. ce moment, on est sur le bureau. Si nous allons sur les tablettes, nous pouvons avoir une meilleure idée de ce que le site commence à ressembler et la même chose pour les autres appareils ainsi. Maintenant, rappelez-vous dans notre conversation précédente, les styles que nous faisons sur le bureau vont tomber en cascade vers le bas sur nos autres appareils, qui explique pourquoi nous avons remarqué que le design et tout est très similaire ici comme il était sur le bureau. Mais si nous devions apporter des modifications supplémentaires sur la tablette, comme par exemple, changer la taille du texte pour qu'il tienne sur une ligne, il ne va pas changer la taille sur la page d'accueil. Nous devons également nous assurer que nous avons construit notre barre de navigation mobile. ce moment, nous avons notre bouton de menu sans classe. Donnons-lui une classe pour que nous puissions le styliser. Dans ce cas, la couleur est tirée de la typographie. Allons de l'avant et ajuster la couleur là-bas et nous pouvons prévisualiser à quoi il ressemble lorsque nous ouvrons ce menu en cliquant sur le bouton, aller à nos paramètres et en appuyant sur, Ouvrir. Nous voulons ajouter quelques styles supplémentaires afin que nous puissions rendre ce look un peu meilleur. Allons de l'avant et utilisez nos options de menu de navigation. Vous pouvez le sélectionner en allant dans notre panneau de style ou le panneau de navigation ou en le sélectionnant lorsqu'il est déposé et donnons-lui une classe. Appelez-le notre menu de navigation et ajustons-le pour qu'il ait également une couleur de fond plus foncée. On y va. Réglons le bouton de menu. En ce moment, il est ouvert, ce qui est une classe supplémentaire que nous pouvons styliser. Quand il sera ouvert, peut-être qu'on utilisera ce bleu à nouveau. Nous voulons également apporter des modifications supplémentaires à la longueur de nos contacts. Allons de l'avant et supprimons cette couleur d'arrière-plan. Ajoutons un peu d'espace supplémentaire sur le fond. On y va. Maintenant, nous avons tous nos liens configurés. Nous pouvons jeter un oeil et jeter un oeil à ce que cela ressemblerait sur différents appareils. Allons-y et retirons ça. Comme vous le remarquez ici, nous avons 20 pixels sur chacun d'eux. Faisons correspondre à nos contacts ici. On y va. C' est Hold shift, que nous allons l'utiliser pour tous les côtés et supprimons la marge supérieure et inférieure. Donc maintenant il correspond à tous les autres liens, et enfin nous avons notre appareil mobile. On y va. Nous avons ajusté ces paramètres sur tous nos appareils pour nous assurer que le menu mobile fonctionne bien, et cela a l'air génial. Maintenant, enfin, nous allons nous assurer que tout le reste ressemble bien à ces tuiles et à notre pied de page. Ici, ça a l'air assez bien encore. Allons de l'avant et retirons une partie du rembourrage supplémentaire que nous avons au bas de cette section, rapportez-le plus près de notre pied de page inférieur. Nous allons les réaligner un peu, sorte que nos liens de pied de page correspondent un peu plus au logo. Réglons le rembourrage sur le dessus pour que, cette section de héros soit un peu plus dans les lignes. Nous remarquons en ce moment combien de personnalisation nous obtenons réellement avec l'utilisation de cet outil et être en mesure de construire cela dans le navigateur. On y va. Réglons également le rembourrage sur les côtés afin que nous le rapprochions du coin et génial. Continuons à passer à nos différents appareils et tout ce que nous avons changé sur la tablette va passer sur ces appareils. Vous espérez qu'au fur et à mesure que vous vous rapprochez du fond, il commence à paraître tout aussi bon. Allons de l'avant et diminuons la taille de ceux-ci à nouveau et déplacez-les sur le côté un peu plus. On y va. Maintenant, nous remarquons que cela commence à se casser juste un peu. C' est bon, allons-y et centrons certaines de ces choses. Dans ce cas, chaque fois que vous avez une classe à notre marque de logo de pied de page. Appelons cela notre pied de logo et positionnons-le de sorte qu'il ne soit pas à gauche et centrons le texte au milieu. Faisons la même chose ici. Dans ce cas, donnons notre colonne à notre colonne de lien de pied de page, et centrons le texte au milieu. ce moment, ils ne se concentrent pas parce qu'ils flottent. Allons-y et déflottons-les. Assurez-vous qu'ils sont tous déflottés. On y va. Notez encore une fois que beaucoup de ce processus est itération. Il va et vient et ajoute les réglages nécessaires pour s'assurer que tout a l'air bien. Ici, allons de l'avant et augmentons la taille de ce texte. Encore une fois, il va casser en deux lignes indépendamment. Faisons en sorte que ça a l'air bien et on y va. Dans ce cas, je n'ai pas nécessairement besoin de la colonne pour sortir et encore. Allons de l'avant et retirez simplement ce retour à l'auto. Réglons simplement la taille de la section du héros afin qu'elle corresponde mieux à la page. Fantastique, donc ça a l'air bien. Le dernier appareil est notre appareil mobile et allons de l'avant et ajouter une ombre à cette image ici. Sur chacun, ira à chacun et ajoutons une ombre de texte qui aidera le texte sortir juste un peu sur ce fond plus léger. Fantastique. Maintenant, nous sommes un peu serrés ici avec ces tuiles. La beauté d'utiliser le pourcentage de largeur que nous avons utilisé plus tôt est que maintenant nous pouvons réellement ajuster cette largeur pour prendre 100 pour cent de la vue au lieu des 60, 40 et 33. On peut utiliser 100 pour cent pour chacun de ces éléments. On y va. Maintenant, ils prennent 100 % de la largeur. Réglons le texte du titre ici. Maintenant, il peut être un peu plus grand puisque nous avons un peu plus de place. Nous allons ajuster les hauteurs de ligne et nous allons la déplacer pour qu'elle soit un peu plus loin du coin. On dirait qu'on a un peu de pause. Allons de l'avant et ajustons ceci afin que nous puissions diminuer la taille du texte et que nous puissions diminuer la taille ici. C' était notre contact, vous devez vous assurer que nous le faisons à notre lien de pied de page. En fait, faisons 100 pour cent et nous allons les empiler les uns sur les autres. Faisons 13 pixels. On y va. Maintenant, nous avons notre vue mobile, et si nous cherchons à être différents appareils une fois de plus, nous remarquerons que ceux-ci ont tous fière allure. Parfait. C'est nous qui construisons cette page d'accueil à partir de zéro. Allons de l'avant dans la vidéo suivante et construisons un exemple de page de modèle qui dans ce cas sera notre page de projets. 10. Contact: L' un des principaux objectifs de notre site Web est de faciliter pour un client potentiel de nous contacter s'il voulait faire un peu de travail. Pour ce projet, nous allons combiner l'utilisation d'une conception d' interaction efficace avec une bonne interface utilisateur et une conception de mise en page, afin de créer un processus efficace permettant aux gens de vous contacter et de vous contacter. Dans cette vidéo, nous allons aborder en plus de ce que nous avons fait ici, avec l'ajout et la conception d'une page à partir de zéro. Dans ce cas, nous allons créer un modèle pour la collection de notre projet ici. Il va donc tirer et utiliser les données et contenu de la collecte de données que nous avons déjà créée. Dans ce cas, cet élément de projet ici. Donc, ce que nous allons faire, c'est commencer par aller à notre section ou à un modèle. Nous allons remarquer que nous avons une page blanche. L' article est affiché pour nous ici, mais nous n'avons pas de contenu affiché ici. Nous allons donc utiliser beaucoup de ressources que nous avons déjà créées, commençant par cette section Héros. Donc, je vais aller de l'avant et utiliser la commande C, ou je peux utiliser le bouton droit de la souris et la copie, puis revenir à mes modèles de projets, et je peux coller. On y va. Je vais aller de l'avant et prendre notre, pour retourner à la maison. je vais également saisir la section suivante, et je peux utiliser à nouveau la commande C, et revenir à nos modèles de projets et coller. Je vais supprimer ce contenu ici, donc encore une fois, j'ai ce bloc div qui enveloppe tout. Maintenant, j'ai juste mon conteneur de héros. Je vais aller de l'avant et glisser dans un nouveau bloc div. Ensuite, dans ce cas, je vais simplement ajouter dans nos champs de texte enrichi, et une image pour nous faire démarrer. On y va. Enfin, avant de commencer à ajouter le contenu, revenons à la maison et attrapons notre pied de page. Maintenant, la raison pour laquelle je veux vous montrer comment nous faisons le pied de page, c'est parce que nous allons créer un symbole à partir de celui-ci. Ainsi, un symbole vous permet de prendre une capture d'une image, élément ou d'un groupe d'éléments comme ce pied de page ici, puis de les enregistrer pour être utilisés ailleurs. Pour que nous puissions dupliquer ceci ou créer un nouveau symbole autour d'elle, nous appellerons ceci notre pied de page. Notez que c'est maintenant un encapsulé dans ce vert et ajouté à nos symboles ici. Donc, si nous revenons à notre modèle, au lieu de copier-coller, cette fois, je vais simplement ajouter dans notre pied de page à partir du panneau des symboles afin que je puisse le faire glisser vers le bas de la page, et si nous faisons défiler ici, nous le verra. Maintenant, la beauté d'utiliser des symboles est que si jamais nous devions apporter des changements comme par exemple, ajouter un lien ou mettre à jour un lien, il serait mis à jour partout où ce symbole existe. Donc, pas besoin de sauter sur différentes pages pour faire le même changement. Donc maintenant, nous avons l'air d'avoir tout le contenu en place, mais je veux ajuster tout ce que nous voyons ici pour qu'il corresponde au style que nous recherchons. Donc, dans une vidéo précédente, j'ai glissé dans une liste dynamique des éléments et nous avons lié à une collection différente pour extraire ces données. Eh bien dans ce cas, cet ensemble de modèles, est prêt à extraire les données de nos projets. Donc, dans ce cas, je peux simplement cliquer sur un objet comme ce titre, et je peux choisir d'obtenir mes textes à partir du nom du projet, et nous pouvons le voir juste là. Je vais faire exactement la même chose pour l'image d'arrière-plan dans la section Héros, et je vais choisir l'image principale. Je vais faire la même chose pour cette image, on y va. Puis ici, j'ai également écrit une description de projet pour chacun de mes contenus. Donc, je peux simplement lier ce texte à cela. Tout comme ça, nous avons créé un modèle très basique, mais un modèle qui tire les données de la collection que nous avons déjà. Lorsque nous ajoutons des contenus supplémentaires ou des projets supplémentaires, ils créeront automatiquement ce modèle que nous voyons ici. 11. Édition: Une fois que vous avez fini de construire votre site Web et d'ajouter tout votre contenu, nous pouvons maintenant le publier en direct pour que le reste du monde puisse le voir. Nous pouvons publier notre site Web en seulement deux clics. Tout comme ça, nous pouvons voir notre site Web en direct sur n'importe quel appareil. Vous pouvez également ajouter un domaine personnalisé afin que vous puissiez publier directement sur votre propre site Web. Donc vous avez publié un site web, et maintenant ? La meilleure chose que vous puissiez faire est de le partager avec le reste du monde. Vous pouvez utiliser votre réseau existant et envoyer des e-mails aux clients précédents ou potentiels, vous pouvez également le publier sur des comptes sociaux tels que Twitter, Facebook ou Dribble. L' une des choses les plus importantes que vous pouvez faire est de contacter clients précédents ou des personnes avec lesquelles vous avez travaillé dans le passé. Quatre-vingt-dix pour cent ou plus des clients que vous recevrez à l'avenir seront orientés fonction des recommandations de personnes avec lesquelles vous avez déjà travaillé. Il est également très important de garder votre site Web à jour et de le mettre à jour constamment avec nouvelles informations sur vous-même ou de nouveaux projets que vous avez réalisés avec de nouveaux clients. Si vous avez renvoyé des visiteurs sont des clients qui reviennent sur votre site des jours ou des semaines plus tard et que le contenu est toujours le même, cela peut donner le signal que vous ne travaillez plus ou que vous continuez à entreprendre de nouveaux travaux. Avec Webflow, il est incroyablement facile de passer par le CMS visuel, auquel nous accédons directement via l'URL de publication elle-même. Une fois connecté, nous pouvons apporter toutes les modifications que nous voulons directement sur la page, y compris modifier du texte ou échanger des images. Une fois que nous avons terminé, nous pouvons voir toutes nos modifications et publier le contenu instantanément. Si nous voulons ajouter du contenu supplémentaire comme un nouveau billet de blog, nous pouvons le faire ici aussi. Comme nous l'avons fait lors des étapes précédentes dans l'outil Webflow, mise à jour du contenu est aussi simple que de remplir les champs nécessaires et d'ajouter le contenu nécessaire, puis de publier directement sur le site. Ce qui se passe, c'est que tout le contenu que nous avons ajouté est placé dans le format approprié que nous avons soutenu conçu pour le site Web. Rappelez-vous que la mise à jour de votre site Web est non seulement bénéfique à des fins de référencement, mais aussi pour encourager les nouveaux utilisateurs que vous continuez à mettre à jour et à entreprendre de nouveaux travaux. 12. Résumé: C' est ça. Nous avons abordé beaucoup de choses aujourd'hui, y compris certains principes de base du web et du développement, ainsi que la façon dont vous pouvez facilement mettre à jour votre portefeuille via le CMS Webflow. Les prochaines étapes sont à vous de choisir. Nous espérons que ce cours vous a aidé à commencer avec vos sites Web, mais continuer à le mettre à jour, le partager et à obtenir de nouveaux clients est tout à fait à votre disposition. Nous espérons que vous pourrez partager ce cours, fois avec nous ici dans cette communauté, mais aussi partout ailleurs. Nous sommes impatients de voir quelles autres nouvelles choses que vous créez à l'aide de Webflow ou de tout autre outil. Nous espérons que ce cours a été une excellente première étape dans la construction de vos premiers sites Web. Mais nous espérons également que vous continuerez à le faire en utilisant Webflow ou d'autres outils de conception Web pour continuer à construire votre portefeuille en ligne et au-delà.