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