Apprendre à créer un site : une intro au développement Web front-end | Sunny Singh | Skillshare

Vitesse de lecture


1.0x


  • 0.5x
  • 0.75x
  • 1 x (normale)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Apprendre à créer un site : une intro au développement Web front-end

teacher avatar Sunny Singh, Software Engineer

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Leçons de ce cours

    • 1.

      Bienvenue

      1:06

    • 2.

      Comment fonctionnent les sites Web ?

      7:02

    • 3.

      Langages de fond

      3:07

    • 4.

      Installation d'un éditeur de code

      1:55

    • 5.

      Création de contenu : HTML

      7:45

    • 6.

      Création de pages HTML

      17:11

    • 7.

      Contenu de la stylisme : CSS

      6:38

    • 8.

      Ajouter la mise en page du site

      10:36

    • 9.

      Ajouter des fonctionnalités : Javascript

      3:14

    • 10.

      Télécharger votre site Web

      2:00

    • 11.

      Réflexions finales

      0:58

  • --
  • Niveau débutant
  • Niveau intermédiaire
  • Niveau avancé
  • Tous niveaux

Généré par la communauté

Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.

541

apprenants

6

projets

À propos de ce cours

Ce cours s'adresse à toute personne qui souhaite apprendre à créer un site Web. Aucune connaissance de coder précédente, un simple esprit curieux sur la façon dont les sites vous visitent chaque jour.

Vous apprendrez les principes de HTML, HTML, JavaScript—the les langues de Web qui vous permettront de créer du contenu, de conception et d'ajouter des fonctionnalités interactives à votre site. Vous créerez également votre site Web propre pour les autres, qui seront construits avec des fichiers simples de la planche de

Rencontrez votre enseignant·e

Teacher Profile Image

Sunny Singh

Software Engineer

Enseignant·e

Hello, I'm Sunny. I am the creator of IronMic and host of the Sunny Commutes Podcast.

 

Looking for more software development resources? Explore on Resrc or subscribe to my newsletter.

Voir le profil complet

Level: Beginner

Notes attribuées au cours

Les attentes sont-elles satisfaites ?
    Dépassées !
  • 0%
  • Oui
  • 0%
  • En partie
  • 0%
  • Pas vraiment
  • 0%

Pourquoi s'inscrire à Skillshare ?

Suivez des cours Skillshare Original primés

Chaque cours comprend de courtes leçons et des travaux pratiques

Votre abonnement soutient les enseignants Skillshare

Apprenez, où que vous soyez

Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.

Transcription

