Le codage manuel de votre premier site Web : les bases du HTML et du CSS (original)

1. Une introduction: Hé ! Bonjour. Je m'appelle Rich Armstrong et je conçois et construis des sites web depuis une dizaine d'années. Ce cours porte sur l'apprentissage de la création de votre propre site web à partir de zéro. Je vais vous apprendre à écrire votre propre HTML et comment écrire votre propre css. La possibilité d'écrire vos propres HTML et CSS ouvre un monde de possibilités. C' est amusant, c'est autonomisant, et vous arrivez à peu près, faire votre propre morceau d'Internet. Donc, à la fin de la classe, vous aurez fait vos premiers sites Web d'une page, vous aurez une compréhension de base du HTML et du CSS, vos amis vont être jaloux, votre mère va être fière de vous, et vous serez en mesure de partager votre création sur Internet, ce qui est assez cool et vous serez en mesure de le comprendre, ce qui peut être encore plus cool. J' espère que tu es excité parce que je suis excité de t'apprendre. 2. Ce cours a été mis à jour !: Hey, je suis super excité que tu aies décidé de suivre ce cours. Une tonne d'étudiants l'ont pris et ils ont de bonnes critiques, créé des projets impressionnants et ont posé un tas de questions. Mais j'ai fait ce cours en 2015, qui signifie qu'un tas de choses a changé, fonctionne différemment de ce qu'il fait dans cette classe. J' ai créé une nouvelle version de la classe, qui est plus à jour et a une meilleure qualité audio et vidéo. Vous pouvez regarder ce cours à main. Ce contenu est toujours super génial. Mais, je recommande fortement de vérifier le nouveau. Apprendre à coder votre propre site Web ouvrira des portes, vous mènera vers de nouveaux chemins de carrière et vous donnera les moyens de partager ce que vous voulez avec le monde entier. Visitez ce lien pour consulter la nouvelle classe. 3. Ce que nous allons créer, apprendre et faire: Qu' est-ce qu'on va faire ? Qu'est-ce qu'on va faire ? Nous allons faire un site d'une page pour votre héros animé ou de dessin animé préféré. Donc le mien est Wreck-It Ralph, et voici trois sites Web de style différent que je vous ai pris à travers et je vous montre comment je fais. Je t'apprends à utiliser Sublime Text. Je vous apprends à utiliser Google Chrome. Je vous enseigne comment utiliser GitHub et comment partager vos sites web et vos créations web. Nous commençons vraiment petit et facile, et nous avons tiré vers le haut et je vous enseigne comment utiliser HTML ou comment écrire HTML, comment écrire CSS et comment les lier ensemble. Tout est narré visuellement et je fournit des métaphores simples de la façon dont les choses fonctionnent. Alors rejoignez-moi et vous apprendrez à construire les sites web de vos personnages. 4. Téléchargez ces 3 applications gratuites: Pour rendre la construction de sites web amusants et faciles, nous avons besoin de trois choses. Ouvrez votre navigateur et recherchez quelque chose appelé Sublime Text 3. Sublime Text 3 est un éditeur de code. Téléchargez celui de votre système d'exploitation. Cela fera de l'écriture HTML et CSS un jeu d'enfant. La prochaine chose dont nous avons besoin est Google Chrome, alors recherchez pour cela. Google Chrome est, comme, Internet Explorer ou Safari, mais il a des outils vraiment excellents pour les personnes qui construisent des sites Web. Je vais vous montrer exactement comment l'utiliser. Téléchargez-le et vous serez en bonne voie pour comprendre le fonctionnement et l'apparence de vos sites Web. La prochaine chose dont nous avons besoin est GitHub Desktop. Ce que GitHub Desktop nous permet de faire ou ce que GitHub nous permet de faire, c' est qu'il nous permet de stocker du code et de suivre nos modifications à ce code. Nous allons l'utiliser pour télécharger, stocker et héberger nos sites Web et comme un outil pour le partager avec d'autres personnes. Téléchargeons celui-là. Avec ces trois applications, nous pouvons à peu près conquérir le monde, pas le monde entier, mais le monde HTML et CSS. Ils vont être très utiles et ça va être amusant et vous apprendrez beaucoup. Je vais passer à l'heure où toutes les applications sont téléchargées et vous montrer comment les configurer. Voyez ça maintenant. 5. Installez les applications: Mes applications sont enfin téléchargées. Maintenant, tout ce qu'on fait c'est qu'on doit ouvrir le dossier Téléchargements et commencer à installer ces méchants garçons. La première chose est le Sublime Text. Ouvrons ce DMG si vous êtes sur Mac, sous Windows, vous faites votre truc. Si tu es vraiment coincé, donne-moi une chance. Nous venons de sortir dans le dossier Applications. Si vous avez déjà une copie, remplacez-la comme je le fais. Fantastique. Le suivant est Google Chrome. Double-cliquez sur ça, le même genre de chose. Faites-les glisser dans le dossier Applications, celui-ci est un peu plus grand, cela pourrait prendre un peu plus de temps. Encore une fois, si vous avez déjà une copie, remplacez-la comme je le fais. Le suivant est GitHub Desktop. Nous allons simplement faire glisser cela directement dans notre dossier Applications. Il y a les trois choses que vous devez installer. 6. Créez et partagez votre première page Web: Nous avons téléchargé ces trois applications. Maintenant, faisons un site web. Nous allons aller dans notre dossier Applications et nous allons rechercher notre application GitHub. Je vais juste taper G-I, ce qui m'emmènera à l'application GitHub Desktop. Ouvrons cela, et on vous demandera des mots de passe ou de l'authentification. Vous serez pris à travers un tas d'écrans d'intérêt, et finalement vous arriverez à quelque chose comme celui-ci, qui vous demandera votre login et votre mot de passe, que vous n'aurez probablement pas, alors nous allons en obtenir un de github.com. Ouvrez ce lien. Vous devrez choisir un nom d'utilisateur, insérer votre e-mail et créer un mot de passe, puis vous inscrire. Si vous avez déjà un compte comme moi, vous pouvez vous connecter. Mon nom d'utilisateur est mrra-screencast, et mon mot de passe est un secret. Une fois que vous vous êtes connecté ou inscrit, vous accédez à un écran qui ressemble à ceci. Très important cependant est de vérifier votre compte GitHub sur votre Gmail ou sur votre application mail, où que vous soyez. Sans le vérifier, vous ne pouvez pas réellement héberger des pages correctement. Cela crée un nouveau référentiel, ce qui revient à créer un nouveau projet. Appelons ça un héros de bande dessinée ou un gero. Je préférerais le héros. La description, mon premier site web ou disons un site sur mon héros de bande dessinée. Soyons publics pour que les gens puissent le voir, afin que les gens puissent copier le code s'ils le souhaitent. Initialisons-le avec un README, là mais collant à ce sujet, donc je préfère l'inclure, et créer votre dépôt. Ce que nous devons faire tout d'abord, je sais que c'est vraiment écrasant de voir toutes ces informations, tous ces liens, c'est juste de cliquer sur cette liste déroulante et de taper dans gh-pages et de créer une nouvelle branche appelée gh-pages. Appuyez sur « Entrée » ou appuyez sur ce lien. Cela crée de nouvelles pages, et c'est une branche spéciale où nous pouvons réellement héberger notre site Web. C'est l'étape 1. Étape 2 va à l'application GitHub Desktop et se connecter à nouveau. Rappelez-vous votre nom d'utilisateur. C' est pratique tout à l'heure. Connectez-vous, et à partir de là, vous serez connecté en tant qu'utilisateur jusqu'à ce que vous vous déconnectiez. Fermons cette fenêtre. Ce que nous devons faire maintenant, c'est que nous devons essentiellement obtenir ce projet de GitHub. C'est là. Je vais le cloner sur mon ordinateur local. Je vais sélectionner le bureau comme répertoire de mon projet, et voilà. Ensuite, sélectionnez le héros de bande dessinée et assurez-vous que vous travaillez sur une branche gh-pages. C' est très important. Nous allons créer un site Web donc nous voulons que ce soit une page GitHub. C' est la première partie de l'histoire de GitHub faite. Ce que nous devons faire ensuite, c'est chercher Sublime Text. Dans votre dossier Applications, je vais juste chercher ou taper S-U pour faire apparaître Sublime. Ouvrons ça, puis suivez-nous pour l'instant. Tapez h1 Mon premier site Web, et h1 à nouveau. Vous remarquerez que j'emballe un h1 avec un signe plus petit que et plus grand que, et je le ferme avec une barre oblique plus petite que, et un signe plus grand que. Ça n'a pas l'air trop remarquable. Mais vous verrez que dès que je l'enregistre dans mon dossier en tant que fichier HTML, je vais juste l'enregistrer sous test.html. Tu verras cette couleur. Il commence en fait à coder la couleur mon fichier. Ce qu'il fait aussi, c'est qu'il commence à me donner des suggestions sur ce qu'il faut écrire, et il complète également un tas de code pour moi. Si j'appuie sur « Entrée » maintenant, vous verrez que cela fait un peu de travail pour moi, et je n'ai pas besoin de me souvenir de tous ces personnages drôles. Ici, je vais dire que ma couleur fav est rouge. Fantastique. Sauvons ça. La prochaine chose que nous pouvons faire est de rechercher Google Chrome. Je vais taper G-O dans mon dossier Applications et ouvrir Google Chrome. Il va me demander si je veux le définir comme mon navigateur par défaut. Je vais dire oui, s'il vous plaît. Mac va être un peu prudent, et je vais dire oui, utiliser Google Chrome. Ensuite, nous avons installé Google Chrome, Sublime Text et GitHub Desktop et nous les utilisons. Je vais juste les traîner légèrement vers la gauche pour les garder dans mon bar en bas, même quand ils sont fermés. Dans ma fenêtre Finder, je vais aller sur le bureau, ouvrir mon dossier de héros de bande dessinée et faire glisser mon fichier test.html dans Google Chrome, et il y a mon premier site Web. Maintenant, je veux le partager avec le reste du monde. Je vais à GitHub Desktop. Je vois qu'il y a un changement non validé, test.html. Cela signifie qu'il remarque qu'il y a un changement. Maintenant, je veux dire oui, commettez ce changement, parce que j'ai fini de travailler sur ce petit peu, et je vais dire, j'ai créé mon premier fichier de test. Vous pouvez donner une description si vous le souhaitez. Votre résumé et votre description sont très utiles lorsque vous travaillez avec beaucoup de changements et que vous travaillez avec des équipes afin que vous puissiez dire que c'est exactement ce que j'ai changé et c'est pourquoi je l'ai modifié. Ensuite, vous vous engagez à gh-pages, qui le valide à vos projets locaux sur votre ordinateur. Maintenant, pour le mettre en ligne, vous voulez réellement le synchroniser. Maintenant, c'est vraiment utile. Cela signifie que vous pouvez garder un tas de modifications sur votre ordinateur, puis quand vous avez terminé, vous pouvez tout envoyer à GitHub en ligne. On y va. La prochaine chose que nous devons aller à est d'aller à Chrome, créer un nouvel onglet, et maintenant rappelez-vous, votre nom d'utilisateur GitHub. Le mien était mrra-screencast, et maintenant, vous devez aller .github.io/ votre nom de projet, donc cartoon-hero/test.html. Appuyez sur « Entrée ». Il y a une erreur. Laissons une lecture. Il ne contient pas le fichier sélectionné. C' est parce que je l'ai mal orthographié. En fait, nous allons bien orthographier, test.html. On y va. Vous pouvez partager cette URL avec n'importe qui. Mais maintenant, je veux que mon rouge soit rouge. Maintenant, c'est là qu'il devient vraiment puissant. Revenez à Sublime Text, et nous allons taper span, pas spam, et vous voyez comment il s'est également terminé là à nouveau. Fantastique. Nous allons donner ces éléments et attributs. On y va. Je vais le sauver. Maintenant, dans Chrome, vous verrez ça. Je vais revenir à notre local, vous verrez qu'il y a un fichier, et vous verrez que celui en ligne est notre nom d'utilisateur. Je vais rafraîchir celui-ci, et vous verrez que ma couleur préférée est le rouge vient d'apparaître. Maintenant, comment remettons-nous ça en ligne ? Allez sur GitHub Desktop et vous verrez qu'il a pris quelques modifications. Vous verrez qu'il y a un tas de texture rouge et un tas de vert. C' est dire que le rouge s'en va et le vert arrive. Fantastique. Assurez-vous que vous vous engagez à gh-pages, et ensuite nous allons dire, mettre une travée. Mon rouge est maintenant rouge. Vous pouvez modifier votre fichier de test comme bon vous semble. Expérimentez, amusez-vous. Mettez ce que vous voulez. Ensuite, je dis s'engager à gh-pages. Je fais une synchronisation rapide pour m'assurer qu'il va à github.com. Une fois que cela a terminé la synchronisation, j'attendrai juste un peu plus longtemps avant GitHub pour obtenir son acte ensemble. Je vais ensuite aller au deuxième onglet et actualiser. Si rien n'apparaît, cela peut prendre un peu plus de temps pour que les choses se produisent réellement. Je fais un autre rafraîchissement, et un autre. Peut-être que ça n'arrive pas très vite, mais finalement ça va devenir rouge. Si rien ne se passe vraiment, allez à Safari et allez à votre page de validation, que vous verrez que quelque chose s'est passé, mettez une travée dans. En fait, c'est arrivé. Revenez à Google Chrome et maintenant actualiser, et vous verrez qu'il est dit, ma couleur préférée est le rouge. Parfois, les choses prennent un certain temps. Parfois, vous devez juste attendre un peu. On y va. Votre tout premier site web. 7. La théorie de la boîte HTML (c'est facile, promis): Ok, qu'est-ce que le HTML ? Eh bien fondamentalement, HTML est un langage que les humains écrivent et les navigateurs peuvent comprendre, c'est le langage pour afficher l'information. Mais qu'est-ce que c'est ? Je ne comprends pas. Oui, très bonne question. HTML est en fait un tas de boîtes, de boîtes à l'intérieur de boîtes, à l'intérieur de boîtes, à l'intérieur de boîtes. La boîte principale est en fait votre navigateur. À l'intérieur d'une boîte donnée, vous pouvez soit avoir une autre zone HTML, soit vous pouvez avoir du texte, ou vous ne pouvez rien avoir. Il y a donc vraiment trois options pour chaque boîte. Certaines boîtes sont invisibles et chaque boîte a un but différent, et chaque boîte est affichée différemment par défaut, par le navigateur, c'est assez puissant. Donc, par défaut, la plupart des boîtes sont seulement aussi élevées que leur contenu, autres boîtes sont aussi élevées et aussi larges que leur contenu. La plupart des boîtes aiment s'asseoir aussi loin que possible vers la gauche et aussi loin vers le haut. Alors, qu'est-ce qu'une boîte HTML ? Une analogie cool, une métaphore cool, mais on ne comprend pas. Laisse-moi te l'expliquer. Chaque zone HTML unique ou la plupart d'entre elles, a une balise d'ouverture et a une balise de fermeture et a du contenu. Rappelez-vous, le contenu peut être du texte, vide ou rien, ou il peut y avoir d'autres éléments HTML à l'intérieur. Une balise d'ouverture a un symbole inférieur ou inférieur à. Il a le nom de la balise, puis il a un symbole supérieur à, c' est-à-dire votre balise d'ouverture. La balise de fermeture a un symbole inférieur à et elle a une barre oblique avant, le nom de la balise, puis un symbole supérieur à, c' est-à-dire la balise de fermeture. Maintenant, l'élément HTML entier a une balise d'ouverture, le contenu et la balise de fermeture. Ce qui est vraiment cool à propos des éléments HTML, c'est qu'ils peuvent avoir ces petits bits et morceaux secrets appelés attributs que le navigateur peut comprendre. Ainsi, comme par exemple, une balise de lien ou une balise d'ancrage, qui est un nom de balise d'un, elle a des attributs différents. On peut être un href, l'URL vers laquelle vous voulez que le lien aille. Vous pouvez également avoir comment dois-je ouvrir le lien en tant que cibles. Vous pouvez également avoir un attribut title, qui indique au navigateur lorsque l'utilisateur survole ce pendant un peu de temps, que devrions-nous afficher ? Ce sont donc des attributs de base que vous pouvez ajouter à la balise de lien. C' est la théorie HTML pour vous. 8. Commencez à écrire votre propre code HTML: Assez de théorie. Faisons des trucs. Faites glisser le dessin animé ici dans Sublime Text et commençons à écrire du HTML. Une autre théorie, je vais juste la suivre. Tant que nous ne l'enregistrons pas en tant que fichier HTML, vous n'obtiendrez pas de code complet. Enregistrez-le dans votre dossier de héros de bande dessinée sous elements.html. On y va. Vous dites maintenant qu'il y a une coloration de code. Il y a aussi l'achèvement du code h2. Rubrique 2. Faisons un paragraphe. C' est mon premier paragraphe. Nous avons quelques éléments, il y a un défaut prêt et un basique appelé une balise div. C' est votre boîte de base et c'est la plus courante pour mettre plus de boîtes à l'intérieur de. On peut continuer à mettre des boîtes dans des boîtes à l'intérieur des boîtes. Finalement, vous devez mettre quelque chose à l'intérieur de quelque chose. Je vais mettre une étiquette ici. Maintenant, une balise est un lien ou une ancre. Il est livré avec un attribut spécial appelé href, et à l'intérieur de ce href, vous spécifiez url. Vous dites au navigateur, si l'utilisateur clique dessus, où devrions-nous aller ? Tu as mis quelque chose à l'intérieur. Allons mettre http.skillshare.com. Le contenu de celui-ci devrait être, visitez le site de partage de compétences. Fantastique. Sauvons. Maintenant, cliquez avec le bouton droit sur les éléments de HTML reveal et finder, puis faites-le glisser dans Google Chrome. Ensuite, nous avons quelque chose, vous voyez à quel point le h1 est différent du h2. Rubrique 1, rubrique 2. Il est très différent de votre paragraphe et il est très différent de votre lien qui est souligné et il est violet parce que nous l'avons visité auparavant. Si je clique sur celui-là, ça va m'emmener quelque part. Pour le site Web de partage de compétences. C'est cool. Retour à sublime, je peux maintenant changer ou donner la balise a ou aux éléments a un attribut supplémentaire appelé target, ce qui me permettrait de définir sa valeur pour souligner vide. Sauvez-le. Ce que cela va faire, c' est qu'il va réellement ouvrir dans un nouvel onglet, ce qui est assez cool. Cela signifie que vous pouvez simplement continuer à ouvrir de nouveaux onglets et nouveaux onglets et de nouveaux onglets et finalement obtenir tellement de gens que vous ne savez même pas ce que chacun d'entre eux est. Je digresse. Revenons à Sublime Text, et je vais vous montrer quelques autres éléments et leurs attributs. Si nous créons une nouvelle balise de paragraphe, nous pouvons dire, « Hey There ». Mais si je veux dire « Hey, mon nom est : » Maintenant, je veux mettre ça sur une nouvelle ligne. Je peux utiliser une balise br, qui est une pause. Maintenant, vous pouvez appuyer sur « Entrée ». On n'a pas à le faire. Mais je ne vais pas le faire. Je m'appelle Richard. Sauvons ça. Fichier, enregistrez. D'ici, vous pouvez le voir. Il y a en fait un saut de ligne. C' est l'une des étiquettes spéciales. Il n'a pas de balise de fermeture. Le prochain que j'aimerais vous montrer est les éléments de l'image. balise Image n'a pas non plus de balise de fermeture. Un autre spécial, un autre briseur de règles. Si nous tapons test.jpg et nous enregistrons, retournez à Chrome, actualisez. Vous verrez qu'il arrive avec un lien d'image cassé. Maintenant, ce que je veux faire, c'est trouver une image. M. R.A. Je vais chercher ça. M. R.A., Richard Armstrong. Je vais chercher des images. Il y en a une bonne. Maintenant, je vais cliquer avec le bouton droit de la souris et je vais enregistrer l'image sous test.jpg. Fantastique. Maintenant, quand je me rafraîchis, mon image va apparaître. Maintenant, avec une image, c'est vraiment cool car cela signifie que vous pouvez également en spécifier une autre. Si je clique sur celui-ci et je clique avec le bouton droit de la souris et je spécifie, eh bien, copiez l'URL de l'image. Cela signifie que je n'ai pas vraiment besoin de télécharger ça. Cela signifie que je peux simplement copier et coller cela dans ma source. Lorsque test.jpg est une URL relative, il dit où puis-je le trouver localement ? Vous pouvez également coller dans une URL absolue, qui commence par HTTP ou HTTPS ://. Maintenant, je vais enregistrer ceci et revenir à mon navigateur, revenir à elements.html, et actualiser. Vous verrez que j'ai maintenant une nouvelle image. La dernière chose que nous devons faire pour toutes les pages HTML est que nous devons l'envelopper dans un élément HTML. Tu vois tout ça ? C' était plutôt intense. Je vais juste éditer, annuler, et je vais le faire toute seule. Allons au HTML. Écrivons la balise HTML de fermeture, puis coupez-la et mettez-la en bas. Ce dont nous avons besoin, c'est que nous avons besoin d'une étiquette de tête et que nous avons besoin d'une étiquette de corps. Vous voyez ce qui se passe lorsque vous fermez automatiquement les choses. Étiquette corporelle. Je vais couper cette étiquette de corps et je vais la mettre juste sous le dernier élément. Ce que HTML recommande, c'est que vous mettez tous vos éléments invisibles à l'intérieur de votre tag head. Je vais vous montrer un exemple de boîtes invisibles et toutes vos choses visuelles ou visibles à l'intérieur de votre étiquette corporelle. C' est juste la formalité. Vous n'avez pas vraiment besoin d'avoir tout cela, mais pour tous les navigateurs et pour que les choses fonctionnent super bien tout le temps, je le recommande fortement. On va faire ça à partir de maintenant. A l'intérieur de votre tête, nous pouvons faire quelque chose comme le titre et nous pouvons réellement changer le titre de la page Web. Pour le moment, le titre de la page Web est elements.html. Je veux le changer pour autre chose. Dans Sublime Text, je vais dire des éléments avec quelques points d'exclamation. Enregistrez ça, actualisez. Vous voyez ça dit élément et les quelques points d'exclamation. C' est à ce sujet en termes de comment rock HTML. Maintenant, ce qui est vraiment cool, c'est que chaque élément visible peut avoir un attribut de style et à l'intérieur de l'attribut de style, vous pouvez commencer à jouer avec certains CSS. On peut dire que la couleur est bleue. Nous pouvons également dire la décoration de texte soulignent. Ça a l'air plutôt cool. Fichier, enregistrez. Cela ressemble à un lien, même si nous ne pouvons pas cliquer dessus. Vous pouvez voir comment vous pouvez commencer à gâcher avec quelques CSS ici. 9. La théorie du CSS (en bref): Nous avons appris à fabriquer des boîtes et à mettre des boîtes à l'intérieur d'autres boîtes, mais comment rendre ces boîtes jolies ? Eh bien, c'est là que CSS entre en jeu. Qu' est-ce que le CSS ? C' est un tas de styles qui peuvent être épinglés avec balises HTML spécifiques par divers moyens et moyens, mais fondamentalement une règle CSS contient une liste de paires de clés et de valeurs. Cela signifie que vous pouvez dire : la couleur est ceci, couleur de fond est ceci, taille de la police est ceci, la marge est ceci, le remplissage est cela, c'est beaucoup d'entre eux, je ne vais pas les parcourir tous maintenant, donc c'est le théorie. Allons-y. 10. 3 façons d'utiliser ce CSS: Faisons un peu de CSS maintenant. Faites glisser votre dossier Cartoon Hero dans Sublime Text et créons un nouveau fichier. Enregistrez-le comme stylish.html. Sauvegardez-le et je vais juste écrire une balise HTML et laisser Sublime le compléter pour moi. Vous verrez un peu d'informations supplémentaires en haut ici. C' est bon. Nous allons appeler ce document élégant. À l'intérieur du corps, je vais juste créer quelques tags h1, Heading 1-1. Je vais copier ceci, puis je vais le coller quelques fois. Ensuite, je vais en créer un nouveau, qui est un h2. Je vais l'appeler Heading 2-1, et je vais le copier et le coller quelques fois. Je vais juste faire une différence que vous savez exactement ce qui se passe. D' accord. Sauvons ça. Ensuite, pour lui donner un style, nous pouvons dire couleur, deux-points, puis lui donner une couleur, puis point-virgule. Ensuite, si vous voulez changer la taille de la police, vous pouvez avoir 90 pixels car c'est un si grand h1. D' accord. On le sauve. Ensuite, cliquez avec le bouton droit de la souris sur le fichier HTML élégant, Révéler dans le Finder, puis faites-le glisser dans Google Chrome. Vous verrez ça alors il y a un tas d'éléments là-bas. Un eux est rouge. Mais la taille de la police n'a pas l'air trop différente, et nous l'appelons une taille de fon, alors passons à un T. Revenez à Google Chrome. C' est grand. C'est exactement ce qu'on veut. D' accord. Mais maintenant, je veux que toutes les autres rubriques soient exactement les mêmes. Ce que nous faisons, c'est que nous pouvons copier et le coller. Je vais juste contrôler C ou Apple C et coller. D' accord. Wow, ça prend beaucoup de temps. File, Save, et vous verrez maintenant ça, wow. Les titres 1 et 2 sont exactement les mêmes, ce qui aurait dû vaincre le point, n'est-ce pas ? Maintenant, en fait, je veux que tous les h2 soient verts, alors ils auront l'air différents. Maintenant, encore une fois, tu dois en changer un. Changez-les tous. Ça devient un peu désordonné, et ça prend beaucoup de temps, mais ça fait le travail. D' accord. Mais il y a un meilleur moyen. Au lieu d'utiliser un attribut de style sur l'élément HTML à l'intérieur de vos éléments de tête, nous allons créer une balise de style. Sublime terminera pour vous et à l'intérieur de votre balise de style appuyez deux fois sur « Tab », puis tapez h1. À l'intérieur de votre h1, je vais juste appuyer sur « Shift » et « Tab » juste pour annuler le retrait. Votre h1, nous pouvons dire, couleur devrait être rouge. D' accord. Maintenant, je veux sortir toutes ces couleurs devraient être rouges. Fantastique. Fichier, Enregistrer. Rafraîchir. On y va. Maintenant, vous ne remarquerez peut-être pas à quel point c'est cool, mais si je voulais les changer tous en orange, orthographié correctement, bien sûr, je pourrais juste taper une ligne, puis Enregistrer, Rafraîchir et puis tous les trois de mes éléments sont changés. Maintenant, c'est la puissance de CSS, surtout quand vous le retirez des éléments HTML réels, vous pouvez commencer à changer l'apparence de votre site à partir d'un fichier différent et cela change l'ensemble de votre site, votre site Web entier, pas juste chaque élément. Cela rend votre site différent, plus élégant et le mettre à niveau vraiment, vraiment simple et facile. D' accord. Supprimons aussi la taille de la police. Couperons-le, et collons-le. D' accord. Je vais enlever les attributs de style de tous ces h1. Vous verrez que j'ai gardé dans les attributs de style de h2s pour l'instant. D' accord. Je ne veux pas l'acheter pour l'instant. Merci beaucoup. Je l'essaye toujours. Je ne sais même pas encore si j'aime HTML et CSS. D' accord. Votre couleur est orange, la taille de police est de 90 pixels. Peut-être que tu veux faire autre chose. Disons, décoration de texte. Donnons-lui un soulignement. On y va. Fichier, Enregistrer, Actualiser et voilà. Incroyable. Ainsi, vous pouvez commencer à voir qu'avoir une ligne de code peut commencer à s'adapter à l'ensemble de votre site ou à tous certains éléments d'un site. D' accord. Maintenant, je veux faire la même chose avec les h2. Je veux la taille de la police, pas les poids de la police. Je veux que la taille de la police soit d'environ 40 pixels. Alors sauvegardons ceci et actualisons. Rien ne s'est passé. Ok, mais je vais te dire pourquoi rien ne s'est passé. Parce que lorsque vous écrivez des styles dans un attribut de style, ils remplacent les styles et la balise de style. D' accord. C'est la nature de CSS. Il y a beaucoup d'écrasement ou de remplacement qui se produit. Donc, si c'est le premier, ce qui est écrit en premier et autre chose après qu'il est écrit, si c'est la même règle, alors il remplacera. Donc, si je le copie et le colle, et que je le change à 60, la valeur de la deuxième règle remplacera la valeur de la première règle. De même, si c'est dans les attributs de style, la taille de police remplacera les tailles de police précédentes. D' accord ? Donc, c'est quelque chose dont il faut se souvenir. Je vais juste prendre tous ces styles, parce qu'en fait, on n'en veut pas. Nous aimerions que tout soit à l'intérieur d'une feuille de style, à l'intérieur de l'étiquette de style. D' accord. Mais je veux que ma couleur soit verte. Alors sauvegardons ceci, et allons voir ce qui se passe. D' accord. Ça a l'air bien. Mais maintenant, comment pouvons-nous savoir que c'est réellement ce que nous voulons ? Comment savons-nous que c'est 40 ? Comment savons-nous que ce n'est pas 60 ans ? Comment pouvons-nous savoir ce qu'il y a ? Maintenant, Google Chrome arrive. Faites un clic droit sur quelque chose Inspectez l'élément. Wow, vous commencerez à voir qu'il connaît réellement HTML et CSS. Vous pouvez inspecter un tas de choses différentes. Donc, ce que nous pouvons faire ici, c'est que nous pouvons réellement aller cliquer sur ce h2 ou inspecter un élément, et voir que la taille de la police est de 60, et que la taille de la police était de 40, mais il semble qu'elle soit écrasée par ce h2. Vous pouvez le voir à la ligne 15 et à la ligne 12, comme ça. C' est vraiment, vraiment utile. Ce qui est aussi très utile, c'est que vous pouvez  : « Je me demande quelle taille il devrait être, parce que 60 n'est pas tout à fait correct Donc nous pouvons réellement lui écrire 50 pixels, ou peut-être 22 pixels est juste. Voila. Vous pouvez voir à quoi il ressemble, mais quand vous Rafraîchissez, les choses reviennent à la normale. Alors revenons ici. Modifie la valeur 22 et supprime cette h2. Fantastique. Mais maintenant que se passe-t-il si je veux que certains de mes h1s et certains h2s soient d'une couleur différente ? C' est là que ça devient vraiment intéressant. Donc, je vais dire classe, un nouvel attribut, classe. Je vais donner à certains éléments une certaine classe. On va dire, petit. Je vais copier ceci, et je vais le coller sur certains d'entre eux. D' accord. Maintenant, comment diable pouvons-nous juste obtenir des h1s avec une classe de petits, et juste obtenir des h2s avec une classe de petits ? Eh bien, en CSS, il y a une certaine façon de le faire, et c'est ce point et le nom de la classe. Les mêmes règles s'appliquent aux noms de classe. Donc, disons, la taille de la police est de 12 pixels et Enregistrer ceci. Vous verrez que certains éléments sont vraiment petits. Vous commencerez à voir que, hé, que l'un est petit, que l'autre est petit, que l'autre est petit, parce qu'ils ont tous une classe de petits. C' est vraiment cool. Maintenant, le fait est, même si nous devions déplacer la petite classe au-dessus du sélecteur h2, il le remplacerait toujours. Vous pouvez voir ici. Donc, vous pourriez vous attendre à ce que parce que le petit est arrivé en premier et le h2 est arrivé en deuxième, que cette taille de police remplacerait cette taille de police. Mais ce que CSS fait aussi, c'est qu'il a des pondérations. Ainsi, un nom de balise a une pondération plus petite qu'un nom de classe. De la même manière, quelque chose avec un ID de premier a une pondération encore plus grande qu'un nom de classe, et une pondération plus grande qu'un nom de balise. Donc, si nous mettons une taille de police de 150 pixels sur le premier élément, ou l'élément avec un ID de premier, vous auriez un 150 pixels. Mais qu'est-ce qu'une pièce d'identité ? Eh bien, un ID est presque comme une classe, sauf qu'il ne peut être que sur un élément. Donc, un seul élément peut avoir un ID de premier. D'accord ? Il y a notre gros titre, avec d'abord, et vous pouvez voir que même si c'est plus haut de la page que les autres règles, il a fallu la préférence parce que c'est un ID. Même ainsi, si nous devons mettre un attribut de style ici et changer la taille de la police pour que je ne sais pas, passons à 20 pixels. Fichier, enregistrez. Vous verrez qu'un style en ligne sur un attribut de style prend la préférence sur un ID. Donc, il y a différentes pondérations à penser lorsque vous faites du style. La prochaine chose que nous devons considérer est ce qui se passe si je veux cibler autre chose à l'intérieur d'un élément ? S' il y a une travée ici, et à l'intérieur de la travée, je dis : « Essaie moi. » Dehors, j'ai aussi une travée qui dit : « Essaie moi. » Sauvegardons ceci et voyons ce qui se passe. La première travée, je vais juste inspecter cet élément, dit essayer moi, mais c'est vert comme le h2. Vous voyez ce qu'une plage fait, elle hérite du conteneur de son parent ou du style des boîtes parent. Tout comme je vais inspecter ce type et inspecter son pote. Désolé. Il hérite du conteneur de corps parce que ce sont les parents. Voyez-vous, les travées sont assez intelligentes par défaut. Mais maintenant, je veux rendre toutes les travées italiques, alors essayons ça. Maintenant, j'ai CSS ici, il suffit de taper span et disons, que pourrait-il être des polices ? On y va. Style de police, italique. On y va. Sauvons et voilà, une italique. Mais que se passe-t-il si je veux juste que cette période fasse quelque chose ? Eh bien, nous pourrions mettre un nom de classe dessus que nous espérons, ou ce que nous pourrions faire est que nous pourrions dire h2 span, qui signifie que la travée ou toutes les travées à l'intérieur de tous les h2s faisons quelque chose. Que devons-nous faire ? On pourrait lui donner une couleur de fond, on pourrait lui donner un coup de foudre. Faisons ça. Style de police, famille de polices, non. Décoration de texte ? Oui. On peut passer par la grève. L' orthographe est terrible. Frappé, mais ça n'a pas l'air sympa. Peut-être qu'il y a un tableau de bord. Qui sait ? Voyons voir. Fichier, enregistrez, actualisez. Rien n'est vraiment trop beau. Maintenant, la puissance de Google est vraiment utile quand il s'agit de CSS et HTML parce que tout le web est construit sur HTML et CSS. Faisons un Google rapide pour CSS Strike-through. On y va. Il y a quelques sites Web qui sont vraiment utiles. Propriété de décoration de texte, ligne à travers. Il y a un tas d'informations différentes, mais bon, copions ça. Voyons si ça marche. Ligne à travers. Maintenant, revenons ici et rafraîchissez-vous, on y va. J' ai un strikethrough ou un line-through comme on l'appelle et de plus, je ne l'ai que dans le h2. Il y a encore une chose que j'aimerais te montrer. Comme vous pouvez le voir, mes styles grandissent même si je n'ai pas autant de CSS et même si nous n'avons pas autant stylé notre page. La meilleure façon d'aborder les choses de style est de créer un fichier de feuille de style séparé. Ce que nous allons faire, c'est que nous allons créer une balise de lien et un texte sublime. Il suffit de commander l'ensemble complet prêt. Eh bien, c'est une feuille de style, c'est un type CSS feuilles de style et le HREF signifie où le diable est-il ? Nous allons juste dire que c'est dans le dossier CSS et ça s'appelle test.css. Maintenant ce que je vais faire, c'est que je vais couper tout ça. Je vais supprimer ces balises de style, puis je vais enregistrer. Maintenant, je vais dire fichier, nouveau fichier. Je vais le coller et je vais dire fichier, enregistrer comme créer un nouveau dossier appelé CSS, puis je vais l'appeler test.css et enregistrer. Ensuite, allez ajouter un retrait en disant shift-tab, juste pour qu'il soit propre et bien rangé. Sauvez-le. Accédez à Google Chrome, actualisez. Rien n'a changé, mais c'est bien. Juste pour m'assurer que tout fonctionne, je vais ajouter une nouvelle règle et je vais l'appliquer au corps. Le corps, je vais dire la couleur de fond. Demandons un gris clair. Enregistrer, rafraîchir, et c'est gris clair. Maintenant, c'est vraiment cool car cela signifie que nous pouvons écrire un tas de CSS sans compliquer notre fichier HTML. Nous avons juste une ligne qui se rapporte au fichier test.css. Fantastique. C'est HTML et CSS pour vous. Nous en apprendrons beaucoup plus au fur et à mesure que nous créons notre projet, mais pour l'instant, si vous voulez synchroniser cela sur le web et partager ceci avec vos amis et partager vos expériences, créer de nouveaux fichiers, de nouveaux dossiers, nouveaux HTML, CSS, vas-y. Il y a un tas de liens vers CSS. Hope guards est un tas de liens vers HTML. Espérons gardes, vous pouvez référencer tous les éléments HTML, tous les éléments CSS dans les ressources fournies. Ce que nous voulons faire ici, c'est juste s'assurer que nous sommes sur la branche gh-pages. Nous allons alors nous engager à dire que nous avons fait un tas de trucs ou tout ce que vous voulez. S' engager sur gh- pages. Fantastique. Synchroniser. Une fois qu'il est synchronisé, nous pouvons réellement ouvrir Google Chrome. Ouvrez un nouvel onglet et ensuite ce que nous allons faire est d'aller à GitHub et nous allons nous connecter. Alors rappelez-vous votre nom d'utilisateur. Le mien est mrra-screencast. Rappelez-vous votre mot de passe, connectez-vous. Allez dans votre répertoire ou référentiel de cartoon-hero, cliquez sur celui qui commits. Vous verrez qu'il y a un commit initial. Cool. Mais maintenant, vous devez aller à votre branche gh-pages. Tu verras qu'on a fait un tas de trucs. Maintenant que vous savez que les commits arrivent, ouvrons un nouvel onglet. Je vais dire, mrra-screencast.github.io/cartoon-hero/stylish.html Voyons voir. On y va. Nous pouvons partager notre beau site web avec le reste du monde. Amusez-vous, jouez, faites des trucs dingues. Partagez vos liens dans la galerie de projets, commentaires sur les codes des autres, répondez aux questions, posez des questions, allez sauvage, prenez un jol. 11. La planification d'abord :): Tout droit. Maintenant, nous allons commencer à planifier notre site, et la planification peut prendre n'importe quelle forme que vous voulez. Cela peut arriver avant une étape, et après une étape, avant une autre étape. n'y a pas de planification une fois et de ne plus jamais planifier tout au long de la conception et du développement du site. Vous devez planifier avant tout ce que vous faites. La planification est incroyable. Une des façons que j'aime planifier est, tout d' abord de faire un croquis rapide du site si je ne l'ai pas encore conçu. Après l'avoir conçu, j'aime ensuite faire un filaire, et ce n'est pas un filaire typique de l'apparence du site ? Comment ça marche ? Mais une étiquette de boîte filaire de comment toutes ces boîtes vont-elles s'intégrer ensemble sur le site Web ou sur la page ? Laissez-moi vous emmener à travers le site de mon personnage et comment j'ai aménagé tous les blocs. Tout d'abord, il y a ma page, qui est une grande boîte. Ce que je veux, c'est la boîte d'en-tête et à l'intérieur de cette boîte d'en-tête, je veux une boîte d'image de profil. Je veux que ce soit rond, et j'ai mis une croix à travers la boîte pour signifier que c'est une image. L' élément suivant est un titre, toujours à l'intérieur de l'en-tête, et ce sera le nom de mon personnage, et peut-être qu'il pourrait y avoir un sous-titre. Mais pour l'instant, il n'y a qu'un cap. La prochaine chose est à l'intérieur du contenu, j'aimerais qu'il y ait un autre titre, et peut-être que cela pourrait dire à propos de mon personnage. Ensuite, il y aura une balise de paragraphe avec un tas de copies, un tas de textes au-dessus de mon personnage. La prochaine chose, un autre titre, et ça pourrait être dire quelque chose comme les choses préférées de Mon personnage, ou les amis préférés de Mon personnage. Ce que je vais faire, c'est que je vais le mettre dans une zone de liste ordonnée, et à l'intérieur de cette zone de liste ordonnée, il y aura un tas d'éléments de liste. Après cela, je vais mettre une image et encore une fois vous voyez la grande croix qui signifie l'image. Sous cela, il y aura une petite légende, puis en dessous, un autre titre avec une liste non ordonnée, avec un tas d'éléments de liste. Cette liste peut être des choses préférées à faire, ou des amis à nouveau, ou des caractéristiques, ou tout un tas de choses différentes que vous pouvez mettre dans des listes. Après cela, je vais juste inclure un petit pied de page et à l'intérieur de ce pied de page je dirai, c'est qui a fait le site, c'est là que vous pouvez me trouver et toute autre petite information que mes utilisateurs peuvent vouloir chercher. C' est ce que je fais pour tous les sites web, de passer d'un design au HTML et CSS. C' est un très bon processus, une très bonne partie de la planification. Quand je peux dire, comment est-ce que tout va ensemble comme des boîtes ? Vous faites la même chose pour votre site Web, vous pouvez copier le mien ou vous pouvez trouver quelques idées différentes de vos propres. Mais il est vraiment bon de penser à comment tout cela s'intègre dans des boîtes, et quelles boîtes s'intègrent dans quelles boîtes. 12. Écrivons le code HTML de notre site Web: Écrivons notre code HTML pour ce projet. Ouvrons notre dossier de héros de bande dessinée et faites-le glisser dans Sublime Text et la première chose que nous allons faire est de créer un nouveau fichier et nous allons l'enregistrer sous index.html dans notre dossier de héros de bande dessinée. La raison pour laquelle nous l'appelons index.html est parce que lorsque le navigateur accède à un site Web, il a besoin de savoir quel fichier ne devrait pas charger en premier et il recherche toujours votre fichier d'index. La prochaine chose que nous allons faire est d'écrire une balise HTML et de laisser Sublime Text remplir le reste. Nous allons supprimer ce plus petit que le symbole, nous allons alors commencer à écrire notre HTML. Donc mon personnage est Wreck-It Ralph. Je l'aime vraiment. Quel que soit votre personnage, il peut s'agir d'un personnage de dessin animé, d'un personnage animé, mais si vous n'êtes pas intéressé, choisissez un personnage de film ou choisissez quelqu'un d'autre pour le faire, cela rend beaucoup plus facile et beaucoup plus drôle. La prochaine chose que nous allons faire est d'insérer un élément de lien et Sublime Text sait que c'est un CSS1 qui est génial donc nous allons dire css/hero. css afin qu'il sache où le trouver. Je voudrais enregistrer comme je vais juste au cas où l'ordinateur se bloque ou quelque chose de mauvais arrive. C' est notre élément de tête. Maintenant, je vais référencer ma box-wireframe ici et là. Voyons ce que je dois faire. J' ai besoin d'un élément d'en-tête tout d'abord, alors laissez-moi taper mon élément d'en-tête et à l'intérieur de mon élément d'en-tête, j'ai besoin d'une image qui est notre image de profil et un titre. Faisons ma balise d'image et ma source sera img/profile.jpg, puis en dessous, je vais créer une balise h1 et l'appeler Wreck-It Ralph. Fantastique. C'est mon en-tête mais maintenant vous verrez mon filaire que j'ai réellement un conteneur extérieur et ce n'est pas le navigateur, c'est en fait un wrapper. Je vais en créer un nouveau appelé wrapper ou un nouveau div avec la classe de wrapper et cela va envelopper tout mon contenu. La prochaine chose que nous allons faire est de créer un div avec une classe de contenu et à l'intérieur ici, je vais mettre tout mon contenu. La prochaine chose est un pied de page et même si dans mon aperçu ou mon filaire il n'y a pas de véritable boîte ici pour un pied de page et qu'il n'y a pas de véritable boîte pour le contenu, j'ai décidé de les mettre dans. Votre filaire n'a pas besoin d'être super concret, il vous aide juste à planifier. Donc les éléments suivants que je vais mettre est mon pied de page. Maintenant, à l'intérieur de mon contenu, ce que je dois faire est que j'ai besoin de créer un h2 pour ce titre ou ce titre, j'ai besoin de créer une balise p, un autre h2, une liste ordonnée avec un tas d'éléments de liste à l'intérieur d'une image, un p avec une classe de légende, un autre titre, une liste non ordonnée avec quelques éléments de liste à l'intérieur et à l'intérieur du pied de page, j'ai besoin de créer quelques éléments que j'utiliserai une liste pour créer. Alors commençons à écrire ceci. La première chose que je veux faire ici est d'écrire sur Ralph et je choisis un h2 parce qu'il y a déjà un h1 sur la page donc ceux-ci ne sont pas aussi importants que le h1 mais ils sont assez importants. Mon prochain est un p tag et à l'intérieur de ce p tag, je vais écrire un peu sur Ralph, donc un méchant de jeu vidéo 8 bits qui parcourt toute la longueur de l'arcade pour prouver qu'il est un bon gars. Il a aussi des mains massives. On peut prendre que l'on devrait compter. La prochaine chose que je veux faire est d'écrire sur les caractéristiques de Ralph. ici, je vais utiliser un ol et à l'intérieur de l'ol, nous allons créer quelques éléments de liste. La première chose, il est super cool. Le prochain élément de la liste, il est traité comme un mauvais cul, cool. Le suivant, il est amical avec les personnages de la glisse. Ça n'a pas commencé comme ça, mais ça finit comme ça. Après notre ol ou notre liste ordonnée, nous allons avoir une grande image donc je vais donner à cette image une classe de grande image. C' est logique, non ? La source de l'image va être aussi big-image.jpg. Après cela, nous allons obtenir un p et je vais lui donner une classe de légende et dans cette légende, c' est Ralph en action. Après cela, je vais créer un autre h2 et dire que les amis de Ralph orthographiés correctement, bien sûr. Ici, je vais utiliser une liste non ordonnée. Il crée quelques éléments de liste. Je vais juste copier et coller ça. Ici, je vais trouver quelques-uns de ses amis. Le premier est Jake de l'Aventure time. Le suivant est Bloo de Fosters. C' est la maison de Foster pour les amis imaginaires. Le suivant est Arthur Catastrophes du roi Arthur. Maintenant, ce que je vais faire est rapidement aller trouver des liens pour ces trois gars dans le Google Chrome. Tapons Jake de Adventure Time. Ça va aller un peu, et oui, c'est celui que j'ai trouvé tout à l'heure. Je vais copier ça et je vais créer un lien autour de Jake. Le href va être cela, les cibles vont être soulignées en blanc, et le titre sera la page de Visit Jake. Je vais faire la même chose de Bloo. Rechercher Boo Fosters Accueil, Chrome. En voici un que j'ai trouvé tout à l'heure. Copions encore ça. À l'intérieur, créons un lien autour de Blue. Le href sera que je viens de copier. La cible sera vide et le titre sera la page Visit Bloo. Le prochain sera Arthur. Faisons la même chose pour Arthur, créons un lien autour de lui. Encore une fois avec un href, un trait de soulignement cible vide et le titre de la page Visit Arthur. Nous devons maintenant trouver un lien pour Arthur. J' aime Google et [inaudible] .Là, nous allons. Copions encore ça. Retournez à Sublime Text et collez-le dans le href. C' est à peu près notre contenu. Maintenant, à l'intérieur de notre pied de page, nous avons juste besoin de quelques petites choses. Je vais utiliser à nouveau une liste non ordonnée avec quelques éléments de liste, nous allons lister les éléments, je vais dire, Made by Rich. Ensuite, l'élément suivant de la liste, je vais dire, Fait pendant un cours Skillshare. Puis enfin, je vais dire, cet élément de liste devrait être protégé par des droits d'auteur, même si je n'ai pas le droit d'auteur, il devrait être, et ou copie esperluette, point-virgule 2015. Maintenant, c'est une façon spéciale d'écrire votre symbole de copyright. Je vais mettre un lien autour de Skillshare, puis je vais commencer à remplir tous ces détails. C' est mes sites web. Encore une fois, la cible doit être le trait de soulignement vide et le titre devrait être, Visitez le site Web de Rich. Je vais juste copier et coller tout cela pour le rendre un peu plus facile pour le Skillshare. Pour les sites Web de Skillshare, le href sera skillshare.com. C' est à peu près notre HTML, mais nous devons voir que cela fonctionne. Allons à notre Finder, faites glisser index.html dans Google Chrome, et il devrait être quelque chose comme ça. On doit trouver deux images. Simon recherche Wreck-it Ralph. Je vais aller dans l'onglet Images. Il y en a un vraiment super cool que j'aime. C' est lui. Je vais utiliser ça à partir de notre image de profil. Je vais aller au héros de dessins animés. Je vais créer un nouveau dossier pour toutes mes images. C' est génial de stocker votre CSS dans votre dossier CSS et toutes vos images dans votre dossier d'image. Je vais appeler ce profile.jpg. Fantastique. Alors la prochaine chose que je vais faire est de chercher une grande image vraiment cool. Ça pourrait être une bonne chose. On peut juste voir s'il y en a d'autres ? Oui, c'est bien. Je vais juste cliquer sur « Afficher l'image », et ça va se charger. Pendant le chargement, je vais juste mettre mon image de test dans le dossier image, et je vais garder la box-wireframe juste parce qu'elle ne fait pas vraiment partie du site, c'est plutôt quelque chose à faire référence. Ici, je vais enregistrer l'image sous big-image.jpg. Fantastique. Voyons ce qui se passe maintenant. On a notre image de profil, on a la grande image. C' est vraiment, vraiment grand, et c'est notre HTML. De là, nous pouvons réellement commencer à coiffer cet art d'une manière incroyable. On peut faire un tas de trucs vraiment cool avec ça. Si vous voulez, ouvrez GitHub Desktop et synchronisez vos fichiers, mais je ne le ferai que sur la vidéo CSS. Cool. On se voit dans la vidéo suivante. 13. Écrivons le code CSS de notre site Web (la meilleure partie): Écrivons un peu de CSS. Ouvrez votre dossier de héros de bande dessinée, faites-le glisser dans Sublime Text, et ouvrez le fichier d'index, ainsi que votre hero.css. Ce que nous devons faire, c'est que nous devons styler l'en-tête et ses éléments, nous devons styliser le contenu et ses éléments, et nous devons styler le pied de page et ses éléments. Vous pouvez soit basculer entre l'index et le héros, ou vous pouvez copier et coller, ce que j'aime faire. J' aime dire copie, et j'aime coller, et puis j'aime le commenter. Un commentaire est quelque chose que le navigateur ne verra pas, et vous l'écrivez comme ça, ce qui est génial. En HTML, vous pouvez écrire un commentaire avec cette syntaxe, ce qui est vraiment cool. Si tu veux te laisser des notes comme, « Hé, regarde ça. » Tu peux le faire aussi. Cela ne vient pas au navigateur, et ne le remarque même pas. J' aime juste le commenter, puis le faire référence à partir d'ici. Mon en-tête. Ce que je veux faire avec mon en-tête. Je veux que ce soit une couleur unie donc je vais dire la couleur de fond, je veux que ce soit un bleu mais je veux que ce soit un bleu spécial. Dans Google Chrome, je vais ouvrir un nouvel onglet et je vais chercher un sélecteur de couleurs. Normalement, je viens de grandir pour la première option et je veux bleu. Ce bleu a l'air plutôt bon. Nous allons redimensionner le navigateur. Celle-là a l'air bien. Je vais le copier. Je vais mettre un hachage devant lui, et le coller. Fantastique, c'est ma couleur de fond. Je veux que ce soit un peu d'espace autour des éléments à l'intérieur de l'en-tête, donc je vais lui donner un rembourrage. Je vais lui donner un rembourrage de, disons 40 pixels. Maintenant, je pourrais l'écrire comme ça, padding-right je pourrais lui donner une valeur. Je pourrais dire padding-gauche et padding-top et padding-bottom et rembourrage, peu importe. Mais il y a un raccourci. Si je veux qu'ils soient tous les mêmes, je dis juste le rembourrage, et lui donne une valeur. Si je veux faire toutes les valeurs que je peux faire en une ligne. Je peux dire la valeur supérieure, je peux alors dire la bonne valeur, la valeur inférieure, puis la valeur de gauche. Ils peuvent être différents. Si je veux que le haut et le bas soient les mêmes, et que la gauche et la droite soient les mêmes, je peux littéralement l'écrire comme ça. Mais parce que je veux que ce soit tout de même, je vais juste le garder comme 40 pixels. La prochaine chose que je veux faire est de dire mon h1. Maintenant, je pourrais l'écrire comme tous les h1s dans l'en-tête, mais je sais qu'il n'y a qu'un h1 donc je vais juste le garder court. Je veux que la taille de la police soit d'environ 90 pixels, nous verrons à quoi elle ressemble tout à l'heure, et je veux que sa couleur soit blanche. Fantastique. J'ai alors cette image dans mon en-tête, mais je sais qu'il y a une autre image. C' est là que je vais dire l'image à l'intérieur de l'en-tête, et je voulais être au milieu. Je veux dire mon en-tête, nous allons aligner le texte, et cela alignera mon en-tête et mon image. Que dois-je faire d'autre ? Je veux que ce soit rond. Je vais lui donner un rayon frontière et je vais faire 150 pixels et on verra ce qui se passe. Si vous êtes comme, « Qu'est-ce que diable. Comment savez-vous que c'était le rayon de la frontière ? » Eh bien, si vous ne savez pas quelque chose, juste Google. C' est la façon la plus simple de faire quelque chose. Si vous Google quelque chose comme les coins ronds CSS, vous trouverez un tas d'informations. Cliquez sur l'un des liens, ils sont vraiment utiles, ils vont expliquer beaucoup, puis il suffit de l'implémenter dans votre site. Une fois que nous avons enregistré, accédez à Google Chrome et actualisez. Ça a l'air plutôt bien. Vous verrez que les coins le rendent pas tout à fait rond, vous remarquerez aussi que je plie dans un tas d'informations supplémentaires comme sur Ralph, ses caractéristiques et ses amis en bas, avec des liens. Si vous ne l'avez pas fait, faites-le. Maintenant, je veux que ce soit rond. Inspectez-le. Augmentons la largeur de l'inspecteur. Vous verrez que lorsque je survolerai l'image, il dit que c'est 450 pixels par 450 pixels. Il y a deux façons d'y arriver. Je pourrais soit rechercher un redimensionnement d'image, utiliser Photoshop ou toute autre application d'image. PicResize est assez cool. Ou je pourrais juste le laisser tel quel, et changer la largeur et la hauteur. C'est ce que je vais faire. Je vais voir à quoi ça ressemble, et dire largeur. Allons pour 300 pixels parce que 300 pixels et 150 pixels vont ensemble car 150 est la moitié de 300. Ça a l'air bien. Je vais implémenter cela dans mon fichier CSS, largeur 300 pixels. Je n'ai pas besoin de changer la hauteur, simplement parce qu'il se redimensionne automatiquement avec la largeur. Je pourrais changer la hauteur et la largeur, avec redimensionner automatiquement avec la hauteur. Je peux fausser les choses et rendre les choses disproportionnées. Si je mets une largeur différente et une hauteur différente pour une image carrée. La prochaine chose que je veux faire, c'est que je veux y mettre une frontière. Il y a quelques lignes que vous devez connaître ici, mais tout comme il y a un raccourci pour le remplissage, il y a un gros raccourci pour la bordure. Ici, je veux dire, je veux que mon épaisseur de bordure soit de 10 pixels, je veux que le style de bordure soit solide, et je veux que la couleur soit une couleur rouge. Je vais aller trouver ça. Doit être rouge, et donc je marque ça, CC0000 a l'air bien. Si je copie cela, puis je le colle ici et je sauvegarde, regardons à quoi il ressemble. air assez bien, et pourrait être un peu plus épais alors voyons à quoi ça ressemble si c'est un peu plus épais. J' appuie juste sur la flèche vers le haut. Ça a l'air plutôt bien. Vingt-quatre, mais alors , ma largeur, le rayon frontière est faux. Donc je vais changer mon rayon de frontière jusqu'à ce que ça semble bien à nouveau. Ça a l'air bien. Qu' est-ce que c'est ? 174. Je vais juste copier tout ça parce que c'est exactement ce que je veux. Fantastique. Alors je vais sauver. Rafraîchir. Vous verrez maintenant qu'il y a une bordure qui est différente de la largeur réelle. Ma largeur est toujours de 300, mais ma bordure en haut, en bas, à gauche et à droite est de 24. Dans l'ensemble, ma hauteur et la largeur de cette image sont 348. La prochaine chose que je veux faire est de changer tout ce texte à quelque chose d'un peu plus superherowy. Je vais utiliser du texte par défaut, je vais définir le code HTML et le texte par défaut ou la famille de polices du corps sur Arial, et s'ils n'ont pas Arial, je vais dire sans empattement. Si vous ne savez pas ce qu'est une famille de polices, il suffit de Google. Vous trouverez un tas d'informations. Sauvons. Reviens ici. Ça a l'air un peu plus superherowy. Ça a l'air bien. La prochaine chose que nous devons faire est de se débarrasser de cette bordure blanche autour de tout, et est aussi un attribut HTML et body. Changeons ça. Je veux dire rembourrage. Parfois, ça pourrait être un rembourrage. Je vais mettre ça à zéro. Ce sont les styles par défaut fournis avec un navigateur. On ne dirait pas que c'est du rembourrage, donc je vais ajouter de la marge. Réglons ça à zéro, enlevez le rembourrage. Sauvons ça. Wow, je ne sais pas ce que je viens de faire là-bas. Qu' en est-il de ça. Nouvelle vue dans le fichier. Wow. Sauvegardons, assurez-vous de fermer ça. Revenons à Google Chrome, et voilà, les petits espaces blancs autour de toute la page disparaissent. C' est à peu près notre en-tête, ça a l'air très bien. On dirait Wreck-It Ralphie. Maintenant, la prochaine chose que je veux faire est de faire des trucs avec notre contenu. Supprimons l'en-tête HTML et nous pouvons nous référer au contenu comme celui-ci maintenant, juste pour une manière différente. Ce contenu, il y a un tas de h2, des listes ordonnées, des images, etc. La première chose que je veux faire est d' aborder les éléments de contenu. Je veux lui donner une largeur maximale juste pour qu'elle ne s'étend pas toujours aussi large, et je veux aussi le mettre au milieu. Je peux dire marge, zéro pour le haut et le bas, et aussi pour la gauche et la droite. Maintenant auto, le rend vraiment agréable, il le redimensionner pour vous, mais seulement sur la gauche et la droite. Sauvons ça. Voyons ce qui se passe. Fermons ça. Les choses ont l'air un peu bizarres, n'est-ce pas ? Ce qui est vraiment cool, c'est quand cela se produit, nous pouvons inspecter et nous pouvons dire aller à notre contenu, et disons max-width. Passons ça à 400 pour l'instant. Donnons-lui une couleur de fond de, wow, cornsilk, qui a l'air bien. Allons au corail. Coral a l'air bien. Vous pouvez voir que c'est la largeur maximale. Si j'augmente cela, vous verrez qu'il y a un espace égal à droite et à gauche. Mais maintenant, cette image fait des trucs dingues. Ce que je veux faire ici, c'est que je veux définir la grande image, .big-image, et je veux dire que la largeur maximale est de 100 pour cent. Je ne donne pas une valeur absolue. Voyons ce qui se passe ici. Je ne veux pas acheter tout de suite. Merci. Rafraîchir. Tu vas commencer à voir ça, hé, c'est en fait assis à un pourcentage. Si vous redimensionnez votre navigateur, il le met à l'échelle pour vous, ce qui est idéal pour les mobiles. La prochaine chose que je veux faire est dans le contenu que je veux mettre un peu de rembourrage juste pour qu'il ne touche pas toujours la gauche et la droite. Donc, je veux dire que le rembourrage est zéro et 20 pixels. Quand je sauvegarde cela, je peux alors voir qu'il y a un peu d' espace blanc sur la gauche et un espace blanc sur la droite. Mais pas pour mon en-tête. L' en-tête semble parfait. La prochaine chose à faire est cette légende. Ce que j'aimerais faire ici, c'est l'aborder, et je veux faire la taille de la police d'environ 16 pixels. Je veux la couleur de la police. Alors faisons en sorte que la couleur soit gris clair. Ensuite, je veux aussi que le style de police soit italique afin qu'il ressemble réellement à une légende. Sauvons ceci et voyons à quoi ça ressemble. C' est Ralph en action. C' est fantastique. La prochaine chose que je veux faire est juste de rendre ce look un peu plus agréable. Donc mon ul, je ne veux pas de ces disques, donc je vais dire list-style, none et je vais aussi lui donner un rembourrage de zéro et une marge de zéro. Voyons ce qui se passe. Fantastique. Mais vous verrez que l'ul et le pied de page ont aussi changé quand j'ai fait ça. Mais c'est bon. Jake de Adventure Time, Bloo de Fosters, Arthur des désastres du roi Arthur. Mais ces liens ont l'air un peu bizarres, alors laissez-moi changer les liens aussi bien. Tous les liens, je veux que la couleur soit rouge parce que c'est la couleur de Wreck-it Ralph, et je ne veux pas qu'ils aient un soulignement. Donc je veux dire text-décoration, aucun. Sauvons ceci et voyons à quoi ça ressemble. Fantastique. La prochaine chose à faire est notre pied de page. Changeons un peu notre pied de page. Je veux que ce soit un gris clair avec un peu de rembourrage. Disons que le rembourrage que j'allais définir sur 40 pixels et 20 pixels. Maintenant, il ne ressemble pas tout à fait à un pied de page en bas, mais rappelez-vous, c'est juste un guide. Pied de page en bas, disons que je veux une couleur de fond. Maintenant, eh bien, quelle devrait être la couleur de fond ? Allons encore choisir une couleur. J' aimerais vraiment un noir, mais je vais en faire une couleur noire très claire. Alors essayons cette couleur. Copions simplement ceci et mettons un hachage ici et collez-le. Voyons à quoi ça ressemble. Cela a l'air assez bon, mais il est toujours assez serré pour le reste du contenu. Donc, ce que j'aimerais faire est que j'aimerais juste définir une marge, avec juste une marge supérieure d'environ 20 pixels. Ensuite, je voudrais aussi changer son ul à l'intérieur un peu. Ce que j'aimerais faire ici est l'ul text-align, centre. Donc on va prendre le centre. Mais alors j'aimerais aussi dire que tous les li sont à l'intérieur de l'ul mais à l'intérieur du pied de page seulement, je voudrais afficher en ligne. Maintenant, en ce moment, il s'affiche comme un bloc. Je peux vous montrer ça ici. Si je dois inspecter cet élément, vous pouvez voir que c'est en fait un bloc entier. Vous pouvez voir par la couleur de surbrillance bleue. Maintenant, je change l'affichage en ligne. Je dis que le li est à l'intérieur de l'ul, à l'intérieur de l'affichage du pied de page comme en ligne. Voyons ce que ça fait. Rafraîchir. Fabriqué par Rich Made lors d'un droit d'auteur de classe Skillshare 2015. Mais c'est un peu groupé, donc ce que je vais faire est de changer ceci en un bloc en ligne, qui signifie que je peux lui appliquer la marge. Donc marge, haut, zéro, et gauche et droite, je vais dire cinq pixels. Je vais sauver, me rafraîchir ici, et ça a l'air assez bien. Ceci, d'un autre côté, est au milieu. Je ne veux pas que cela soit au milieu, donc je vais juste mettre le pied de page ul et juste le faire aligner texte, centrer pour l'ul et le pied de page, et rafraîchir ici. Maintenant, c'est notre site web. Maintenant, partagez-le. Allez sauvage, faites ce que vous voulez, stylez-le comme vous voulez, puis partagez-le. Je pense que la chose la plus puissante sur le web est que vous pouvez le partager. Vous pouvez partager des informations. Cette façon est à peu près gratuite. Ce que je vais faire, c'est que je vais vous montrer quelques façons différentes de le styliser. Même HTML, juste différent CSS. On peut y mettre un peu d'images, mais c'est tout. Une fois que vous avez créé votre site, une fois que vous en êtes satisfait, eh bien, lorsque vous êtes heureux de partager quelque chose de celui-ci, allez dans votre application de bureau GitHub et assurez-vous que vous êtes sur la branche gh-pages, puis engageons notre fichiers disant, First commits pour notre page de personnage ou nos sites Web. Commettez-le, synchronisez-le. Rappelez-vous ce que nous devons faire maintenant, une fois la synchronisation terminée, nous devons aller sur github.com. github.com, nous devons être en héros, nous devons aller à la section commit, nous devons nous assurer que nous sommes sur la branche gh-pages. Les fichiers HTML sont écrits. Voyons ce que fait GitHub. Il est toujours synchronisé. Ça prend beaucoup de temps. Je me demande si c'est parce qu'on a de grandes images là-bas. Ok, on y va. Il est synchronisé, revenons sur github.com. Rafraîchissons, et vous verrez First commit pour notre page de personnage. On y va. Maintenant, ce que nous voulons faire est que nous voulons aller dans mrra-screencast.github.io. Évidemment, utilisez votre nom d'utilisateur GitHub. Allez au héros de dessin animé, appuyez sur Entrée. Vous verrez qu'il n'y a pas de index.HTML et c'est parce qu'il ramasse ce index.HTML comme premier fichier à aller obtenir. C' est ton site web. Vous pouvez le lire sur votre téléphone portable, vous pouvez le partager avec vos amis. Ça a l'air plutôt bien. On y va. Faites une danse, prenez un thé, tapotez sur le dos et dites à votre mère que vous venez de créer votre premier site Web et vous pouvez le partager. 14. Oh, le CSS, cette polyvalence !: Ok, donc vous pouvez voir que c'est là qu'on s'est arrêté. Nous avions un très beaux sites de personnages. Ce que j'ai fait, c'est que j'ai écrit deux autres feuilles de style. L' un est appelé hero-alt-1, et l'autre a été appelé hero-alt-2. Donc, juste en changeant les feuilles de style, économisons. Vous pouvez voir ce qui se passe, je n'ai pas changé de HTML. Vous verrez qu'il y a un fond de carrelage. Ceci est fait en définissant une image d'arrière-plan c'est une syntaxe spéciale pour monter un dossier. Donc, de tout ce que je vais ici, je vais un CSS, il monte un dossier et puis il va et regarde dans le dossier de l'image pour l'image pixel 100 JPEG. Ensuite, je vais définir une répétition d'arrière-plan sur les répétitions. Alors j'ai quelque chose qui ressemble à ça. Vous remarquerez également une ombre technologique. Donc, si j'inspecte ceci et que je retire l'image d'arrière-plan, vous remarquerez qu'il y a une ombre sur ce texte et une ombre sur l'image elle-même. Cela se fait par deux choses différentes. Le h1 a une ombre technique, et c'est la valeur x, c'est la valeur y, et c'est la quantité de flou. Puis la couleur de l'ombre. Encore une fois, il y a une ombre de boîte sur l'image d'en-tête. Sa valeur x, la valeur y la quantité de flou et la couleur. Donc c'est la partie supérieure. J' ai changé quelques couleurs. J' ai envoyé un texto, j'ai enlevé des numéros, puis j'ai changé la photo et un peu. Donc c'est une version. Une autre version, je vais juste le changer en deux et l'enregistrer. Voyons ce qui se passe maintenant. Wow. Donc c'est vraiment rouge. Oui, vraiment rouge. C' est très plat. C' est une image carrée. Il n'y a pas d'ombres. Les Alliés ont des frontières autour d'eux, et ils sont tous arrondis. Légendes modifiées. Qu'est-ce que c'est ? Eh bien, ce sont des liens, et ils ont une couleur d'arrière-plan, et ils ont également un paramètre de survol qui leur est appliqué. Donc, dans hero-alt-2 à, je vais vous montrer dans les balises A. Il y a une couleur de fond. Ensuite, quand ils survolent, et cela est appelé une pseudo-classe, l'arrière-plan change la couleur. C' est comme ça que j'obtiens cette couleur plus foncée quand je survole un lien. Juste en changeant CSS et absolument pas de HTML, suis-je capable de trouver trois pages totalement différentes ? C' est donc la puissance de CSS. Vous pouvez changer radicalement la façon dont vos sites Web ressemblent et se sentent juste par quelques lignes de code et en changeant vos fichiers CSS. 15. Remerciements et prochaines étapes: C' est la fin des projets. J' espère vraiment que tu t'es amusé parce que c'est la chose la plus importante. La prochaine chose que j'espère vraiment que tu as fait est beaucoup appris. Nous avons couvert HTML, nous avons couvert CSS, nous avons couvert la façon dont ils se rapportent les uns aux autres. Nous avons commencé à utiliser Sublime Text. Nous avons commencé à utiliser GitHub. Nous avons utilisé Google Chrome et avons commencé à inspecter les éléments. Il y a beaucoup plus à tous ces sujets. Si vous l'avez apprécié, apprenez un peu plus chaque jour, écrivez du HTML et du CSS tous les jours, même si ce n'est que deux lignes. Cela aidera votre cerveau à rester frais, mais surtout, à partager vos projets avec d'autres personnes. Donc, dans une galerie de projets, poster des liens, répondre à des questions, poser des questions, et n'oubliez pas que Google est votre ami. Le web est construit par des personnes qui écrivent HTML et CSS. L' ensemble du web est élevé sur HTML et CSS. C' est votre première escale, sinon, demandez à un vrai humain. Cool, j'espère que tu t'es bien amusé. Je me suis amusé à le faire. Cherchez d'autres vidéos.