FOR https://youtu.be/Tnym_6qCcNE 
  elle tout le monde j'espère que vous 
 allez bien et que vous êtes en forme 
 aujourd'hui je vous propose d'apprendre 
 les bases d'acheter ml et de css afin de 
 pouvoir commencer le développement web 
 et de pouvoir créer vos propres sites 
 web alors la vidéo que je vous propose 
 aujourd'hui bien sûr c'est une vidéo 
 d'initiation c'est un domaine assez 
 complexe sur lequel on ne peut pas vers 
 sur découvrir tout dans l'espace d'une 
 heure mais quand même ce que je vous 
 propose ça va être de bien survolé 
 vraiment tout l'ensemble est d'avoir une 
 bonne vision périphérique de ce qu'est 
 html de ce qu'est css dacquois tout cela 
 sert et quand même de réaliser un bon 
 petit site web tous ensemble alors c'est 
 vraiment une simple page 1 qu'on va 
 créer ensemble mais voilà on pourrait 
 découvrir quand même beaucoup de choses 
 et la vidéo d'aujourd'hui bien les 
 sponsorisés par aux stinger aux stingers 
 c'est un hébergeur web donc il met à 
 disposition des serveurs d hébergement 
 pour mettre vos sites en ligne et c'est 
 un hébergeur qui propose un hébergement 
 réellement performant a appris quand 
 même relativement accessible et si vous 
 souhaitez mettre votre site en ligne et 
 bien sachez que vous pouvez obtenir 7 % 
 de réduction grâce aux codes bertrand 
 sur le site de hosting heures pour votre 
 commande donc n'hésitez pas à en 
 profiter et un petit conseil avant de 
 commencer bien évidemment c'est de 
 toujours bien mettre le tutoriel sur 
 pause afin de reproduire les actions sur 
 votre ordinateur c'est vraiment un très 
 bon conseil que je peux vous donner en 
 informatique c'est toujours reproduire 
 pour vraiment bien apprendre pour 
 vraiment commencer à prendre les choses 
 en main et en fin de vidéo je vous 
 donnerai pas mal de pistes d autres 
 youtube heures de formation etc des 
 sites de référence sur lequel vous 
 pourrez approfondir le sujet 
 et comme toujours n'oubliez pas si vous 
 aimez mon travail de donner le petit 
 like de faire un petit commentaire pour 
 me donner votre avis pourquoi pas poser 
 vos questions partager etc afin de faire 
 vivre cette chaîne n'oubliez pas que 
 cette chaîne vie avant tout grâce à vous 
 et en parlant ça je tenais à vous 
 remercier parce qu'on est vraiment de 
 plus en plus sur la chaîne ça me fait 
 vraiment super plaisir alors n'hésitez 
 pas à nous rejoindre si ça n'est pas 
 encore fait pour commencer cette 
 introduction au développement eh bien on 
 va commencer par parler d' html html 
 c'est quoi bien c'est un langage qui va 
 vous permettre de créer la structure de 
 votre page c'est que son contenu mais 
 par contre on ne va pas tellement 
 s'intéresser en premier lieu au design 
 converse un petit peu par la suite grâce 
 au css donc en gros ça sera moche au 
 début mais il faut vraiment bien 
 comprendre tout ça allez on va commencer 
 avec ça ok alors allons-y pour la 
 création de notre premier site web alors 
 comme j'ai dit dans la trousse c'est 
 vraiment ici pour découvrir un petit peu 
 les bases pour avoir une bonne vision de 
 ce qui se passe 
 donc je présenterai peut-être pas 
 toujours la façon la plus idéale de le 
 faire mais en tout cas quand vous aurez 
 terminé cette vidéo vous aurez vraiment 
 cette bonne vision qui vous permettra 
 vraiment de comprendre le process dans 
 sa globalité alors la première chose 
 simplement c'est de commencer et de 
 télécharger peut-être atom le logiciel 
 éditeur de texte créé par github à la 
 base qui vous permettra de travailler 
 plus facilement théoriquement vous 
 pourriez le faire avec le bloc notes de 
 windows mais bon autant s'équiper de 
 bons outils une fois qu'il est installé 
 et bien utiliser simplement atom pour 
 aller chercher votre projet vous pouvez 
 le faire par exemple avec un coup de 
 file et ensuite choisir at project 
 folder pas ajouté le 
 dossier de votre site web et donc pour 
 le coup moi je lui ai déjà créé par 
 avance donc je les crée simplement 
 ici et ici bien simplement ce que j'ai 
 fait j'ai simplement ajouté déjà de base 
 un petit logo mon logo pour pouvoir 
 illustrer les ajouts d'image par la 
 suite mais ça on verra ça plus tard donc 
 vous n'hésitez pas à choisir une petite 
 image de votre choix et ensuite eh bien 
 je vais choisir ouvrir pour venir 
 prendre le dossier de mon site web alors 
 pour l'instant par le logo il n'a rien 
 est ce que je vais faire et bien c'est 
 de venir créer du coup un nouveau 
 fichier et se fichent et là pour le coup 
 c'est assez important je vais l'appeler 
 index point html et pourquoi un vexe 
 simplement ces conventions pour dire aux 
 serveurs aux navigateurs voilà quand 
 vous arrivez sur mon site web et bien 
 fichier de la page d'accueil le premier 
 fichier que vous devez lire eh bien 
 c'est celui ci est donc du coup je 
 valide et je crée mon fichier index pour 
 acheter mais lorsque vous devez 
 comprendre ici c'est que la création 
 d'un site web et bien c'est 
 principalement en tout cas de base 
 l'édition de fichiers textes et cette 
 édition de fichiers textes et bien on va 
 la faire sous forme de balises ça veut 
 dire quoi une valise c'est que vous 
 allez avoir tout tout tout un tas 
 d'éléments ici dans votre fichier qui 
 vont commencer par un chevron devant 
 dans lequel vous avez trouvé le nom de 
 la balise à proprement parler et ensuite 
 et bien un chevron ferment ensuite vous 
 pourrez mettre votre contenu par exemple 
 et ensuite et bien souvent vous 
 retrouvez une balise ferment-ils sera 
 identique à la première sauf que vous 
 aurez un slash ici vous avez également 
 des balises qui fonctionne seul par 
 exemple c'est le cas de la balise images 
 que l'on verra par la suite ça et dans 
 ce cas bien simplement je vais me 
 contenter d'avoir cette balise 6 donc ça 
 c'est vraiment pour le principe de base 
 et vous allez voir que html et bien est 
 constitué de ses balises 
 est que ces balises vous permettre de 
 formater l'ensemble de votre site pour 
 en décrire le contenu alors je parle 
 bien sûr du contenu parce que tout ce 
 qui est design mais on le verra par la 
 suite mais ça sera fait en css le 
 deuxième langage que l'on découvrira 
 ensemble dans cette vidéo donc ici pour 
 le coup et bien je vais supprimer ma 
 balise images parce que je n'ai pas 
 vraiment l'enseigné et on va les voir le 
 rendu dans notre navigateur donc pour ça 
 simplement je vais aller choisir le 
 projet de mon site web donc le 
 index.html dans mon navigateur jeu 
 louvre et on en voit du coup le rendu 
 dans le navigateur est ce qu'on constate 
 bien et bien c'est que les balles des 
 dixie ont disparu alors quand je voulais 
 dit ses valises sont vraiment là pour 
 décrire votre contenu donc du coup je 
 pourrais lui dire par exemple ça c'est 
 pas un paragraphe mais un titre est 
 alors un titre principal en html et bien 
 ça va être plutôt la balise h1 
 reviendront encore un petit peu là 
 dessus par la suite mais du coup si 
 j'enregistre n'oubliez pas l'enregistrer 
 sinon verrez pas les modifs évidemment 
 et que je recharge la page dont on 
 appuyons ici sur le bouton rechercher 
 cette page eh bien vous avez maintenant 
 un affichage sous forme de titres alors 
 il ya un petit style de base en fonction 
 du navigateur pour les balises html ce 
 qui vous permet de visualiser la 
 différence mais gardez bien à l'esprit 
 que vraiment modifier le rendu visuel de 
 tout ça se fera en css par la suite donc 
 maintenant que vous avez compris le 
 système de ben ali et bien il est temps 
 de commencer vraiment avoir une 
 structure complète alors sur l'atome 
 c'est ça qui pratique vous pouvez 
 directement commencé à taper html et 
 vous devriez avoir un petit raccourci 
 qui va vous donner le canevas de base 
 alors ce canevas de quoi il est 
 constitué au final est bien est 
 constitué d'une première balise ici qui 
 donne le type du document la balise 
 doctype et qui précise qu'on travaille 
 en html ensuite vous trouvez une balise 
 html ici et la balise fermente ici dans 
 lequel au final tout le reste sera 
 contenue 
 vous voyez à côté de la balise des 
 choses comme langué galets andy régal 
 ltr avec des guillemets ici et bien ça 
 c'est ce qu'on appelle des attributs 
 donc on va parler d'attributs pour 
 donner un genre d'option la balise html 
 ici la balise langue nous dit que notre 
 site est en anglais donc nous on va le 
 faire en français donc je m haies ferris 
 et et ensuite la tribu dire qui est ici 
 nous dit que notre texte va de gauche à 
 droite littéralement left to right 
 donc comme la langue française ou 
 anglaise par exemple du coup qu'est ce 
 qu'on retrouve ensuite à l'intérieur on 
 va retrouver deux groupes deux balises 
 assez important les balises raid et les 
 balises body ce qu'il faut bien 
 comprendre ici c'est que dans la balise 
 body on va mettre tout ce qui sera 
 affiché sur la page vous souvenez notre 
 titre de tout à l'heure mais on pourrait 
 très bien devenir le maître ici dans la 
 balise aide on va trouver des choses qui 
 ne s'affiche pas à proprement parler 
 mais qui ont malgré tout leur importance 
 la première qui est vraiment son 
 importance ici c'est la balise title 
 cette balise title lycée on va mettre 
 par exemple mon premier site je vais 
 enregistrer et si je reviens que je 
 recharge la page mais on voit qu'ici 
 âprement et revu il n'y a rien qui a 
 changé par contre ici si vous regardez 
 votre barre d'onglets bien là vous voyez 
 que la balise title a bien été 
 reproduite ici et donc c'est vraiment 
 l'intérêt de cette balise title sait 
 qu'elle va décrire le titre de votre 
 page c'est aussi elle qui sera utilisée 
 par exemple pour les résultats de la 
 page de recherche sur google donc cette 
 balise elle est vraiment très important 
 ensuite qu'est ce qu'on va retrouver 
 bien on va retrouver ici une balise meta 
 cette balise meta en fait elle vous sert 
 à quoi elle vous sert à donner pas mal 
 d'informations supplémentaires ici on 
 dit aux navigateurs on utilise le char 
 cette ut f8 donc ça c'est un petit peu 
 plus technique mais c'est plutôt relatif 
 à l'encodage une voie informatique des 
 caractères donc une telle fuite pour 
 vous ça devrait fonctionner donc on va 
 le laisser comme ça ensuite comme je 
 voulais dit on va vraiment se retrouver 
 à l'intérieur de notre balises body 
 cette balise body elle va vraiment avoir 
 toute son importance parce que comme je 
 vous le dis c'est là qu'on va voir le 
 contenu principal du site alors 
 une chose ici quand même c'est que vous 
 voyez à chaque fois que pour chaque 
 niveau on a des tabulations voilà c'est 
 la touche juste à côté du à sur votre 
 clavier qui permettent d'ajouter de la 
 lisibilité techniquement le code 
 fonctionnerait aussi si on l'avait comme 
 ça seulement en ce serait beaucoup 
 beaucoup beaucoup moins lisible 
 et donc prenez vraiment cet habitus 
 avons une très bonne habitude que 
 d'inventer votre code pour qu'il soit 
 beaucoup plus lisible avec le temps est 
 donc maintenant on va commencer à venir 
 construire notre page alors comme je 
 voulais dit par exemple on pourrait 
 utiliser une balise titre qu'on va 
 mettre ici directement une balise 
 condamne être une balise h1 
 et cette balise on va mettre voilà html 
 et css 2 points les bases 
 je ferme la balise la balise h1 et d'une 
 balise qui fonctionne par deux éléments 
 et j'enregistre je regarde le rendu et 
 on voit bien que ça fonctionne comme 
 prévu on va continuer un petit peu ça 
 et j'aurais aussi envie de mettre ici 
 par exemple une image cette image elles 
 s'ajoutent grâce à la balise img qui est 
 ici et elle va prendre au moins une 
 option importante qui est frcs rcc pour 
 lui dire qu'elle est la source de 
 l'image ou est-ce que tu dois aller la 
 chercher et la simplement et bien si 
 vous avez mis votre image moi je les 
 appelais logo point png ici dans le même 
 dossier que votre site web et bien vous 
 avez simplement à dire où elle se trouve 
 à leur actif jour regardez donc ici par 
 exemple on est sûr logo enfin tng notre 
 image elle se situe au même niveau que 
 notre fichier index donc si je viens et 
 que je recharge 
 alors pour l'instant elle n'est pas très 
 visible parce que c'est du bluff sur du 
 blanc simplement mais en fait elle est 
 bien ici voilà je la fais un peu glissé 
 comme ça vous la voyez bien vous voyez 
 j'ai vu dans cette image ici on verra 
 par la suite comment css comment changer 
 la couleur de fond et donc faire 
 ressortir notre logo dans les images il 
 ya une deuxième option intéressante 
 ajouté au moins systématiquement presque 
 c'est la tribu halte qui est ici la 
 tribu halte qu'est-ce qui vous dit en 
 gros il vous dit ok si jamais l'image 
 n'arrive pas à s'afficher par exemple 
 parce que la personne qui regarde votre 
 site à une déficience visuelle ça donne 
 une alternative textuelles pour lui 
 expliquer ce qu est l image si je vais 
 mettre logo de bertrand par exemple 
 j'enregistre et là je suis bon pour ma 
 première partie ensuite je vais venir un 
 petit peu plus loin et je vais mettre un 
 paragraphe cette fois ci c'est à bali ce 
 qu'on a vu dans tout début de vidéo est 
 là du coup c'est la balise p cette 
 balise là aussi je vais terminer comme 
 ça je la mets au même niveau pour que ce 
 soit lisible et je vais mettre le 
 contenu de mon paragraphe à l'intérieur 
 et je vais m créer 
 votre site web voilà tout simplement 
 j'enregistre et je vais 
 regarder le résultat est donc on voit 
 bien qu'on a 
 le titre l'image qui est pas très 
 visible et mme ensuite non paragraphe 
 qui est ici d'accord voilà on voit qu'on 
 a vraiment où tu as la suite et là je 
 vous vois venir vous ok là on a qu on 
 est en train de créer une page web mais 
 c'est quoi un site web au final un site 
 web simplement c'est plusieurs pages qui 
 sont mises ensemble et donc ici par 
 exemple je pourrais très bien créer une 
 deuxième page donc je vais venir faire 
 un clic droit sur un espace vide dans 
 cette barre latérale alors si elle n'est 
 pas affiché bien vous avez simplement 
 ici vous voyez un petit tiroir pour 
 l'affiché donc je vais faire un clic 
 droit et je vais faire new file vous 
 pourriez aussi le créez simplement sur 
 windows ou sur mac os est simplement 
 comme fichiers nouveau one tout 
 simplement est donc ici je vais je vais 
 l'appeler page 2 par exemple point html 
 je l'enregistré et du coup et bien je 
 vais venir simplement marqué un petit 
 texte ici dans ce paragraphe bien je 
 veux mettre bienvenue sur la page 2 
 j'enregistre et maintenant si j'ouvre 
 cette page si sûr mon navigateur et bien 
 je vois que on a bien un affichage comme 
 on l'avait pensé et donc du coup 
 maintenant l'intérêt ici on a deux pages 
 ensemble et bien c'est les faire 
 communiquer de faire en sorte au final 
 que cette page si elles puissent 
 retourner sur cette page 2 et donc pour 
 ça vous avez le principe de liens les 
 liens vous connaissez vous les utilisez 
 très très très souvent et vous l'avez 
 compris c'est simplement un texte ou une 
 image sur laquelle on peut cliquer pour 
 passer de page en page donc pour créer 
 un lien là aussi vous avez une balise 
 que vous pouvez utiliser par exemple 
 l'intérieur d'un paragraphe qui est la 
 balise ha pour hans or c'est à dire pour 
 une encre donc du coup je vais ici je 
 crée la balise a ensuite je passe option 
 href achever ses quoi bien c'est pour 
 lui dire simplement bac quand tu cliques 
 on va là est donc ici on va où on va en 
 page 2 points html alors encore une fois 
 ici on voit bien ici elles sont sur le 
 même niveau 1 donc voilà si on a 
 vraiment tout sur le même niveau c'est 
 très simple à faire c'est pas bien il 
 faudra mettre le chemin complet et donc 
 du coup une fois que cette balise là est 
 ouverte je m y si le texte qui 
 s'affichera donc mon lien par exemple ou 
 alors aller en page 2 
 voilà je vais fermer ensuite la balise 
 ais je vais enregistrer et donc 
 maintenant si je reviens sur la première 
 page je vois que j'ai maintenant aller 
 en page 2 et quand je clique dessus et 
 bien j'arrive bien sur la deuxième page 
 que je viens de créer donc si je voulais 
 retourner sur la page une il me 
 suffirait de recréer un lien ici de 
 toute façon ces liens sont aussi à la 
 base même des menus dont on parlera un 
 petit peu plus tard juste la différence 
 entre un lien interne donc un lien comme 
 celui ci un vers une autre page de mon 
 site web dans mon dossier et c'est 
 d'un lien externe l'externe saint pierre 
 vers un autre site par exemple on 
 pourrait faire un lien vers youtube est 
 donc simplement pour ça je vais taper 
 l'url du site 
 auquel je souhaite accéder 
 voilà donc pour la différence entre un 
 lien interne et un lien externe et donc 
 maintenant justement on pourrait 
 s'amuser à venir créer un menu et donc 
 pour ça simplement je vais utiliser une 
 autre type de balises et souvent les 
 menus sont fait sur base de balises ul 
 et elie alors la balise ul c'est une 
 balise qui fait quoi bien simplement 
 c'est une balise pour créer des listes 
 sans numéro devant voilà on va dire ça 
 comme ça et donc cette balise ul est là 
 pour dire ok il va y avoir une nouvelle 
 liste dans cette liste on va mettre nos 
 éléments devenus et pour chaque élément 
 de la liste eh bien je vais mettre une 
 balise elle y donc ici ce sera la page 
 d'accueil 
 est en dessous on va mettre par exemple 
 la page 2 
 voilà j'enregistre et je regarde le 
 résultat alors je vois bien que j'ai ici 
 une liste et je vois bien que j'aie les 
 éléments écrits que je désire alors 
 cependant j'ai pas encore vraiment créé 
 le côté liens de temps là bas ça va être 
 pareil que pour le lien qu'on a créé ici 
 c'est à dire qu'on va revenir à choisir 
 d'encadrer notre texte par une balise à 
 on va mettre href égal slash pour lui 
 dire bah voilà ou alors index.html voilà 
 pour pointer vers notre fichier d'axa 
 je vais mettre accueil et je m slash ah 
 voilà tout simplement 
 et je vais faire pareil pour man pour le 
 lien qui va aller vers la page 2 donc je 
 veux dire que c'est vers pages de bois 
 je t aime elle qu'on doit pointer et je 
 vais venir ensuite ici a pas 
 terminé le lien en fermant la balise est 
 donc maintenant quand je registre et 
 bien je recherche ma page et je vois du 
 coup que j'ai bien accueilles et page 2 
 quand je clique sur accueil on voit que 
 sa charge ça renvoie sur cette page si 
 et quand je clique sur page 2 et bien là 
 on arrive à la page 2 
 je reviens au début et ici 
 les choses commencent à peu à prendre 
 forme ok alors avant de continuer on 
 voit qu'à chaque fois on forme un petit 
 peu ici tous des blocs de code qui 
 visuellement seront affichées de façon 
 différente je veux dire ici par exemple 
 vous pourrez mettre une couleur de fond 
 pour faire ressortir le logo invisible 
 pour l'instant parce que les blancs et 
 si on pourrait mettre une image en fond 
 par exemple voilà on pourrait faire tout 
 ce genre de choses le menu on va devoir 
 le stylisé aussi de l'ancien bloc à part 
 et donc dites vous bien à chaque fois on 
 aura comme des blocs de contenu et bien 
 ces blocs il y à une balise pour ça 
 aussi en html qui est la balise div 
 et donc je vais commencer maintenant 
 déjà à venir encapsulé tous et ensemble 
 de codes dans ce style de blocs et donc 
 pour ça qu est ce que je vais faire bien 
 ici je vais créer une balise div 
 voilà tout simplement et je vais venir 
 la fermer à la fin de mon blog de 
 contenu 
 tout simplement et alors pour garder une 
 belle visibilité je vais reprendre 
 toutes ses lignes de code et je vais 
 faire un petit coup de tabulation pour 
 venir voilà bien ta bulle et et bien 
 organisée ma hiérarchie 
 de ma liste je vais faire pareil pour 
 ici donc je vais venir créer une div 
 j'ai attentes 
 et je ferme ma div 
 et je vais faire encore une fois la même 
 chose ici 
 alors si on recharge on voit qu'il ya 
 pas tellement de différence à ce niveau 
 ci 
 mais qu'importe la base est là et on 
 pourra venir structuré ça un petit peu 
 plus tard et stylisé tout ça en css mais 
 au moins on a déjà bien séparés notre 
 contenu mais attention c'est pas tout là 
 on a des div qui sont général maintenant 
 il est il en existe qui ont pratiquement 
 le même effet et qui visuellement auront 
 le même effet mais qui vont donner un 
 indice sur le contenu du bloc et ses 
 balises bien par exemple c'est la balise 
 nav pour dire aux navigateurs est bien 
 là là dedans tu vas trouver un menu qui 
 va permettre de naviguer dans le site 
 vous trouvez aussi une balise 
 qui s'appelle mail et qui va contenir le 
 contenu principal de notre site donc 
 voilà je veux englobait encore une fois 
 l'ensemble dans une balise nine 
 et vous allez aussi trouver les balises 
 section pour chaque section 2 contenu 
 voilà donc vous pourriez très bien voir 
 une structure qui au final ressemble à 
 ça pratiquement ça aura le même effet on 
 va les recharges encore une fois le site 
 et on voit que ça pas changer grand 
 grand grand chose mais par contre est 
 bien le navigateur c'est maintenant que 
 ici on a un menu que ici on a des 
 sections deux contenus et pour tout un 
 tas de raisons référencement par exemple 
 donc c'est à dire positionner votre site 
 sur google je pourrais faire une vidéo 
 sur le sujet si ça vous intéresse ou 
 encore pour des logiciels par exemple 
 qui vont venir 
 faciliter la lecture pour les personnes 
 aveugles et c est bien là 
 sa toute son importance donc je vous 
 encourage vraiment eut adopté cette 
 façon de faire le html sémantique dites 
 vous bien tous vos blocs de code on va 
 les séparer dans des div certains de ces 
 div ont un usage spécifique pour décrire 
 le contenu des boîtes et enfin on pourra 
 mettre tout ça un peu plus en forme 
 grâce au css et du coup on va continuer 
 un petit peu on a une première section 
 une 2ème et bien on va en créer une 
 troisième tout simplement 
 voilà et ici à l'intérieur je vais 
 utiliser des divins peut générer pour 
 faire deux colonnes qui n'en n'ont 
 seront qu'une par exemple sur la version 
 mobile donc voilà on va voir ça un petit 
 peu plus tard et donc ici à l'intérieur 
 je vais mettre 1 h 2 
 avec un sous titre donc là je vais 
 mettre html 
 est ensuite directement en dessous je 
 mets une balise paragraphe pour mettre 
 un petit peu de contenu en plus donc ici 
 va justement vous l'avez compris le html 
 c'est pour le contenu et la structure et 
 ensuite je vais fermer cette vive 
 et je vais en créer une nouvelle ici 
 dans cette divine je vais faire plus ou 
 moins la même chose je vais remettre un 
 sous titre de maître css 
 et je vais mettre un petit paragraphe 
 pour le style le css c'est ce qu'on 
 étudiera un petit peu plus tard dans 
 cette vidéo 
 enfin je vais rajouter une dernière 
 section avec un petit prototype de 
 formulaires c'est aussi quelque chose 
 qu'on croise réellement souvent 
 sur le web et donc pour ça j'ai une 
 balise aussi à part entière qui 
 s'appelle la balise for more est très 
 importante il ya beaucoup de soupe à 
 lise possible à l'intérieur je vous 
 montrerai où les trouver un petit peu 
 plus tard et cette balle et je vais 
 aussi venir la fermer cette valise forme 
 elle prend généralement une action comme 
 poste guette et c'est alors ça je n'ai 
 pas l'aborder dans cette vidéo dites 
 vous bien qu'en html en css on va créer 
 le formulaire en lui-même mais pas son 
 traitement c'est à dire quoi c'est à 
 dire qu'ici bien par exemple je peux 
 créer 
 un champ donc pour un chant vote 
 isabelle is in qt et je veux lui dire 
 que c'est une balise qui attend du texte 
 ensuite 
 je vais lui donner un nom ici on va dire 
 par exemple que sa valise email pour 
 récolter une adresse email et à ce 
 niveau là maintenant je suis bon je vais 
 te retourner voir ce que ça donne on 
 voit html pour le contenu css pour le 
 style est alors ici je vois le chant que 
 je peux du coup complété donc c'est pas 
 tout à fait fini et si on peut mettre un 
 petit titre aussi dit l'un age 2 
 inscrivez-vous 
 à la newsletter 
 voilà j'ai mon champ alors devant ce 
 champ je voudrais bien m ben voila un 
 petit texte qui explique ce qu'est mon 
 champ pour ça je vais pouvoir utiliser 
 la belle est alors la belle il va 
 prendre un attribut fort qui sera en 
 fait le nom du champ auquel il est 
 rattaché donc ici on va dire que c'est 
 le les bêtes le label fort email tout 
 simplement 
 et là par contre ça fonctionne comme une 
 balle comme une balise paragraphe est 
 donc je vais mettre ici email ça sera le 
 texte qui sera affichée et ensuite je 
 vais fermer la balise 
 alors je vois ici du coup que ça 
 fonctionne j'ai bien mon titre j'ai mis 
 mon label j'aime bien mon espace et me 
 manque les ducs ou qu'un petit bouton 
 pour valider celui là aussi vous avez 
 un championnat et là vous pouvez 
 utiliser le taipei subite 
 j'enregistre 
 et je recharge et je vois que j'ai 
 maintenant un bouton envoyer alors ce 
 bouton envoyer pour l'instant il va pas 
 faire grand chose parce que comme je 
 voulais dit le principe avec html et css 
 c'est de créer la structure le contenu 
 le style mais pas tellement de créer les 
 actions dont pour créer les actions de 
 ce formulaire j'aurai besoin d'autre 
 chose par exemple de php ou java script 
 etc ça sera vu vous inquiétez pas dans 
 les prochaines vidéos mais du coup 
 voilà on va en rester pour ce formulaire 
 et on voit que dans notre page html ici 
 on a du coup déjà pas mal de choses on a 
 une image et qu'on verra mieux plus tard 
 on a un titre de niveau 1 ont des titres 
 de niveau 2 on a des paragraphes on a 
 des liens voilà tout simplement et on a 
 même un formulaire donc c'est déjà 
 plutôt pas mal pour commencer on a déjà 
 donné un bon petit coup d'oeil ici mais 
 bien sûr vous pourriez retrouver toutes 
 ces balises html et pour ça simplement 
 ou est-ce que vous pouvez les retrouver 
 et bien simplement si vous tapez balises 
 html sur google vous avez une tonne de 
 sites qui vont vous permettre de 
 découvrir l'ensemble de ces balises un 
 site de référence et bien c'est le 
 développeur pour mozilla point org et là 
 vous avez les références des éléments 
 html et vous retrouverez une liste très 
 complète de toutes les balises html que 
 vous pouvez utiliser alors l'attention 
 il y en a vraiment beaucoup beaucoup 
 beaucoup beaucoup moi je vous ai montré 
 le principe général mais vous pouvez du 
 coup vraiment aller beaucoup plus loin 
 ok donc maintenant qu'on s'est attardé 
 au contenu et bien on va commencer à 
 parler un petit peu du css c'est à dire 
 la mise en forme c'est à dire le style 
 de votre passé ici qu'on va vraiment 
 commencer à s'intéresser au design et on 
 va découvrir ça ensemble et donc 
 maintenant on a envie de styliser un peu 
 tout ça grâce justement aux csss et donc 
 venons au css vous avez trois façons 
 d'inclure votre css la première que vous 
 pourrez parfois retrouvé ses deux 
 inclure directement au niveau de votre 
 balise comme un attribut et donc par 
 exemple si j'ai envie de venir ici 
 mettre justement tout ça en bleu voilà 
 mon premier blog vraiment deux contenus 
 ma première section et bien je peux 
 venir au niveau de ma section voilà de 
 la balise et commençaient à passer mon 
 css et pour ça je vais ajouter un 
 attribut steam et je vais lui dire égal 
 ouvrez et fermez les guillemets et à 
 l'intérieur je peux venir ici marqué mon 
 css non css ça sera toujours la même 
 structure je vais commencer ici par lui 
 donner une directive de ce que je 
 souhaite changer ici dans ce cas ci 
 c'est la couleur de fond et donc 
 background color ensuite je vais mettre 
 deux points et je vais lui passer la 
 valeur et non ce cas ci je vais lui 
 passer par exemple une valeur blue et je 
 vais enregistrer donc il ya différentes 
 façons de marquer les couleurs la 
 j'utilisais la plus simple et je reviens 
 de recharger ma page et on voit que ça a 
 bien fonctionné on voit vraiment ici que 
 mon arrière plan est passée totalement 
 en bleu et donc on peut continuer à 
 travailler mais si je me dis à un moment 
 donné bah voila j'ai envie aussi par 
 exemple que cette section 6 avec html et 
 css donc celle ci soit passé également 
 bleus eh bien je vais devoir repasser 
 exactement la même chose au niveau de ma 
 section et je vais devoir lui remarqué 
 du coup style égale background color 
 de pointe blue 
 j'enregistre 
 et je recharge et je vois que ça 
 fonctionne bien cependant c'est quand 
 même pas l'idéal parce que du coup je 
 dois retaper tout ça à chaque fois que 
 je veux que mon fonds soit bleu et donc 
 du coup ça ça pose quelques soucis 1 et 
 là je ne change d'une propriété je 
 pourrais ont changé plusieurs ce qu'on 
 va voir plus tard et donc pour ça il 
 faut venir définir le css à un endroit 
 comme un conte pourra réutiliser et ça 
 aussi vous avez plusieurs façons de le 
 faire la première c'est de venir dans le 
 raid est de venir ajouter une balise 
 style 7 be still à l'intérieur je vais 
 pouvoir y placer mon css et je pourrais 
 par exemple lui dire background color 
 blue mais si je fais ça comme ça mais 
 qu'est ce qui va se passer je vais 
 recharger 
 voilà et on voit que ça rien changé en 
 finale j'ai laissé les styles ici donc 
 voilà il faudrait vraiment les enlever 
 voilà c'est ce que je vais faire 
 maintenant 
 j'enregistre je recharge et je vois du 
 couple les modifications ne s'affiche 
 plus nulle part et bien c'est normal il 
 faut lui dire voilà l'endroit précis 
 auxquels ces modifications doigts être 
 apportées et pour ça et on va utiliser 
 ce qu'on appelle des sélecteurs et donc 
 pour ça on va commencer avant de lui 
 donner vraiment les instructions a 
 changé on va lui dire qu'on veut 
 modifier les sections 
 voilà tout simplement et donc on va 
 ouvrir donc simplement c'est le nom de 
 la balise on va ouvrir et fermer une 
 accolade et à l'intérieur on va lui 
 mettre backbone color blue et on va 
 aussi naître un point virgule juste 
 derrière l'instruction 
 comme ça on est vraiment dans le vrai 
 quand celle ci 
 le nom de la propriété a changé deux 
 points la valeur est ensuite un point 
 virgule si j'ai besoin de rajouter une 
 deuxième propriété eh bien je la joue 
 très à la suite déjà terminée là aussi 
 par un point virgule donc j'enregistre 
 je recharge et là par contre je vois que 
 tout mais section déjà on voit bien les 
 différents son passé en bleu et tout ça 
 pourquoi parce qu'on lui a dit que on 
 voulait prendre la balise section si je 
 voulais prendre la balise paragraphe par 
 exemple je mets un petit p j'enregistre 
 je recharge et là je vois que ce sont 
 les paragraphes sur lesquels on a été 
 appliqué du coup la modification et nous 
 c'est pas vraiment ce qu'on veut faire 
 nous ce qu'on veut faire en fait c'est 
 venir l'appliquer oui à des sections 
 mais juste à la première ici et par 
 exemple juste à celle-ci ou juste à 
 celle ci est donc pour ça qu'est-ce que 
 j'ai fait le mien je vais utiliser des 
 sélecteurs de classe par exemple les 
 sélecteurs de classe ça c'est simple je 
 vais lui dire ici je peux les créé sur 
 demande donc je viens ici par exemple 
 sur ma section la première et je voulais 
 passer une classe et je vais lui dire 
 que cette classe je peux créer le nom à 
 la demande et donc je vais lui dire que 
 c'est la classe fond bleu tout 
 simplement 
 et qu'est ce qu'on va faire maintenant 
 du coup eh bien on va venir modifier ça 
 pour non plus avoir les balises 
 paragraphe mais la classe fond bleu 
 alors quand on choisit une classe en css 
 on commence par un point et ensuite on 
 mais voilà le nom de la classe donc je 
 m'attaque à ce fond bleu 
 donc c'est ça ici la classe 
 qui est définie et qui dit en fait voilà 
 toute cette section elle doit être mise 
 en forme selon la classe fond bleu fond 
 bleu qui se trouve ici du coup 
 j'enregistre je recharge et là je vois 
 bien que ça fonctionne et qu'on a bien 
 le résultat escompté et du coup la 
 retirer bien c'est que à chaque fois que 
 j'aurai besoin de mettre une balise on 
 fond bleu et bien je n'aurai qu'à venir 
 sur la balise en question pour lui 
 rajouter la classe correspondante à 
 mettons que je souhaite la mettre sur le 
 h2 html donc sur le titre de html mais 
 un jour ajoute la classe égale fond bleu 
 j'enregistre je recharge et je vois bien 
 que du coup juste cet élément-là a été 
 mis en bleu donc ça c'est le principe de 
 classe donc moi je vais enlever ce fond 
 bleu ci parce que je n'avais pas besoin 
 je voulais juste avoir celle ci alors 
 par contre c'est pas la seule façon 
 d'être une couleur là je trouve que le 
 bleu il est pas terrible j'ai vraiment 
 un boulot très classique et donc je peux 
 venir par exemple un nouvel onglet et 
 taper une recherche comme par exemple 
 palette couleurs 
 html par exemple 
 voilà je trouve ici code couleur html 
 et je trouve sur ce style de sit ins 
 électeurs qui va me permettre de choisir 
 une couleur donc si je venais de choisir 
 un bleu plus sympa voilà peut-être un 
 blog un petit peu plus profond voilà 
 quelque chose comme ça et du coup mais 
 bien j'ai les valeurs maintenant ici qui 
 me permettent de l'identifier cette 
 couleur là précisément sur des millions 
 donc ici je peux prendre le code 
 hexadécimal qui est ici à côté de hayes 
 et je fais un copier de ce code et je 
 viens simplement maintenant sur mon css 
 pour changer background color blue park 
 art et si on met un hexadécimal on 
 commence toujours par le fameux style 
 ici voilà on va appeler ce caractère 
 comme ça dans les faits on l'appelle le 
 croisions et dans les faits je fais un 
 col et 
 lemm avait pris le croisillon avec donc 
 voilà donc nos besoin que d'un seul 
 j'enregistre et je colle bien du coup la 
 valeur hexadécimal que j'ai trouvé sur 
 cette palette là donc je fais à 
 recharger et là 
 voit bien du coup que j'ai la couleur 
 qui m'intéresse à 
 mais maintenant parlons du troisième 
 endroit où mettre notre css parce que 
 bien ici on va avoir un fichier qui va 
 vite devenir très gros surtout si on 
 cumule html et css dans le même fichier 
 et nous en informatique et surtout quand 
 on code on aime bien séparées tout ça 
 dans des fichiers différents pour s'y 
 retrouver un petit peu plus et donc pour 
 ça qu est ce que je vais faire eh bien 
 je vais revenir faire un clic droit je 
 vais faire encore agnew file et je vais 
 créer un nouveau fichier mais ce fichier 
 du coup je vais l'appeler style point 
 css dans les faits vous pourriez 
 l'appeler à peu près n'importe comment 
 mais par convention le fichier css 
 principal on l'appelle style point css 
 j'enregistre hélas que je vais faire et 
 bien c'est que je vais reprendre css qui 
 est ici je vais venir le collet dont 
 document j'enregistre et ensuite eh bien 
 je vais plutôt enlevé ça et faire un 
 lien vers cette fiche c'est c'est ce que 
 je viens de créer alors pour ça 
 simplement qu'est ce que je vais faire 
 je vais revenir dans le raid et je vais 
 utiliser la balise link qui me permet de 
 lier à un fichier je vais lui dire dans 
 un attribut rôle que 
 le fichier est un fichier de feuilles de 
 style et donc je vais appeler ça style 
 sheet et je vais ensuite tout comme 
 amiens mettre une référence 1 h res vers 
 le fichier css style point css ici parce 
 qu'il est dans le même fichier 
 et je vais fermer cette valise c'est une 
 balise unique j'enregistre un et je 
 recharge et là on voit que tout est 
 toujours fonctionnel et maintenant si je 
 veut modifier mon css et bien je viens 
 dans le fichier steal princess pour 
 venir modifier la valeur que je veux 
 oui j'oubliais le petit croisions à pain 
 pour modifier ça tout simplement donc 
 ici je reviens j'annule les 
 modifications avec contrôle z ou comment 
 y êtes si vous êtes sur mac 
 et on voit bien du coup qu'on a trois 
 façons dans une feuille externe 
 dans une balise style au niveau du head 
 ou alors en ajoutant 
 un attribut style voilà au même niveau 
 que j'ai ajouté cette tribu classe 
 alors des propriétés css bien sûr il y 
 en a une tonne également donc moi je 
 tapais par exemple ici c'est 16 
 properties mdn soit propriétés css sur 
 le mozilla developer network et je vais 
 prendre le lien référence ss faye de 
 style en cascade et ici je vais pouvoir 
 également retrouvé une liste de toutes 
 les propriétés que vous pouvez ajouter 
 donc quand nous vous le voyez on a quand 
 même vraiment pas mal pour chacune 
 d'elle d'ailleurs quand je clique j'ai 
 des démonstrations de ce que ça fait en 
 temps réel avec quelques petits exemples 
 une petite visualisation à droite qui 
 est vraiment pas mal ainsi qu'à la fin 
 le support sur les différents 
 navigateurs parce que oui css est 
 implémenté avant tout aussi au niveau de 
 votre navigateur web et donc et bien les 
 propriétés les plus récentes ne seront 
 peut-être pas dispo sur tout l'est sur 
 tous les navigateurs par exemple 
 par exemple si une propriété sort après 
 la version 12 de edge et bien la version 
 12 de edge connaîtra jamais cette 
 propriété là et donc ne sera pas là les 
 roses qui serait peut-être que le cas 
 par exemple de la version trêve donc ça 
 ça à prendre en compte et ça va vous 
 inviter aussi attesté souvent votre site 
 web sur les différents navigateurs afin 
 de voir que tout fonctionne à peu près 
 partout de la même façon et ça parfois 
 ça peut être un peu casse tête même si 
 c'est un petit peu mieux qu'avant à ce 
 niveau là 
 mais du coup et bien on peut utiliser 
 toutes ses balles ici pour continuer à 
 customiser notre site web maintenant 
 qu'on a compris les principes de base 
 alors la première chose ici est bien 
 c'est que vous voyez que les bords bah 
 voilà ils sont pas vraiment il ya un 
 genre de petites marges là tout autour 
 et donc ça c'est une marge qui mit un 
 peu par défaut par votre navigateur et 
 donc pour ça mais on va continuer sur 
 notre style et on va lui dire que au 
 niveau du body dans notre page donc là 
 on fait référence directement à la 
 valley à la balise et bien on a une 
 marge 
 donc la maj c'est vraiment ici tout le 
 petit encart que vous avez autour c'est 
 là c'est un espace on va dire vide entre 
 plusieurs blocs et cette nage voilà m à 
 0 
 donc je recharge et là je vois que la 
 marge qu'ils étaient tout autour a 
 disparu je peux maintenant vraiment 
 venir fixer les choses moi-même j'ai 
 envie maintenant de customiser la façon 
 dont mon titre à sa fiche et donc pour 
 ça maintenant je vais revenir toujours 
 sur mon style et je vais modifier cette 
 balise h1 jeu peut la modifier 
 directement parce que ça sera la seule 
 balise h1 de mappage et donc je vais lui 
 ajouter différentes propriétés par 
 exemple texte à ligne et je vais le 
 mettre en centers qui permettra deux 
 centres et le texte 
 ensuite je vais rajouter color et je 
 vais mettre la couleur blanc alors pour 
 ça le blanc ça vous pouvez le retenir 
 ces sifflets f 
 je recharge et je vois que ça fonctionne 
 maintenant je vois que le html et css 
 est vraiment très très collée par 
 rapport au bord de mon cadre et pour ça 
 j'ai envie de rajouter un genre de petit 
 match interne et bien cette marge 
 interne c'est ce qu'on appelle un 
 padding 
 et donc pour ça je vais rester sur mon 
 chemin et je vais ajouter fading alors 
 je peux préciser tirer top pour viser la 
 marge interne supérieure celle où j'ai 
 justement un petit beurre avec le cadre 
 et je veux lui dire que je souhaite par 
 exemple se passer de 30 pixels 30 pixels 
 c'est une valeur fixe un pixel c'est un 
 point sur votre ordinateur à point sur 
 votre écran et donc si je recharge ici 
 voilà je vois que j'ai la marge qui est 
 venu se crée ici la marge interne qui 
 venus se crée entre le début du bloc 
 et le contenu si j'ai envie de mettre de 
 la même façon un planning 
 voilà pour le sol un peu bling pour le 
 dessous un tadine bottom donc est bien 
 ici je peux mettre par exemple je vais 
 exagéré un petit peu pour vous montrer 
 mais si je mets 150 pixels ici je 
 recharge est bien là vous voyez qu'on a 
 vraiment 
 une très grosse différence donc moi 
 c'est un petit peu trop pour moi je vais 
 plutôt venir mettre quelque chose comme 
 15 pixels parce que je veux que ça colle 
 assez bien au logo l'image qui est ici 
 justement parlons-en 
 cette image là j'ai envie 
 qu'elle fasse un certain pourcentage par 
 exemple de mappage pas envie qu'elle 
 s'affiche comme ça en grand alors pour 
 ça qu est ce que je vais faire je vais 
 rajouter une classe par exemple 
 et je vais l'appeler 
 logo principal 
 j'enregistre et je reviens maintenant 
 dans css pour rajouter le css 
 correspondant au logo 
 principal donc cette classe 
 ce qui explique que j'ai ici un point du 
 coup et qu'est ce que je vais lui dire 
 eh bien j'ai besoin ici de lui donner 
 par exemple une largeur ou une hauteur 
 spécifique donc je vais lui dire par 
 exemple que sa largeur avant qu'on va 
 appeler sa rive oui c'est largeur en 
 anglais et qu'est ce qu'on va humer a 
 très bien on va y mettre par exemple 70% 
 j'enregistre je recharge et là on voit 
 que mon image elle a vraiment ici 
 diminuer de taille 
 alors admettons maintenant que je 
 souhaite aussi centre un petit pot final 
 tous les éléments qui se trouvent dans 
 cette partie ci est bien pour le coup ce 
 que je vais faire simplement c'est que 
 je vais venir par exemple sur ma section 
 d'ailleurs je vais lui donner un nom 
 alors souvent le premier élément comme 
 ça le premier bloc le plus imposant on 
 l'appelle i wore d'accord en anglais 
 donc vous retrouver ça souvent dans des 
 thèmes et c'est donc autant s'habituer à 
 ça et donc je vais modifier mon fond 
 bleu mains voila je vais lui donner le 
 nom plus explicite heroes et ensuite je 
 continue et ce que je vais faire ici du 
 coup s'est rajoutée par exemple un texte 
 aligne 
 center voilà je le mets sont très voilà 
 comme ça et ainsi tout ce qui sera ici 
 sera centré si je trouve ici encore une 
 fois que le logo ici est un petit peu 
 trop proche du pauvre est bien là je 
 peux revenir sur le css du logo 
 principal et lui dire aussi par exemple 
 20 painting convainc pas bling en 
 dessous donc padding bottom et qu'on 
 veut ding 2 20 pixels 
 j'enregistre et là on voit justement 
 qu'on est bon à ce niveau 6 
 qui est continuons donc un petit peu 
 cette mise en forme donc ici on va 
 simplement agrandir un petit peu le 
 texte le mettre au centre et ensuite 
 pourquoi pas créer ici un bouton voilà 
 customiser un petit peu ce lien le 
 transformer en une sorte du design de 
 boutons alors pour ça qu est ce que je 
 le fais rien dans un premier temps je 
 vais venir ici aussi pourquoi pas 
 identifié cette section 6 donc je 
 pourrais mettre que c'est la classe logo 
 par exemple et ensuite je vais venir 
 customiser encore une fois mon css 
 donc ici je vais venir m 
 point slogan c'est le nom de la classe 
 que j'ai créé 
 et ensuite je peux aussi venir mettre un 
 texte aligne 
 center 
 ensuite ça voilà la gelée du coup centre 
 est qu'est-ce que j'ai besoin de faire 
 j'ai besoin d'agrandir ce paragraphe est 
 du coup mes seins c'est quoi quand on y 
 réfléchit bien c'est des paragraphes 
 contenus dans slogan est donc pour ça je 
 peux aussi venir sélectionner 
 directement en css simplement je vais 
 venir faire un coup de poing slogans et 
 puis je vais rajouter la balise 
 paragraphe derrière et ça veut bien dire 
 ce que ça veut dire on a le paragraphe 
 de la classe los gants et ce paragraphe 
 est bien ce qu'on veut c'est modifier sa 
 sonde saiz sa taille d'écriture et pour 
 ça je vais aussi en profiter pour vous 
 montrer une petite valeur qui reviendra 
 souvent c'est les em donc là je met par 
 exemple 3ème point virgule et ça veut 
 dire quoi c'est tu aimes bien c'est par 
 rapport à taille de référence de votre 
 texte donc c'est une valeur qu'on 
 appelle relative ça veut dire quoi se 
 dire que ça va être trois fois plus 
 grand que cette taille de masse 
 j'enregistre et on voit ici que c'est 
 bien le cas alors par contre moi je 
 trouve ça un petit peu trop grand j'ai 
 peut-être juste m 2 m pour voir ça aussi 
 il faut bien vous en rendre compte ça 
 sera souvent d'expérimentation ça sera 
 souvent testé modifié et c'est jusqu'à 
 avoir quelque chose qui vous plaît dans 
 un design forcément base et qu'on 
 découvre on signe ici mais comprenait 
 déjà un petit peu cette logique ensuite 
 on doit venir modifier ça pour l'avoir 
 sous forme de bouton alors du coup mais 
 a là aussi je vais revenir sur le code 
 html et on voit que simplement c'est la 
 balise à contenu donc la balise n'est un 
 contenu dans la classe dans la section 
 de la classe slogans 
 et donc du coup j'y vais je prononçais 
 cesse 
 j'ajoute point slogan 
 à pour rien 
 et je vais lui dire voilà qu'on va 
 mettre 
 un background color 
 et qu'on va la voir par exemple vers 
 voilà pour choisir une couleur un peu 
 plus sympa et c'est plus tard mais voilà 
 vraiment pour la démo à parce qu'on voit 
 ici c'est un verre assez assez foncée 
 mais bon c'est pas encore l'idéal on n'a 
 pas encore vraiment notre bouton alors 
 pour ça on va rajouter un petit peu plus 
 de css 
 je vais commencer par rajouter à padding 
 un passing qui sera dans toutes les 
 directions et qui sera par exemple de 5 
 pixels on aura déjà quelque chose qui 
 s'approche plus ensuite on va lui dire 
 que ensuite on va lui dire que la 
 couleur vraiment la couleur de 
 l'écriture là on la veut en blanc 
 et enfin on va lui dire avec text 
 decoration 
 qu' on ne veut rien text decoration voit 
 ici le valeur qui peut prendre donc text 
 decoration c'est la propriété qui nous 
 permet par exemple de souligner notre 
 élément d' pour rajouter underline sur à 
 peu près tout ce qu'on veut et moi ici 
 du coup je vais lui mettre une bonne 
 pour lui dire que non je ne veux rien 
 parce que par défaut les liens sont 
 soulignés et je vais recharger la page 
 et est ici on voit quelque chose qui 
 ressemble vraiment de plus en plus un 
 bouton et la dernière chose qui nous 
 manque et bien c'est les petits coins 
 arrondis et pour ça aussi on a une 
 propriété qui est bord de radio 
 et qu'on peut définir par exemple en 
 pixels donc je vais mettre 20 pixels 
 recharger et là on voit bien qu'on a 
 quelque chose de nettement mieux on 
 pourrait encore augmenter un petit peu 
 notre padding on pourrait le passé par 
 exemple à 20 pixels 
 c'est peut-être un petit peu trop à 10 
 voilà et là on peut voir que c'est déjà 
 nettement mieux donc c'est pour la base 
 bien sûr mais ça commence déjà à bien 
 ressembler à ce qu'on veut et donc pour 
 le coup je vais simplement venir le 
 mettre dans un nouveau paragraphe 
 je recharge et là je vois bien que j'aie 
 le résultat escompté ok on continue donc 
 avec cette partie si ici on pourrait 
 mettre ça à chaque fois dans des petits 
 blocs qui se suivent bien voilà qui 
 présente bien et c'est ce qu'on va faire 
 maintenant du coup alors pour ça mais ça 
 va toujours être un peu la même logique 
 quand j'ai une section ici et pour 
 chaque section bien j'ai indique une 
 petite boîte qui me permet voilà deux 
 groupes et mon contenu avec à chaque 
 fois un h2 et un paragraphe est donc 
 allons-y pour le classe on va mettre 
 contenu voilà pour la classe 
 j'enregistre et je suis parti pour 
 styliser un peu ça 
 alors je vais juste un petit peu de 
 place pour que vous voyez vraiment bien 
 et du coup 
 je vais mettre point contenu et je vais 
 commencer à styliser alors ici je 
 pourrais mettre une image par exemple 
 pour servir de fonds ici alors pour ça 
 je vais aller par exemple 
 sur pick savez 
 je vais chercher une image abstraite 
 pourquoi pas quelque chose qui pourrait 
 donner 
 voilà on va prendre celle ci 
 et je vais enregistrer l'image dans le 
 même de ces bien sûr que mon site web je 
 l'avais nomme au passage vous l'appelez 
 font point jpeg et j'enregistre 
 alors quand je viens ici du coup 
 maintenant je peux lui dire que le 
 background 
 emails 
 et bien se situe à l'eurl font point 
 jpeg puisqu'il se trouve encore une fois 
 ici dans le même dossier alors c'est pas 
 spécialement une bonne idée tout mettre 
 dans le même dossier ici c'est vraiment 
 pour la démo mais à terme c'est plutôt 
 bien de l'organiser sous forme de sous 
 dossier et c'est donc du coup 
 je recharge 
 et je vois bien ici que le fonds a été 
 modifiée que j'ai bien cette image c est 
 donc j'ai l'image qui me sert de fond 
 pour mon bloc je vais maintenant stylisé 
 le reste donc jeu au final un contenu et 
 1h 2 dans contenu et un contenu toujours 
 et un paragraphe dans le contenu et bien 
 sûr si je veux utiliser les blocs je 
 peux aussi stylisé les divans contenu 
 divin 
 je vais commencer par utiliser les div 
 et ici ce que je pourrais mettre par 
 exemple c'est à fond de couleurs donc je 
 pourrais mettre un background color et 
 je pourrais mettre du bleu par exemple 
 je recharge et je vois ici qu'on est 
 passé en bleu alors c'est pas encore 
 génial je pourrais mettre nu yves de 
 80% 
 déjà mieux 
 je pourrais mettre aussi un aligne 
 center 
 et je pourrais mettre également 
 un bord de radius 
 de 30 pixels 
 s'est déjà mis 
 je pourrais aussi rajouter margin right 
 auto mavs du nect auto pour les avoir au 
 centre de mon affichage 
 alors ici c'est une petite précision 
 mais on commence souvent par la version 
 mobile du site c'est à dire qu'après 
 quand je vais l'agrandir par exemple là 
 c'est un petit peu trop grand à la voilà 
 ici ça pourrait se mettre côte à côte et 
 bien on verra ça plus tard dans cette 
 vidéo et c'est ce qu'on appelle 
 responsive web design ou webdesign 
 adaptatif en français je vais d'ailleurs 
 utilisé le même bleu que celui utilisé 
 plus haut 
 voilà on n'oublions pas le petit 
 croisions 
 c'est plus sympa et à l'intérieur deux 
 contenus bien je vais plutôt créer un 
 planning 
 tata de 30 pixels pareil 
 pour le sol pareil pour en dessous 
 ce qui me permet d'avoir ici encore un 
 meilleur affichage 
 je pourrais aussi rajouter un bord à ces 
 blocs et pour ça je vais utiliser la 
 propriété border et je voulais lui dire 
 que je veux un bord de trois pixels 
 solide et blanc 
 j'enregistre 
 et on voit déjà que ça donne assez bien 
 je peux aussi rajouter une petite marine 
 top pourrait se passer un petit peu ces 
 blocs là 
 enfin je passe la couleur en blanc 
 je recharge 
 et j'ai déjà une bonne base je pense que 
 voilà pour la démo c'est déjà pas mal 
 donc je vais pas spécialement utilisé au 
 final le h2 et le paragraphe que j'avais 
 créé à la base mais bon on aurait très 
 bien pu aller encore plus loin bien sûr 
 j'essaye de faire des choix de rester 
 compréhensible par rapport à la vidéo 
 pour vraiment expliquer le process en 
 son entier 
 enfin je voudrais maintenant m'occuper 
 d'inscrits vevo la newsletter ici 
 que je vais simplement aligné 
 et donc je vais aussi donner une classe 
 à la section 
 je l'appelais newsletters 
 je vais l'ajouter dans mon css 2.1 
 newsletter pour dire que c'est une 
 classe et je vais également la ligne 
 ainsi que mettre un petit peu ning top 
 de 30 pixels et un petit padding bottom 
 2,30 pixels 
 et la chaude donne plutôt bien reçue par 
 le site web du siècle mais c'est 
 vraiment déjà pour la démo de voir 
 comment vous pouvez mettre en forme 
 votre contenu avec le css 
 alors bien sûr maintenant et encore une 
 chose qu'on n'a pas ce que ça nous ont 
 mis en forme ici c'est le menu qui est 
 ici et maintenant intéressons nous au 
 menu un comme on l'a dit alors le menu 
 est bien pour l'instant on a une liste 
 et l'idée notre liste bien c'est de la 
 faire plutôt ressembler à un menu qui 
 est donc pour ça et bien pareil hein je 
 vais utiliser mon css et qu'est ce que 
 je veux venir modifier ici bien c'est 
 mon avis c'est mon ul et c'est moins 
 liessies mondiale alors pour ça eh bien 
 je vais continuer 
 et ici je vais lui dire que mon avis 
 et plus précisément mon modèle au niveau 
 de son liste style taille aps mais un 
 jeu lui dire 'non' je ne veux pas en 
 fait un style au niveau de ces au niveau 
 de cette puce qui sont là donc je 
 recharge et je vois qu'elle disparaisse 
 ça c'est déjà nettement mieux donc voilà 
 et maintenant qu'est ce que je vais bien 
 je veut modifier le ahly et pour ça donc 
 je vais reprendre nav elle y est je vais 
 venir aussi modifié je vais lui dire au 
 niveau du display que je veux en inline 
 alors qu'est ce que c'est que le display 
 in line et bien vous allez découvrir ici 
 quand je vais leur charge et hop vous 
 voyez qu'ils viennent maintenant à la 
 suite les uns des autres et ça c'est le 
 contraire exactement le contraire d'un 
 disent les blocs un disque les blogs 
 c'est quoi si je recharge saison mais 
 l'élément éléments au final va occuper 
 un blog et le deuxième bloc va se battre 
 en dessous etc etc le display and line 
 celle inverse hop on reste sur la même 
 ligne et donc voilà ici je recharge et 
 tous mes biens les uns à la suite des 
 autres je peux je peins ligne et 
 à droite 
 voilà 
 où au centre ça donnera peut-être mieux 
 on est bon 
 et je m'occupe ensuite des liens 
 présents dans la balise nav 
 donc 
 je vais pas mettre de text decoration je 
 vais enlever le soulignement je vais 
 venir mettre une fonsai un peu plus 
 élevé 1.5 em par exemple 
 et je peux aussi l'utiliser fond de 
 variantes ça pour modifier l'affichage 
 par exemple small caps va me permettre 
 de le passer en petit majuscule 
 c'est déjà nettement mieux ensuite pour 
 la couleur je vais mettre du gris on est 
 bon pour notre petit mieux alors c'est 
 vraiment une approche très très très 
 très basique du menu évidemment parce 
 que ce petit menu si j'avais voilà trois 
 à quatre pages il serait vite beaucoup 
 trop petit pour afficher sur une version 
 mobile donc généralement ce qu'on fait 
 c'est qu'on est un petit bouton qu'on 
 clique et quand on clique on déroule 
 voilà par exemple un menu spécifique 
 pour inverser mobile dans cette vidéo on 
 va pas le faire parce que j'ai vraiment 
 envie de centrer la vidéo un maximum 
 pour voile en une bonne heure on puisse 
 découvrir un petit peu tout ça mais 
 n'empêche que on pourrait partir là 
 dessus évidemment sur la version 
 ordinateur etc là ça poserait moins de 
 problèmes on peut aussi mettre une 
 petite marge 
 pour séparer un peu mieux les éléments 
 dans le menu enfin il existe aussi des 
 petits modificateurs qui sont par 
 exemple ouvert si on rajoute deux points 
 heures au dessus par exemple d'une 
 balise les uns ça marche à peu près sur 
 tout et bien ça va me permettre 
 d'appliquer un style à ce moment précis 
 et donc c'est j'utilise à ouvrir ici je 
 peux lui dire que quand on passe dessus 
 on revient en couleur black voilà par 
 exemple et on revient aussi par exemple 
 à une text decoration 
 souligné 
 je recharge 
 et on voit que ça fonctionne bien ok 
 alors pour l'instant votre design il 
 commence à être un petit peu aboutis 
 mais comme vous le savez bien maintenant 
 un site web on va l'utiliser autant sur 
 smartphones que sur tablette que sur 
 ordinateur et pour ça du coup il est 
 nécessaire que le style s'adapte en 
 fonction de la taille d'écran sur 
 laquelle vous vous trouvez et bien ça 
 c'est ce qu'on appelle le responsive 
 webdesign et il ya plusieurs techniques 
 plusieurs façons de mettre en place on 
 va en voir deux ensemble la première qui 
 est vraiment quelque chose de base qui 
 sont les médias qui reese et après je 
 vous parlerai un petit peu d'effets l'ex 
 boxe ok donc notre site si c'est une 
 version mobile ce serait déjà pas si mal 
 en soi pour si on est vraiment loin 
 d'avoir fait le tour mais par contre si 
 on augmente la taille d'envoi que sur 
 écran d'ordinateur bah ça donnerait pas 
 aussi bien même loin de là hein parce 
 que ben voilà le logo ici par exemple 
 beaucoup trop grand et ses blocs là 
 aussi on les verrait plus côte-à-côte 
 par exemple et donc ça c'est ce qu'on va 
 appeler le reste on site web design 
 c'est à dire le design web adaptatif et 
 je voulais vous en parlez aussi pour 
 bien clôturer un petit peu ce petit tour 
 d'horizon 
 et donc il ya plusieurs moyens plusieurs 
 façons de faire ça et c'est plusieurs 
 techno qui peuvent s'imbriquer et lune 
 que vous retrouverez très souvent et 
 bien ce sont les media queries les media 
 queries qu'est ce que c'est exactement 
 bien ça va permettre de reprendre la 
 taille de votre surface d'affichage donc 
 ici on sera sur un écran de bureau donc 
 il sera beaucoup plus grand et de 
 modifier votre style on fonctions c'est 
 à dire qu'ici si je viens sur mon index 
 point html eh bien on va commencer 
 d'abord par ajouter une balise dans le 
 ed pour définir le niveau de zoom par 
 défaut est utilisée ensuite à dans nos 
 médias crise donc on va rajouter une 
 balise meta on va lui dire que le nom et 
 bien c'est viewport ça et que le contenu 
 est bien c'est quoi ces 
 vives 
 qui sera équivalent à 
 la largeur de l'écran 
 et que initials qu'il 
 est égal à 
 voilà 
 je note ça et ensuite quand c'est fait 
 et bien je vais utiliser mes médias que 
 oui et comment ça s'utilise ou juste une 
 médiatrice et bien au final c'est 
 vraiment pas si compliqué que ça ce que 
 je vais faire je vais revenir dans ses 
 assassins voilà un petit peu plus loin 
 encore ajouté un petit peu de place pour 
 bien écrire et ici je vais lui dire at 
 médias 
 voilà on faire une petite démo pour que 
 vous compreniez bien et je vais dire que 
 le média que je veux viser bien c'est 
 l'écran parce que on peut aussi utiliser 
 des médias crise etc ou du css sur pour 
 faire de la mise en page papier par 
 exemple qu'on vous créer une impression 
 et donc du coup ce média screen et bien 
 qu'est ce que je vais faire je vais dire 
 que la taille minimum donc entre 
 parenthèse ici elle est minimum weave 
 voilà ici 
 doit être 2 
 768 pixels qui est un ce qu'on appelle 
 un break paint c'est-à-dire un point de 
 rupture et 768 pixels une fois qu'on 
 dépasse a généralement on est sur 
 tablette ou sur écran d'ordinateur en 
 dessous on est plus souvent sur un écran 
 de smartphone et bien du coup à ce 
 niveau si on va faire une petite rupture 
 et modifier le style est donc pour ça je 
 vais simplement ouvrir encore une fois 
 les accolades et entre et bien je peux 
 rajouter du css qui s'appliquera dès que 
 la taille de l'écran dépasse 
 768 pixels et donc du coup par exemple 
 ici je pourrais lui dire par exemple 
 alors fait une petite démo main que la 
 navigation display note que je n'affiche 
 pas en fait la navigation 
 je recharge et je vois effectivement ici 
 que quand je passe sur un écran plus 
 grand la navigation a disparu je pense 
 que vous le voyez bien ici donc du coup 
 ici je vais l'enlever parce que ce qu'on 
 a fait là n'a pas vraiment beaucoup de 
 sens dans la pratique mais vous 
 commencez du coup à comprendre comment 
 on pourrait afficher ou cacher un menu 
 mobile et un menu des stops par exemple 
 1 c'est sur le même principe là c'était 
 vraiment pour la démo mais nous ce qu'on 
 veut c'est pas ça donc je recharge c'est 
 que cette image là quand on passe 
 voilà ici sur un écran plus grand et 
 bien qu'elle s'affiche en plus petit par 
 exemple et pour ça bien qu'est ce que je 
 vais faire à tout simplement eh bien je 
 vais reprendre la classe sur laquelle on 
 a greffé notre logo donc il si je les 
 appelais logo principal je vais 
 reprendre cette classe point nouveau 
 principal 
 et 
 je vais simplement récré du css comme 
 normalement et donc ici je vais lui dire 
 que sa largeur ça doit être de 30 % 
 j'enregistre je recharge et je vois ici 
 que quand je suis 
 sur un grand affichage bien au maximum 
 mon logo va prendre 30% de la fenêtre ce 
 qui me permet d'avoir quelque chose de 
 beaucoup plus peur de beaucoup plus 
 présentable sur grand écran donc ici si 
 je diminue hop là vous voyez on est 
 revenue à la taille mobile donc un 
 principe à comprendre avec ça et bien 
 ainsi que du coup en fonction de la 
 taille de notre affichage et bien on 
 peut faire varier le css du coup vous 
 commencez à comprendre comment 
 fonctionne le design adaptatif et la 
 deuxième est bien c'est qu'au final on 
 va développer un même site pour portable 
 et pour 
 grand écran on va dire ça comme ça mais 
 qu' on va appliquer du coût des 
 variations en fonction et donc souvent 
 le conseil qu'on donne c'est ce qu'on 
 appelle le mobileye first c'est de 
 commencer ici par la version mobile de 
 votre site web et ensuite de commencer à 
 l'adapter en grand écran parce qu'il 
 faut bien commencer quelque part et donc 
 plutôt fonctionné dans ce sens là il ya 
 une tonne de raisons là dessous mais en 
 tout cas c'est vraiment ce qu'il faut 
 comprendre de la même façon pourrait 
 modifier html et css qui sont ici 
 évidemment et donc pour ça dans la même 
 optique je vais reprendre le même 
 breakpoint donc je vais continuer à la 
 suite et je vais lui dire voilà on va 
 reprendre un petit peu ces éléments là 
 qui étaient du coup contenu est contenue 
 div et je vais les remodifier donc voilà 
 je vais revenir ici avec point contenu 
 on verra ce qu'on mettra dedans et point 
 contenu div 
 là aussi on verra ce qu on m a dedans et 
 du coup je vais commencer mon adaptation 
 et cette modification que nous allons 
 faire bien justement elle va me 
 permettre d'introduire encore quelque 
 chose d'important que sont les flex box 
 les flex boxe c'est quoi et bien c'est 
 une autre façon de gérer le display qui 
 se prête plutôt bien au design adaptatif 
 et qui est apparue voilà du site 2011 
 2012 et les années suivantes et qui 
 permet justement de bien mettre en forme 
 ce genre d'éléments donc du co pour ça 
 je vais aller dans le contenu et je vais 
 lui dire donc mon contenu c'est vraiment 
 le bloc ici qui contient mais de boîte 
 mais de dives et je vais changer son 
 display alors si on avait déjà vu ni 
 line et bloque ici on va utiliser flex 
 display flex me permet du coup de créer 
 un espace qui se pourra s'agencer 
 facilement en adaptatif on va expliquer 
 ça comme ça vous allez comprendre je 
 fais à rechargement et je vois du coup 
 que les boîtes sont venus se mettre à la 
 suite si j'en avais créer une troisième 
 voie là je vais venir sur l'île d'aix 
 pointe t n l et je vais venir on créer 
 une troisième voie là ici ça me créerait 
 en somme une troisième colonne 
 voilà vous voyez bien ici comment les 
 choses se mettent en place 
 donc moi je vais annuler ça mais je vais 
 garder du coup mais deux éléments 
 maintenant ces deux éléments et ces deux 
 éléments qu'est-ce que j'ai besoin de 
 faire maintenant et bien j'ai besoin de 
 diminuer un petit peu leur taille déjà 
 beaucoup trop grand ici donc je vais 
 venir encore une fois dans le style et 
 je veux dire que pour les div voilà la 
 rive et bien qu'on avait fixé à 81% ou 
 quelque chose comme ça ici en eau voilà 
 80% je vais la redéfinir ici à 35% alors 
 ce qui me fait penser justement que ces 
 tirs bien l'origine du nom du css les 
 css en français feuilles de style en 
 cascade signifie que la dernière 
 modification sera celle qui va faire 
 fois on va dire au niveau de l'ordre de 
 votre motif donc par exemple ici si je 
 rajoute et oui végal 45 juste en dessous 
 et bien c'est le 45 qui seraient pris 
 qu'apporte ici je enregistre et je 
 recherche et là on voit bien que ça se 
 met comme on le voulait et que ça 
 fonctionne très bien par contre j'ai pas 
 utiliser tout le potentiel de flex boxe 
 ici j'ai utilisé des mages automatique 
 il s'est au niveau 
 de mes divas et donc du coup si j'enlève 
 ses marges automatique qui sont ici 
 voilà je recharge là ça vient se 
 recoller normalement et bien flex box 
 nous permet de gérer ça également c'est 
 à dire que si je viens maintenant sur 
 mon contenu voilà donc qui en finale le 
 conteneur le bloc qui contient mais 
 boîte flexible et bien je peux lui dire 
 voilà que je veut modifier le contenu la 
 façon en fait dont elles s'alignent et 
 je peux lui dié voilà que je veux de 
 l'espace autour services et du coup je 
 recharge et là ça se met correctement 
 donc ça montre un peu la puissance de 
 flex boxe c'est à dire que quand vous 
 mettez pour un conteneur voilà ici on a 
 mis cette partie contenu voilà en tant 
 qu' on dire ça souvent vous retrouverez 
 le mot containers pour la classe et bien 
 à l'intérieur toutes les div vous leur 
 dites maintenant de se disposer d'une 
 certaine façon et c'est ça que flex doc 
 sa porte donc c'est quelque chose 
 d'important vraiment moyen de creuser 
 tous a énormément à flex boxe je pense 
 que je pourrais faire une très grande 
 vidéo dessus mais en tout cas 
 vous en comprenait le principe est là on 
 a vu quand même deux éléments très 
 importants tout cas on les a survolé 
 mais vous savez maintenant ce que c'est 
 mais attention du coup en faisant comme 
 ça et bien comme on a enlevé les marges 
 automatique eh bien vous voyez que quand 
 on revient sur une taille plus petite 
 et bien du coup là on a plus ça qui est 
 centrée donc y aurait plusieurs façons 
 de le faire la première se serait 
 modifié un peu l'ensemble pour tout 
 faire tourner sur facebook ça serait 
 vraiment possible ça serait honnêtement 
 la meilleure solution mais on va dire 
 que vraiment pour la démo est pour vous 
 montrer aussi vraiment le principe des 
 médias crise on pourrait utiliser ici 
 une deuxième média qui risque pour 
 rajouter les marges dès qu'on est sur un 
 écran plus petit que 
 768 pixels et donc ça fonctionnerait un 
 petit peu de la même façon je ferais je 
 ferai un autre média tu dirais que c'est 
 un média écrans 
 et je lui dirai du coup que voilà pour 
 la taille maximum and max bill 
 qui serait du coup de 767 pixels 
 voilà et bien ce que je lui dirai c'est 
 que pour 
 le contenu ici et pour les div du 
 contenu et bien du coup pour les martin 
 on repasse en moto voilà ça pourrait 
 aussi très bien ces crises comme ça pour 
 ce cas là je recharge et là on voit du 
 coup que ça fonctionnaires tu pourrais 
 encore juste rajouté une petite marge 
 et 6 2 5 pixels pour assurer une petite 
 différence est comme ça on voit que 
 quand on est sur un petit écran bien on 
 est sur ce système là et que quand on 
 part sur un grand écran on est dans ce 
 système là encore une fois on aurait 
 vraiment pu tout faire ici avec flex box 
 plutôt qu'avec les mardis une auto etc 
 mais c'est pour vraiment vous montre un 
 petit peu toutes les possibilités dites 
 vous que le css html il a progressé là 
 évoluent sur des années entières de 10 
 zen d'année et que donc vous retrouverez 
 pas mal de façon de coder c'est pour ça 
 que je voulais vraiment vous présenter 
 ici un petit peu ce que vous retrouverez 
 y est je veux dire de base dans la 
 pratique 
 pour flex box vous avez vraiment voilà 
 ici par exemple sur le site cs strict ce 
 point comme une idée de toutes les 
 possibilités ici que vous pouvez avoir 
 avec cette méthode là c'est à dire qu'il 
 ya vraiment énormément de choses que 
 vous pouvez faire avec 
 ok donc voilà pour cette démonstration 
 de base alors si vous souhaitez mettre 
 votre site en ligne je vais vous mettre 
 un petit lien sur mon tutoriel sur 
 l'hébergement d'un site web il vous 
 suffira de suivre pour bien être votre 
 site en ligne et pour la suite et bien 
 découvrons une petite sélection de 
 ressources sur lesquelles vous pourrez 
 continuer à progresser alors si vous 
 souhaitez continuer bien dans les 
 chaînes youtube française qu'est ce que 
 vous pourrez trouver bien vous pourrez 
 retrouver graphique à quai une référence 
 absolue dans le domaine clos depuis des 
 années et qui fait vraiment de chouettes 
 vidéo vous pouvez aussi retrouver from 
 scratch qui est à serris mans aussi un 
 peu comme moi mais qui présente plein 
 plein plein de vidéos intéressantes sur 
 pas mal de sujets en développement web 
 vous retrouvez aussi benjamin code qui 
 vous présente des vidéos voilà aussi 
 thématique sur le sujet est aussi voilà 
 beaucoup de vidéos intéressantes dans la 
 thématique vous retrouvez aussi grave n 
 qui est aussi à mon avis plus à 
 présenter et qui vous propose plein de 
 choses intéressantes dans le domaine est 
 forcément un petit peu d'auto promotion 
 vous retrouvez aussi ma chaîne qui 
 aborde pas mal de sujets sur le 
 développement web et je vous recommande 
 particulièrement la vidéo de 75 techno l 
 expliquer simplement si vous voulez vous 
 y retrouvez aussi un petit peu dans le 
 sujet dans si vous voulez vous y 
 retrouver dans le vaste monde qu'est le 
 développement web et toutes ces 
 technologies s'appelle pas les 
 techniques vous allez utiliser tout de 
 suite tout de suite mais ça peut vous 
 aider a déjà vingt un très bon aperçu 
 ensuite dans les sites pour avoir des 
 formations peut-être plus en détail plus 
 suivis et c est bien vous retrouver hugh 
 des mises sur lequel vous et toujours 
 énormément de formation intéressante 
 vous avez open classroom et vous 
 retrouvez aussi fricote kent qui est 
 gratuit mais qui est en anglais mais qui 
 aborde énormément de sujets et qui est 
 vraiment une des très grosses références 
 pour apprendre le développement et donc 
 voilà pour ce que j'avais à vous dire 
 aujourd'hui alors n'oubliez pas on est 
 vraiment ici au tout début d'un chemin 
 le développement web est un monde 
 vraiment très riche avec vraiment plein 
 de choses à voir enfin sur html css et 
 que c'est à d'ailleurs maintenant que 
 cette vidéo est sortie fait moi ça va 
 dans les commentaires c'est une vidéo 
 avec un design plus avancée que ses 
 draps vous intéresse ici j'ai vraiment 
 et ça c'est important le comprendre j'ai 
 vraiment fait en sorte de garder les 
 choses simples au maximum et j'ai aussi 
 fait évoluer le site etc de façon à 
 faire venir petit à petit tout plein de 
 notions donc voilà effectivement ce que 
 j'avais à vous dire aujourd'hui sur le 
 sujet gars vraiment bien en tête que 
 c'est bien sûr une vidéo d'initié 
 n'oubliez pas que vous pouvez avoir 7 % 
 de réduction sur votre hébergement aux 
 stinger avec le code bertrand encore 
 merci à eux d'ailleurs de m'avoir aidé à 
 vous aider et surtout et bien si vous 
 aimez mon contenu n'hésitez pas à vous 
 abonner à activer les notifications avec 
 la petite cloche pour ne pas manquer 
 mais prochaine vidéo je vous propose 
 vraiment à chaque fois des vidéos qui 
 vous permettent d'en apprendre plus sur 
 l'informatique en général sur le 
 développement etc et de récupérer la 
 puissance sur le numérique et moi 
 j'espère avoir si vous aidez on se 
 retrouve vraiment très bientôt et d'ici 
 là portez vous bien 