1. Bienvenue: et bienvenue à mon cours de sculpture. Si vous êtes comme moi et que vous êtes curieux de savoir comment fonctionne la technologie que vous utilisez chaque jour , alors laissez-moi vous montrer à quel point il est simple de construire la vôtre. Mais d'abord, un peu sur moi. J' ai appris à construire l'âge de 13 ans et ça continue d'être une grande passion de ma part. J' aime coder prix construit et partager ce que j'ai appris avec les autres. J' ai également transformé le développement en une carrière parce que cela a travaillé avec différentes start-up, une grande entreprise et aussi construire certains de mes projets sur le côté. Ma façon préférée d'apprendre est de le faire, j'ai structuré mes vidéos d'une manière que vous pouvez suivre en construisant votre propre projet. Je vous recommande de construire un site personnel, mais vous pouvez construire ce que vous voulez. J' espère que vous partagez également vos sites dans la galerie de projets, et je publierai plus de cours à l'avenir, alors assurez-vous de suivre mon programme. D' accord, allons de l'avant et construisons un coffre-fort 2. Comment fonctionnent les sites Web ?: d' accord. Bienvenue et vraiment heureux que vous avez décidé de rejoindre la classe dans cette première vidéo. Vous voulez poser la question ? Comment fonctionnent les sites Web ? Je pense qu'il est important avant d'écrire notre première ligne de code pour comprendre comment toutes les différentes pièces se réunissent pour construire un site Web pleinement fonctionnel. Tout d'abord, parlons des serveurs. Si vous essayez de visualiser le concept d'un serveur dans votre tête, vous pensez probablement à ces machines complexes avec un tas de câbles et de lumières. Probablement pas un hamster qui essaie de les alimenter comme vous le voyez ici. Mais vous comprenez l'idée. Tu penses à quelque chose de très compliqué, quelque chose que tu ne peux pas vraiment t'envelopper la tête, ce que je veux faire. Il simplifie ce processus de réflexion sur la façon dont les sites Web et les serveurs fonctionnent ensemble. Donc, la chose la plus importante à comprendre est que les sites Web ne sont que des fichiers sur un ordinateur. La façon dont vous accédez à ces fichiers ou à ce serveur est par une adresse I P. Une adresse I P ressemble à un tas de nombres séparés par des points. Avoir un exemple quand ici 172.217 point 9.78 cela n'a pas vraiment d'importance. Et la plupart des gens ne mémoriseraient pas vraiment ces adresses. En fait, vous savez probablement déjà que vous tapez dans un domaine ou vous êtes l pour accéder à un site web, pas une adresse I P. Donc je vais en parler dans la prochaine diapositive. Donc oui, si nous devions mémoriser toutes ces adresses i p pour accéder aux sites Web, nous devions probablement fou. Heureusement, nous avons des domaines comme des raccourcis pour accéder à ces sites Web I p adresses sont difficiles à mémoriser, et donc les domaines servent de raccourcis à ces adresses I p. J' ai un exemple. Un ici que j'ai montré avant, et c'est en fait une adresse I p à un serveur Google. Nous pouvons réellement essayer d'entrer cela dans un navigateur et voir ce qui se passe. Je vais copier ce que je p et simplement entrer dans la barre d'adresse avait entrer et aller directement à Google. Donc c'est vraiment cool. Tu peux essayer ça par toi-même. Vous pouvez voir comment nous avons des adresses I p qui fonctionnent réellement. Ils vont à différents serveurs Web, mais la plupart du temps, vous utiliseriez simplement le domaine. Donc, si j'ouvre un nouvel onglet et entrez google dot com et va à la page d'accueil Google. Les navigateurs sont la dernière pièce du puzzle et nous aident à comprendre comment les sites Web fonctionnent là , ce qu'elle a utilisé pour accéder aux sites Web et ils communiquent avec les serveurs Web. Je vous expliquerai ce que signifie cette communication dans une seconde. La grande chose à propos des navigateurs est qu'ils ont constamment évolué pour prendre en charge des sites Web complexes . Cela signifie essentiellement qu'ils gagnent juste de temps en temps de nouvelles fonctionnalités et ce qui permet aux sites Web de profiter de ces fonctionnalités. Cela en fait où les sites Web peuvent maintenant devenir plus comme à part entière APS similaire Tuapse sur votre téléphone ou sur votre ordinateur. Les navigateurs et les serveurs communiquent entre eux, ce qui signifie que quelques choses se produisent ici. Donc, d'abord, vous tapez de domaine, disons google dot com dans votre navigateur. Ensuite, le domaine trouve l'adresse I P du serveur Web sur lequel se trouvent les fichiers du site Web . Le serveur répondra avec le contenu du fichier et d'autres données. Dans ce cas, il finit par être du code et d'autres informations nécessaires pour rendre cette page correctement. Ainsi, le navigateur interprète finalement cette réponse du serveur et est capable d'afficher le site Web. Le code que le navigateur interprète dans ce contenu de fichier est en fait ce qui va écrire . C' est html, CSS et JavaScript, et je vais en parler dans la prochaine vidéo. La dernière chose que je veux mentionner à propos des navigateurs ici est qu'ils sont en fait vraiment grands outils de développement. Ils comprennent la possibilité de voir la source ou d'inspecter l'élément sur n'importe quel site Web. Vous pouvez le faire dans Google, Chrome ou Firefox et d'autres navigateurs. Vous devrez peut-être activer une option de développeur. Essayons en fait cela dans son navigateur en ce moment. Alors choisissez n'importe quel site dans ce cas. Je suis sur le partage de compétences dot com, et je suis dans Google Chrome deuxième clic droit et cliquez sur Afficher la source de la page. Ne laissez pas cela vous intimider, mais c'est le code qui est nécessaire pour afficher ce site. Ne laissez pas cela vous intimider, Et bien que beaucoup de cela ne vous ressemblera pas vraiment, jetons un coup d'oeil à l'un de ceux-ci. taxe ici peut voir que c'est comme titre et il dit la part de compétences de tableau de bord à la maison. Donc, c'est en fait le titre du site ici. Vous pouvez voir dans cet onglet, il est dit partage de compétences à la maison. Et c'est donc quelques-unes des données avec lesquelles le serveur répond. Et à mesure que vous apprenez plus de ce code, vous serez en mesure de comprendre en naviguant à travers cela et de voir, regarder et voir tous ces différents dibs et différents liens ici. Ah, vous serez en mesure d'avoir une bien meilleure compréhension de ça. Vous pouvez également faire un clic droit et cliquer sur inspecter ou inspecter l'élément, selon le navigateur que vous utilisez. Cela ouvrira ce petit panneau d'outils de développeur ici. Cela semble similaire à la source de vue, mais il est organisé un peu mieux. Vous pouvez effectivement cliquer sur certains d'entre eux pour les développer, et il y a beaucoup de différents robinets ici, que je ne vais pas vraiment entrer dans. Mais ce sont vraiment d'excellents outils de développement qui sont intégrés dans les navigateurs qui vous aident à développer des sites Web. Ok, donc c'est tout pour cette vidéo. J' espère que vous êtes en mesure d'obtenir une meilleure compréhension de la façon dont les sites Web fonctionnent, et si vous voulez en savoir un peu plus, j'ai un Lincoln ici qui va au réseau de développeurs de Mozilla. Ah, c'est un article ici, et ça fait un très bon travail d'expliquer plus en profondeur certaines des choses dont j'ai parlé. Alors consultez cet article si vous voulez en apprendre un peu plus et je vous verrai dans la prochaine vidéo. 3. Langages de fond: html. CSS et JavaScript sont les trois fronts et langues qui vont apprendre. Chacun a un but différent dans la construction d'un site Web. HTML, qui signifie langage de balisage hypertexte, est utilisé pour créer du contenu, du texte, des images et des liens que vous pourriez souhaiter dans votre site. Vous utiliserez différentes balises HTML dans un fichier html point afin que vous puissiez voir un exemple ici pour Ah page d' accueil. , Vous pouvez créer un fichier html point d'index, et à l'intérieur, vous pouvez avoir du texte qui est entouré d'une balise B. Il s'agit d'une balise HTML qui rendra le texte en gras. Suivant est CSS, qui signifie feuilles de style en cascade. Il est utilisé pour le style du contenu, ce qui inclut la modification des couleurs, l'application différente, la modification du positionnement, différents textes et polices et des choses comme ça. Avoir un exemple ici où je sélectionne une balise HTML dans ma page avec un I d de mon texte , puis je peux fournir différentes propriétés qui font des choses différentes. Je veux juste rendre le texte bleu. Et donc je dis que je veux que la couleur soit bleue. Enfin, nous avons Js, qui signifie JavaScript. J' y reviendrai par son nom complet. Mais je veux donner un petit pour avertir ici que si vous essayez de rechercher des informations sur JavaScript en ligne, assurez-vous de ne pas le confondre avec Java, qui est un langage de programmation complètement différent. Ce dont nous parlons ici, c'est Java script ou J s pour court terme. JavaScript est utilisé pour ajouter des fonctionnalités, par exemple lorsque vous cliquez sur un bouton, vous voulez que quelque chose se produise comme une image s'affiche en plein écran ou d'autres fonctionnalités interactives . Avoir un exemple ici, qui montre simplement un message d'alerte qui dit Bonjour. Il y a une tonne de choses différentes que vous pouvez faire avec JavaScript faisant le langage le plus puissant des trois Front et les langues n'allaient pas plonger trop profondément dedans. Mais c'est toujours un aspect très fondamental de la construction de sites web. HTML, CSS et JavaScript sont les trois langues qui sont comprises par les navigateurs, c'est pourquoi ils sont également appelés langues frontales ou côté client. Vous pouvez faire un clic droit sur n'importe quel site Web et afficher la source, qui vous montre tout le code HTML qui est envoyé du serveur au navigateur. Gardez à l'esprit que les fichiers HTML sont des pages Web, qui font ensuite référence à CSS et JavaScript pour ajouter du style et des fonctionnalités. Avoir un autre article du réseau Mozilla Developer que vous pouvez vérifier si vous voulez en savoir plus sur ces trois langues et d'autres sujets dans ce développement Dans la prochaine vidéo, nous nous apprêtons à écrire quelques et parler des différents éditeurs que vous pouvez utiliser pour écrire html, CSS et JavaScript, donc je vous verrai dans la prochaine vidéo. 4. Installation d'un éditeur de code: Ok, parlons des éditeurs de texte ou des éditeurs de code qui utiliseront pour écrire HTML, CSS et JavaScript. Tout d'abord, vous pouvez réellement utiliser l'éditeur de texte qui se trouve déjà sur votre ordinateur. Si vous êtes sur un Mac, vous pouvez utiliser du texte. Si vous êtes sous Windows, vous ne pouvez pas utiliser de pad. Cela fonctionne parfaitement bien pour écrire du code. La seule chose que vous devrez vous assurer est que vous enregistrez le fichier comme un fichier html point d'index ou tout ce qui va créer à ce moment. La seule chose que vous n'obtenez pas vraiment avec les éditeurs natifs sur votre ordinateur est la mise en évidence de la syntaxe , ce qui vous aidera à obtenir un meilleur visuel de votre code avec différentes couleurs et une structure différente que les autres éditeurs de texte vous montrer. Il existe de nombreuses options différentes pour les éditeurs que vous pouvez télécharger. Le 1er 1 ici s'appelle Visual Studio Code, ou V S Code. C' est ce que je vais utiliser dans mes vidéos, donc je vous recommande fortement de télécharger celle-ci. Cependant, il existe d'autres options. Voici Adam, qui est un éditeur très simple et un autre appelé texte sublime. Tous ces éléments que vous pouvez utiliser gratuitement mais le texte sublime vous agacera sur l'achat de la licence. Une autre option dont je veux parler rapidement est appelée Coat Pen. C' est en fait un site Web qui vous permet d'écrire du code directement dans votre navigateur. Si je crée un nouveau stylo ici, cela me permettra d'écrire du code HTML et de me donner un bon aperçu. En bas. Vous pouvez également écrire un CSS et JavaScript. C' est génial si vous voulez vous lever et courir très rapidement. Mais si vous voulez que les fichiers de votre site Web soient locaux sur votre ordinateur, je vous recommande d'installer un éditeur et de modifier ces fichiers localement. Comme je l' ai dit, j'utiliserai du code V. Une fois que vous l'avez téléchargé ou choisi, un éditeur différent sera en mesure d'entrer directement dans le code, donc je vous verrai dans la vidéo suivante. 5. Création de contenu : HTML: Bon, maintenant nous sommes prêts à créer notre site Web. La première chose que vous voulez faire est de créer un nouveau dossier. Ça pourrait être sur votre bureau, vos documents ? Ça n'a pas vraiment d'importance. Mais tous ont appelé ça mon site web. Et c'est là qu'il stockera nos fichiers HTML CSS et JavaScript. Maintenant, allons dans notre éditeur de code dans ce cas, code de V amusant. Nous allons aller de l'avant et ouvrir le dossier que nous venons de créer. C' est ouvrir mon site Web, et c'est là qu'il va commencer à créer de nouveaux fichiers pour un site Web. Cliquez sur le nouveau fichier et enregistrez ce fichier tout de suite. Nous nommerons ce point d'index html. Maintenant, mettons du texte à l'intérieur de ce fichier. Il est typique de dire bonjour monde peut pour le premier programme de n'importe qui qu'ils ont raison. Mais vous pouvez mettre n'importe quoi ici mon premier site web. Qu' est-ce qui se passe ? Vous savez quoi que ce soit, assurez-vous d'enregistrer ce fichier et maintenant ce que nous allons faire est de retourner dans le dossier dans lequel ce fichier se trouve et nous allons faire un clic droit et l'ouvrir dans Google Chrome ou quel que soit votre navigateur par défaut. Vous pouvez voir maintenant qu'il dit Bonjour monde. C' est un texte avec mis à l'intérieur de ce fichier. Et bien que cela soit très simple, c'est votre tout premier site Web. Faisons quelque chose d'un peu plus intéressant ici en HTML. Nous pouvons utiliser différentes balises, et j'ai montré quelques exemples de cela dans les diapositives où vous pouvez utiliser quelque chose comme la balise B pour rendre ce texte en gras. Donc, la façon dont vous avez droit à ces balises est que vous commencez par la balise d'ouverture. C' est celui-ci juste ici avec un symbole inférieur à, le nom de la balise, puis un symbole supérieur à. Et puis de l'autre côté, nous avons la balise de clôture qui dit que fondamentalement, vous savez, nous commençons à construire du texte ici, puis à la fin de ce texte, nous arrêtons de tenir le texte. Donc, nous avons d'abord moins de signer une barre oblique pour montrer qu'il s'agit d'une balise de fermeture, le nom de la balise et un symbole supérieur à. Sauvegardons ce fichier, revenons à notre navigateur et rechargeons la page. Boum. Vous pouvez voir que c'est une petite différence, mais vous pouvez certainement voir que le texte est maintenant en gras. Laissez-moi vous montrer d'autres balises que vous pouvez utiliser. Il y a un moyen d'obtenir un texte de taille télé avec la balise I. Disons que ce fichier photo navigateur et recharger la page, mais vous pouvez voir le télétexte à côté du texte intégral. Oups. Il existe également un moyen de créer différents titres. Donc, si je fais dans chacun d'eux, cela signifie en tête un et fermer la balise. Vous pouvez voir qu'il y a, ah, moyen cohérent d'ouvrir et de fermer les balises. La seule chose qui change ici est le nom de la balise. Enregistrez ce fichier. Retournez à nouveau et rechargez. Maintenant, nous avons un texte très grand. Ceci est couramment utilisé pour créer différents en-têtes dans la page. Imaginez comme un document Word. Vous pourriez avoir un formatage très similaire là, et la liste continue. C' est comme des textes plus petits. Ok, c'est au niveau 2. Vous pouvez voir qu'il est un peu plus petit. Ok, faisons une balise un peu plus compliquée, donc il y a un moyen de lier à d'autres pages ou à d'autres sites Web. En général, le nom de la balise est un qui signifie Angkor. C' est de la même façon que vous ferez une étiquette d'ouverture. Le texte à l'intérieur de ce sera le texte qui sera cliquable. Il s'appelle ça quelque chose d'un peu plus long, Slink. Et puis, bien sûr, une étiquette de clôture. Maintenant, si vous enregistrez ceci maintenant, revenez en arrière et actualisez. Vous pouvez voir qu'il est en fait ressemble juste à du texte normal. Rien ne s'est vraiment passé ici, donc les balises d'ancrage nécessitent un attribut pour les faire fonctionner réellement. Ce que vous faites est à un attribut ici appelé Patron, et donc après le A ici faire un espace de type H R G F qui représente un signe égal de référence hypertexte , puis deux guillemets à l'intérieur. Ces citations vont entrer le U. R L à une page Web. Je vais juste le taper ici. Ceci est google dot com, mais vous aurez probablement juste envie de copier et coller à partir de votre navigateur. Alors gardons ceci et voyons ce qui se passe. Ok, maintenant vous pouvez voir que ce lien est maintenant violet. Normalement, les liens sont bleus, mais c'est violet parce que j'ai visité cette page avant et elle est également soulignée. Il s'agit du style par défaut. Et une fois que nous aurons à voir évaluer, vous serez en mesure de voir comment vous pouvez personnaliser le style, mais pour l'instant serait obtenir le style par défaut ici. Si je clique sur ce lien boom. Vous pouvez voir qu'il va à google dot com. Donc maintenant, nous connaissons le concept de ces attributs, et nous allons les utiliser un peu. Allons de l'avant et ajoutons d'autres attributs à cette balise d'ancrage parce que disons que nous voulons ouvrir ce lien dans un nouvel onglet. Vous voyez cela très commun sur certains sites Web, et cela montrera également que vous pouvez ajouter plusieurs attributs Teoh à une balise HTML. Il y a donc un autre attribut que vous pouvez ajouter appelé Target. Vous pouvez voir que ces attributs sont tous séparés par un espace ici, et ils existent tous après le nom de la balise, mais avant le crochet d'angle. Nous avons donc défini la cible pour souligner Blank. Cela indique à un navigateur d'ouvrir cette page Web dans un nouvel onglet. Voyons cela les dos du navigateur. Et maintenant, si je clique sur ce lien, vous remarquerez qu'il s'ouvre dans un nouvel onglet. Nous avons toujours notre site en espérant ici et aller ouvrir dans un autre onglet. Vous connaissez maintenant les bases du HTML, et dans la prochaine vidéo, je vais plonger dans la structure de page correcte que vous devriez utiliser pour vos pages HTML. ainsi que les attaques plus complexes que vous pouvez utiliser pour ajouter des choses comme des images. C' est un bon moment pour s'entraîner à écrire des étiquettes afin qu'il devienne très naturel et que vous puissiez écrire des impôts très rapidement. 6. Création de pages HTML: dans la vidéo précédente apprendrait à écrire des balises HTML de base afin que nous puissions obtenir du contenu dans sa page. Parlons maintenant de la structure de la page parce que le navigateur attend deux choses différentes à venir de votre page. L' un est le contenu visuel que vous pouvez voir dans votre navigateur, puis les métadonnées qu'elle ne serait pas en mesure de voir, mais est très important pour les navigateurs. C' est là que vous devez inclure certaines informations sur votre site, le CSS et le JavaScript qui se dissocient ainsi que des choses comme le titre et la description . Ok, ajoutons une structure de page à notre HTML actuel. Allons en haut du dossier ici et ajoutons quelque chose qui s'appelle un médecin. Cela indiquera au navigateur d'utiliser le dernier moteur de rendu pour afficher le site. Il y en a eu plusieurs dans le passé. Cela signifie essentiellement que nous voulons HTML cinq, la dernière version ci-dessous. Créons sur la balise HTML, et cela va réellement envelopper sa page entière. Allons en bas ici et à une balise HTML de fermeture. C' est aussi une bonne idée d'ajouter un attribut de langue sur ces attributs de langue oops en fait juste pose et de rendre cela égal à E n Ceci, bien sûr, signifiant anglais. Ok, maintenant ajoutons une balise body, et cela va envelopper le contenu que nous avions auparavant. Ceci est la partie visuelle de la page. Après que nous soyons au corps, qu'est-ce qu'il y a d'ajouter une étiquette de nourriture ? Vous pouvez le voir espacer ça pour que je puisse visualiser ça un peu mieux, mais nous allons ajouter certaines métadonnées ici dans la tête. Qu' est-ce que l'onglet presse ici ? Et ajoutez une balise de titre et le titre pourrait être n'importe quoi. Je vais juste mettre mon site web, et alors arrêtons-nous une seconde ici. La façon dont j'aime penser à cette structure est que la tête est comme le cerveau de votre site Web. Il inclut des données comme la description du titre des trucs CSS que vous ne verrez pas, mais qui sont importants, et ce sont juste des données. Ensuite, nous avons le corps, et c'est le contenu réel que ce que vous voyez dans votre navigateur. Et donc ces deux étiquettes différentes, elles ont des étiquettes différentes à l'intérieur de la tête et du corps. Regardons ce fichier dans notre navigateur pour voir ce qui a changé. Donc, si vous rechargez et obtenez la dernière version de ce fichier, nous voyons que le contenu est toujours le même. Mais quelque chose a réellement changé et c'est l'onglet sont ici. Vous pouvez vraiment le voir, dit mon site web. Et c'est le titre maintenant. D' où ça vient ? Eh bien, nous avons ajouté ces données ici dans la tête. Donc, il vient de cette balise de titre, même si vous ne le voyez pas n'importe où dans la page elle-même, il s'affiche dans l'onglet alors que nous craignons dans le navigateur. Allons de l'avant et regardons les outils def. C' est quelque chose qui est inclus dans Google. Chrome et Firefox et d'autres navigateurs peuvent également les inclure, bien que vous deviez peut-être modifier les paramètres pour activer les options des développeurs. Donc tout ce que j'ai fait ici était clic droit et vous étiez dans la page et cliqué. Inspecter ou inspecter l'élément. Ce que vous verrez ici, c'est la structure de votre HTML. C' est le code que vous avez ajouté à votre page peut voir. Ici, nous avons obtenu le type de document HTML. Marquez la tête avec le titre et vous pouvez voir que c'est dans le code source ici. Ce n'est pas quelque chose que vous pouvez voir sur la page, mais il fait quelque chose dans le corps avec des balises partout ici. C' est une excellente façon de voir si quelque chose ne fonctionne pas. Vous pouvez l'inspecter et voir ce qu'il affiche réellement dans le navigateur dans le code ici. Un autre avantage de cet outil ici est que vous pouvez survoler chaque tacked pour voir la mise en page et le style ainsi, sorte que vous pouvez y voir un peu d'espacement sur cette balise H one ici. Et une fois que nous arrivons à la partie CSS verra que l'air de l', les différentes propriétés qui sont appliquées par défaut ajouteront les nôtres pour ajouter nos propres styles personnalisés. Certaines de ces étiquettes sont également en ligne, ce qui signifie que les placer les unes à côté des autres les montrera sur la même ligne. Nous pouvons voir ce H un et H à étiqueter sont sur des lignes séparées nous parce que les éléments de niveau de bloc d'air , l'ancre est une ligne, mais parce que celui avant il était un élément de bloc ou une étiquette, ces air synonyme par la façon html tag un élément sont la même chose. Mais parce que c'était une balise de bloc, il finit en fait par prendre le tout avec. Donc, vous pouvez survoler cela pour voir qu'il prend 100% de la avec. Cependant, ces balises B et I ne le font pas. Donc, si je mettais cette balise d'ancrage à côté de la balise I, elle apparaîtrait juste sur la même ligne juste à côté. Je veux mentionner rapidement un excellent guide de référence pour tous les différents éléments HTML ou balises que vous pouvez utiliser. Ceci est une autre ressource du réseau Mozilla Developer, et il va et il liste tous les différents impôts ici. Il les classe également, par exemple. Voici tous les éléments de contenu de texte. Vous pouvez avoir différentes choses ici. Vous pouvez avoir des citations, vous pouvez avoir des listes et utiliserez les dans notre propre page Web. Vous pouvez également cliquer sur la taxe eux-mêmes, alors cliquez sur l'un de ces, bien despoil les différents attributs pour garder que vous pouvez utiliser ainsi que des exemples. Ce que je veux faire maintenant, c'est nettoyer ce contenu que nous avons ajouté plus tôt et faire quelque chose qui ressemble davantage à un site Web. Donc, d'abord, ajoutons une balise H one. Ce sera en quelque sorte le titre de la page en cours. C' est tout. Il suffit de donner un nom à mon site web. Vous pouvez mettre votre propre nom ici ou quelque chose comme le personnel de Sonny. Dis quelque chose comme ça. Maintenant, ajoutons une balise image. Ça pourrait être quelque chose comme, Ah, le logo ou peut-être une photo de toi. Disons que nous ne savions pas comment faire ça. Nous pouvons rechercher ce que serait la balise image à partir de Mitzel, un réseau de développeurs. Ainsi, l'élément d'intégration d'image voir vous permet d'incorporer une image dans le document. Et je pourrais juste faire défiler jusqu'à l'exemple qu'ils ont. Vous pouvez voir en utilisant quelque chose comme ça montrera cette image ici. Allons de l'avant et copions en paix pour que vous puissiez voir qu'il y a, um je suis I m g tag et a deux attributs différents. Il y a donc un des attributs SRC ou des attributs source et un point vers un fichier image. En fait, je vais mettre une de mes propres images dans notre dossier de site, et ensuite on la référencera ici. Ensuite, il y a aussi cet attribut A lt signifie texte alternatif. Ceci est utile pour de nombreuses raisons différentes. Disons que l'image ne se charge pas ou un moteur de recherche. Il regarde à travers cette page pour montrer quelque chose pour les résultats de recherche. Ou peut-être que l'utilisateur est un utilisateur aveugle. Et donc ils sont incapables de voir visuellement ce qu'est cette image. Nous avons donc été en mesure de fournir un texte alternatif. Ce genre de décrit ce qu'est cette image. Je peux dire que c'est une photo de moi-même, et donc vous n'avez pas besoin de voir l'image pour savoir ce que c'est. Quelque chose d'intéressant ici est que cette balise n'a pas de balise de fermeture. Vous savez, normalement, vous feriez quelque chose comme ça, mais parce que nous n'affichons pas vraiment de texte entre les deux, vous n'avez pas besoin de cette balise de fermeture pour des raisons de santé mentale aime vraiment inclure une barre oblique à la fin ici pour montrer qu'il s'agit d'une balise auto-fermante. Mais c'est complètement facultatif. Donc deux images intégrées dans notre site Web. Nous avons besoin d'une image à l'intérieur du dossier de notre site Web. Donc inclus une image de moi-même ici, juste à côté du fichier html de point d'index. Ils vivent dans le même dossier, et donc nous pouvons le faire. La source de ceci sera juste le nom du fichier. C' est un J peg. Oui, Sonny. Peg Dodgy. Euh, nous pouvons fournir une passe différente ici depuis le même dossier, mais nous pouvons le faire. Mais si elle existait dans un autre dossier, disons que j'ai un dossier Images glisser cette image dans leur maintenant pour référencer l'image cette façon. C' est bon pour l'organisation. Enregistrez-le et ouvrez-le dans votre navigateur. Rechargez et vous pouvez voir que vous avez une image de moi-même ici et le titre ici. Je pense que cette image est en fait un peu trop grande, donc nous pouvons réellement redimensionner cela. Allons de l'avant et ajouter un avec un hommage ici. Maintenant, nous pouvons maintenant ce qui peut passer dans une valeur de pixel. Disons que je fais 100. Sauvegardez ça maintenant. On pourrait dire que c'est beaucoup plus petit. Peut-être que je voulais être un peu plus grand. Fais le 200. Ok, je pense que c'est une bonne taille là-bas. On peut ajouter quelques choses ici. Je veux inclure un texte. Ce qui est à la balise de paragraphe est juste un pitak ici avec du texte à l'intérieur. Disons que c'est juste pour jouer mon Il y a quelque chose comme ça, non ? Hum, et maintenant nous pouvons ajouter une navigation pour que nous puissions lier à d'autres pages pour notre site. Allons de l'avant et juste inclus en bas ici. Maintenant, ici. Tous comprennent une liste de longueurs. Alors faisons une liste ordonnée. Ceci est une balise U L et pourrait rechercher des informations sur ces balises pour en apprendre un peu plus à l'intérieur aura des éléments de liste. C' est une bonne idée de simplement les avoir sur de nouvelles lignes et de tabuler tout ce qui est à l'intérieur lorsque vous avez juste les balises imbriquées comme celle-ci, son cours pour faire des liens, nous ajoutons des balises d'ancrage. N' hésitez pas à positivité de Ceci va trop vite donc nous pouvons lier à différentes pages qu' ils veulent ajouter une page sur laquelle il est lié à ce sujet. HTML. Cela n'existe pas encore, mais va dans un instant et faire lire ce lien sur. Et peut-être qu'on aura d'autres pages aussi. C' était juste une copie que peut-être incluons une copie de discours ici. Ok, donc nous avons notre liste de navigation ici. Sauvons ça. Allez dans un navigateur dans notre navigateur. Recharger. Maintenant, vous pouvez voir que nous avons un petit paragraphe de description ici dans différents liens, mais cliquez sur ce maintenant dit que votre fichier n'a pas été trouvé. Alors réparons ce code envieux. Vous pouvez créer des fichiers directement ici. Cliquez sur cette icône ici. Ou faites ce clic droit et cliquez sur nouveau fichier. Tapons sur le point html. Il est encore fermé cet arbre et ces air juste des fichiers manuels. Alors gardez à l'esprit, vous savez, nous avons maintenant à ce sujet chaque petit fichier ici. Dossier d'initié. Allons-y et copions tout ça. Donc, copiez cela dans environ point html. Et changeons ça dont je dois parler avec un peu de Sonny. On gardera l'image là-bas. C' est très bien. Je, euh et c'est une bonne idée de garder la navigation ici. Cependant, puisque nous sommes déjà sur la page à propos à ce stade, c'est à une page Deux sont liés pour revenir à la page d'accueil, donc il va revenir à l'index que html et ils diront Accueil. Ok, donc maintenant nous avons dans la page à propos, allez dans notre navigateur, et si je recharge, ce boom aura maintenant une page à propos. Vous voyez, le titre ici nous a aussi bien changé. Il s'agit de la description au niveau de l'en-tête, du texte et maintenant du conflit entre cette page d'accueil et sur la page. Nous ferons la même chose pour les passe-temps très vite. Allons de l'avant et copions juste la page à propos et faire de votre père. Il est évident que HTML est ce passe-temps. C' est pour un gardien ou quelque chose comme ça. Et nous allons changer ce lien de hobbies à propos de la plage. Ok, ça a l'air bien. C' est frais. Une page de loisirs. Maintenant, nous avons cette pêche ici. Alors maintenant, nous avons appris comment créer des liens qui vont à nos différentes pages de notre site Web. Vous pouvez voir qu'il va juste à ces fichiers. Coquelicot, commencez html index point html. Aussi envie rapidement de mentionner que vous pourriez avoir posé des questions à ce sujet. Nous affichons simplement ces fichiers dans notre navigateur. Ces air juste local. Si vous partagez ça avec quelqu'un d'autre, ils ne pourront pas y accéder. Mais à la fin de ce cours, il sera en mesure de télécharger votre site Web afin que vous puissiez réellement partager cela avec d'autres personnes. Je pense que c'est tout pour cette partie. Dans la vidéo suivante, je vais vous montrer comment utiliser CSS pour styliser votre site 7. Contenu de la stylisme : CSS: Espérons que vous êtes devenu plus à l'aise dans l'utilisation du HTML. Passons maintenant au style de notre site Web avec CSS. J' espère que cela rendra ce look un peu plus agréable. Allons de l'avant et faisons un nouveau dossier. Celui-ci sera appelé style dot CSS peut voir que nous avons un fichier CSS point de style à l'intérieur de notre dossier à côté ou dossier Images et nos fichiers HTML à l'intérieur. Ici. C' est là que sera écrire notre CSS et ciblera nos tags initié HTML et en ajoutant différentes propriétés pour changer une couleur, espacement des fonds et différentes choses comme ça. Ce que nous devons d'abord faire est de relier notre dossier à notre équipe. Alors rappelez-vous que nous avons fait cette étiquette de tête plus tôt. Nous pouvons ajouter des données ici qui diront au navigateur d'utiliser leurs nouveaux styles. Donc, il est à une balise de lien à l'intérieur ici dira que le style de la relation elle et pointer vers notre nouveau fichier CSS style similaire à la balise image. C' est un autre de ces balises auto-fermant. Sauvegardons notre fichier HTML et revenons à notre fichier CSS point de style. Qu' est-ce que c'est ? Un style de base pour montrer que cela fonctionne réellement. Tout d'abord, nous allons commencer par un sélecteur. C' est là que vous ciblez l'une de vos balises HTML. Je vais commencer par le corps, puis l'espace, puis ajouter des accolades. Donc le code évident est assez agréable pour ajouter automatiquement la grâce de fermeture. Assurez-vous que vous avez une accolade d'ouverture entre les deux. Nous aurons nos différentes propriétés et ensuite une accolade de fermeture. Donc à l'intérieur d'ici, je vais faire un onglet pour rendre ça un peu plus agréable. Visuellement, donc peut voir la différence entre les sélecteurs et les propriétés. Ok, changeons la couleur du texte, espace de couleur du type de cellule et puis un nom d'une couleur de base comme le bleu vert. Vous pouvez également utiliser des couleurs hexadécimales ici fera cela dans un instant. Sauvegardons ce fichier. Navigateur d'initié. Rechargeons la page. Vous pouvez voir la couleur du texte a changé, et cela a effectivement affecté toute notre page. Si vous vous souvenez, CSS signifie feuilles de style en cascade, et c'est l'aspect en cascade de cela. Même si nous avons ciblé la balise body, le style de la couleur du texte, elle tombe en cascade. Vous pouvez voir que les couleurs de lien sont toujours une couleur différente car elles définissent leurs propres couleurs et donc nous pouvons remplacer la couleur qui a été définie précédemment. Disons que nous voulons que la balise de paragraphe soit d'une couleur différente. Donc, nous allons cibler ces balises en dessous du corps. Disons P espace, accolades. Je veux que la couleur soit verte. Ok, gardons ce rechargement. Et je vois que les paragraphes sont maintenant verts. Une chose intéressante à noter ici est que les deux paragraphes ou vert et c'est parce qu' ils utilisent tous les deux leur balise de paragraphe. Si vous avez droit, cliquez et inspectez, utilisez les outils sourds ici pour voir cela. Ok, avec sélectionné cette balise de paragraphe et dans ce panneau de droite ici montre les différents styles. Deuxièmement, voir sur la balise de paragraphe. Nous avons la couleur verte, cependant, sur le titre que chacun ici je pouvais voir il n'y a pas de couleur sur le H, mais il dit ici hérité du corps. Alors choisissez ici que la couleur bleue est héritée de la balise body que nous avons déclarée dans notre CSS. Et si nous voulions devenir un peu plus créatif avec les couleurs que nous utilisons ? Nous pouvons utiliser quelque chose appelé un code de couleur hexadécimal, qui commence par un signe numérique suivi de six lettres ou chiffres. Je vais juste utiliser le site appelé sélecteur de couleur dot com. Cela nous permet de choisir une couleur spécifique en faisant glisser à l'intérieur de ce sélecteur de couleurs, puis en nous donnant ce code hexadécimal. Maintenant, au lieu d'utiliser un nom de couleur pourrait juste accélérer ce code hexadécimal. Mais assurez-vous de garder ce numéro au début. Enregistrez le fichier, rechargez la page et maintenant nous avons une nuance de bleu légèrement différente ici. Jetons un coup d'oeil à d'autres moyens qui affaiblissent le texte Styler. Vous pouvez ajouter une taille de police différente en fournissant une vallée de pixels ici. PX debout pour les pixels peut changer la famille de polices. Allons-y avec Ariel peut. Vous pouvez également mettre le texte en gras. Il y en a beaucoup, mais laissons-le là. Dans un navigateur, nous pouvons recharger et voir que nous avons maintenant ce texte différent regardant ici. C' est audacieux, c'est un peu plus grand et c'est dans le fonds aérien. Laissez-moi vous montrer comment vous pouvez ajouter l'espacement avec la marge. Je veux que cette image soit un peu à droite. Nous avons sélectionné l'image à l'intérieur de notre CSS en ajoutant la propriété gauche de tiret de marge. Disons que 50 pixels rechargent la page et vous pouvez voir qu'elle est déplacée un peu vers la droite. C' est tout pour ça. La vidéo, bien sûr, est toujours un lien. Une autre ressource que vous pouvez utiliser pour en apprendre un peu plus sur CSS que les différentes façons dont vous pouvez styler les zones de texte créent une mise en page et des choses comme ça. 8. Ajouter la mise en page du site: Très bien, choses ont l'air plutôt bien maintenant. Nous avons utilisé HTML et CSS pour faire ce qui ressemble à une page Web décente, mais je pense que nous pouvons faire encore mieux. Transformons cela en une mise en page de site plus traditionnelle avec un en-tête en haut, un menu de navigation et peut-être quelques colonnes ici aussi. Commençons par créer les différentes sections de sa page et déplacer nos balises à l'intérieur . En HTML 5, il y a une balise d'en-tête que nous pouvons utiliser. Ce sera l'en-tête d'un site Web. Copions ceci chaque balise là-dedans. Ok, Cool. Aussi à l'intérieur de l'en-tête, nous voulons probablement un menu de navigation. On peut copier ça, UL ici. C' est la liste des liens à l'intérieur ici. Réparez les onglets ici et il y a en fait une étiquette de knave que nous pouvons utiliser ici. Et c'est une bonne idée de montrer que c'est notre navigation principale de notre page avec cette balise. Maintenant, ajoutons également un pied de page. Et bien sûr, c'est la piste. Notre navigation devait l'avoir ici, donc c'est à peu près au fond. Nous pouvons avoir une balise de pied de page et nous allons juste dire copyright comme mettre votre nom ici. Donc 2018 peut notre contenu ira ici. Ok, Cool. Alors maintenant, allons à notre fichier CSS et commençons à coiffer ces taxes pour un Feder voulait vraiment avoir une sorte de barre. Regardez où ça ressemble à une barre en haut de la page. Donc, faisons la couleur ici pour être blanche dans la couleur de fond pour être gris. Voyons ça jusqu'à présent, quoi ça ressemble, ok, on peut probablement arranger ça un peu. Maintenant, inspectons et voyons pourquoi. Il y a beaucoup d'espace ici au sommet. Donc, il semble que le corps a quelques marges en haut dans la gauche ici, et chacune ici a une marge. Eh bien, réparons ça. Vous pouvez dire la marge. Je veux que toutes les marges sur le corps soient nulles. Et pour le H, il est retiré. La marge ici est bien, ok, c'est beaucoup mieux, mais je n'aime pas vraiment cette grande couleur sur le sélecteur de couleur dot com Allons avec mon bleu préféré pour en faire un peu. Peut-être un sombre comme ça. Le signe numérique avec la couleur hexadécimale. Je peux relier la page à la recherche un peu mieux, et nous pourrions aussi centrer. C' est bien, alors nous allons entrer le texte à l'intérieur de notre moment. D' accord ? Douce. Pourrait probablement utiliser un peu d'espacement en haut. Une houle. Vous pouvez également utiliser quelque chose appelé rembourrage. Et cela va simplement ajouter l'espacement à l'intérieur du texte essentiellement au lieu de l'extérieur de celui-ci. Disons peut-être 20 pixels. Ok, mignon. Nous allons aussi changer le fonds sur la rubrique ici. Donc, ce que je vais faire est d'ajouter une famille de polices sur le corps. Ok, ça a l'air un peu mieux si tu n'aimes pas ces fonds. En passant, vous pouvez utiliser le site appelé Google Fonts qui fournissent un tas de polices différentes que vous pouvez importer et utiliser à l'intérieur de votre site Web. J' aime beaucoup celui-ci, donc je vais cliquer sur le signe plus. Vous pouvez copier ce code ici, fichier html frontière à l'intérieur de votre tag head. Il suffit de copier et de coller cela là. Ensuite, vous pouvez voir la famille de polices pourrait copier cela. Sauve ces trois obscures. Et maintenant, la police sur tout son site a changé. Ensuite, continuons et corrigeons ce menu de navigation. Ajoutons un sélecteur sur la balise UL et centrons le texte à l'intérieur ici, ce qui centrera les liens. Et nous devrions aussi probablement ajouter un peu d'espacement en bas de celui-ci aussi. C' est le rechargement qui voit l'air des liaisons maintenant centrées. Mais je veux aussi faire ces éléments de liste sur Beacon. Regardez les différents taxis qui ont ici à tout moment. Donc l'élément de liste. En fait, je veux qu'ils soient à côté de l'autre. Je ne suis pas sûr si vous vous souvenez quand j'ai parlé d'un bloc et des balises en ligne et comment elles s' affichent un peu différemment. Donc si je fais ça en ligne peut voir, ils apparaissent juste à côté de l'autre. Maintenant, personnalisons la couleur de ces liens. Sélectionnez toutes les balises d'ancrage, faites jouer ces liens. D' accord, Sweet. Un problème à cette approche est que si vous ajoutez un lien à l'intérieur de votre contenu ici, ces liens seront également blancs. Donc, ce que vous voulez faire est avant le sélecteur d'ancrage que vous voulez à une autre balise ici. Donc, cela dira que vous voulez seulement sélectionner des liens à l'intérieur de la navigation. Cela fonctionnera de la même manière. Mais maintenant, les liens à l'intérieur du contenu, ils ne seront pas attendre. Ok, centrons aussi le texte du pied de page ici. Donc, c'est comme le texte de la balise de pied de page au centre de la ligne. Ok, maintenant le pied de page est aligné au centre aussi. Maintenant pour le contenu ici. Nous pouvons probablement juste centrer cela, mais j'ai mentionné comment vous pouvez ajouter des colonnes. Alors essayons de le faire. À l'intérieur de votre HTML devra faire une nouvelle taxe ici pour contenir notre contenu de la barre latérale et notre contenu principal . Ce seront nos deux colonnes. Donc nous allons utiliser une attaque appelée div, et ensuite nous aurons deux coups de plus à l'intérieur de là. Copie et paix. Maintenant, ces balises air juste génériques que vous pouvez utiliser et donc nous devons leur donner des noms. Pourrait le faire en donnant une classe dans la classe Name dira conteneur. Celui-ci sera une barre latérale. Et enfin, le contenu qu'il peut nommer ce que vous voulez. C' est à vous de décider. Et alors, allons de l'avant et coupez et collez ces étiquettes ici. L' image va dans la barre latérale dans le paragraphe, balises hors cours, aller au contenu à l'intérieur de notre CSS. Nous devons maintenant sélectionner notre nouvel élément conteneur, qui est ce jour juste ici. Classes que nous pouvons sélectionner avec un point, puis le nom, le conteneur point. Et pour créer des colonnes, nous utilisons quelque chose appelé une mise en page flexible. Donc, nous allons dire display flex, recharger la page et boom. On a deux colonnes différentes ici. L' image à gauche et le texte sur le raid. Réparons un peu de l'espacement. Je sais déjà que les balises de paragraphe ont une marge supérieure. Réglons ça à zéro. Ok, ça a l'air un peu mieux. Et pour le contenu, ajoutons un peu de rembourrage sur la gauche et avons cela égal. Disons 20 pixels. Ok, c'est maintenant qu'on a un peu d'espacement sur la gauche et enfin, peut-être du rembourrage sur le dessus du conteneur. Très bien, ça a l'air très bien. Maintenant, peut-être un coup de bâton sur le fond. C' est bien pour le pied de page là-bas. Et donc, ouais, ça a l'air plutôt bien maintenant. Il est aussi réactif. Vous pourriez dire que je peux redimensionner et que tout le genre de juste taille est en baisse aussi. D' accord. Ce site est venu vraiment loin. Maintenant, nous avons une belle mise en page ici avec un en-tête. Nous avons le titre et la barre de sieste, une zone de contenu à deux colonnes et un pied de page en bas. Et la prochaine vidéo, nous arriverons à JavaScript pour ajouter un peu d'interaction dans notre site. 9. Ajouter des fonctionnalités : Javascript: jusqu' à ce point, nous avons utilisé HTML pour ajouter du contenu et CSS pour ajouter un style. Maintenant, ajoutons un peu d'interaction en ajoutant un bouton sur lequel quelqu'un peut cliquer pour afficher un message secret. Nous devrons refaire un nouveau fichier. Ça s'appelle ce script point Js Inside. Ici, nous allons écrire du code pour sélectionner un bouton sur la page, donc nous allons dire document point get element par I. D. code Envious proposera des suggestions ici. Ne vous inquiétez pas trop du code ici. JavaScript est un langage de programmation complet, donc ce n'est pas tout à fait simple comme HTML ou CSS Cento X. Donc, nous allons dire bouton. Ajoutez ensuite un écouteur d'événement. Donc, quand ils cliquent sur le bouton va exécuter une fonction. Et je devrais avoir ce manteau dans les notes si vous voulez simplement copier et coller au cas où vous n'êtes pas en mesure d'obtenir exactement la même chose. Et maintenant, nous allons montrer un message secret avec l'utilisation de la fonction d'alerte ici. Mon message secret. Ok, cela devrait fonctionner, mais nous devons d'abord ajouter ce script là où chaque équipe L Page peut voir l'avoir déjà ici, en utilisant la balise de script avec la source pointant vers le script. fichier RGs. Nous devons en fait avoir une balise de fermeture pour la balise de script. Ensuite, nous devons ajouter ce bouton quelque part donc nous allons utiliser le bouton tag show secret message. Ce sera ce que dit le bouton. Et parce que nous avons sélectionné un acheté et avec un i d de bouton, vous devez à ce que je d. Ici. On peut probablement donner un meilleur nom à ça. C' est un message de spectacle. Une mise à jour, notre script de travail ici pour dire show message. Ok, si vite. Petit résumé. On a fait un nouveau dossier ici. Script dot Js Nous avons ajouté cela dans notre page avec la balise de script. Au fait, assurez-vous que c'est à la fin de la page. De cette façon, tout le html sera prêt avant le script, Terance. Et enfin, nous avons ajouté un bouton inter html afin que quand ils cliquent dessus, ils montreront ce message secret. Rechargeons notre site web. Vous pouvez voir que le bouton est là maintenant. Si je clique sur ce boom, il est écrit le message secret dans cette petite boîte d'alerte ici. C' était une introduction rapide dans JavaScript. Comme je l'ai déjà dit, c'est un langage de programmation qui peut faire beaucoup de choses et donc lier cette ressource ici. Si vous voulez apprendre le script Java plus en profondeur et faire beaucoup de choses cool avec elle, construisez quelques petites applications cool. 10. Télécharger votre site Web: Maintenant, nous allons télécharger notre site en ligne afin que nous puissions le partager avec d'autres personnes. Il y a beaucoup de services différents pour cela. Celui-ci s'appelle l'ortie. Si je Il y a aussi un autre appelé obtenir des pages d'aide et surge. Personnellement, je pense que le métal, si je veux être le plus facile pour toi. Hum, connecté ici. Donc, une fois que vous aurez créé un compte, vous et vous vous connecterez, vous et vous vous connecterez,vous atterrirez sur cette page ici, allez-y et ouvrez le dossier dans lequel nous avons stocké tous nos fichiers et nous avons traîné jusqu'à l' ortie Si je onglet Ok, donc après quelques secondes, en fonction de la vitesse à laquelle vous obtenez cela. Vous êtes bien ici. Si vous cliquez sur cela et boom peut voir notre site est maintenant en ligne et fonctionne. Et voici la barre oblique du domaine Vous êtes tous ici. Vous pouvez commencer à partager avec les gens. Quelqu' un d'autre pourra y aller et voir tout ce que vous avez ajouté ici. Si jamais vous voulez mettre à jour votre site Web, vous pouvez aller de l'avant vers les déploiements appuyez ici, puis faites glisser votre dossier à nouveau avec les fichiers mis à jour . Très bien, énorme. Félicitations pour avoir votre premier site web en ligne. J' espère que vous le partagerez dans la galerie Project de ma classe de partage de compétences. Assurez-vous qu'il est également de suivre mon profil de sculpture et de chercher d'autres classes que j'ai posées . Quel développement ? Mais pour l'instant, assurez-vous de continuer à améliorer vos compétences HTML et CSS et vos compétences de script de travail. De cette façon, vous pouvez continuer à ajouter plus de choses à votre site Web, ce qui, je pense, est où le plaisir réside vraiment dans ce domaine. J' ai déjà mentionné le réseau de développeurs Mozilla. Ils ont une très bonne documentation sur ces trois technologies différentes sur le Web ainsi que beaucoup d'autres choses différentes. Donc, vérifiez définitivement ça. Continuez à apprendre et je vous verrai dans la vidéo de conclusion. 11. Réflexions finales: Ok, donc ça conclut la classe. Mais avant de partir, laissez-moi certainement savoir avec l'examen en termes de ce que vous avez appris comment ce cours vous a aidé. Ou peut-être qu'il n'a pas vraiment préféré quelque chose de constructif. Et si vous construisez quelque chose de vraiment cool puissance site personnel, vous savez, quelque chose de super simple ou l'a pris plus loin. J' adore le voir. Je remets mes pieds dessus ainsi que tous ceux qui sont dans cette classe. Et donc assurez-vous que le projet affiche dans la galerie du projet et je vais poster plus de cours dans les développements futurs. Si vous voulez des cassettes plus loin, je vais certainement vous montrer comment faire ça. Alors assure-toi de suivre mon profil comme ça. Tu sais quelque chose. Et encore une fois, merci beaucoup d'avoir regardé les vidéos de faire partie de la classe.