Créer un site de A à Z - HTML5, CSS3 & Bootstrap - TP [FR]
HTML-код
- Опубликовано: 7 фев 2025
- NOUVEAU : • Créer un site de A à Z... Créer un site de A à Z Version 2 !
J'utilise cette playlist pour travailler et me concentrer :
• Video
Voilà le TP qui utilise toutes les compétences vues auparavant dans les cours HTML, CSS et Bootstrap. Le meilleur moyen d'apprendre est de pratiquer, c'est pourquoi je vous propose d'apprendre à créer un site OnePage facilement en utilisant Bootstrap et son système de grille.
N'hésitez pas à vous abonner à ma chaîne et à laisser des commentaires pour d'éventuelles questions et/ou recommendations.
La playlist HTML/CSS :
• APPRENDRE LE HTML/CSS
La playlist Javascript :
• APPRENDRE LE JAVASCRIPT
![Bulma - Une alternative solide à Bootstrap - CSS [FR]](http://i.ytimg.com/vi/TSK5jXA4qbY/mqdefault.jpg)
![Bulma - Une alternative solide à Bootstrap - CSS [FR]](/img/tr.png)
![Tutoriel Bootstrap - Apprendre et comprendre Bootstrap rapidement - [FR]](/img/1.gif)
Bonjour à tous ! Je viens de mettre en ligne la nouvelle version de "Créer un site de A à Z" ici : ruclips.net/video/MzAeV2BdzRg/видео.html ! Vous étiez nombreux à me parler des problèmes de décalage dans cette vidéo, alors j'ai souhaité rectifié le tir ! Bon visionnage !
Bonjour monsieur ! Vraiment , merci pour la vidéo. 🙏
Maintenant, mon problème est au niveau des décalages, décalage du séparateur , ça ne marche pas. Et de plus , le paragraphe "Hobbies" n'est pas venu au Centre, ça s'est décalé et est parti en bas , à gauche . Je vous en prie de m'aider, j'ai fait exactement ce que vous avez fait.
Je cherchais aléatoirement sur youtube au sujet du Bootstrap et suis venu sur votre tuto, j'ai tout de suite accroché, vraiment très clair et informatif le pas à pas, merci beaucoup !
Je débute dans le domaine de dév web, je comprends votre travail comme ci j'étais expérimenté, vous êtes un bon pédagogue, votre travail est de qualité et compréhensif. Franchement je tiens à vous rémercier pour ce grand travail.Merci
Nitovko Meus hello ! Merci à toi, n'hésite pas à me dire si un sujet t'intéresse ! :)
pouvez vous m'aider à faire la différence entre la balise div et la balise section svp?
Nitovko Meus La balise section est identique à la balise div, cependant elle permet de mieux comprendre l'organisation d'un site pour le développeur et elle est préférée pour le SEO (le référencement naturel d'un site sur les moteurs de recherche)
Mec je te découvre qu’aujourd’hui, t’es juste incroyable 😮 grâce à tes vidéos j’ai compris des heures et des heures de cours incompris jusqu’alors…tu ne fais plus de contenus ? T’es trop fort en tout K
6 ans après, et toujours d'une grande aide !!
Super vidéo, merci pour cette grande aide !!!
/!\
Pour ceux qui ont un problème pour leur image de bannière, voici officiellement comment la mettre en responsive d'après la doc de bootstrap :
Vous lui attribuez la class .img-fluid, puis en CSS les propriétés max-width: 100%; et height: auto;
/!\
Ce matin encore, je ne comprenais rien à bootstrap, depuis vos 2 vidéos, j'ai tout compris, merci bcp :-)
vraiment j'ai pas l'habitude de commenté le video ou aimer sur youtube mais vous meritez ça cette fois je bien compris les bases de bootstrap grace a vous un grand merci pour moi cette video est parfaite je pas rencontré le probleme de decalage courage
merci beaucoup car ton tuto a sauvé des vies ! un merci qui date de il ya 1an
Même avec le décalage à partir d'un moment, cette vidéo est géniale. Merci !!!
MERCI ! cela m'a appris beaucoup de nouvelle chose et donner des réponses à des problèmes que je n'ais pas vue dans mes cours , très très bon tuto surtout pour résoudre beaucoup de choses
vraiment le contenus du code est bien structuré ,une question d’organisation de travail ,un grand merci maître ;)
Tres bonne video, sa fait longtemps que j'ai pas vu un travail de qualité, bien fait et continue comme ca
Bang Dang hello ! Merci à toi, si tu aimerais voir un autre sujet, hésite pas à le dire !
faire un site de e-commerce
DÉBUTEZ EN DÉVELOPPEMENT WEB ET DEVENEZ UN(E) PRO ! Envie de devenir Intégrateur web ? De créer des sites web en toute autonomie sans trop savoir par où commencer ? Dans cette formation, vous allez apprendre les notions fondamentales du Web et des langages HTML et CSS. Visitez ce lien: go.aksilfii.nkedi.7.1tpe.net/
vraiment merci j'ai appri le bootstrap tres rapidement grace à toi!!!Merci beaucoup
Jonathan Donineaux merci à toi ! Je suis heureux de pouvoir aider :)
Merci pour le auto, si je pouvais mettre 1000000 j'aime je l'aurais fait 😂. En un seul auto tu m'a appris tous ce que j'ai mis des mois à apprendre et appris des nouvelles choses. je t'encourage à faire d'autre tuto. Merci
Vraiment super, je suis débutant et je vient de refaire la meme chose en regardant ce tutoriel ;)
Très bon travail, c'est clair, tu expliques bien,j'en ai regardé plusieurs, et c'est la mieux faite, j'ai tout suivi, merci!
Très bon tutoriel pour se familiariser un peu avec Bootstrap !
Mercii beaucoup pour vos efforts, votre explication est simple et excellente
j'ai befinicier de ce tuto qu'il ne depasse pas une heure.
Merciii beaucoup
j'ai aimé le tutoriel vraiment bien expliqué, bien détaillé et tres limpide pour la bonne comprehension et surtotu tres interactif
Merci beaucoup pour cette vidéo, vraiment j'ai appris pas mal de choses pour créer mon site. Très bon travail, et on aimerait bien voir plus de vidéos sur différents langages, je vais tous les voir sans doute. Merci encore une fois. (y)
yahya immourigue merci à toi !hesite pas à mettre le lien vers ton site que je puisse regarder ce que ça donne :)
je l'ai pas encore créer, je suis en train d'apprendre. En fait j'ai pas mal d'idée, je suis perdu hhhh.
Waaaaip merci à vous vous venez de sauver une vie , bonne continuation
Superbe vidéo, très bien expliqué et parfaite pour comprendre le bootstrap !
Mille fois merci !!! Vraiment tu es excellent bonne continuation
Un magnifique tutoriel ça me plaît vraiment ,merci bien
Merci man, très très bon tuto. lache pas mec.
vraiment merci beaucoup j'ai tellement apprit
Merci beaucoup pour cette video cela ma inspiré pour mon futur projet , rien a dire mis a part que j'aurai aimer savoir comment mettre en place des photos dans la galeries ce qui est un peu compliqué pour moi .
Continue comme ça !
Je n'ai pas compris ce que tu voulais dire par "mettre en place des photos dans la galerie" ? Si tu veux dire, mettre des photos, tu as juste à te faire un dossier "img" dans ton projet, et ensuite tu les importe avec la balise et le tour sera joué :) Merci pour ton commentaire !
J'aurais aimer faire une galerie de photos et les importer sur le site c'est tout mais avec une façon assez stylé, et mon jquery ne marche pas 🙁, tu a une adresse ou quelque chose pour que l'on puisse parler ?
bonjour votre TUTO est très instructif et je vous en remercie. Je vais le mettre en pratique et vous l'envoyer pour une éventuelle correction si vous le permettez.... Merci et bonne journée
ah waiiiii tout devient subitement clair , beau travail, like like
Bonjour, je débute, j'ai suivis ce tuto jusqu'a environ 36m39 et j'ai du trouver une solution parce que mes articles de section de ma partie portfolio se mettaient les unes en dessous des autres.
j'ai donc créé une comme dans la section 'about' afin de régler ce problème.
Mais je ne comprend pas pourquoi sur le votre il n'y en a pas et pourtant tout est fonctionnel, j'avais pourtant vérifié tout une bonne dizaine de fois mais j'ai du trouver une alternative mais je ne sais pas si j'ai bien fait ou si j'ai manqué une erreur mêmé après toutes mes vérifications.
Très bon tuto au passage.
Je testerais le bulma dans quelque jours.
Merci !!
Merci pour votre pédagogie ! Belle semaine !
Super tuto ! Merci ! un code très propre et très professionnel !
Superbe tuto clair et concret
Je te remercie beaucoup, ça m'a beaucoup aidé, bonne continuation.
bonjour!en tout c'est la vidéo la plus explicite en matière de web mastering et web design que j'ai vue!!!maintenant comment intégrer le site après conception???
Merci pour ton aide !
merci pour ce magnifique explication sur bootstrap sur d'être bref mais j'ai une question pour vous, comment faire une menubar responsive comme celui d'amazone? pour plus de détails le menubar d'amazone est glissante en responsive sans burger. merci
C'est parfait, merci.
Bonjour, super tuto vraiement bien expliqué
Je n’arrive juste pas à enregistrer pour actualiser mon site comment faire ?
Merci pour ta belle vidéo très bien expliquée
Super tuto je te remercie !
Bien que décalage audio sur la fin mais bon je connais bien ce genre de problème aha
merci pour ce tuto c'es vraiment cool
Bonjour,
Bien pour ta vidéo. Il y avait un bon moment que je n'avais pas fait du html css, il a fallu que je mis remette.
Merci
Grand merci pour le tuto
t'es le meilleur réponds
Mon clic te fait passer a 1k ;) PS super tes tutos !
Merci pour la vdo, de bonnes explications, très claires. Fond en noir, même en plein écran, je ne vois pas toutes les manipulations ... je ne suis pas allée jusqu'au bout ... mais en tout cas, bravo.
Bonjour, que de plaisir que de tomber sur un tuto aussi complet sur Bootstap. Seul bemol pour moi, je ne parviens pas à charger ma page sur le web. Malgré tous les package installé, je reste en preview, que faire ?
Merci pour ce tuto,
Par contre le html du formulaire que vous avez importé était du boostrap 2 ce qui explique la présence des class span 6. Il a fallu les remplacer par col-md-xx.
super tuto merci a toi :)
Bonjour, vous avez utilisé la class header au début de votre css alors que c'est une balise pourquoi cela fonctionne t il ? Merci d'avance !
Bonjour, merci beaucoup pour ce tuto et les autres, ils sont toujours très clairs et faciles à suivre, juste un problème, lorsque je passe en petit écran, mon texte h1 sors de ma bannière, comment faire pour le garder dans la bannière svp ? D'avance merci pour votre aide.
j'ai du ajouté un row entre le h2 a propos et le separateur puis à nouveau un row entre le separateur et les articles sinon tout était collé, c'est normal ? et je n'arrive pas à mettre le about au centre
bonjour! merci pour le tuto mais j'ai un probleme avec la section de mon portfolio, elle s'affiche horizontalement
Bonsoir Je voudrais me lancer pour créer mon propre site de vidéo conférence est-ce que c’est possible d’avoir de l’aide je suis débutant
Bonjour, je comprend pas j'ai un bug avec le container-fluid, il y a une petite marge alors que normalement non ?
merci pour ce tuto . J ai une question si je mettais des images a la place des textes dans la partie portfolio je fais comment j en ai mis mis , mais toutes mes images sont écrasées merci de me répondre
bonjour j'ai une question comment faire pour positionner les images qu'on va mettre dns le
Et comment vous allez faire pour le mettre en ligne et que de visiteurs puissent visiter
Bonjour, je suis a 21 minutes de votre vidéo et je suis bloqué, j'ai mis exactement comme vous mais il n'y a pas la bannière bleus, faut il installer quelque chose en plus pour que sa le mette? merci
super oulalala quelle précision stp j'aurait de plus de projet
bonjour, je vous remercie pour le tuto cela dit je n'ai pas obtenu le même résultat que vous,j'ai dû faire quelques erreurs; serait-il possible d'obtenir une copie de celui ? merci par avance
Hey, j'ai un problème avec le 'portfolio", en effet dans ton tutoriel, les block s'aligne horizontalement a la suite sauf que moi ils s'aligne verticalement. Comment faire ? Très bon Tutoriel !!!!...
même problème, tu as trouvé une solution ?
Salut, il y avait la réponse plus bas, enfait c'est juste la version 4 qui a ce bug, si tu dl la version 3.3.7 cela sera corrigé
On peut contourner ça avec une class row comme por "a propos" il me semble (pour la version >4 de bootstrap)
@@bilelm5940 J'ai téléchargé les deux version mais aucune ne fonctionne :/
Merci pour ce tuto !
Bonjour, j'ai une petite question. Je souhaite découper mon écran en 5 colonnes de tailles égales. Comment faire sachant que le système de grille de Bootstrap ne peut pas faire des colonnes de taille 12/5 = 2,4. Merci de m'éclairer!
Bonjour, déjà je voulais vous remercier pour ce travail très professionnel. J'avais une petite question concernant à des sites web ayant des pages. Qu'est-ce que ça veut dire un site web en 4 pages ?
Je vous remercie de votre attention.
Dylan Scott cela veut dire que vous avait plusieurs fichier html dans votre dossier du genre index.html, page1.html etc... et vous faites des liens vers ces pages
Code & Design merci ! Au final j'ai répondu à ma question juste après avoir posté mon commentaire... Mais merci !
PS: j'ai apprécié votre contenu donc un abri en plus ^^
Bonjour,
@Code & Design
J'ai suivi le tuto mais j'ai rencontré quelques problèmes : en effet mon formulaire ainsi que le portfolio ne se "stylisent" pas correctement. J'ai comparé le code de la video et le mien pendant plus d'une journée sans trouvé le problème. Est t il possible d'avoir le code source de cette video ?
Au passage merci pour ce tuto, il est vraiment bien et fait progresser rapidement ! :)
Super tuto comme d'hab. Juste petit problème de décalage du son c'est dommage.
et j'ai une question : Pour que les hauteurs reste responsives ne vaut il pas mieux utiliser les unités de mesure "vh" plutôt que "%" ?? Merci par avance
Hey, bonne vidéo. Je me remets dans la prog web doucement, dans ton tuto la partie "Contactez-moi" avec le form est centré, Comment as-tu fais ? j'ai aux caractères près la même chose et mon form est bien décalé vers la gauche as-u une idée ?
Encore une fois super vidéo.
Merci beaucoup pour ce tuto clair ;)
Bonjour, une question, je n'arrive pas a mettre les textes côte à côte, pouvez vous m'expliquer ?
Salut, comment tu fais pour que les messages envoyés dans contact soient envoyé sur une boîte mail ?
Merci à toi pour ce tuto ! vraiment clair et pédagogique !
J'ai installé Atom ... tu comptes faire une vidéo dessus bientôt ? :)
au top en tout cas ! ça m'aide bien pour mon projet web !
Merci pour le retour je suis content d'avoir aidé ! Je ferais bientôt une vidéo sur atom et mes outils de travail !
avec plaisir !
je me suis abonnée à ta chaine, je vais pouvoir suivre tes autres tuto ! merci encore
Comme je suis en plein apprentissage, j'ai fail quelque part dans mon code et ça ne donne pas le même résultat que chez toi. Tout ça pour dire que si tu avais vis ton code source à dl dans la description ça m'aurait beaucoup aidé, là j'ai lâché l'affaire, je n'arrive pas à voir d'où vient l'erreur...
(travail de qualité bonne continuation (y
bonjour à tous trés bon tuto merci bq j'ai un petit problème avec portfolio les des marges entre les item-folio donc le quatrième descend a la ligne et voilà merci
Bonjour, je vous remercie pour le tuto qui est super bien expliqué.
Cependant, j'ai une demande. Pourriez-vous faire une autre vidéo pour la suite de ce tuto ? Je m'explique : Supposons qu'avec ce petit squelette de site qu'on a fait grâce à votre tuto, nous voulions partir sur un theme Bootswatch (ex : Flaty) et ensuite rajouter des effets avec JS et JQuery. Nous expliquer correctement le fonctionnement d'un theme Bootswatch. Il n'y a aucun tuto bien à ce sujet ! Merci d'avance
Hello et merci pour ton commentaire qui me fait plaisir ! Je n'ai pas pour habitude d'utiliser des thèmes et / ou templates déjà tout fait, cependant je trouve l'idée d'animer une page web intéressante pour une prochaine vidéo ! la prochaine vidéo concernera Git (pour travailler en collaboration et partager du code facilement), puis ensuite j'aborderais surement Ruby / Ruby on Rails, puis la création d'une application web avec Node.js / Express !
merci pour la réponse express ! ;-) Pas de soucis je comprends, j'ai juste du mal à relier bootswatch au site fait dans ton tuto (bootswatch.com/flatly/) et comment appeler les class ! Super je serais attentif pour ton tuto sur l'animation js d'un site en HTML / CSS et aussi node.js ;-)
Pour ton thème, je pense que tu as juste a télécharger leur .min.css, et tu l'importe après bootstrap dans ton document HTML, et ensuite tu auras plus qu'à l'utiliser en utilisant les class de bootstrap (je n'ai pas essayé mais ça doit être un truc dans le genre)
Merci beaucoup, en tout cas bons tutos ;-) JE RECOMMANDE
salut je n'ai pas le bootstrap.min.css dans le fichier, j'ai que le .css.map
Merci pour conseils et astuces :)
Bonjour, merci pour ce bon tuto. moi j'ai un soucis au niveau de A PROPOS et du PORTFOLIO les éléments sont décales, comment faire pour les remettre a l'endroit svp?
j'ai exactement le même soucis
Très bonne video :-) Par contre, j'ai rencontré un petit problème concernant le vers 31:50. Je n'ai pas de retour à la ligne ce qui fait que j'ai 4 blocs les uns à côté des autres... Je sais pas trop si j'ai oublié qqch, certainement mais je trouve pas où...
UPDATE : ca provient de la version de Bootstrap. Fonctionne avec bootstrap 3.x mais pas avec Bootstrap 4.x.
J'ai eu le même souci mais en plaçant les balises et entre le et le ça a mieux marché. En effet, les éléments HTML ont pris la largeur de la page et ont pu se centrer facilement avec la propriété "text-center".
Bonjour svp comment vous affichez la barre d'accès rapide qui vous permet de changer d'applicationS?
Sabrina Yebda il te suffit de maintenant la touche cmd de mac et d'appuyer sur tabulation pour passer d'app en app
merciii énormément
Bonjour, je suis en train de suivre le tuto, mais j'ai un petit truc qui ne se passe pas comme prévu. Quand dans la section "a propos" je rajoute le titre "h2" au dessus des paragraphes dans la "", quand j'affiche ma page le titre est à côté des paragraphes et il les pousse. Pour que cela s'affiche comme dans le tuto, il faut que je mette le titre dans la balise "". Je ne vois pas ce que j'ai raté. Une idée ?
Merci pour ce tuto.
Je répond peut-être un peu tard, mais j'ai rencontré le même problème. J'avais chargé la version 4 de Bootstrap et je suppose que vous aviez fait de-même. En utilisant la version 3.3.7 le problème se corrige. Donc apparemment cela vient de là.
Effectivement je n'avais pas la bonne version de Bootstrap, merci de votre réponse.
Bonjour a peine regarder je me suis mis a télécharger j'ai un examen la dessus dans ces temps ci
Alors moi mon problème après avoir créé une page comment se fait la création des autres pages
très bon tuto
merci pour le tuto
Salut!
J'ai certain soucis par rapport à certain trucs
J'ai besoin de ton aide
peux tu m'aider j'ai suivi à la lettre ton tuto mais contrairement à toi les article ne sont pas à l'horizontal tout est sur une colonne
Très bon tuto mais la voix est totalement décalé par rapport à la vidéo c'est dommage
tout à fait d'accord ! sinon c'est un travail de pro !
je voudrais savoir comment configurer le formulaire e contact à son mail. Merci j'attend votre reponse
Bonjour, merci beaucoup pour ce tuto, je nageais un peu en cours et là ça va beaucoup mieux!! Un grand merci à toi! Juste une petite question, comment fais-tu pour taper le caractère "@". J'ai longtemps cherché sur le web mais il semblerait qu'il ne prenne pas en compte la touche "alt" de droite sur OSX. Bien à toi!!
Ronny Vergara sur mac tu n'as pas besoin d'appuyer sur alt, le @ se fait simplement en appuyant sur la touche @ :)
Merci beaucoup pour ta réponse rapide!!! J'ai omis de dire que je suis sur un clavier suisse en QWERTZ et que le @ est sur la touche G. Et je ne peux le mettre qu'en appuyant sur alt :-P... Juste ennuyeux ahah... Peut être que cela t'as mis la puce à l'oreille pour une solution, mais je recherche encore la solution sur le web. Beaucoup de monde penche sur le meme problème que moi et il semblerait que les dev d'atom n'ai pas encore fait de mise a jour pour tous les types de clavier. Bien à toi
PS: en attendant je triche en tapant le @ sur le navigateur ou autre et je le recopie mdr
Salut, au lieux de faire des : #ffffff pour la couleur blanc, faire ça : color: white; ont peu utiliser ça aussi :)
Bonjour !! Merci pour la tuto, c'est vraiment instructif
j'ai une question, quel package fait apparaître les petites icones html & css & js sur l'éditeur atom ?
Nabil EA bonjour merci à toi :) il suffit d'aller dans les préférences d'atom dans l'onglet installer et de taper "icône" tu trouveras plein de packages à installer pour ça !
Merci !! Et bonne continuation
j'ai une question dans ce tuto la galerie photo qui n'a pas ete faite on l'a fait avec jquery ?
Tu peux la faire en insérant tes images dans le HTML directement, et après tu peux créer des animations avec CSS ou jQuery, j'ai d'ailleurs fait un tutoriel sur une galerie photo en jQuery si tu souhaites :)
d'accord merci !
Pour le décalage il suffit de mettre un padding au .about h2
Bonjour, bon tuto j'aimerais savoir comment cacher certain objet lorsque j'arrive sur
ROULLIER Bruno tu devrais jeter un œil aux media queries, ils te permettent de faire du css selon les tailles d'écran en faisant simplement @media screen and (max-width : 760) {règles css }
Merci pour ta réponse.
Je comprends pas bien l'intérêt du "position: relative" sur le sélecteur ".ban" mais appart ça très bonne vidéo !
Juste génial ^^
super Tuto! ENORME merci ! juste une question j'ai un petit problème entre mon image(bannière) et le header il y a une petite ligne blanche d'environ 1px et je ne sais pas comment la retirer. Auriez-vous une idée ?? merci d'avance
Loli Lala verifie que tu n'as pas un border sur ton header (met lui un border : none) ou alors essaye de pousser ta banner en margin : -1px (un peu sale mais ça peut marcher )
Merci ducoup j'ai étais obligé de mettre un (margin-top: -1px) sur le .ban img