Commencez à créer des sites Web dès aujourd'hui ! Aucune expérience requise.

1. 1.1 - Introduction au cours: Salutations et bienvenue. m'appelle Aaron Craig et je vais être votre instructeur pour ce cours pour les débutants absolus au HTML et CSS. Ce cours s'adresse aux personnes qui ont toujours voulu créer un site web, mais qui ne savaient pas par où commencer. Ou ils étaient trop intimidés par le processus d' apprentissage du codage ou par la technologie sous-jacente. Je vais vous dire que vous pouvez être un développeur web et je suis là pour vous aider dans cette voie. Nous allons couvrir les bases du HTML et du CSS étape par étape, comment cela fonctionne, comment les assembler et comment concevoir votre premier site Web. Si vous savez coder, vous pouvez suivre ce cours, mais ça va aller très lentement et ça va juste être un rafraîchissement pour vous, mais si vous ne savez pas comment coder ou vous pensez que vous connaissez quelqu'un qui ressemble à ce cours serait bon pour, je vous encourage à le partager avec eux, faire sortir parce que tout le monde peut être un développeur web s'ils le veulent et je crois que ce sera un excellent cours pour eux et pour vous. Cela étant dit, parlons de pourquoi HTML et CSS sont toujours pertinents aujourd'hui dans la prochaine vidéo. 2. 1.2 - Pourquoi apprendre HTML et CSS de manière plus générale.: Donc, à ce jour et à l'âge, il peut ne pas sembler nécessaire d'apprendre HTML et CSS. Vous avez probablement vu des publicités pour Squarespace et Wix et WordPress, glisser-déposer, construisez vous-même. Aucune expérience de codage requise du tout, et certains d'entre eux peuvent fonctionner. Vous pouvez faire des sites assez beaux avec ceux-ci, mais le fait est que chaque site Web sur Internet utilise HTML et CSS comme épine dorsale. La façon dont il est livré peut sembler très différente en fonction de la technologie utilisée, mais c'est toujours HTML et CSS, c'est pourquoi je crois fermement qu'il est essentiel pour chaque développeur web d'avoir une compréhension et que est ce que ce cours va faire pour vous. Nous allons couvrir les bases et je vais vous donner les ressources pour continuer à apprendre après ce cours pour devenir le meilleur développeur web que vous pouvez. Maintenant, dans la prochaine vidéo, parlons de la façon dont ce cours est structuré et de la meilleure façon pour vous d'en tirer le meilleur parti. 3. 1.3 - Structure du cours: Ce cours est conçu pour être un cours de codage suivi. Ça veut dire que je vais taper ce que je dis et l'expliquer au fur et à mesure. Mais tu devrais m'avoir sur le côté d'un second moniteur ou sur ton moniteur principal et coder avec moi. Si vous ne l'êtes pas, vous n'obtiendrez pas ce dont vous avez besoin pour sortir de ce cours. Vous pouvez regarder un 1000 tutoriels sur la façon de jeter un javelot. Mais jusqu'à ce que tu sois sur le terrain en essayant, c' est la connaissance de la tête, pas pratique. de même pour l'apprentissage des langues et le codage en général. Tu dois le faire toi-même. Faites le site comme nous le faisons aussi et vous serez beaucoup mieux. Pendant que vous regardez, si vous avez des questions, hésitez pas à les poser. Rappelez-vous, ce cours s'adresse aux débutants. Si vous rencontrez un problème ou un problème, ou si vous n'êtes pas sûr de quelque chose, vous ne serez pas le seul alors demandez-lui et nous ferons de notre mieux pour y répondre. Pendant que nous allons, si vous vous demandez, hmm, je me demande si cela pourrait faire ça, mettre la vidéo en pause et essayer. C' est une autre excellente façon d'apprendre et tu seras bien mieux pour ça. À la fin de cette piste de lapins, vous connaîtrez de nouvelles connaissances pour savoir si quelque chose fonctionne ou non, et c'est génial. Maintenant, je vais utiliser Visual Studio Code, un logiciel gratuit et open source pour tout le monde sur n'importe quelle plate-forme. Vous pouvez utiliser ça ou autre chose. Ça n'a vraiment pas d'importance. Je vais vous montrer comment faire un fichier HTML chargé et voir les modifications que vous avez faites au fur et à mesure. Tout ce que nous faisons dans ce cours sera indépendant du logiciel et de la plate-forme , alors utilisez tout ce que vous êtes à l'aise et vous serez prêt à y aller. Maintenant, avec tout cela hors du chemin, nous sommes prêts à regarder ce qu'est HTML et comment il fonctionne. Je suis super excité. J'espère que vous aussi, et je vous verrai dans la section suivante. 4. 2.1 - Ce que le HTML est et ne n'est pas: La première chose que je veux couvrir est ce qu' est HTML et comment il diffère des langages de programmation traditionnels, dont vous avez peut-être entendu parler et que vous n'avez peut-être pas. HTML signifie Hypertext Markup Language. Il s'agit d'un langage de conception autour balises que vous mettez ensuite des informations entre ces balises ou attributs attribués, que nous allons obtenir. Hypertext Markup Language est la base de chaque site Web, et c'est pourquoi c'est vraiment important, car c'est ce que vous allez voir. Maintenant, c'est un langage basé sur une balise, qui signifie que si nous voulons entrer, disons, un paragraphe ou un titre, alors nous lui donnons effectivement une balise qui, une balise ressemblerait à ceci h1, puis nous mettons des informations entre elle, et c'est ce qu'elle dirait. C' est juste du HTML, ici, tous les différents types de HTML que nous allons couvrir sur les prochaines vidéos, et ça ressemble à ceci. Voici le titre que vous avez ici, voici un paragraphe qui est juste du texte et de l'image de la vidéo, une liste, des tableaux, un formulaire. Tout cela est une page HTML pure, il n'y a rien d'autre à l'intérieur d'ici. Vous pouvez dire que cela n'a pas l'air très bon, et c'est parce que nous n'avons pas de style, qui est ce que CSS est, nous allons couvrir plus tard. Ce que nous faisons en ce moment ne va pas être très joli parce que le style qui dessine comment tout semble, ressent et bouge et la disposition de celui-ci, que tout va venir plus tard. instant, habituez-vous à ce que ça ressemble à ça. Tout se passe tout droit, il n'y a pas grand-chose, il n'y a pas beaucoup de couleur, c'est juste comme ça, et c'est bon. C' est essentiellement ce que HTML est. Maintenant, ce que HTML n'est pas est un langage de programmation. Voici donc un projet que j'ai. C' est un projet C-Sharp, construit également un site Web, mais c'est plus du code back-end côté serveur, qui ne s'en soucient pas. Mais fondamentalement ce que cela signifie est tout cela ici, des variables, des fonctions, instructions if else, des listes, des structures de données ; tout ce genre de choses, si vous en avez entendu parler, ne s'applique pas au HTML. Tout ce que vous voyez ici, nous ne ferons pas avec HTML parce que ce n'est pas un langage de programmation. Nous ne créons pas de programme pour créer un site Web. Le site Web est défini par des balises et par des styles que nous allons apprendre à mettre en place. Donc, c'est ce que HTML est, et c'est ce que HTML n'est pas. Donc, ce n'est pas un langage de programmation, c'est un langage de conception qui est vraiment sympa parce que si vous entrez juste dans le codage, HTML et CSS sont un langage fantastique pour commencer parce qu'ils sont assez simples, mais vous pouvez créer des choses correctement et vous pouvez voir les choses commencer à paraître assez rapidement une fois que vous avez appris ce que vous faites. Donc c'est génial pour les débutants, à mon avis, juste en général parce que beaucoup de débutants aiment voir des résultats ; j'étais l'un d'entre eux quand j'ai commencé. Je voulais faire les choses, je voulais voir tout de suite les choses se produire. Langages de programmation beaucoup plus difficile, mais HTML, CSS, et vous arrivez à construire un site Web tout le temps et c'est vraiment cool. Donc, c'est ce que HTML est et ce que HTML n'est pas. Dans la vidéo suivante, nous allons commencer à aborder une partie de cette syntaxe et je vais l'expliquer, et nous allons faire juste un site Web HTML de base au fur et à mesure que nous continuons. 5. 2.2 - HTML de base: La première chose que vous allez avoir besoin pour commencer à faire votre site Web est le fichier pour le site Web. Quel que soit le logiciel que vous utilisez, vous serez probablement en mesure de faire cela à l'intérieur de là si vous le voulez en faisant simplement Nouveau fichier et en choisissant HTML. Mais si vous le faites d'une manière ancienne avec comme un bloc-notes ou quelque chose comme ça. Vous pouvez n'importe où dans votre navigateur cliquez avec le bouton droit de la souris et dire, Nouveau et il doit être juste un document texte. Ça ne peut pas être un document mot. Il peut être comme un bloc-notes, mais il ne peut pas être autre chose qu'un simple vieux document. Vous lui donnez un nom appelé index, puis vous changez l' extension from.txt ou quoi que ce soit, to.HTML. Je pourrais dire que ça va devenir instable, c'est bon. Cliquez sur « OK », puis vous avez votre première page Web prête à partir. Il va être vide en ce moment. On peut l'ouvrir, voir qu'il n'y a rien, c'est bon. Mais c'est un fichier de site Web qui sera ouvert par les navigateurs et il saura que c'est un site Web qui est prêt à être lu. Ce qu'on va faire, c'est le remplir avec des informations. Pour ce faire, j'utiliserai Visual Studio Code, mais vous pouvez utiliser tout ce que vous aimez si vous êtes à l'aise avec autre chose ou si vous ne voulez pas utiliser ce que j'utilise pour une raison quelconque, c'est correct. Vous pouvez même aller à la vieille école et l'ouvrir dans Bloc-notes ou l'éditeur de texte et tout faire à la main. Je ne l'encouragerais pas, mais tu le peux. La façon d'afficher votre fichier pendant que vous êtes en train d'éditer est de naviguer partout où se trouve votre fichier, double-cliquez dessus. ce moment, c'est vide parce qu'on n'a rien à l'intérieur. Mais chaque fois que vous faites un changement, vous pouvez simplement enregistrer votre code, puis entrer et appuyer sur « F5" et il rechargera automatiquement cela dans le navigateur de votre choix. J' utilise Firefox, mais vous pouvez suivre et quel que soit le navigateur que vous utilisez et il le fera exactement de la même manière. Commençons par une syntaxe de base. Maintenant, il y a une structure que tous les fichiers HTML suivent et elle est nécessaire pour la publication en ligne. Mais pour l'instant, on va l'ignorer et on va le couvrir à la fin. C' est parce que la structure nécessaire est en fait remplie de jetons et de balises assez avancés et de syntaxe et je ne veux pas vous embêter avec cela sans même connaître les bases. On va commencer super simple. La première chose que nous allons couvrir est la balise d'en-tête. Nous allons commencer cela en appuyant sur Maj et Gauche sur la touche virgule pour ouvrir un crochet et si vous utilisez du code, vous pouvez voir ici que cela vous donne toutes les options et nous allons couvrir certaines d'entre elles, mais pas tous parce que nous n'avons pas besoin de tous pour tout ce que nous faisons. Je vais couvrir les bases. Nous allons commencer par un cap et nous avons h1 creux h6, qui représente le cap un à la rubrique six. Je vais aller de l'avant et taper h1, puis fermer cette tranche avec le décalage et la période. Vous pouvez voir ici que mon auto complète cela, mais si ce n'est pas le cas, ce que vous devez faire est alors mettre un autre crochet qui s'ouvre, puis suivi d'une barre oblique inverse, puis cette même balise et qui fermera la balise. Chaque balise HTML, eh bien, presque chaque balise HTML va suivre cette structure exactement la même. Il y en a quelques-uns qui diffèrent, mais pour la plupart, c'est ce que vous devez faire. Vous l'ouvrez avec des crochets, vous mettez la balise que vous voulez à l'intérieur et la balise est ce que nous appelons ce que nous tapons à l'intérieur de là. Il y a des balises prédéfinies comme titre et image et vidéo, puis il y a des balises que vous pouvez, si vous voulez réellement créer vous-même, puis définir leur apparence et ce qu'ils sont censés faire. Pour l'instant, nous allons simplement utiliser ceux qui sont prédéfinis dans chaque navigateur, partout. Le cap est un excellent point de départ. Un titre, comme son nom l'indique, est quelque chose que vous mettez en haut d'un article, une image, une vidéo, quelque chose que vous présentez. Ils ont des tailles de texte prédéfinies et des regards sur l'ensemble de votre site Web, qui est pour quoi ils sont vraiment utiles. titre 1 est quelque chose que vous utiliseriez pour le titre de la page. Vous n'utiliseriez pas la tête un tout le temps. Vous utilisez, eh bien, je suppose que le plus petit nombre ici, un et cela vous donnera la plus grande taille de police. Si je dis, bienvenue sur ma page et je sauvegarde ceci, je vais aller de l'avant et cliquer, aller en direct ici. Cela va ouvrir ma page Web et elle sera automatiquement actualisée. Vous pouvez voir que c'est en tête un et c'est un titre assez grand. Vous pouvez augmenter la taille avec CSS plus tard, dont nous parlerons. Mais c'est par défaut et c'est ce que vous utiliseriez pour introduire essentiellement votre page entière. Ensuite, à partir de là, si vous aviez des articles, vous pouvez utiliser un titre plus petit, h2. Alors appelez ce titre de l'article, je vais le sauvegarder, revenir à cela, rafraîchir et puis vous pouvez voir que mon titre d'article est un peu plus petit et ainsi de suite et ainsi de suite. Chacun de ces titres va avoir l'air un peu différent. Si nous arrivons, nous pouvons taper chacun et vous pouvez avoir une idée de leur apparence et de la taille qu'ils ont. Maintenant, avec CSS plus tard, vous serez en mesure de personnaliser tout cela complètement à votre goût, ce qui est génial. Certaines de ces rubriques deviennent assez petites, comme la rubrique 6, je n'ai personnellement jamais utilisé la rubrique 6 ou 5. D' habitude, je m'en tiens à un, puis à deux et trois selon ce que je fais. Mais vous pouvez voir que vous avez beaucoup d'options ici, gardez cela à l'esprit. C' est la structure de base des balises HTML. Vous l'ouvrez, vous mettez quelque chose au milieu, généralement du texte et ensuite vous le fermez. Juste parce que je veux vous montrer comment enfreindre cette règle tout de suite, je vais vous montrer une qui ne suit pas ça et c'est la balise image. Si nous ouvrons cela, vous remarquerez que HTML et vraiment la programmation et les codeurs en général sont vraiment, vraiment paresseux. Ils ne tapent pas de noms complets pour presque rien. Lorsque vous cherchez quelque chose la plupart du temps, il va être soit abrégé comme image, IMG ou il va avoir un nom différent qui vous indique ce qu'il fait, qui est en fait appelé une ancre, qui est un lien vers une autre page Web. Si vous avez tapé comme lien ici, c'est quelque chose ici, mais ce n'est pas comme ça que vous liez à une autre page Web, c'est quelque chose d'autre entièrement. Il y a quelques choses que vous devez savoir et c'est ce que nous allons couvrir. Mais revenons d'abord à l'image, IMG. Si nous fermons cela, vous pouvez voir qu'il n'y a pas de crochet de fermeture qui est automatiquement rempli ici et c'est parce qu'une image est une balise fermée autonome. Tu n'as rien à avoir là-dedans. Ensuite, l'image utilise réellement quelque chose appelé attributs. Les attributs sont des éléments que vous définissez sur cette balise. Une image et un lien, une vidéo et plusieurs autres balises devront avoir des informations que vous définissez pour qu'il sache quoi faire. Parce qu'en ce moment nous avons une étiquette d'image, mais nous n'avons pas d'image à utiliser. Allons de l'avant et ouvrons ceci et cherchons une image. Une des choses que j'aime, ce sont les jeux. Allons chercher des jeux vidéo, aller aux images, et on peut en prendre un. Je vais aller chercher quelque chose, celui-là a l'air cool. Maintenant, avis de copyright très rapidement, vous ne pouvez pas simplement aller en ligne saisir des images et les jeter sur un site Web que vous faites, ce serait une violation du droit d'auteur, très gros problème, ne faites pas ça. Si vous cherchez des images pour votre site Web, il y a beaucoup d'endroits pour les obtenir. Je vais inclure quelques sources de ressources à la fin de ce cours, vérifiez-le là-bas. Mais n'allez pas voler des images. Pour ce qu'on fait en ce moment, c'est bien parce que je ne vais pas mettre ça en ligne, ne vais pas en faire de l'argent et rien de tel, tout va bien. Lorsque vous trouvez une image que vous aimez, vous pouvez soit la télécharger, vous pouvez la télécharger directement ou vous pouvez copier l'emplacement de l'image et ensuite à partir de là, nous pouvons l'utiliser sur notre site Web. Revenons et nous allons taper, à l'intérieur des parenthèses ici, SRC qui signifie source, puis nous allons taper égaux et puis à l'intérieur des guillemets, nous allons coller toute cette chose que nous venons de copier. Certains d'entre eux vont être vraiment longs, certains d'entre eux seraient courts, dépend juste de l'URL. Si nous avions une image locale, que je vais vous montrer comment faire plus tard pour une vidéo, alors vous feriez simplement un lien vers cela ici. Mais en ce moment, c'est tout ce dont nous avons besoin pour qu'une image apparaisse sur notre site Web. Je vais sauver ça, revenir ici, rafraîchir notre page et vous pouvez voir que c'est là maintenant. Nous avons des titres, nous avons une image et nous commençons à arriver quelque part, ce qui est génial. Maintenant, couvrons quelques-unes des autres balises que vous utiliserez probablement tout le temps. L' un d'entre eux sera une balise de paragraphe et ce sera juste p. Une balise de paragraphe est l'endroit où vous placez la majeure partie de votre texte. Si vous aviez un article, votre texte serait à l'intérieur d'ici, si vous aviez une légende pour une image, alors si c'était long, vous voudrez probablement le mettre à l'intérieur de sa propre balise de paragraphe, des trucs comme ça. À l'intérieur, vous mettez du texte. C' est du texte que je tape, je vais le sauvegarder, revenir, rafraîchir. Vous pouvez voir ici que ce n'est pas gras, est pas italique, il n'y a rien de spécial à ce sujet. C' est juste la police de base par défaut et c'est ce que le paragraphe est, donc c'est génial. Regardons l'étiquette d'ancrage, quelque chose qui commence est vraiment un intuitif mais essentiel pour faire des sites Web. La balise d'ancrage, vous pouvez penser qu'elle est ancrée à un autre endroit sur Internet et qu'elle tient là et vous pouvez lui dire où elle est liée. Lorsque vous faites cela avec un attribut appelé href et cela signifie référence hypertexte.Cela va pointer vers un autre site Web. Nous allons ouvrir des devis et vous pouvez choisir n'importe quel site Web que vous voulez ici. Je vais choisir Google et la chose à retenir est que vous voulez mettre dans le préfixe pour l'ensemble du site, ce qui signifie que vous allez vouloir avoir le HTTP ou HTTPS. Tous les sites Web n'en ont pas besoin, mais certains le font pour être en sécurité, toujours l'inclure. Nous allons dire HTTPS :// , puis www.google.com et fermer la balise d'ancrage. Vous verrez ici qu'il a une balise de fermeture comme d'habitude et ensuite nous devons réellement mettre dans le lien sur lequel ils peuvent cliquer. En tant que bonne pratique, vous souhaitez indiquer à vos utilisateurs où vous les dirigez. Je taperais Google, l'enregistrer et actualiserais ma page. Vous pouvez voir qu'il existe un style par défaut pour les liens. Il change votre icône en une main et il apparaît comme souligné et violacé. Si je clique dessus, je vais à Google. Je vais revenir en arrière et c'est une bonne pratique, cela indique à votre utilisateur exactement où vous allez. Maintenant, vous pouvez tout aussi facilement taper quelque chose appelé Facebook et si nous rechargeons, maintenant il semble que c'est un lien vers Facebook, mais ce n'est pas le cas. Donc, ne brisez pas la confiance de vos utilisateurs en utilisant de mauvais liens pour les conduire ailleurs. C' est vraiment une mauvaise pratique et tout le monde va être très contrarié par elle et les gens ne resteront pas autour de votre site Web, gardez juste cela à l'esprit, c'est la syntaxe HTML de base. Il y a un peu plus que nous allons couvrir dans la prochaine vidéo avec HTML avancé, car certaines balises nécessitent plus d'attributs. Il y a des tags qui sont un peu bizarres que nous allons couvrir et nous allons le faire ensuite. Mais ce sont les bases, si vous avez cela, vous pouvez jouer et faire un site Web de base. Vous avez des en-têtes, des images, des paragraphes et des liens, des choses dont vous avez besoin pour aller sur n'importe quel site Web que vous voulez construire. Ce que nous allons aborder ensuite est une syntaxe HTML plus avancée où les balises et les attributs sont un peu plus confus et nécessitent certainement quelques explications si vous venez de commencer. 6. 2.3 - Un peu plus avancé en HTML: La première nouvelle balise que je veux vous présenter est la balise list, mais la balise list ne peut pas passer seule et elle n'est pas appelée list. Au lieu de cela, il y a deux listes que vous pouvez avoir. Il y a une liste ordonnée qui signifie OL, ce sont des choses où ils doivent être dans l'ordre, et le style correspondant va montrer qu'ils sont ordonnés, regardons ce que cela signifie. abord, nous fermons la balise et appuyez sur « Entrée », maintenant le mien fait l'indentation automatique, ce qui est vraiment fabuleux, si ce n'est pas le cas, je recommande d'indenter environ 3-5 espaces chaque ligne afin que vous sachiez que c'est une nouvelle ligne qui est à l'intérieur de cette balise. À l'intérieur de cette balise, nous devons mettre des éléments de liste, des choses qui doivent aller dans l'ordre. Une liste ordonnée, comme je l'ai dit, pour ce faire, nous devons mettre en LI, qui signifie élément de liste, et il doit être à l'intérieur d'un OL, UL ou d'un élément de menu, moment, nous allons juste couvrir l'OL et UL. UL signifie listes non ordonnées, que nous allons faire ensuite, l'élément de liste, nous le fermons et maintenant nous devons mettre du texte à l'intérieur. Que voulons-nous mettre à l'intérieur d'une liste ordonnée ? Eh bien, vous pouvez faire ce que vous voulez, je vais venir ici et je vais ajouter un titre qui dit les meilleurs jeux de tous les temps, maintenant ma liste a un titre et c'est une liste ordonnée parce que je les mets dans un classement, je vais dire Zelda, Je vais appuyer sur « Entrée » et ouvrir un autre LI, puis je vais dire Mario, je vais ajouter un LI de plus, puis Final Fantasy puis l'enregistrer. Nous allons revenir sur notre site Web, appuyer sur « F5" pour le recharger, faire défiler vers le bas, maintenant vous pouvez voir que j'ai mon titre, nous savons comment les utiliser, et nous avons notre liste qui a en fait des nombres à côté de ça. C' est le style par défaut pour les listes ordonnées, et c'est pourquoi il est vraiment important de s'assurer que vous utilisez OL et UL correctement. UL va juste être un point à côté, ce que nous allons faire maintenant. Faisons un autre cap et appelons ces aliments que j'aime. Il n'a pas besoin d'être dans n'importe quel ordre, c'est juste une liste. Nous allons dire UL et puis l'ouvrir et nous devons mettre dans la liste des éléments, j'aime la pastèque, l'article de la liste, j'aime la pizza et un autre élément de la liste, j'aime le soda. Sauvons ça, ouvre-le. Vous pouvez voir ici que maintenant, peu importe l'ordre dans lequel ils sont, je vais faire sauter ça pour qu'on puisse le regarder. Nous avons d'abord une liste ordonnée, puis nous avons une liste non ordonnée. Vous voudrez les utiliser comme bon vous semble, et bien sûr, quand nous arriverons à CSS, vous serez en mesure de changer tout cela avec seulement quelques lignes de code. Maintenant, nous commençons à entrer dans des balises plus avancées, vous pouvez voir que certaines balises que vous devez être imbriquées comme ceci. Un élément de liste par lui-même en dehors d'une balise ne va pas faire grand-chose. Si on met LI à l'intérieur d'ici et dit : « Bonjour. » Eh bien, il sera là, mais il va apparaître comme un élément de liste non ordonné par défaut, et cela semble juste très étrange, et je recommande que vous ne le faites jamais. Certaines balises doivent être imbriquées, c'est juste comme ça qu'elles fonctionnent, et en ce sens, regardons une balise assez importante qui a des attributs bizarres qui ne sont pas intuitifs, je vais vous montrer comment ils fonctionnent, mais sont vraiment essentiels pour presque tous les sites Web si vous voulez que les gens puissent interagir avec vous, et c'est le tag form. Celui-ci a en fait un nom qui a du sens, c'est une forme, on l'ouvre, vient sur une nouvelle ligne. Maintenant à l'intérieur d'ici, nous pouvons juste taper du texte et il apparaîtra comme ça ; prénom, sauvegardez ça, nous reviendrons. Eh bien, en ce moment, le prénom apparaît en bas. On dirait qu'il n'y a rien de spécial ici, mais il se passe quelque chose à l'intérieur de cette section. HTML, le site web sait que c'est un formulaire, plus tard, pas dans ce cours, mais quand vous voulez accepter l'entrée de l'utilisateur en utilisant soit PHP, C-Sharp, JavaScript, quelque chose d'autre plus tard pour activer ce genre de fonctionnalité, votre site Web va savoir que c'est l'endroit où ils vont l'accepter. La façon dont vous pouvez le faire visuellement est d'utiliser une autre balise appelée input. L' entrée est la façon dont vous obtenez l'entrée de l'utilisateur, cela va créer une boîte dans laquelle ils peuvent taper. Maintenant, il y a quelques attributs qui sont très importants pour l'entrée, nous allons dire que l'un d'entre eux est le type. Le genre que nous voulons va être du texte, je vais cliquer dessus et il tape du texte pour moi, ce qui est génial. Maintenant, nous devons lui donner un nom aussi, cette boîte de formulaire dans laquelle ils peuvent taper, nous allons donner un nom et nous allons l'appeler Prénom. Je vais mettre une autre balise appelée une balise de rupture, qui est BR, qu'on n'a pas de balise de fermeture car tout ce qu'il fait est d'insérer une pause, fondamentalement une nouvelle ligne, fondamentalement un peu d'espace entre vos éléments ici donc qu'il y a de l'espace entre un élément et un autre. Si nous venons ici, nous ouvrons ça, maintenant nous pouvons voir qu'il y a un endroit pour taper, je peux taper mon nom. Si vous commencez à taper quelque chose que vous avez tapé dans quatre, le remplissage automatique de votre navigateur peut apparaître et être très utile, et c'est une zone de formulaire. Allons de l'avant et ajoutons un peu plus et en fait faire comme un beau formulaire, disons que c'était un formulaire que les gens pourraient remplir sur votre site Web pour rejoindre une liste de courriels. Une des choses que vous voudrez serait un e-mail, nous allons mettre dans un e-mail et ensuite nous devons taper l'entrée, faire une autre balise. Cette fois, ce sera un email tag et le nom va être email, mettre une autre pause là, sinon, tous ces éléments vont être vraiment proches et nous ne voulons pas cela. Un autre que nous pouvons avoir à l'intérieur d'ici est un bouton radio. Un bouton radio sont ces petits cercles sur lesquels vous pouvez cliquer pour avoir différentes options. Laissez-moi vous montrer ce que c'est pour que vous puissiez le comprendre. Faisons une nouvelle balise d'entrée, cette fois nous allons lui donner un type de radio. Ici, le nom va être, disons au lieu d'une liste de courriels, ils ont commandé une chemise ou une sorte d'article portable qui a une taille, nous allons dire que le nom est égal à la taille. Nous devons lui donner une valeur, car cette valeur va apparaître juste à côté du bouton. La valeur ici sera petite. Une propriété que nous pouvons définir qui ne nécessite pas de mettre dans notre propre texte est appelée Vérifié, nous pouvons dire que ce bouton va commencer vérifié, nous allons mettre petit juste comme un texte juste à côté de cela. À la fin de notre balise d'entrée, ajoutez petit, pas à l'intérieur de celui-ci, alors nous pouvons revenir et nous pouvons regarder et voir que le bouton d'entrée, le bouton radio, est juste là et il dit petit juste à côté. Nous pouvons ajouter un peu plus, si je copie ceci, je pourrais le coller. Maintenant, nous pouvons changer la valeur pour dire moyen, se débarrasser de cette icône cochée et changer le texte en moyen, l'enregistrer, recharger et maintenant nous avons deux options. Les boutons radio sont des choses qui ne peuvent être cliqués, un seul d'entre eux peut être sélectionné, ce qui peut être très utile lorsqu'ils ne peuvent en choisir qu'un, vous avez aussi des choses comme des cases à cocher et des menus déroulants, que nous sommes ne va pas les couvrir tous parce qu'il y a juste trop, mais à la fin de ce cours, je vais vous référer à des ressources vraiment géniales qui agiront comme un index ou une galerie que vous pouvez simplement rechercher si jamais vous vouliez pour faire une case à cocher au lieu d'un bouton radio. Il aura de la documentation, des exemples, du code, tout parce que je ne veux pas essayer de couvrir toutes les balises que vous pourriez faire. Cela prendrait trop de temps et, à mon avis, serait inutile parce que même si je conçois des sites Web depuis des années, j'utilise toujours ces ressources pour chercher comment faire les choses, je n'ai pas tout mémorisé et je ne m'attends pas à ce que vous mémoriser n'importe quoi non plus. Eh bien, rien, mais pas tout. Il y a certaines choses que vous voudrez certainement garder à l'esprit parce que nous les utilisons si souvent, mais d'autres choses, vous pourriez ne pas en avoir besoin tout le temps, et c'est tout à fait bien. Ce sont quelques-unes des balises les plus délicates, comme je l'ai dit, il y en a beaucoup plus, mais pour ce que je veux couvrir, c'est suffisant. C' est un HTML de base qui vous permet de couvrir votre site Web avec des informations, des images, des trucs comme ça, tout cela est vraiment utile. C' est sur les sites Web, partout sur Internet, probablement sur tous les sites, sauf peut-être les listes parce que ce sont un peu plus de niche, mais ils sont partout. C' est ce qu'il faut pour commencer, et c'est tout ce que je voulais couvrir. La dernière chose pour HTML cependant, va être la structure nécessaire, que j'ai mentionnée lorsque nous avons commencé la section HTML. Maintenant, je veux couvrir dans la prochaine vidéo parce que vous en avez besoin si vous allez réellement mettre votre site Web en ligne, si vous ne l'avez pas, vous aurez beaucoup d'ennuis. Ouais, je pense que c'est une bonne raison pour être sûr de le mettre là dedans. Dans la vidéo suivante, nous allons couvrir la structure nécessaire que vous devez avoir à l'intérieur de votre document HTML. 7. 2.4 - Structure nécessaire: Maintenant, nous devons nous attaquer à la structure nécessaire pour que votre navigateur Web ou n'importe quel navigateur puisse l'interpréter correctement comme un site Web. Les informations que nous allons aborder ne vont vraiment pas altérer l'apparence ou la sensation de votre site Web. Nous allons inclure un titre pour votre page qui le fera, et c'est vraiment important, mais beaucoup de ces informations ne sont pas pour la conception. Au lieu de cela, c'est pour le navigateur, c'est pour le moteur de recherche, c'est pour les méta-informations que les choses doivent connaître sur votre page, mais la page elle-même ne va pas changer. Cela dit, c'est toujours très important. Si vous ne l'avez pas, votre site Web ne fonctionnera pas correctement. Cela peut même ne pas fonctionner du tout parce que votre navigateur ne va pas savoir quel type de fichier il s'agit. En haut, appuyez sur Entrée quelques fois et donnons-nous un peu d'espace pour travailler. La toute première chose que vous devez y mettre est le genre de document qu'il est, et bien sûr cela se fait à l'intérieur des balises. Ouvrez un nouveau et un crochet gauche faire point d'exclamation, DOCTYPE toutes les capitales. Ensuite, nous devons lui dire que ce sera un type de document HTML, puis fermer la balise. Cela doit être la toute première chose sur chaque page que vous avez. C' est essentiel. Si vous ne l'avez pas, votre navigateur Web ne saura pas qu'il s'agit d'un site Web et il ne saura pas quoi faire. Eh bien, il pourrait ne pas le savoir. Certains pourraient être en mesure de le comprendre, mais si vous ne l'avez pas, vous allez rencontrer des problèmes, alors assurez-vous qu'il est là. La prochaine chose sera la racine de votre site Web. C' est en fait la balise HTML elle-même. HTML, fermez ça. Maintenant, cela doit aller tout en bas, parce que tout ce qui se trouve à l'intérieur de notre site Web doit être enfermé dans HTML. Je vais découper ça, faire défiler vers le bas, et le coller ici. Maintenant, tout ce que nous avons fait est entre ces balises HTML, ce qui est essentiel parce que tout le code maintenant dans ces balises est HTML. La prochaine chose, c'est la tête. Donc on va ouvrir ça et taper la tête. Cela n'a pas ouvert et fermé la balise. Nous allons appuyer sur Entrée parce que nous allons mettre un peu d'informations à l'intérieur d'ici. La première chose que nous voulons mettre comme titre, donc le titre que nous voulons utiliser sera le titre de notre page web. Nous taperons le titre et mettrons ce que vous voulez à l'intérieur d'ici. Je vais enregistrer mon premier site web. Sauvegardez ceci, venez sur notre page web. Ensuite, vous pouvez voir que cet onglet a maintenant le titre que nous voulons. C' est ainsi que vous modifiez le titre, et vous pouvez avoir un titre différent pour chaque page de votre site Web, bien que vous vouliez probablement le garder cohérent. Si vous avez un site Web appelé Facebook, alors vous voudrez peut-être garder Facebook comme titre principal pour tout. Mais si elles sont comme sur Messenger, vous pourriez faire comme une barre oblique ou un tiret et dire Messenger, donc ce serait Facebook Dash messenger pendant que vous êtes dans Messenger. Vous comprenez l'idée, mais gardez le titre cohérent et facile à lire parce que c'est vraiment important pour la facilité d'utilisation. Il y a plus d'informations que nous pouvons mettre à l'intérieur d'ici. Il y a des balises méta, nous pouvons réellement taper meta. C' est des choses comme les mots-clés et les informations du navigateur. On ne va pas le couvrir maintenant parce que ce n'est pas essentiel et je veux le garder nu. Mais c'est quelque chose que je vous encourage à rechercher, et assurez-vous que vous comprenez quand vous publiez votre site Web. Des choses comme l'optimisation des moteurs de recherche, ils vont utiliser des mots-clés et des phrases clés, et vous mettez cette information à l'intérieur de la balise meta, à l'intérieur de la balise head. Impressionnant. La dernière chose est en fait le corps. On va ouvrir cette étiquette, taper le corps, le fermer. Ensuite, nous devons prendre cette balise de fermeture, la couper, et la mettre tout le chemin vers le bas avant HTML, puis notre site Web est à toutes fins intensives, complet. Maintenant, nous avons toute la structure nécessaire pour rendre notre site Web lisible pour les navigateurs Web et affichable sur tous les appareils. Maintenant, si on ouvre ça, rafraîchissez-le. Rien n'aura changé. Rien ne va avoir l'air différent. Mais maintenant votre navigateur sera en mesure de le lire correctement et vous n' aurez aucun problème de le montrer partout. C' est très important. C' est du HTML en un mot. Vous savez maintenant comment l'utiliser, quoi en faire. La prochaine chose que nous allons couvrir est comment le concevoir, qui va être notre CSS. Vous allez devenir un maître de l'apparence de votre site Web comme vous le souhaitez, juste comme vous le souhaitez. Il sera conforme à chaque victoire. On va couvrir ça ensuite. 8. 3.1 - Qu'est-ce que CSS ?: Maintenant, il est temps d'entrer dans CSS. CSS signifie Cascading Style Sheets. La mise en cascade est une façon de décrire leur fonctionnement et leur apparence. Parce que la syntaxe de base est de lui donner un type, ou une balise, ou un ID, ou une classe ou quelque chose à cibler, puis vous lui dites de changer beaucoup d'attributs à ce sujet. Nous allons approfondir ces choses plus tard. Mais je veux juste prendre un moment pour parler de ce que CSS est et comment il est différent du HTML. La différence se démarque probablement tout de suite. y a vraiment pas d'étiquettes à l'intérieur d'ici. Vous ciblez des balises, mais vous ne voyez pas de crochets d'angle ici. Vous ne lui donnez pas une balise P et la remplissez avec du texte. CSS est seulement pour le style. Maintenant, CSS peut aller très loin dans ce style. Il existe en fait un système de grille que vous pouvez implémenter, qui dépasse largement le cadre de cette classe, pour la façon dont votre contenu devrait être disposé à la fois sur de grands appareils et appareils mobiles. Il y a des animations que vous pouvez faire, qui à la fin de cette section, je vais vous montrer quelques animations CSS vraiment cool qui sont là dans la nature, juste pour éveiller votre imagination. CSS peut faire beaucoup, mais sa fonction principale est de prendre le code HTML dans lequel vous avez codé et de le concevoir d'une manière spécifique. Vous pouvez changer des choses comme les couleurs, la rotation, les arrière-plans, l'animation. Vraiment tout ce que vous pouvez penser, CSS peut le cibler , le changer, et le faire exactement comme vous le souhaitez. Maintenant, ce n'est pas facile quand je dis que vous pouvez le faire comme vous le souhaitez, c'est vrai, mais cela peut être délicat à certains moments car il y a des paramètres par défaut que les balises HTML ont. Comme certains tags sont censés prendre une ligne entière, certains ne le sont pas. Lorsque vous changez cette propriété, choses bizarres peuvent arriver et cela nécessite beaucoup de bricolage, mais vous pouvez le faire. Je vous garantis que vous pouvez rendre votre site Web exactement comme vous le souhaitez. Ça va juste prendre de l'entraînement et de la patience. Mais c'est la différence entre CSS et HTML. Pour un, ils ont des noms différents. Pour deux, l'un d'eux est un langage basé sur les balises et l'un eux est plus d'un langage de conception en cascade. Alors ils vont en tandem. Vous les utilisez ensemble parce que CSS sans HTML, eh bien, il n'y a pas beaucoup que vous pouvez le faire un peu, mais vous ne pouvez pas vraiment faire grand-chose. HTML sans CSS. Oui, bien sûr, c'est là. C' est instructif, je suppose, mais personne ne veut le regarder longtemps. Ils doivent aller ensemble et quand ils le font, ils sont parfaits. Ce que nous allons faire d'abord dans la prochaine vidéo, c'est commencer à cibler des balises comme vous pouvez voir ici et je vais vous montrer comment nous pouvons modifier certains attributs de balises spécifiques pour les faire ressembler et faire ce que nous voulons. 9. 3.2 - Élaborer des étiquettes HTML: Comme je l'ai dit, CSS sans HTML n'est pas si utile. Cela signifie que nous allons avoir besoin de HTML et au lieu de coder un autre site Web, je vais juste prendre ce que nous avons fait la dernière fois. Si vous voulez aller de l'avant et écrire un peu plus de HTML, je vous encourage à pratiquer cela autant que vous pouvez et puis revenir quand vous êtes prêt avec cela. Cela dit, je ne vais pas le faire, je vais juste prendre exactement ce qu'on a fait. Je vais le copier, le coller à l'intérieur d'ici. Puis dans le mien, je vais ouvrir ce dossier parce que c'est comme ça que ça marche. Il y a mon code HTML. Maintenant, un fichier CSS a une extension of.css. Si vous avez un TextPad, vous y créez un fichier. Si vous utilisez un logiciel, faites-le comme vous le faites. Ici, je vais cliquer sur Nouveau fichier. Le nom traditionnel est site.css. Maintenant, les noms CSS peuvent varier énormément. Vous pouvez l'appeler style, styles, vous pouvez avoir une page CSS pour chaque page de votre site Web, ce qui, si c'est grand, je ne recommanderais pas, plus petit serait correct. Mais traditionnellement, il s'appelle site.css. Maintenant, la première chose que nous devons faire est en fait lier notre CSS à notre HTML. Là où nous le faisons, c'est à l'intérieur de la tête. Maintenant, ça va être un lien. Maintenant, nous l'avons examiné très brièvement. On n'en a pas vraiment parlé, mais maintenant on va utiliser cette étiquette. Nous allons créer un lien vers notre page CSS. Heureusement, notre page CSS est en fait juste ici, donc lier à elle va être assez facile. Si vous l'avez dans un dossier ou quelques dossiers, alors vous devez utiliser un point, des points et une barre oblique. Ça ressemble à quelque chose comme ça et à l'intérieur de ce que je vais te montrer dans une seconde, ça veut dire un dossier. Si vous avez besoin d'aller dans un dossier, c'est comme ça que vous le faites. Sinon, vous devriez être capable de le faire comme ça. Il y a quelques attributs pour le lien. Le premier est rel. Cela signifie la relation. La relation pour ce lien va être feuille de style, car il y a beaucoup de choses auxquelles vous pouvez lier. Le type va être spécifiquement text/css, parce que c'est le fichier que nous allons utiliser ici. Ensuite, nous utilisons href. Encore une fois, nous l'avons vu dans la balise d'ancrage et nous lui donnons le nom de notre fichier CSS, donc le nôtre est appelé site.css, puis nous fermons cela et l'enregistrons. Alors nous sommes prêts à y aller. Je vais aller de l'avant et ouvrir ça et m'assurer que nous avons le même site, tout ressemble le même. Impressionnant. Maintenant, ce que nous allons faire est dans notre page CSS, nous allons d'abord cibler les balises intégrées que nous avons. C' est parce que ce sont les plus faciles à comprendre et à mettre en valeur. Si nous regardons la structure, une des balises que nous avons est en fait la balise body. Cette balise corporelle encapsule tout. Si vous souhaitez modifier l'arrière-plan de votre site Web, la façon dont vous le faites est de cibler le corps. Tout ce que nous avons à faire est de taper le nom de ce corps de tag et ensuite nous devons faire ce que j'appelle des accolades. Cela va être décalage, et cela va être à droite de la lettre P, va être une accolade ouverte et parfois ça va se terminer. Si elle ne se termine pas, alors faites le décalage et le suivant sur et il fera un crochets bouclés ouverts et fermés. Ceux-ci que vous voyez tout le temps dans la programmation. Pour CSS, tout le style que nous allons changer pour le corps est maintenant entre ces deux crochets bouclés. Pour utiliser CSS, nous l'ouvrons comme ceci et c'est à quoi ressemble la syntaxe. Vous mettez dans le style, l'attribut que vous souhaitez styliser. Dans ce cas, nous allons changer la couleur. Nous allons dire la couleur de fond, puis nous utilisons pour faire un deux-points, qui est passer à droite du L, deux-points, puis lui donner une couleur. Je vais dire juste lire. Maintenant, vous pouvez également voir ici qu'il a la valeur x de cette couleur et du code VS et de nombreux autres éditeurs. Vous pouvez également choisir parmi les couleurs RVB. Si je garde ça, je peux le changer. Maintenant, je peux y aller aussi maintenant, mais tu peux. À la fin d'un attribut d'une propriété, vous placez un point-virgule. Même chose, juste pas de quart. C' est comme ça que vous le coiffez. C' est le style par défaut. Je vais enregistrer ceci et nous ouvrons notre site web. Mon CSS a été automatiquement appliqué et un rouge très vif a été appliqué à toute cette page. Maintenant, les éléments formés ne sont pas rouges car ils ont déjà un style spécifique attaché à eux. Mais tout le reste est maintenant rouge. Maintenant que le rouge est très brillant. Dans le code VS, je peux passer la souris sur la couleur et ensuite je peux la changer. Je vais le ramener à un rouge beaucoup plus foncé, sauvez-le. On y va. C'est un peu plus facile pour les yeux, je crois. C' est comme ça que vous ciblez une balise. Maintenant, nous avons regardé beaucoup d'étiquettes à l'intérieur d'ici. Toutes ces balises sont à saisir. Mais la chose à retenir est que tous seront changés, donc h_3, nous avons quelques balises à l'intérieur d'ici. Allons et changeons l'une de ces balises h_3 ; h_3, ouvrez et fermez les crochets bouclés. Nous ne voulons pas changer la couleur d'arrière-plan, car il a une couleur d'arrière-plan, mais au lieu de cela, modifions la couleur de la police. Pour ce faire, ce n'est pas la couleur de la police, c'est en fait juste de la couleur, donc la couleur et changeons cela en blanc. Je vais le sauver. Maintenant, chaque rubrique est blanche, chaque rubrique trois. C' est vraiment important de se souvenir. Parce que si vous modifiez une balise, lorsque vous utilisez cette balise sur l'un de vos sites qui utilisent cette page CSS, tous les changements seront apportés. Parfois, c'est bien. Vous pouvez souhaiter que tous vos en-têtes aient le blanc comme couleur principale. Si c'est le cas, vous pouvez faire quelque chose avec des virgules. À l'intérieur, nous pourrions ajouter une virgule et ensuite nous pouvons appliquer ce style à autre chose. Si j'ai dit h_1, h_2, h_4, h_5 et h_6, sauvegardez ça. Vous pouvez maintenant voir que toutes mes rubriques sont blanches, ce qui est génial. Mais si, pour une raison quelconque, nous ne voulions pas que l'un de ces titres soit blanc, il n'y a aucun moyen de changer cela parce que nous avons appliqué ceci à chaque en-tête de chaque page sur l'ensemble de notre site Web. C' est vraiment important de se souvenir. Pour l'instant, on va garder ça pareil. Je vais vous montrer comment changer cela dans les prochaines vidéos lorsque nous ciblons des balises et des éléments plus spécifiques. Nous avons des étiquettes ici. Nous avons modifié la couleur d'arrière-plan et la couleur, choses que vous allez probablement faire tout le temps pour s'adapter au thème de couleur que vous choisissez pour votre site Web. Mais CSS peut changer beaucoup plus que juste, je suppose, le style d'un élément. Il peut changer la façon dont un élément se comporte réellement sur la page. Si nous allons regarder cela, vous pouvez voir que chacun de ces titres, et même comme ce paragraphe, il y a beaucoup de place par ici à droite. Il n'y a aucune raison qu'ils ne puissent pas être ici, sauf que le style intégré dit le paragraphe, le lien, tous ces trucs qui sont sur leur propre ligne. Ils occupent une section entière. Nous pouvons vraiment le voir si nous arrivons et que nous changeons quelque chose sur nos titres. Nous pouvons changer ce qu'on appelle text-align et faire un deux-points, puis nous disons centre, mettre un point-virgule à la fin. Cette ponctuation est très importante. Si nous arrivons, vous pouvez voir maintenant qu'ils sont centrés sur toute la page. C' est parce qu'ils vont essentiellement de la gauche à la droite et occupent toute cette section. Cela ressemble plus à un outil de titre. Je pense que c'est beaucoup plus logique de les centrer. C' est cool. Mais si nous ne voulions pas qu'ils prennent toute la page et que nous voulions qu'ils soient plus en ligne. Eh bien, ça entre en jeu avec quelque chose qui s'appelle l'affichage. La première chose que nous ferons est de taper display puis deux-points. Maintenant, il y a beaucoup d'options. Ces options sont déroutantes lorsque vous commencez. Si vous voulez juste style et ne pas changer la fonctionnalité réelle des balises, alors je ne gâcherais pas avec l'affichage, mais finalement vous allez devoir le faire, alors gardez cela dans votre esprit. L' affichage indique comment les éléments sont alignés sur la page. Il y a des éléments qui sont des éléments de bloc. Les éléments de bloc sont, eh bien, ils sont blocs. Ils prennent une section entière, généralement une ligne entière de la page. C' est comme ça qu'ils fonctionnent. Il y a des éléments qui sont bloc en ligne. Ces éléments prennent un bloc, mais ils ne prennent pas toute la page. Maintenant, vous pouvez voir que tous nos titres, eh bien, ils occupent une certaine place et ensuite ils ne prennent pas plus que ce dont ils ont besoin. C'est logique. Tu as ça. Cela signifie que notre image peut être là-bas aussi, ce qui est cool. Maintenant, il y a aussi d'autres options. Certains d'entre eux aiment inline-flex. Je ne m'inquiéterais pas pour l'instant. Flexbox Tables, des trucs comme ça. Cela a à voir avec la grille CSS, qui est vraiment puissante. Mais encore une fois, je ne veux pas en parler maintenant parce que c'est un cadre entier que CSS a construit depuis quelques années, qui une fois que vous devenez plus avancé, regardez certainement, mais pour l'instant, nous pouvons faire bloc, nous pouvons faire inline-block, nous pourrions aussi ne pas faire, sorte qu'il disparaît complètement. Maintenant, il est parti. Vous pouvez également faire hériter, ce qui est déroutant si c'est le seul dont vous héritez, vous pouvez penser qu'il y a une hiérarchie ici et c'est là que la partie en cascade entre en jeu. Parce que si je devais dire que la rubrique 2 hérite de la rubrique 1, alors tout ce que je fais à la rubrique 1 hériterait de la rubrique 2. Mais cet héritage est encore un peu plus que ce que je veux couvrir en ce moment, mais je voulais te le montrer parce que je pense que c'est vraiment important. La dernière balise affichée que je veux vous montrer est simplement appelée en ligne. Ici, en ligne va faire exactement la même chose que nous avons fait avant, mais maintenant ce ne sera même pas un élément de bloc. En le regardant, il ne peut pas être le même, mais il a des propriétés d'affichage différentes. Ces propriétés d'affichage, sont la façon dont vous allez réellement aligner les éléments ici, donc si nous voulions diviser notre page comme en deux lignes, alors nous aurions besoin de changer nos en-têtes de niveau bloc en bloc ou en bloc en ligne, sinon nous ne pourrions rien avoir côte à côte. L' affichage est vraiment puissant et peut devenir déroutant assez rapidement, alors gardez cela à l'esprit et jouez avec. Mais ne soyez pas frustré car il peut être difficile d'exécuter exactement comme vous le souhaitez. Mais il y a aussi des tons et des tons d'autres propriétés. Je vais essayer d'en couvrir quelques-uns ici, feu rapide, mais je sais juste qu'il y a tellement de propriétés CSS et de façons de l'utiliser que je ne peux pas toutes les couvrir. Mais encore une fois, je vais vous montrer quelques ressources à la fin de ce cours qui sont vraiment fantastiques, surtout pour CSS, parce qu'il y a vraiment de grands sites web dédiés à l'utilisation de CSS et c'est vraiment fantastique et très utile. Je vous encourage à les consulter. Faisons un feu rapide. Parlons de rembourrage. Faisons h1 et faisons une couleur de fond sur cela et nous allons changer cela en bleu. Ouvrons ça. Maintenant, nous avons une couleur de fond bleu vif pour notre titre. Vous pouvez voir de quoi je parle, quoi cet affichage de gauche à droite. Maintenant, deux propriétés importantes sont le rembourrage et la marge. Rembourrage est l'espace à l'intérieur de cette couleur d'arrière-plan. Si nous arrivons et changeons le remplissage, nous pouvons changer le remplissage avec des pixels, donc nous allons lui donner 50 pixels, donc nous disons 50px. Je vais sauver ça, et ensuite je dois changer ce bleu. Ça me fait même mal aux yeux. Allons le faire tomber. Vous pouvez voir que maintenant tout l'espace à l'intérieur de ce titre, c'est-à-dire le remplissage qui est associé à cet élément. Chaque élément a une quantité d'espace autour d'elle, marge et rembourrage. Le rembourrage est à l'intérieur de cet élément, il y a donc quatre éléments pour le rembourrage. Vous pouvez faire le rembourrage, à gauche, en haut, à droite et en bas, et chacun que vous pouvez contrôler individuellement ou vous pouvez simplement les régler tous comme nous l'avons fait auparavant. Si nous voulions seulement que le fond de rembourrage soit de 50 pixels, nous pourrions le faire et c'est exactement à quoi cela ressemblerait juste là. Maintenant, débarrassons-nous du rembourrage et allons à la marge. Tout comme le rembourrage, il y a en haut à gauche, à droite et en bas tout autour des éléments, mais la marge est l'espace autour de l'élément réel par rapport aux autres. Si je viens et ladite marge, 50 pixels, vous pouvez voir que la couleur d'arrière-plan n'a pas augmenté, mais l'espace autour de ces éléments et sa relation avec le haut de la page est maintenant beaucoup d'espace autour d'elle. La marge est cet espace qui n'est pas occupé par la couleur d'arrière-plan là-bas et même sur ces bords, vous pouvez voir qu'il n'est pas proche, aussi proche qu'avant. Marge, rembourrage, deux choses très importantes à parler. Maintenant, un autre, allons vers le bas et allons à l'image. choses que vous pouvez ajuster sont la largeur et la hauteur, et ce n'est pas seulement avec des images, mais ce sera le plus facile à voir ici. Si j'ai dit largeur 25 pour cent, notre image occupe maintenant environ 25 pour cent de notre écran. Vous pouvez le voir si je viens dans l'index et que je copie cette image, et je la colle trois fois de plus. Vous pouvez voir maintenant qu'il prend à droite environ 25 pour cent. Il y a un peu d'affichage et un peu de rembourrage sur le corps lui-même. Vous pouvez voir que même avec les éléments d'arrière-plan de notre titre, il y a un peu d'espace à gauche et à droite, donc nous ne pouvons pas faire 25 pour cent tout le long du chemin. Mais vous avez l'idée que maintenant cette image occupe 25 pour cent de notre page. Vous pouvez modifier cela avec le pourcentage ou si vous avez une hauteur spécifique que vous voulez qu'elle soit, vous pouvez le faire en pixels. Si nous voulions que notre image soit de 250 pixels de large, nous pourrions le faire juste là. Si nous voulions qu'il soit de 1000 pixels de hauteur, nous pourrions le faire aussi. Évidemment, il déforme l'image, pas génial, mais vous pouvez le faire, de sorte que vous avez un contrôle complet sur la façon dont cela ressemble. Allons-y et je vais ajouter une largeur de 50 pour cent, donc cela le rend assez grand et une chose vraiment cool que vous pouvez ajouter à l'intérieur ici, CSS peut faire, comme je l'ai dit, propos de tout ce que vous voulez. L' un d'eux quand il s'agit d'images est le rayon de bordure, donc vous pouvez ajouter, j'ai eu un effet arrondi, ce qui me semble vraiment agréable. Il semble vraiment bon sur beaucoup de différents sites Web de fonctionnalité moderne de juste arrondir toutes vos images. Tu peux le faire si tu veux. C' est cool à avoir. De là, je pourrais continuer, comme je l'ai dit. Mais ce sont les bases de celui-ci. Si vous utilisez un IDE, ce que j'espère que vous l'êtes lorsque vous apprenez CSS parce que cela aide vraiment. Tout ce que vous avez à faire est de taper une lettre, donc si j' ai tapé un, je pourrais voir tous les CSS qui commencent par un. Si je voulais regarder, la même chose. Des choses comme la taille de la police, vous pouvez changer cela bien sûr, donc nous pourrions changer cette taille de police de chaque titre pour être de 50 pixels, alors ils n'ont pas l'air très différent, mais ils le sont toujours, donc il y a ça. Je vous encourage à jouer, voir ce que vous pouvez trouver quand il s'agit de CSS, et à voir ce que vous pouvez découvrir, il y a des tonnes de choses que vous pouvez faire. La prochaine chose que nous allons couvrir, et donc ils parlent plus de styles parce que nous pouvons le faire pour toujours. Nous allons parler de la façon de cibler des éléments spécifiques, la fois un à la fois et en groupes. 10. 3.3 IDs et cours: Maintenant que vous savez comment cibler les balises, vous pouvez faire beaucoup. Il y a beaucoup de choses que vous pouvez changer, mais parfois vous ne voulez pas beaucoup changer. Parfois, on ne veut que changer un peu. C' est là que les identifiants et les classes entrent en jeu. Ces deux attributs sont des attributs que vous pouvez appliquer à n'importe quelle balise HTML. Allons dans ce paragraphe ici, et à l'intérieur de la balise de paragraphe, ouvrez-le avec un espace, et mettons ID, et appuyez sur « Entrée ». Ici, nous pouvons taper un nom. Ce nom peut être tout ce que vous voulez, mais je vous encourage à le rendre logique. Si c'est juste une chaîne de lettres et de chiffres, oui, ça fonctionnera mais pour avoir de bonnes pratiques de codage, vous voulez en faire un nom significatif. Ce serait comme le paragraphe d'introduction. Je vous encourage également à utiliser la convention de nommage CSS, qui est la séparation par un tiret et vraiment aucune capitalisation du tout. Je vais sauver ça. Maintenant, nous avons une balise d'identification associée à ce paragraphe. Cela ne fait rien en soi. Voici le texte, mais il nous permet d'entrer et de changer manuellement cette balise contre tout le reste. Pour vous montrer que c'est vrai, ajoutons une deuxième balise très rapidement. Je vais mettre, je suis plus de texto. Maintenant, nous avons deux textes, deux paragraphes, et nous ne ciblerons qu'un d'entre eux. Je vais entrer sur le site, sur le CSS, et je vais dire symbole de livre ou hashtag, est comme ça que vous ciblez les ID. Donc, livre le symbole et puis mettre dans le nom que vous avez mis là. Intro paragraphe, ouvrez-le et fermez-le comme nous le faisons normalement, puis donnons-lui une autre couleur. Disons que la couleur est égale au violet. Ouvrons ça. Maintenant, cette couleur est pourpre. Nous ne ciblons qu'une seule couleur. Maintenant, vous pouvez à peine lire ça alors à la place, je pense que ce que nous allons faire est de changer la couleur de fond en violet. Ou changeons-le en aqua, c'est une couleur plus agréable. Vous pouvez dire que c'est un élément de niveau bloc, et il a maintenant un fond d'aqua, et celui-ci ne le fait pas. C'est une pièce d'identité. ID que vous utilisez uniquement sur un élément. Donc, si je voulais entrer et changer ce paragraphe à quelque chose, je ne viendrais pas dire, introduction paragraphe. Maintenant, ça va marcher, mais c'est vraiment, vraiment une mauvaise pratique. identifiants en eux-mêmes sont censés être pour un seul élément et c'est tout, rien d'autre. Mais si vous voulez plus d'un élément, que vous aurez beaucoup de temps, vous voudrez utiliser une classe. C' est ce que nous allons faire en ce moment. Allons et disons que cette liste ordonnée avait une classe. On va dire la classe et l'ouvrir et lui donner un nom. On va lui donner un nom de liste. Nous descendons ici à l'UL et nous dirons, classe égale aussi. Parce que les classes peuvent être sur autant d'éléments que vous le souhaitez. En fait, vous pouvez les combiner et en avoir beaucoup, beaucoup que vous voulez. Ajoutons une seconde ici juste pour vous montrer que nous pouvons avoir plusieurs classes. Je vais dire, fond cool. Cette liste ordonnée a une classe de liste et un arrière-plan cool. Celui-ci a juste une liste. Maintenant, pour accéder à la liste, vous faites un point. Je vais dire, liste. Donc c'est le premier. Ensuite, je vais faire period.cool-background, cela changera chacun de ceux-ci à son tour. Le premier est notre liste. Allons de l'avant et remonter la taille de la police à 25 pixels. Ensuite, nous pouvons jeter un oeil aux listes, et elles sont beaucoup plus grandes en taille de police. C' est génial. Maintenant, qu'en est-il de l'arrière-plan cool ? Eh bien, c'est une liste pour qu'elle puisse être appliquée à plusieurs éléments, et nous pouvons avoir quelque chose de spécifique. Alors changeons la couleur de fond en aigue-marine. C' est un nom qui sonne cool. Un point-virgule à la fin de ça. Maintenant que l'on a l'arrière-plan, et vous pouvez également voir qu'il s'agit d'un élément de niveau bloc. Lorsque vous commencez à créer des sites Web plus volumineux, la chose que vous allez vouloir faire est compartimenter vos classes et les effets qu'elles ont. Ceci est avancé, mais je veux en parler parce que si vous commencez à faire votre CSS comme ça, alors vous serez beaucoup mieux que d'essayer de le changer plus tard. A l'intérieur de notre site, si nous avions plusieurs éléments que nous voulions être d'un élément d'arrière-plan cool, mais ils ont aussi d'autres choses comme, ils étaient de grande police, mais nous ne voulions pas qu'ils soient tous comme ça. Ensuite, ce que nous voudrions faire est de faire une classe comme un fond cool, et il ajuste juste juste la couleur de fond. Donc, nous avons cette classe de fond dans laquelle nous pouvons aller et nous pouvons réellement appliquer à tout. Si cet élément, la balise d'ancrage, nous voulions que ce soit un fond cool, alors nous pourrions le faire. Vous pouvez voir que ce n'est pas une balise de niveau bloc, mais il a maintenant ce fond cool. Si nous voulons que ce soit une police plus grande, alors au lieu de changer la classe d'arrière-plan cool pour avoir une grande police, nous pourrions simplement ajouter cette classe de liste car en ce moment, elle augmente simplement la taille de la police, puis elle a une grande police. Vous n'avez pas besoin de faire une classe pour chaque style unique que vous appliquez, mais il peut être très utile de mettre certains styles dans une classe, puis d'appliquer plusieurs classes à vos éléments. C' est juste quelque chose à garder à l'esprit. Si vous pouvez apprendre à faire votre CSS comme ça, je pense que vous serez beaucoup mieux sur la route parce que c'est plus facile à gérer, plus facile à modifier, et c'est beaucoup plus facile à lire si vous avez des noms descriptifs sur vos classes. Mais c'est ainsi que vous pouvez cibler des éléments spécifiques avec des ID et des éléments généraux, mais pas toute la balise avec des classes. Cours et tags, vous allez vous retrouver en utilisant tout le temps partout. Assurez-vous de vous rappeler comment y accéder avec le hashtag et la période, puis vous serez prêt à partir. La dernière chose que je veux vous montrer est juste quelques animations de partout sur le web qui utilisent CSS et certaines des choses vraiment cool que vous pouvez faire pour vous inspirer à sortir et à les apprendre. Parce qu'une fois que vous connaissez les bases de CSS, comme vous le faites, vous pouvez aller là-bas et copier le CSS de quelqu'un, et le disséquer , et le lire, et comprendre exactement comment cela fonctionne, puis le jeter sur votre site Web. C' est l'une des choses vraiment cool sur Internet, c'est qu'il y a tellement de choses cool là-bas que les gens sont prêts à partager et à vous donner, et tout ce que vous avez à faire est d'apprendre comment ils fonctionnent pour être en mesure de les mettre sur votre propre site Web. Regardons quelques-unes d'entre elles ensuite. 11. 3.4 - Quelques trucs CSS géniaux: Très bien, ce sont des choses qui ont été faites avec du CSS pur. La plupart d'entre eux sont à l'intérieur d'ici, le CodePen.io, qui si vous commencez à chercher des questions et des exemples, vous finiriez probablement ici. C' est une chose vraiment, vraiment cool qui permet aux gens simplement sortir leur code et vous pouvez le voir dans des exemples et vous pouvez le copier. Maintenant, tous les exemples que je vais vous montrer sont avec HTML et CSS, il n'y a pas de JavaScript, il n'y a rien d'autre. partie du CSS est vaste, comme celui-ci a plus de 1 000 lignes, mais vous pouvez le copier et le coller et le faire fonctionner dans votre site Web simplement en le faisant. C' est le CSS des Avengers, vraiment cool, le Hulk grogne et l'écran secoue. C' est vraiment, vraiment soigné. Ensuite, vous avez une animation de signature vraiment cool. Si je clique sur ce bouton Replay, il dessine cette signature, ce qui est vraiment cool. Vous avez le dinosaure Chrome en cours d'animation. C'est plutôt soigné. Vous avez un robot de marche qui se déplace autour de l'axe z. C' est assez cool, tout fait avec CSS. Vous avez un personnage animé complètement fait avec CSS. Voici une animation de chargement qui semble vraiment cool. Ensuite, voici un tiers applications pour Google maintenant. Tout cela est fait avec CSS, juste des animations, des images clés, des trucs comme ça. Des trucs que vous pouvez apprendre maintenant que vous connaissez les bases de CSS, vous pouvez certainement le faire. faire à partir de zéro, c'est beaucoup plus difficile. Même j'ai vraiment du mal à faire des animations parce que je ne suis pas un expert en eux. Mais ce que je peux faire est Control A, Control C, le mettre dans mon projet si je l'aime et vous pouvez aussi. Vous avez juste à copier également le HTML, puis vous pouvez disséquer et comprendre exactement comment cela fonctionne. C' est un CSS vraiment cool. J' espère que cela vous inspire et vous montre la puissance de ce que CSS peut faire. C' est un langage de style, mais il fait aussi plus que cela. Il y a tellement de choses que CSS peut faire, c'est vaste, c'est large. Ne soyez pas intimidé, soyez mis au défi et encouragé, parce que vous pouvez apprendre cela, vous pouvez le faire et vous pouvez le mettre sur votre propre site Web sans avoir à le faire à partir de zéro parce qu'il y a tellement de choses là-bas que vous pouvez juste trouver. Ce que je veux faire dans la section suivante est de vous donner quelques ressources pour apprendre CSS et HTML au-delà ce que je vous ai montré et de vous défier pour le projet pour ce cours de fabrication de votre premier site Web. 12. 4.1 - Grandes ressources en ligne: Parlons de quelques-unes des ressources que vous voudrez utiliser lors de création de vos sites Web et en général pour la recherche. Le principal que je vais vous recommander est W3Schools.com. C' est un site que j'ai utilisé d'innombrables fois comme référence et comme référence pour apprendre à faire certaines choses. W3schools.com enseigne des tonnes de choses différentes, mais ils ont aussi des connaissances approfondies sur HTML et CSS. La chose vraiment cool à ce sujet est tout ce dont ils parlent a un bouton « Essayer ». Vous pouvez cliquer dessus, l'ouvrir, et vous pouvez réellement changer le code ici pour voir exactement ce qui changerait ici. C' est vraiment cool, c'est interactif, c'est minutieux, et c'est totalement gratuit. Vous pouvez aller apprendre HTML, CSS, et ensuite vous pouvez passer par et apprendre beaucoup plus si vous le souhaitez. Visionnez certainement. Le suivant est Code Academy. Ils ont beaucoup de cours à suivre. Si vous voulez quelque chose de plus en profondeur sur CSS, ce que je recommande fortement parce que c'était seulement censé vous donner un petit avant-goût de ce que vous pouvez faire, alors vous pouvez entrer et vous pouvez suivre leur cours gratuit ici. Maintenant, vous allez apprendre CSS, la même chose que nous avons appris beaucoup plus en profondeur et c'est vraiment utile. C' est vraiment génial. Un autre CSS qui est un peu plus avancé est CSS-Tricks. Ici, ils ont un endroit où ils publient des articles. Vous pouvez rejoindre leur communauté, vous pouvez regarder les questions que les gens ont posées, et c'est très utile si vous cherchez comment faire quelque chose que beaucoup d'autres personnes ont fait. Là, vous allez avoir des exemples que vous pouvez passer, jouer avec le code, tout ça. C' est vraiment génial, très utile. Celui-ci est certainement plus avancé. Si vous voulez lire ou vous pouvez lire beaucoup, CSS-Tricks est vraiment génial et a des trucs vraiment génial. Il y a des tonnes et des tonnes d'autres choses que vous pouvez aussi utiliser pour apprendre. Mais c'est ce que je recommanderais. La dernière que je recommande est que lorsque vous cherchez quelque chose, ce que vous ferez est de formuler votre question aussi spécifique que possible. Si nous essayions d'aligner notre image et nous savions juste que nous voulions qu'elle soit alignée d'une certaine manière, nous voudrions dire le langage que nous utilisons, donc « CSS line up image sur la droite ». Ce que vous allez chercher, eh bien, voici un bon site CSS-astuces. Mais un autre que vous allez traverser tout le temps est « Stack Overflow ». C' est un endroit où vous pouvez aller poser des questions et obtenir des réponses par des professionnels, des gens qui travaillent sur ce truc depuis longtemps. La plupart du temps, vous allez trouver ces questions ont vraiment de bonnes réponses approfondies avec du code que vous pouvez aller jouer avec. Ils ont des piles, ce qu'ils appellent comme leur communauté pour tout. Ils ont HTML, CSS et puis ils ont bien plus que la technologie, ainsi ils ont la vie, eh bien, vraiment tout ce que vous pouvez penser, il y a une pile où vous pouvez poser des questions et les gens peuvent répondre. C' est un très grand aussi, « Stack Overflow ». Je vous recommande fortement de l'utiliser lorsque vous le cherchez. Il suffit de poser des questions aussi précises que possible pour obtenir la meilleure réponse possible. Ce sont quelques-unes des ressources que je vous encourage vivement à utiliser et vous allez en avoir besoin pour la prochaine vidéo, parce que je vais vous mettre au défi de construire votre premier site Web sans aucune aide de ma part. 13. 4.2 - Votre premier site Web !: Ce que nous avons fait jusqu'à présent est appris les bases du HTML, CSS, puis je vous ai donné plusieurs très bonnes ressources que je vous encourage encore à utiliser. Maintenant, ce que je veux que vous fassiez, c'est que vous fassiez votre premier site web. Nous avons fait un peu ici. Je n'appellerais pas cela un site Web digne d'être publié. Ça n'était jamais censé l'être, c'est censé t'apprendre. Je veux que vous preniez ces compétences, le HTML et le CSS que vous avez appris et allez faire un site web sur quelque chose que vous aimez. La chose cool à ce sujet est qu'il peut être tout ce que vous voulez et vous pouvez le faire comme vous le voulez. Si vous voulez simplement remplir votre site Web avec des images et avoir des légendes en dessous, génial, allez-y. Ça va être comme une galerie de photos. Si vous voulez trouver beaucoup de vidéos et les mettre d'un côté à l'autre et les faire jouer automatiquement dès que la page se charge, grande surcharge d'informations, mais toujours vraiment cool. Vas-y. Si vous voulez avoir un site vraiment minimaliste avec juste un titre, trois paragraphes et une photo, faites-le. Alignez-le, coloriez-le , faites-le paraître génial. Prends ce qu'on a appris. Vous pouvez télécharger tout ce code source que j'ai fait, bien qu'il n'y ait vraiment pas grand-chose. Vous pouvez le prendre si vous voulez, mais je vous encourage à utiliser ces ressources encore et encore parce que je les utilise aussi. Va faire un site web. Lorsque vous avez terminé, téléchargez-le et partagez-le avec la communauté ici. Montrez-nous ce que vous avez fait. Montrez-nous comment vous l'avez fait. Je veux le voir. D' autres veulent le voir et être encouragés aussi. Maintenant, n'avez pas d'attentes énormes pour votre tout premier site web. Ça ne va pas être, eh bien, ça pourrait l'être, mais ça ne va probablement pas être quelque chose d' étonnant et d'étonnant et de révolutionner Internet. Ça va être un peu junkie, ça pourrait avoir des couleurs bizarres. Les choses pourraient ne pas fonctionner parfaitement, et c'est bon. Il n'a pas besoin de le faire. Ce que vous faites maintenant, c'est mettre en pratique ce que vous venez d'apprendre. Parce que si vous ne le faites pas, vous ne deviendrez pas développeur web. Je peux vous dire en fait, tout comme pour tout ce que vous apprenez, si vous ne le faites pas et ne le mettez pas en pratique encore et encore, cela ne colle pas. Vous ne l'apprendrez pas vraiment. Vous pouvez regarder un 1000 tutoriels et avoir un tas de connaissances de la tête et de connaître chaque étiquette unique. Mais si vous ne le mettez pas en pratique, vous ne serez pas un développeur web. C' est mon défi pour vous. Créez un site web sur quelque chose que vous aimez. Postez-le, et partagez-le avec nous ici. Quand tu feras ça, tu auras fini. Vous aurez votre premier site Web et vous pourrez vous appeler développeur web. J' ai hâte de voir ce que tu as. Je suis vraiment excité. Quand vous avez fini avec ça, sautez dans la section suivante où j'ai juste une vidéo pour vous féliciter et où vous orienter vers l'avenir. 14. 5.1 - Qu'est-ce qu'une prochaine ?: Félicitations et chemin à parcourir. Vous avez fait votre site web. espère que vous l'avez partagé, et je veux juste dire que vous êtes maintenant un développeur web. Maintenant, c'est la première étape d'un long voyage. Il y a encore beaucoup à faire. Mais, parce que tu l'as fait jusqu'ici, je sais que tu peux faire le reste du chemin. Voici quelques sites Web qui sont vraiment bons et font beaucoup pour mettre valeur la puissance de l'Internet et ce que vous pouvez faire au fur et à mesure que vous grandissez et apprenez. Il y a beaucoup de choses vraiment cool que vous pouvez faire quand il s'agit d'interactivité, de thèmes, de couleurs, de tonnes et de tonnes de trucs vraiment cool. Ces sites le montrent. Si vous faites juste une recherche de sites Web impressionnants en ligne alors vous trouverez quelque chose comme ça, et tout cela n'est pas fait avec seulement HTML et CSS. Cela signifie qu'une fois que vous vous sentez à l'aise avec cela, il est temps de passer à l'étape suivante, et la prochaine grande étape est JavaScript. Si nous recherchons JavaScript W3schools, cela viendra. JavaScript va être la façon dont vous rendrez votre site Web vraiment interactif. C' est un endroit idéal pour apprendre si vous voulez juste aller de l'avant et commencer, puis à partir de JavaScript, vous voudrez apprendre quelque chose pour le back-end si vous voulez faire la conception de la pile complète. Cela signifie que la plupart des sites Web ont quelque chose qui stocke des informations sur le back-end appelé le serveur. Ce serait comme des langages de programmation réels comme C-Sharp, Ruby, PHP, quelque chose comme ça. C' est du code qui prend les informations d'un site Web, comme une liste de courriels ou un formulaire de contact ou quelque chose comme ça, puis les traite, les enregistre dans une base de données, envoie un e-mail, vous envoie un SMS, quelque chose comme ça. Si vous voulez entrer dans cela, alors je vous encourage à aller apprendre un PHP, C-Sharp, prendre une de ces langues et juste commencer à travailler avec elle. C' est bien différent de ce que vous avez fait ici, mais c'est vraiment puissant. JavaScript est comme l'un de ces langages, sauf qu'il est conçu pour l'extrémité frontale ou, je suppose que front-end est comment nous l'appellerions. Il prend les informations que vous voulez travailler sur cette page et fait quelque chose juste là et là. Voici un exemple montrant la date et l'heure. C' est un bouton qui a une fonctionnalité qui obtient la date et l'heure, puis le poste à l'intérieur d'ici. JavaScript, beaucoup de cela est en fait juste modifier HTML ou CSS que vous avez déjà mis sur votre site Web. JavaScript peut changer le CSS d'un élément, il peut trouver un ID ou une classe spécifique et le cacher ou y ajouter, des choses comme ça. Il est vraiment puissant, vous pouvez faire des jeux complets avec elle si vous voulez qu'il aille comme ça, ou vous pouvez l'intégrer dans votre site Web pour ajouter beaucoup de fonctionnalités. Des trucs comme l'effet planant, trucs comme des animations sur les clics ou le suivi de la souris, choses comme ça, que vous ne pouvez pas faire avec seulement HTML et CSS. Après avoir fait cela, une fois que vous avez créé votre site Web, continuez à pratiquer, continuez à coder, continuez à créer des sites Web. Faites-les pour vos amis, faites-les pour plus de sujets sur ce que vous aimez, faites-les pour votre entreprise, faites-les pour votre école, peu importe. Continuez à créer des sites Web, et pendant que vous le faites, continuez à apprendre. Apprenez JavaScript, apprenez C-Sharp, apprenez Python, apprenez PHP, choisissez quelque chose et allez l'apprendre. Il y a tellement plus à apprendre, tellement plus à créer, mais vous pouvez le faire parce que vous l'avez fait jusqu'ici, vous pouvez continuer. C' est ce que j'ai pour toi, c'est le cours. Félicitations, chemin à parcourir. Encore une fois, j'espère que vous l'avez apprécié. J' ai passé un très bon moment à enseigner ça, et j'ai passé un bon moment à interagir avec toi. Merci beaucoup de vous joindre à moi, et comme j'aime à le dire, amusez-vous à faire de grands sites Web, et je vous reparlerai plus tard.