Fabrication à la main d'un site Web de style 8-bit

1. Intoduction: Bonjour et bienvenue à la conception d'une page Web huit bits avec moi. Caleb. Colleen, je vais te montrer dans une heure ou deux. Comment créer un site Web huit bits comme celui-ci avec un système de grille personnalisé utilisant une bibliothèque huit bits. Donc tout a l'air vraiment cool. Rétro. De cette façon. Je vais créer un site Web de type CV, mais vous voudrez peut-être créer un site Web basé sur un hobby ou un site Web basé sur un portefeuille. Quoi qu'il en soit, vous pouvez tout adopter dans ce cours à vos besoins. Donc, si cette page Web vous semble assez excitante, venez vous joindre. J' aimerais vous montrer exactement comment je l'ai fait, et nous commencerons dans la prochaine vidéo. 2. Installer 8-bit: d' accord. Merci de m'avoir rejoint ici. Nous allons commencer à créer cette page à partir de zéro. Donc, la première chose que nous avons à faire avec tout projet basé sur le développement Web est que nous devons ouvrir notre éditeur. Donc j'utilise un éditeur appelé V s Code. C' est complètement gratuit. Mais si vous utilisez un éditeur différent, vous pouvez également utiliser quelque chose comme Adam ou un texte sublime. Ou, vous savez, si votre petite école plus vieille sans pad plus même Dreamweaver est à nouveau cool, ça n'a pas vraiment d'importance. Brackets est un autre populaire pour cela. Je vais utiliser le code V maintenant. Tout d'abord, nous avons besoin de notre modèle HTML, mais nous devons d'abord enregistrer ce fichier. Donc, je vais juste créer un nouveau fichier et enregistrer ceci comme un point pit vrai Nazi SS start HTML. Nous voulons un fichier HTML, et je vais simplement créer un tout nouveau code HTML cinq Template V est livré avec un joli petit raccourci. Il me permet de taper html Colin cinq hit tab, et il sent tous ces trucs pour moi. Donc je vais appeler ce CV de Caleb quelque chose comme ça. Peu importe ce qu'on appelle ça. Il est livré avec un premier contenu mobile automatique, donc fondamentalement, cela fonctionnera sur votre appareil mobile. C' est vraiment sympa. Alors allons de l'avant et ouvrons ce fichier dans notre navigateur. J' utilise juste Firefox. Vous pouvez utiliser Chrome est un feu Tout ce que vous aimez, et nous voyons une page de base ennuyeux. n'y a rien de remarquable ici, donc nous devons installer Nest dot CSS. Alors allons de l'avant et Google Nest dot CSS et ça va nous amener ici. C' est la page que nous voulons. Nous voulons cliquer sur le Read Me afin que nous puissions voir comment nous l'installons. Exactement. Google cool toutes les choses. Voilà celui qu'on veut. On veut la dernière. Donc, c'est une copie qui met ça à l'intérieur de notre tête et juste à titre d'exemple, allons-y et, ah, ah, allons juste copier une partie de ce code pour que nous puissions voir qu'il fonctionne réellement. Qu' est-ce que quelque chose de vraiment perceptible ici ? Boutons, boutons ou perceptibles ? Alors allons-y. Copiez tout ça, et j'allais coller ça dans mon corps ici. Rafraîchissez ma page et ha ha ! Regarde ça. Nous avons déjà quelques huit bits style, Donc en quelques minutes, notre site commence déjà à regarder très huit bits. C' est vraiment cool, vraiment cool, mais ce n'est pas exactement ce que nous recherchions. Alors allez-y et assurez-vous que vous avez Nest dot CSS installé. J' utilise juste la version masculine ified des dernières versions que nous obtenons les dernières mises à jour une fois que vous avez installé la tête sur la prochaine vidéo et nous allons créer dans barre de navigation. 3. Barre de navigation: Bon, bienvenue. Dans la dernière leçon, nous avons ajouté un tas de boutons pour nous assurer que notre style fonctionnait à partir de Nid dot CSS. Maintenant, nous devons créer une toute nouvelle navigation. Donc c'est le type. Maintenant, donnons-lui un style de base ici, donc c'est juste en ligne. CSS. C' est un peu moche, mais nous pouvons aussi passer à quelque chose d'un peu plus gérable un peu plus tard. Faisons une bordure inférieure de trois pixels. Solide C C C C et faisons un fond de marge de je ne sais pas, 60 choix ou quelque chose comme ça. Sauvegardons ça et rafraîchissons notre page, et nous avons une OPANO ennuyeuse. Mais regarde ça. Nous avons aussi un joli petit curseur qui semble assez cool. Allons de l'avant et ajoutons le nom du site ici, donc il crée H deux éléments. Appelons ça Caleb Holley, et tu l'appellerais quel que soit ton nom ou quoi que ce soit, tu veux vraiment l'appeler le mien. Je vais juste être un peu un site Web à la recherche de CV, et donc cela ne semble pas qu'il fait vraiment quelque chose, et nous voulons vraiment cette police de nid. Alors comment on a cette police de nid ? Eh bien, si on recommence à me lire, ça nous dit exactement ce qu'on a besoin de dio. Allons-y et attrapons cette ligne ici. Et cela va simplement installer le désiré formé à partir de Google Funds. Alors appuyez sur Sauvegarder la tête sur notre page de CV. Tu regardes ça. Ça a l'air bien maintenant, n'est-ce pas ? Maintenant, si nous allons ici, nous avons aussi quelques icônes. J' ai cherché des icônes et trouvé celle que je cherchais. Mais disons que je voulais la pièce. J' inspecterais l'élément. Et c'est le HTML que je veux avec cette classe. Peut-être pas les grandes classes, mais c'est celui que je veux. Alors allons de l'avant et ajoutons cela dans l'en-tête ici. Classe DIV. Allons aux cours là-bas et ce n'est pas censé être un plongeon qui est censé être dedans. J' ai mis ça sur des lignes séparées. Cela devient un peu plus lisible. Enregistrer et actualiser. Jetons un coup d'oeil à ce à quoi ressemble une page maintenant. Ok, on a cette énorme pièce. C' est trop grand. Ah, nous avons aussi est moyen. C' est encore trop grand. Nous avons est petit trop petit, et puis nous avons juste Coin par défaut. C' est celui qu'on veut. Juste là. Maintenant, cette fois-ci, on veut plutôt centrer ça, mais on n'a pas vraiment de moyen de centrer ça. Donc, dans la prochaine vidéo, nous allons ajouter un système de grille. 4. Ajouter une grille: Très bien, Nous devons installer un système de grille. Alors allons de l'avant et sauter sur la machine Google et taper dans la grille flex box et cela va nous donner. Fondamentalement, vous pouvez voir si vous êtes familier avec Bootstrap. Il nous donne bootstrap comme des colonnes, et tout ce que nous avons à faire est d'ajouter un peu de CSS. Voulons-nous télécharger ? Non. Allons chercher Hub. Voyons ce que j'ai lu pour nous ici. Ah, nous avons un CDN, un réseau de diffusion de contenu. C' est celui que nous voulons. Allons-y et copions tout ça. Jetons cela en tête de notre page aussi. Rendons ça juste un peu plus petit et je bouge ça juste un peu. Et maintenant, nous avons niché CSS. Nous avons nos forints là-dedans et nous avons un système de grille simple. Maintenant. Ce que ce système de grille nous permet de faire, c'est que si je clique ici, nous pouvons créer de petites colonnes comme celle-ci. Nous pouvons créer jusqu'à 12 colonnes et nous pouvons leur dire quel ordre ils doivent être dans la largeur dont ils ont besoin pour être là automatiquement réactif, ce qui est vraiment agréable. Donc, si vous êtes intéressé par une baisse de la grille de remplacement de la grille de la boîte flexible est incroyable. Pourquoi la façon dont vous pouvez l'imbriquer aussi ? C' est un gros. On va travailler un peu avec nous, donc si tu n'es pas familier avec ça, c'est bon. donc si tu n'es pas familier avec ça, Vous pouvez toujours aller à flex box grid dot com. Allons de l'avant et rafraîchissons votre page. Nous voyons que rien ne s'est passé. Donc, si nous ouvrons le code de studio visuel et juste à l'intérieur de notre talent ici, nous ajoutons un conteneur éléments. Donc, c'est juste un div, et cela va simplement ajouter un peu de rembourrage pour nous ou vraiment juste lui envoyer un contenu comme nous le voulons. Donc c'est rafraîchir. Et on y va. Notre contenu est centré. C' est donc l'ajout d'une grille de boîte flexible 5. Ballon de bienvenue à 8 bits: Bon, allons-y et ajoutons un peu d'introduction. Une petite photo de moi avec une petite bulle disant bonjour. Je m'appelle Caleb quelque chose, quelque chose. Quelque chose. Donc nous allons créer ce premier top entendu que nous avons vu à l'origine. Et en fait, c'est à quoi ressemblera le site final. Donc nous voulons créer cette section ici avec les petits visages dit Salut, je suis Caleb. C' est tout à propos de moi avec le petit cœur. Emoji, allons de l'avant et créons ça maintenant. Donc, si nous ouvrons notre code et sous notre maintenant, nous allons vouloir créer un nouveau conteneur, Cela va garder tout notre contenu contenu contenu dans le formatage central. Donc si nous regardons comment tout est en quelque sorte aligné à gauche et tout est aligné à droite , ce sera notre conteneur. , Donc maintenant, nous devons ajouter une nouvelle ligne. Ceci provient de notre grille flex box. C' est la baisse du remplacement de la grille. Nous allons ajouter une colonne ici. Nous allons en ajouter un de plus. Appelez-le ici. Disons que celui-là va l'appeler la travée. Une petite portée de neuf. Ah, et peut-être une colonne avec une petite portée de 12. Et jetons un coup d'oeil à ce que cela ressemble à gauche droite, et prenons un aperçu ici, gauche et à droite. Donc, tu sais, pas grand-chose ici. Nous pouvons voir que nous avons un joli petit Funt qui a lieu, mais il ne fait rien de ce dont nous avons besoin. Donc maintenant, nous devons aller trouver une icône ici. Pas vraiment une icône. Je suppose que c'est arrivé, cet homme ici, allons l'inspecter, et on peut juste regarder le code source ici, et on peut juste prendre ça. C' est ce qu'il nous faut. Allons-y et ajoutez-y ça et rafraîchissez notre page officielle sur laquelle nous travaillons et nous avons un petit mec, donc c'est plutôt cool. Et puis on a besoin d'un ballon ici et on veut juste ça. Alors allons de l'avant et copions ces lignes habillées. Mettez cela dans la bonne section, et cela va dire bonjour, Nesta à CSS. C' est plutôt cool. Regarde ça. On va aller quelque part, mais on voulait dire bonjour que je suis tué. C' est tout à propos de moi. Alors allons de l'avant et ajoutons ça. Disons que je suis Caleb. C' est tout à propos de moi. Mais nous avons besoin de cette icône du cœur. Où est cette icône du cœur ? Donc je sais qu'il est quelque part ici. On peut juste cliquer avec le bouton droit, inspecter ou , vous savez, on va juste ici, attraper cette icône du cœur Pace Cette icône dure là-dedans, celle-ci n'est pas grande, je pense, en fait vouloir est petit. Cela va devoir être assez petit pour correspondre à votre taille de police ici. Alors ha ! Là, c'est comme ça. Faites-nous un pas plus grand aussi. Et c'est comme ça qu'on fait venir ce petit mec haut, cette petite bulle. Et n'oubliez pas que vous pouvez mettre à jour votre projet de partage de compétences en fonction de vos progrès actuels. Montre-moi comment ça se passe. J' aimerais voir vos progrès et vous aider si vous êtes coincé n'importe où 6. Mise en page des deux colonnes: D' accord. Ensuite, nous devons créer un système à deux colonnes. Nous avons nos colonnes de gauche ici et ensuite nous avons notre colonne de droite ici. Donc, dans la colonne de gauche, nous avons des choses à faire. Savoir où ces mes socials et la colonne de droite Nous avons avant et connaissances retour et connaissances, construire des outils et de l'expérience précédente. Allons de l'avant et configurez d'abord notre mise en page. Donc, pour cela, nous voulons juste ouvrir notre fichier. Allons de l'avant et créons à nouveau un tout nouveau conteneur, parce que pourquoi pas ? Et ici, nous devons créer une nouvelle ligne. Parce que si on regarde tout ça ici, c'est une rangée qui va juste en face, et ça arrive. Avoir deux colonnes. Nous allons donc créer une rangée avec deux colonnes par année. C' est Ah, faisons de cette première colonne un moyen de quatre et peut-être une taille de colonne quand elle est petite, est 12 et colonne supplémentaire. Petit va aussi être 12. Et juste pour que vous sachiez, tout ce que j'ai fait était de taper le sélecteur CSS et le code envieux. Je pourrais juste appuyer sur Tab et le remplit automatiquement pour moi avec un diff, donc c'est assez cool est un raccourci là, et puis ici nous devons faire fondamentalement le contraire. On a besoin de la colonne moyenne 8. Nous voulons donc faire un intervalle de huit pour un total de 12. Donc c'est quatre ici, huit ans pour un total de 12. C' est la taille de notre système de grille. Il y a 12 colonnes dans notre système de grille et ici nous voulons aussi faire cool comme eux 12 excès de charbon 12. Tableau de bord 12. C' est un droit, et ça va dire à gauche. Allons voir notre page. On y va. Nous avons à gauche et à droite. 7. Les sections de 8 bits: Très bien, Nous voulons ajouter une petite section ici qui dit des choses que je fais. Et pour toi, ça pourrait être différent. Donc, pour moi, je suis un développeur web, un concepteur web et un professeur pour vous. Tu pourrais être strictement, ah, designer web. Ou peut-être que vous êtes un machiniste manuel, et que vous aimez juste une sorte de style en huit bits. Quoi qu'il en soit, vous pouvez placer le contenu comme vous le souhaitez. Je vais faire mon propre CV. Mais, tu sais, Taylor, ton orteil pour te convenir, comme tu voulais te montrer. Alors, vous le faites, allons de l'avant et ajoutons que Non. Donc, dans sa section gauche ici, je vais me débarrasser du mot gauche, et je veux ajouter un conteneur ness avec le titre. C' est très étaient principalement nom. Donc c'est vraiment sympa h trois. Disons aussi que c'est un titre et disons des choses que j'aime juste voir où j'ai rencontré. Donc, je fais ces petits incréments et rafraîchis ma page. Donc ça dit des choses que je fais. On va travailler sur l'espacement et tout ça un peu plus tard. Maintenant, ça va paraître un peu serré, mais on va l'espacer à la fin. Donc nous avons un titre ici. Des choses que je fais. Allons de l'avant et créons un nouveau Devyn ici, juste comme un conteneur, je suppose, et ça crée une nouvelle liste. Et donc on va dire que ce sont des listes. Et puis donnons-lui une liste de nids et le type est cercle, et d'où je tire ça est, si je retourne à la documentation ici, nous avons une liste quelque part ici. Où sont les listes ? Il y a des listes, et donc des classes. Listes sur A UL ici nid liste est disque, puis juste des alliés réguliers, et vous pouvez réellement voir que j'ai fait une erreur ici. Que ceux-ci sont censés être UL n'est pas dibs. Et allons-y et créons un allié régulier. Donc je vais dire mon premier point, je suis un développeur Web. Un autre objet de liste allié. Je suis aussi concepteur Web. Créons un autre allié. Je suis aussi professeur. Retournez à notre page et donnez-lui un rafraîchissement. Ça ne s'est pas vraiment déroulé comme on s'attendait. Quelque chose ne va pas ici. Et cela signifie juste que j'ai un type de quelque part est cercle. C' est la seule petite table là-bas. Frappé. Actualiser. On y va. On a des petits cercles. 8. Les de 8-bit de sections et d'icônes sombres: D' accord, Ensuite, allons de l'avant et créons. Remarquable est ici. Celle-ci va être sombre et a un peu de trucs en plus ici. Alors allons de l'avant et changeons le style. Donc, au lieu d'utiliser un bloc blanc, nous allons utiliser un bloc noir, et nous voulons juste que ce soit juste dans les choses que je fais. Donc on est toujours dans la colonne de gauche. Ce que je vais faire est juste effondré ça ici et je vais créer un autre conteneur de nid avec des titres. C' est juste CSS est sombre hit Tab Auto se sent pour moi. C' est plutôt cool. Allons-y et donnons-nous un titre. Donc H titre trois points et dire Non digne Hey, regarde ça. Donc on a encore une section noire. L' espacement et ici n'a pas vraiment l'air très agréable, mais nous allons réparer ça à la fin, aller de l'avant et créer un autre conteneur juste pour le bien des choses montantes de conteneur. Maintenant, je veux créer ah petite icône ici, donc c'est do I ness icône. Dot est petit parce que je veux un petit et je voulais être un cœur, et je suis un moyen de dire membre de base CMS Attendre dire est le système de gestion de contenu le plus populaire et le plus utilisé de Python , et je suis en fait sur cette équipe de cour, Donc c'est plutôt cool. Petit point remarquable, je suppose. Ah, et si j'en voulais un autre ici, je pourrais faire un autre div. Je reçois, disons, donnez-moi un élément I. Ça va aussi être une icône de nid. Ça va être petit et je veux que ce soit une star et disons 250 000 étudiants dans le monde entier quelque chose comme ça. Donc, ce sont peu remarquable est à propos de moi, en fait ne veulent pas que l'intérieur de l'œil que j'élément est par lui-même. Page de rafraîchissement Boom. 250 000 étudiants sont allés orteil membre CMS avec de jolies petites icônes de huit bits 9. Icônes sociales de 8 bits: d' accord. La section suivante est les mes socials. Allons de l'avant et créons de petites icônes sociales. Et au fait, si je vais un peu vite pour toi, n'oublie pas. Vous pouvez toujours référencer flex box grid dot com ou nostalgique Dashti évaluer point get hub dot io slash nest dot CSS. Je suis honnêtement juste Google cette année parce que celui-ci est un peu difficile à retenir, et il est tout disponible pour nous ici. Alors créons une petite section de liens sociaux où les gens peuvent aller et je suppose, regardez-moi. Donc ce que je vais faire, c'est de fermer ça. C' est OK. Conteneur Div Ness. Il a aussi un titre. Donnons à cela un titre trois points titre hit onglet, et il crée juste l'élément entier pour moi. Appelez ça mes socials. Ensuite, ici, je vais créer un autre conteneur juste pour créer ce conteneur. Ça ne fait pas mal d'avoir cette couche supplémentaire là-dedans, et je vais juste créer un lien. Ça ne va pas aller nulle part en particulier en ce moment. Je veux juste que cela démontre qu'il veut que ce soit un lien qui montrera que j' ai un Nikon ici. Donc Ness icône Twitter, Tweeter. On y va. Rafraîchissez un bam ! Il y a Twitter et on pourrait le faire encore et encore. Je l'ai copié et collé quatre fois. Et si je veux un Facebook ici, alors changeons ça à Facebook. Celui-ci va être mon hub get, et celui-ci sera YouTube. Allons de l'avant et rafraîchissons leur Nous avons des icônes. Maintenant, si vous cherchez d'autres icônes, il y a une tonne d'icônes ici. Où es-tu ? Mais la bosse de, euh, ici vous êtes des icônes de sites de réseaux sociaux. Donc nous avons Twitter, Facebook, Insta get hub Google Gmail, moyen Lincoln, toutes sortes d'autres là-dedans. Donc, vous pouvez utiliser tous ces éléments et encore une fois si vous n'êtes pas sûr de ce qu'ils sont appelés, vous venez d' ouvrir ce code source en cliquant sur ce bouton et en affichant simplement celui que vous voulez un plan copier-coller et cela fonctionnera exactement pour vous. Et maintenant, nous avons des socials 10. La bonne colonne: Bon, maintenant nous devons travailler sur notre colonne de droite. Donc 1er 1 nous avons ici est avant et la connaissance, dos et les outils de construction de connaissances que l'expérience précédente. Allons de l'avant et créons un à la fois. Donc, son créateur, front et sa connaissance pour vous, cela pourrait être totalement différent aussi. Cela pourrait ne pas être avant sur le savoir. Cela peut être juste votre jeu de société préféré, une liste de membres de la famille ou tout ce que vous aimez. Mais ce que j'ai mis en place ici, c'est que j'ai une compétence particulière et à quel point je suis doué de cette compétence. Donc html cinq, je suis comme 95% bon à html cinq. Je pense que CSS trois. Je pense que je suis bon à 90 %. Un CSS trois JavaScript. Peut-être que je ne suis pas trop bon JavaScript. Donc, nous avons ces barres de santé ici pour nous dire à quel point je suis doué d'une compétence particulière. Allons de l'avant et créons la première section avant et connaissance. Et encore une fois, c'est totalement à vous de décider. Je vais effondrer cette section. C' est totalement à vous de décider. Comment vous voulez concevoir cela avec un contenu que vous aimez. Donc, d'abord, nous avons besoin d'un conteneur ness avec titre, nous pourrions aller de l'avant compte tenu de l'âge de trois ans du titre avant et de la connaissance. Juste des choses que je suis tu sais, Ok, et ici nous devons utiliser plus de notre système de grille. Allons de l'avant et créons une nouvelle ligne. Et dans cette rangée nous avons besoin de deux colonnes. Appelez les petits quatre, seulement quatre colonnes à gauche et disons que quand il est sur extra petit passé tout le chemin travers la colonne de soupe, extra small 12 allait prendre toute la largeur. Et tu sais quoi ? Mettons cela sur une ligne, parce que je pense que nous pouvons nous en sortir avec ce html et puis juste comme cinq appels sm, alors nous devons faire le contraire. 12 moins quatre est huit frais excès 12. Et ici, nous voulons créer une barre de progression, donc le point de progression de point de nid de progrès est le succès. Je vais vous montrer où je vais les obtenir dans une seconde et ici mettons ceci sur des lignes séparées aussi pour qu'on puisse lire ceci. Nous sommes autorisés à avoir tout cet espace blanc pourrait aussi bien l'utiliser. La valeur est égale à 95 et le maximum sera 100. Allons de l'avant et voyons à quoi ça ressemble. Ass Mets ça sur une ligne de plus. Une justice qui a l'air moche. Magnifique. Actualiser ma page HTML cinq pas de barres. Un peu gros. On va changer ça un peu plus tard. Et maintenant tout ce que je vais faire, c'est prendre toute cette rangée et je vais la copier deux fois de plus . Donc il y en a un. Et il y en a aussi. Et je veux que le 1er 1 ne soit pas html. Je veux que ce soit CSS trois. Les progrès seront de 90. C' est le succès. Ouais, je pense que je suis assez bon pour ça. Disons que celui-ci sera JavaScript, et celui-ci sera un avertissement. Je te montrerai où j'aurai ce style dans une seconde. C' est que je suis seulement 60% obtenir un JavaScript. En fait, c'est très mal. Je suis assez bon en JavaScript. Mais, vous savez, des fins de démonstration, c'est bon d'avoir une petite barre jaune. Et on y va. Juste comme ça. Maintenant, où je tire ces styles, c'est le progrès. Progrès, progrès. Où en sont les progrès ? Barre Progression, Progrès, Progrès. Nous avons un bon nombre d'entre eux que nous pouvons choisir ici. Allons juste basculer cette eso que nous avons des progrès de nid. C' est le noir est primaire est bleu est succès. Green prévient que son jaune est une erreur. C' est notre rouge et est motif parce que parfois vous voulez juste un modèle Mario kart comme . C' est donc notre front et notre connaissance. Je vais arranger ce genre de là et ensuite on passera à la leçon suivante. 11. Grande section de 8-bits: D' accord, allons de l'avant et recréons dans la connaissance. On a une section noire ici, donc ça doit être sombre. Caleb, d' où tu te ténèbres ? Oui, c'est une bonne question. Partout où vous voyez une section sombre ici, nous pouvons juste activer Il faisait sombre ici. Il y a une section sombre ici pour qu'on puisse regarder ce code source. Ah, nous pouvons aussi jeter un oeil aux conteneurs que nous avons. Le conteneur est centré. Si nous voulons lui envoyer son titre, nous ne ferons pas que c'est sombre. Fait juste un fond sombre avec une bordure blanche. Nous pouvons toujours regarder le code source pour, et c'est celui que nous voulons ici. Donc je vais juste copier cette tête sur le code Visual Studio, et je vais effondrer toute cette seconde. Je travaille sur juste pour rendre mon code un peu plus agréable. Créons un nouveau Devyn ici. Celui-ci va aussi avoir un titre. Ce titre va être la connaissance de fond. Et on y va. Nous avons des connaissances back-end. Et encore une fois, c'est Bassin va réparer vers la fin de ce cours eso prochaine. Nous devons recréer ces trois sections. Mais cette fois, nous voulons mettre Python PHP et pas de Js. Donc ce que je vais faire ici, c'est aller de l'avant et encore, juste créer une nouvelle rangée. Ceci est à partir de notre remplacement de la grille appelée grille de boîte flexible. Ce cool sm 4. C' est exactement le même que nous l'avons fait à l'avant et un accès cool 12. Celui-ci va être python trois. Et au lieu d'écrire ça encore et encore, ce que je vais faire, c'est simplement le copier juste un petit avertissement. En ce qui concerne la copie et le collage, N'oubliez pas quand vous copiez et collez des choses, vous devez changer toutes les valeurs et leur Parfois, nous oublions de faire cela arrive à nous tous . N' oubliez pas de changer vos valeurs. Celui-ci, je pense, est bon, cependant, cependant, Alors allons de l'avant et le recyclage sont une démonstration de travail réelle ici. Et regarde ça. On a Python 3 maintenant. Je vais les mettre sur une ligne juste une fois de plus. Maintenant, je viens de mettre tout cela sur une ligne parce que je veux aller de l'avant et créer une autre ligne essayant de créer deux lignes de plus Donc, collez une de plus là-bas rythmé une de plus là-dedans. Réparer le terrible inventant à partir du code V. Je n'ai aucune idée de pourquoi il fait ça. Allons de l'avant et tapez énorme p sept et je suis assez bon avec PHP. Donc, c'est un 90 l'autre va être le nœud Js node.js. Honnêtement, je ne suis pas très bon avec pas de jazz et je ne veux pas que ça dise du succès. Je veux que ce soit une erreur. Cela montre que je n'y suis pas douée. Et donc on a une petite barre rouge qui dit que je ne suis pas douée avec pas de jazz. La santé de no Js est assez faible. 12. Grande section de 8-bit: d' accord. Enfin, nous avons nos outils de construction. Celui-ci va être super facile et va essentiellement copier sur le devant et la connaissance et changer certaines des valeurs. Alors passons au code V S, et je l'ai actuellement effondré. Certains vont sélectionner tout ça. Copiez-le, collez-le là-dedans. Et maintenant, nous pouvons voir que nous avons une section de section sombre, et celle-ci va être des outils de construction, des outils. Allons de l'avant et ajoutons l'emballage Web ici. À quoi sert mon pack Web ? Je vais dire que le Web Pack n'est pas à 50 ans. C' est à 60%. Ah, et c'est jaune. Allons de l'avant et ajoutons le point de parcelle Js. Celle-ci va aussi être jaune, donc nous allons en faire un avertissement. Celle-ci sera à 50 ans et ensuite on aura un gouffre, que je n'ai pas utilisé depuis longtemps. Donc celui-ci va être une erreur, et cela signifie juste que la barre va être lue et disons que c'est à 30%. Allons de l'avant et rafraîchissons notre page de travail. On y va. Nous avons des outils ici, construire des outils Web paquet paquet. Néerlandais. Oui, et gorgée. Et rappelez-vous, vous pouvez simplement aller dans la documentation et à tout moment, j'ai l'impression que je pendant que je ne veux pas utiliser est une erreur pour le rouge. Je voulais être modelé. Vous pouvez utiliser son modèle ou vous pouvez simplement n'en utiliser aucun. Donc imbriquez simplement la progression par défaut en noir, tout ce qui fonctionne pour vous. Tu te souviens de toi, n'est-ce pas ? 13. Section des de 8-bit: d' accord. Enfin, nous avons une expérience antérieure. C' est une section plus grande, alors allons-y et continuons à rouler là-dessus. Je n'ai pas de nom d'entreprise ici. Vous pouvez utiliser vos noms d'entreprise réels. Si vous créez un CV ou si vous créez un portfolio, peut s'agir de liens vers des projets que vous avez sur Get Hub, leurs sites Web ou quelque chose genre. Donc je vais juste faire défiler ici et l'effondrer aussi, parce que nous n'avons pas besoin de ça. Et allons de l'avant et créons Ah, tout nouveau titre de sujet. Donc titre du sujet. Et puis ici, nous voulons i dot ness icône dot star et appelons cette expérience précédente lorsque nous rafraîchissons notre page Ha. L' expérience précédente réparera l'espacement en un instant. On s'approche vraiment de ça. Et où j'ai obtenu ce titre de celui-là était un peu plus difficile à déterrer. Ce que j'ai dû faire était de descendre ici et j'ai juste un clic droit inspecter l'élément, et quand je survolais cela, vous pouvez voir que j'ai toute l'équipe de base et j'ai un titre de sujet ici. Et donc tout ce que j'ai vraiment fait, c'est juste prendre ce cours que H trois titre de sujet. Vous avez une icône ici, puis un texte régulier, donc j'ai fait la même chose. Ensuite, nous avons besoin d'un nouveau conteneur. Créons un conteneur nid DIV qui est sombre. On en veut un sombre. On ne veut pas que ça ait un titre. Tous ces autres ont avec titre. Pas celle-là. Celui-ci a déjà un titre en dehors de celui-ci appelé Titre du sujet. Maintenant, nous devons ajouter à nouveau notre système de lignes. Certains vont ajouter un div appelé Roe. Nous devons ajouter une colonne dans les années. Un accès au charbon, je ne veux jamais que ça s'effondre. C' est pourquoi je spécifie extra petit, cool excès 10 120. Ça aurait été assez grand s'il était si haut. Donc deux colonnes de moins de 12 à gauche, 10 sur 12 colonnes à droite, et nous pourrions mettre une image ici et nous pourrions aussi mettre du texte ici. Nous allons juste prévisualiser ceci, cependant, et cela va regarder quelque chose dans ce sens. Image ici texte. Ok, je me rapprochais du fond qui devient un peu difficile à lire. Alors pourquoi ne pas ajouter un peu de style à notre page ici ? Allons de l'avant et ajoutons un peu de style à notre corps. Et disons juste que le fond de rembourrage sera de 50 pixels. On y va. On a un peu de rembourrage en bas. Ça pourrait être plus grand que ça. Allons-y. Faites 90 pixels, presque le double de ce que nous avions à l'origine. On y va. On a un peu d'espacement là-bas. Espérons que vous pouvez voir ça. Ok, faisant défiler la page vers le bas et j'ai une image que je veux mettre ici. Donc, ce que je vais faire est de créer une nouvelle balise d'image et l'avoir déjà dans mon presse-papiers. Donc c'est un toi étrange, Earl. Vous pouvez aller à Allons-y et réellement ouvrir ceci dans notre navigateur. Allons-y et ouvrez-le dans notre navigateur. Regarde cette petite et minuscule image. Et si nous voulions Teoh, vous pouvez voir où dit la taille est égale à 20. Nous pourrions faire que la taille est égale à 200 si nous le voulions, mais nous voulons un effet pixélisé spécial et donc nous allons spécifier une très petite image. Et donc ici, nous disons la taille de 20 pixels. Et quand je rafraîchirai ça, ça va paraître super minuscule. Ouais, tu peux à peine voir ça. Nous devons ajouter un style spécial à cela pour que cet orteil fonctionne correctement. Alors allons de l'avant et mettons cela sur une nouvelle ligne aussi. Parce que nous pouvons style avec la hauteur de 100% est égale à 100%. Ça va être auto. Cela fait de nous une image réactive. C' est la page de rafraîchissement, et vous pouvez voir qu'il semble un peu floue. Mais si nous faisons un clic droit et inspectons, nous pouvons ajouter cette petite chose cool appelée rendu d'image. Et nous voulions être pixélisés, et nous allons aussi en ajouter un autre ici juste pour Mozilla appelé les bords les plus nets. Et donc si je bascule juste éteint celui-là, celui-ci est mieux pour Chrome et pour Firefox. Si je parle juste ou non, si vous pouvez réellement voir que l'image ici est pixellisée, ce qui est assez cool. Donc, au lieu de le flouter en essayant de le comprendre, il va juste rester avec les pixels qui sont actuellement là. Alors allons de l'avant et copions ces deux et mettons-les ici aussi. Et on pourrait retoucher cet espacement parce qu'on n'en a pas besoin. C' est la page de rafraîchissement et on y va. On a un effet pixélisé. C' est plutôt cool. Et puis ici, nous devons aller de l'avant et ajouter des noms de sociétés. On a un vieux nom de société. J' ai été un paragraphe ici. Alors quel était mon rôle ? Peut-être que j'étais Ah, Super développeur frontal a créé si conteneur juste pour avoir la séparation, euh, pour mettre dans un Lincoln ici. Et ça va être, je ne sais pas, peut-être l'icône des nids. Oublie le hub. Alors peut-être que j'ai un projet ou quelque chose que je veux partager dans leur Allons-y et copiez-le à nouveau. C' est juste là. Et au lieu d'obtenir hub, peut-être Mettons page de rafraîchissement Twitter. Boum. Regarde ça. Donc, nous avons un hub et nous avons Twitter là-dedans. C' est plutôt cool. Ça arrive très bien maintenant. Nous devons copier ceci quelques fois parce que nous voulons trois lignes. Donc ce que je vais faire, c'est prendre toute cette rangée, coller et la coller une fois de plus. Et regarde ça. Nous en avons trois, alors allons-y et retouches une partie de ce contenu là-dedans. Disons que c'est une sorte de vieille entreprise et je ne sais pas, peut-être que j'étais chef de projet, et peut-être que celui-ci a un lien Facebook. Très vieux nom d'entreprise. Et peut-être que j'étais un super développeur back-end. Et peut-être qu'il n'y a pas de retour à la maison. Peut-être que celui-ci est juste Twitter et Instagram, je suppose. Allons-y, Refresh. Ça a l'air assez bien, mais notre espacement devient plutôt grossier. Allons de l'avant et ajoutons un peu d'espacement dans la prochaine vidéo. 14. Espace de 8 bits: accord, Nous avons une bonne partie de notre page à peu près fait. Nous avons juste besoin d'ajouter un peu d'espacement dans votre cause. Notre page ne ressemble pas à ça. Notre page a l'air un peu entassée. Les choses sont fondamentalement comme des sections ou se touchent, et ça ne semble pas très huit bits. Ça semble entassé pour être un peu. Nous avons donc juste besoin d'ajouter un peu de marge et de rembourrage à certains endroits particuliers. Commençons par le haut. On a ça ici. Ça n'a pas vraiment l'air centré. Si nous simplement faire un clic droit et inspecter. On a un H 2 ici et on peut voir qu'il y a une ma ah, marge inférieure de 0,5 pièces. Nous voulons nous en débarrasser entièrement. Alors ouvrons le code S. Allons à notre navigation ici. Je vais tricher. Je vais écrire ceci dans la marge de ligne inférieure zéro, et cela va juste écraser ceci. Alors allons de l'avant et nous rafraîchir et regarder ce genre de look comme un peu plus centré. Ça va faire tomber cette ligne, donc c'est un peu difficile à remarquer parce que cette marge. Le fond était de 0,5 grammes. Mais ça a l'air un peu plus centré maintenant, n'est-ce pas ? Ensuite, nous devons ajouter un peu d'espacement ici parce que ce gars le gars qui dit que je suis Kayla, il est trop proche. Donc, en fait, butons tout de cette icône. Donc nous avons le conteneur ici avec Nest BC Rico, et je crois que c'est l'un des créateurs de Nid Out CSS, en fait. Marge inférieure 50 p x. Très bien, donc on a un espacement là-dedans qui vient le long. Ah, si nous regardons aussi ici, nous avons un peu de décalage aussi. On n'aime pas ça. Et vous pouvez voir ici que cela a une marge Bas d'un Ram. On ne veut pas ça du tout. Allons-y et trouvons nos listes et débarrassez-vous de tout ça. On a une liste de nids ici. bas de la marge de style est égal à zéro. Trouvons une autre liste. On n'a pas l'air d'en avoir. Ok, c'est là. Ça a l'air un peu mieux. Maintenant, nous avons besoin d'un espacement entre les deux. Remarquable est et les choses que je dio nous avons aussi besoin d'un peu d'espacement entre mes socials et pas de Worthy. Alors allons de l'avant et allons vers le bas pour savoir où c'est cette section ici dit la marge de style de No Worthy . Marge supérieure de 50 pixels. Bas 50 pixels et faisons le bas aussi, mes socials. On va être un peu préventif avec l'action de celui-ci. C' est juste copier ça. Pourquoi ? Pourquoi le taper si on peut le copier et on y va. Ça commence à paraître un peu plus espacé. Ensuite, nous devons ajouter un peu d'espacement entre ici, peu d'espacement entre ici et un peu d'espacement entre ici. Donc ça va être très facile. Allons à notre colonne de droite, alors appelle-le Medium 8. C' est cette plus grande section ici. C' est la bonne colonne. Cliquons ici, ici et ici. Et faisons la marge de style 40 pixels et nous allons rafraîchir. Oh, ça a l'air mieux. Ça a l'air mieux. Ok, ce bar est encore beaucoup trop gros cible tous ensemble, je pense. Mais avant de le faire, passons le reste de la page et nous avons quelques problèmes d'espacement ici avec l' expérience précédente . Donc si on ouvre le code V, je vais encore effondrer cette section. Réduire, effondrer, effondrer. Et donc nous avons une première section ou section sombre, deuxième section un titre et ensuite celle que nous venons de effondrer. Allons l'effondrer. Et ici, nous voulons que chaque ligne soit ciblée. Faisons juste une deuxième et troisième rangée. Donc, la marge de style est égale à ou la marge supérieure est égale à 30 pixels ajoutés. Juste un peu d'espacement, je suppose. Juste pour que ça ne semble pas si écrasé ensemble. Ça a l'air plutôt bien. En fait, comme ça s'est avéré mieux que je ne l'avais prévu. D' habitude, je ne devine pas vraiment un bon espacement sur le premier invité. Mais ça s'est bien passé. Et puis enfin, nous avons juste besoin de retoucher ceci ici parce que c'est juste trop grand que ça barre deux grands progrès . Jetons un oeil à l'attribut de hauteur. Quelle est la taille de ce truc ? 48 pixels. Que se passe-t-il si on a fait ça 25 ou 36 ? Ça a l'air OK. Ça a l'air un peu mieux et n'a pas l'air tout à fait central. Allons de l'avant et disons que 25 choix, c'est plutôt bon. Donc, ce que nous faisons ici, c'est que nous éditons le CSS droit dans notre navigateur et je veux saisir ce sélecteur et modifier cela. Alors faisons défiler jusqu'à sa page et où nous avons notre style, où va ajouter point ness ? Avancement du tableau de bord. C' est notre barre de progrès. Et disons qu'il va avoir une hauteur de 25 pixels, et cela va sélectionner chacun d'entre eux et lui donner une hauteur maximale. 25 pixels. Allons de l'avant et rafraîchissons votre page. Il semble que rien ne s'est passé avec le sélecteur CSS. Nous avons dit à nouveau sélectionnable. Modifiez la hauteur de 25 pixels. 15. Le pied de page: accord, nous avons encore une section à ajouter. C' est juste la petite section de contenu en bas. C' est assez dur à voir, et c'est bon. C' est vraiment juste un droit d'auteur ou tout ce que vous voulez mettre dans leurs yeux. Mettez quelque chose de drôle, dit ironiquement, je ne me soucie pas vraiment des prochains matchs en 2019 alors allons de l'avant et créons ça. Ouvrez le code S et tout en bas. En fait, pas tout à fait le fond. J' allais effondre le conteneur et créer un nouveau conteneur, et c'est fondamentalement juste un pied de page. Je veux donner à cela un style, disons marge Top 50 pixels taille de police. Faisons en sorte qu'il soit plus petit que la taille moyenne de la police. Peut-être que 60% ish. 60 %. Il y a le signe de pourcentage a donné une colonne de ligne extra petite 12. Donc ça va être 12 colonnes de travers, peu importe quoi, Mais allons-y et centralisons la technologie. Donc, style texte. Une ligne est égale au centre, et la couleur va être C C C C, qui est une couleur gris clair. Et puis ici, disons Ironiquement, je me fiche des jeux oui en 2019. Et changeons ça. Voir à un droit d'auteur avez-vous fait pour faire et copier ? Revenons à notre fichier de travail ici et faisons simplement défiler vers le bas rafraîchissement et nous allons nous débarrasser de cela et dire, ironiquement, je ne me soucie pas de ce s jeux en 2019. 16. Projet complet: d' accord. C' est ainsi que nous créons un site Web huit bits avec un petit framework CSS ou une bibliothèque appelée nest dot CSS, qui est open source. Vous pouvez le trouver ici. Si vous l'aimez, vous pouvez toujours y contribuer. Je tiens à remercier les créateurs de Nest Out CSS et les contributeurs de Nest sur CSS parce que c'est une petite bibliothèque impressionnante. C' est fantastique. Vous ne pouvez pas toutes sortes de boutons et d'autres choses. Ça ne vient pas beaucoup pour vous allez devoir utiliser quelques choses supplémentaires ici, comme les dialogues. Vous allez devoir ajouter votre propre JavaScript pour ça. Mais c'est OK, vient avec le style, et c'est la partie principale ici. Et puis nous avons utilisé flex box grid flex box grid dot com, Et ceci est juste une baisse en remplacement du système de grille de bootstraps. Donc, si vous utilisez votre propre site Web et qu'il n'utilise pas bootstrap ou fondation ou quoi que ce soit avec une grille et que vous avez besoin d'une grille, vous pouvez simplement venir ici et utiliser une goutte dans le remplacement de la grille. C' est vraiment, vraiment sympa. Et comme ça, en moins d'une heure, nous avons pu créer mon CV de développement Web ou pour vous, ce pourrait être un portfolio. Ça pourrait être un CV. Ça pourrait être juste un site de loisirs ou quelque chose comme ça. Ça a l'air vraiment cool. Merci de m'avoir rejoint pour ce voyage. C' était assez amusant. En fait, j'ai vraiment apprécié celui-là. Et j'espère vous voir dans une autre classe. Mais avant de partir, n'oubliez pas que vous pouvez partager vos progrès. Partagez votre site Web, partagez tout ce projet que vous avez réalisé avec partage de compétences. Cliquez simplement sur le bouton nouveau projet. Ou si vous avez déjà commencé le projet, vous devrez modifier ce projet et simplement partager ce que vous avez. Partagez à quoi ressemble le vôtre. 17. Résumé: Hey, merci de me rejoindre sur le partage de compétences. N' oublie pas, tu peux me suivre. Donc mon nom est dans ce cours. Vous pouvez simplement cliquer sur Caleb transport et ensuite me suivre sur le partage de compétences. Et cela vous donnerait des notifications chaque fois que je lancerai un nouveau cours. Un autre cours génial comme celui-ci ou j'ai du matériel gratuit à donner. Bien sûr, c'est facultatif. Et si jamais vous avez besoin d'un grand groupe de soutien aux développeurs, j'ai un groupe sur Facebook avec, comme 25 000 personnes dans 25 000 développeurs. On apprend tous à coder ensemble. Ça s'appelle Apprendre à coder sur Facebook. Venez passer, dites bonjour, posez dites bonjour, une question, obtenez du soutien, aidez d'autres personnes. C' est une communauté où nous nous entraidons et c'est totalement gratuit.