Accueil » Articles » Apprenez à coder en HTML et en CSS !

Apprenez à coder en HTML et en CSS !

CHAPITRE 6 : LE MODELE DES BOITES

Le modèle des boîtes est un concept essentiel que vous devez absolument comprendre pour ensuite mettre en page et positionner les différents éléments de votre page web.

Le modèle des boîtes nous dit que « tout élément d’une page est une boîte rectangulaire et peut avoir un padding, une marge et des bordures ».

Ca mérite d’être répété : tout élément, qu’il soit un élément de type block ou de type inline, est une boîte rectangulaire.

Les propriétés permettant d’indiquer la longueur, la largeur, la marge, le padding et les bordures d’un élément forment ce qu’on appelle le modèle des boîtes.

Le modèle des boîtes illustré :

Comprendre le modele des boites

La première boîte est définie par la longueur et la largeur d’un élément. La padding, ou marge intérieure, forme ensuite la seconde boîte. Puis viennent les bordures qui constituent la troisième boîte. Enfin, la marge extérieure vient former la quatrième et dernière boîte.

Hauteur et largeur d’un élément

Tout élément possède une hauteur et une largeur par défaut.

La hauteur d’un élément est déterminée par son contenu. Par exemple, des paragraphes d’une ligne ou de deux lignes n’occuperont pas la même hauteur.

La largeur par défaut d’un élément est avant tout déterminée par son type (block ou inline) puis par son contenu si l’élément est de type inline. En effet, rappelez vous que les éléments de type block occupent automatiquement toute la largeur disponible.

Pour modifier la hauteur d’un élément, on utilise la propriété height à laquelle on attribue une valeur en px, % ou égale à auto dans la grande majorité des cas.

En utilisant la valeur auto, on laisse le navigateur de nos visiteurs décider de la hauteur que doit prendre l’élément visé. Cela est très utile dans le cas où l’on veut conserver les proportions d’une image tout en l’adaptant à la taille de l’écran de nos visiteurs.

Pour modifier la largeur d’un élément, on utilise cette fois la propriété width. Cette propriété prend les mêmes types de valeurs que height.

Illustrons tout cela par un exemple. J’ai ajouté des bordures afin que vous puissiez bien voir la taille de chaque élément. Ne vous souciez pas de la propriété border pour le moment.

Utilisation des proprietes height et width

Les bordures et les bordures arrondies

Tout d’abord, vous devez savoir qu’il existe de nombreuses sortes de bordures dont certaines sont plus ou moins bien supportées par certains navigateurs.

Pour créer des bordures et les personnaliser, nous allons avoir besoin de trois propriétés :

  • Border-width, qui va définir l’épaisseur de la bordure (valeur en px) ;
  • Border-style, qui va définir le style de la bordure ;
  • Border-color, qui va définir la couleur de la bordure (accepte les mêmes valeurs que la propriété « color »).

La propriété border-style peut prendre de nombreuses valeurs différentes. Les valeurs les plus utilisées sont solid, dotted (pointillé) et dashed (tiret). Vous pouvez voir ci-dessous le résultat pour chaque style de bordure :

Les differents types de bordures en CSS

Et voici un exemple d’utilisation des propriétés de type border :

Utilisation de la propriete border

Une fonctionnalité longtemps attendue par les webmasters et les développeurs et qui a vu le jour avec le CSS3 est la possibilité de créer des bordures arrondies.

Pour faire cela, nous allons utiliser la propriété border-radius. Cette propriété va prendre une valeur : la taille de l’angle, en px.

Notez que l’on peut définir des angles différents pour chaque côté de nos bordures en utilisant les mots clefs top-left, top-right, bottom-left et bottom-right.

Creation de bordures arrondies en CSS avec la propriete border

Notez également que ces mots clefs sont souvent employés en CSS, ensemble ou séparément (que top, ou que left par exemple). N’hésitez donc pas à les tester avec certaines propriétés déjà vues ou que l’on va voir !

Les marges intérieures

Pour définir les marges intérieures d’un élément, nous utiliserons la propriété padding.

On peut considérer qu’un élément HTML possède toujours une bordure. Celle-ci peut être explicite, c’est-à-dire matérialisée à l’aide des propriétés CSS vues précédemment ou implicite (invisible).

La propriété padding va définir l’espace entre l’élément en soi et sa bordure. Cette propriété doit être utilisée uniquement dans ce but, et jamais pour positionner des éléments dans une page ou les uns par rapport aux autres.

On donnera généralement une valeur en px à padding. Notez que l’on peut définir des espacements différents pour chaque marge intérieure de nos éléments en utilisant les propriétés padding-right, padding-bottom, padding-left et padding-top.

Illustrons immédiatement ce que nous venons de dire :

La propriete padding illustree

Les marges extérieures

Pour définir la taille des marges extérieures, c’est-à-dire de l’espace à l’extérieur des bordures d’un élément, nous allons utiliser la propriété margin.

Contrairement à la propriété padding, la propriété margin peut tout-à-fait être utilisée pour positionner des éléments dans une page ou les uns par rapport aux autres.

Nous attribuerons généralement des valeurs en px ou en % à cette propriété. Tout comme la propriété padding, nous allons pouvoir des marges différentes de chaque côté de nos éléments avec les propriétés margin-right, margin-bottom, margin-left et margin-top.

Notez que les valeurs par défaut des marges intérieures et extérieures peuvent légèrement différer d’un navigateur à un autre. Cela peut impacter le design général de votre site pour certains de vos visiteurs.

Afin de s’assurer que chaque visiteur verra un résultat conforme à nos attentes, nous pouvons utiliser un « reset CSS » pour notre padding et notre margin.

Dans ce cas là, c’est très simple, il suffit par exemple d’appliquer un padding et une margin avec des valeurs égales à zéro à notre élément body. Ensuite, on précisera les différentes marges souhaitées à nos éléments enfants.

En pratique, voici comment ça se passe :

Utilisation de la propriete margin et des reset CSS

Les ombres des boîtes

On peut créer des ombres autour des boîtes, tout comme on l’avait fait pour nos textes précédemment.

Nous allons cette fois-ci utiliser la propriété box-shadow. Cette dernière fonctionne exactement comme text-shadow, avec deux valeurs obligatoires et quatre recommandées pour marcher :

  • 1ère valeur : déplacement horizontal de l’ombre ;
  • 2ème valeur : déplacement vertical de l’ombre ;
  • 3ème valeur : rayon de propagation (flou gaussien) de l’ombre ;
  • 4ème valeur : couleur de l’ombre (accepte les mêmes valeurs que la propriété « color »).

Notez que dans le cas des ombres des boîtes, il peut être intéressant de rajouter à la fin une dernière valeur, l’inset, si l’on souhaite créer une ombre intérieure.

Creer des ombres autour de nos boites

Faire flotter un élément

Pour aligner des éléments les uns par rapport aux autres, on peut les faire « flotter ». Pour faire flotter un élément, nous utiliserons la propriété float avec les valeurs suivantes : left, right, none ou inherit.

Un élément flottant va sortir du schéma naturel (du « flow ») d’une page web pour venir se placer contre le bord gauche ou droit de l’élément qui le contient ou contre le bord de la page.

Lorsque l’on fait flotter un élément, les éléments après l’élément flottant vont venir se positionner à côté de celui-ci.

Faire flotter des elements

Dans l’exemple ci-dessus, on remarque que l’élément strong, contenu dans l’élément p2, va venir se placer dans le coin à droite de son élément parent (l’élément p2 donc).

L’élément p1 va lui se placer à gauche dans la page tandis que l’élément p2 va se placer à droite ; à côté de l’élément p1.

Généralement, on utilisera plutôt la propriété float sur des éléments de type inline comme des images par exemple. En effet, cette propriété peut être la cause de problème d’affichages lorsqu’elle est mal utilisée sur des éléments de type block.

Si l’on veut qu’un élément suivant un élément flottant vienne se placer sous cet élément flottant, il faudra utiliser la propriété clear. Celle-ci accepte trois valeurs : left, right ou both :

  • left : un élément va se placer en dessous après un float left ;
  • right : un élément va se placer en dessous après un float right ;
  • both : un élément va se placer en dessous après un float left ou un float right.

Voici ce que ça donne en pratique :

Utiliser un clear pour annuler les effets de float en css

La propriété display

La propriété display est une propriété extrêmement puissante : elle permet de changer le type d’un élément de block à inline ou d’inline à block.

Cette propriété supporte quatre valeurs différentes qui correspondent aux différents types d’éléments possibles : inline, block, inline-block et none.

La nouveauté ici est le type inline-block. Ce nouveau type ne peut être donné à un élément que grâce à la propriété display. Il va être un mix des types inline et block.

Un élément de type inline-block se comporte de cette façon : l’élément en soi (contenu et boîtes) se comporte comme un type block tandis que le contenu seulement se comporte comme un type inline.

Pour le dire plus simplement, un élément de type inline-block se comportera comme un élément de type inline excepté que l’on va pouvoir contrôler précisément sa hauteur et sa largeur.

Changer le style d'un element HTML avec la propriete display

La propriété position

La propriété position est une autre propriété très puissante nous permettant de définir l’emplacement d’éléments HTML dans une page. Cette propriété peut prendre cinq valeurs :

  • Static : valeur par défaut, ne change pas la position de base d’un élément ;
  • Absolute : permet de positionner un élément n’importe où dans la page, par rapport à son élément parent direct ;
  • Fixed : permet de positionner un élément n’importe où dans la page. De plus, l’élément reste visible si vous descendez ou remontez le long d’une page ;
  • Relative : permet de replacer un élément relativement par rapport à son positionnement par défaut ;
  • Inherit : l’élément hérite des propriétés de son parent.

Pour ensuite jouer sur la position de nos éléments, nous utiliserons les mots clefs right, bottom, left et top.

Modifier le positionnement de nos elements avec la propriete position

Dans cet exemple, notre paragraphe p1 a un positionnement fixed et a été décalé de 80px sur la gauche par rapport au bord de la page.

Le paragraphe p2 possède lui une position relative. Il a été décalé de 50px par rapport à son positionnement de base (par défaut, il aurait été placé au dessus de notre p1 à cause de son positionnement fixed).

L’élément strong possède un positionnement absolute. Sans notre left :150px, il aurait été collé sur le bord gauche de son élément parent, l’élément p2.

Notez qu’un positionnement absolute sur un élément annule la propriété float si on lui en a appliqué une.

Le z-index

Parfois, lorsque l’on crée le design de nos pages web, il arrive que deux éléments se chevauchent selon certaines circonstances.

Il peut alors être utile de savoir comment indiquer quel élément doit apparaître au dessus de quel autre en cas de chevauchement.

Pour cela, nous utiliserons la propriété z-index. Celle-ci fonctionne avec tous les éléments positionnés et permet d’indiquer quel élément doit être au dessus de quel autre en cas de conflit.

Un élément positionné est un élément auquel on a appliqué la propriété position avec une valeur soit absolute, soit relative, soit fixed.

Le z-index ne fonctionnera donc pas sur des éléments positionnés en static (qui est la valeur par défaut).

Un élément avec un z-index possédant une valeur plus élevée qu’un autre sera au dessus de cet autre élément. Cette propriété va donc s’utiliser de cette manière :

Afficher un element HTML au dessus de un autre avec la propriete z-index

Dans l’exemple précédent, par défaut, l’élément p2 devrait être par dessus l’élément p1.

Or, en appliquant un z-index avec une valeur plus élevée à p1, on arrive à refaire passer p1 par dessus p2 (on peut le voir au niveau des bordures).

Notations long-hand et short-hand

Vous l’avez peut-être remarqué dans les exemples précédents, il m’est parfois arrivé d’écrire les trois propriétés relatives aux bordures sous la forme condensée d’une seule propriété border.

La première écriture, avec les trois propriétés de type border, est ce que l’on appelle une notation long-hand, tandis que la forme condensée est une notation short-hand.

Jusqu’à présent, je ne vous ai fait écrire que des propriétés sous leur forme long-hand afin que vous compreniez bien les bases et la logique du CSS et afin de ne pas compliquer inutilement les choses.

Dorénavant, vous avez tout à fait le niveau pour utiliser des notations short-hand et je vous encourage à les utiliser dès que possible (celles-ci sont plus rapides à écrire et donc moins gourmandes en code et en temps d’exécution).

Voici ci-dessous une liste de quelques propriétés acceptant une écriture short-hand. Encore une fois, écrire une propriété sous sa forme long-hand ou short-hand produira exactement le même résultat.

Proprietes compatibles avec les notations short hand

Comment utiliser les notations short-hand en CSS

58 commentaires

  1. Salut pierre j’ai déjà lu certaines de vos vidéos sur youtube et c’est là que je ai connu… honnêtement avec vous j’ai vite appris les bases et c’est pourquoi j’ai cherché votre site… Et je suis sûr qu’en suivant tous vos cours je pourrais me débrouiller, j’apprécie votre travail c’est vraiment une bonne pédagogie que vous suivez et cela aide les débutants comme nous surtout que les cours avec ce genre de méthode est difficile à trouver en français… Bon courage et je vous remercie pour le temps que vous avez pris pour faire ces cours, on sent que vous avez vraiment mis du sérieux

  2. Je tiens à vous remercier et à vous féliciter pour la simplicité et la clarté des tuto. Les videos sont une méthode très utiles et efficace pour apprendre la programmation. Vous êtes méthodique ce qui facilite la compréhension, mais ce que j’ai pas aimé c’est la pagination en fin d’articles. Je crois qu’un menu pour pouvoir accéder à un cour précis serai plus utile si on veut faire une petite révision.
    J’ai parcouru les tuto PHP, c’est génial, vous allez surement avoir du succès donc continuez comme ça, enrichissez la bibliothèque francophone, je sais que gérer un site à long terme et maintenir la même cadence n’est pas si facile que ça.
    J’adore la programmation web et je passe mon temps entre les sites, je suis heureux de tomber sur le votre par hasard en faisant une recherche google sur les fonctions PHP.
    J’utilise wordpress, je serai heureux si vous écriviez des tuto sur ce CMS, notamment la création d’un thème en utilisant des videos.
    Merci encore Pierre Giraud, bonne continuation.

    • Bonjour,

      Merci beaucoup pour votre commentaire et vos encouragements ! Je prends également note de vos remarques. Merci encore !
      Je vais essayer de faire quelques cours sur WordPress prochainement.

      Amicalement,
      Pierre

    • Bravo Pierre,
      Vos cours sont géniaux. De plus les mots employés par vous sont précis et explicites.
      Merçi et bonne continuation.

  3. Heu… désolé il y a bien un sommaire sur votre site… mille excuses !

  4. Bonjour,
    Votre site est très pédagogique et très bien conçu. Je l’utilise depuis une dizaine de jours. Comme la chronologie des thèmes abordés me convient très bien, j’y reviens chaque jour. Il manque un sommaire pour reprendre la lecture là où je l’avais laissée. Cela éviterait une recherche fastidieuse à la « molette » et améliorerait grandement le confort de l’utilisateur.
    J’ai hâte de découvrir vos œuvres sur PhP et JavaScript… pour le moment je n’est trouvé que des cours « lourding » et indigeste.
    Encore merci !

    • Bonjour,

      Merci pour votre commentaire ! Je réfléchis depuis quelques temps déjà à comment proposer une ergonomie optimale pour les lecteurs tout en gardant un format « blog »… Ce n’est pas si simple que cela, mais j’y travaille !

      Amicalement,
      Pierre

  5. Merci pour ces cours que vous mettez a la porte de tout le monde. Je suis passionne du web comme vous et le tuto me permet de me forme en autodidacte.
    Merci encor

  6. Bonjour,
    votre cour est très impressionnant. Moi je l’adore beaucoup.
    Et j’ai une question, au fait au niveau du css on ne pas créer d’autre papier(fichier)? ou c’est dans le seul papier css (style.css) qu’on a crée qu’ on va mettre tous nos codes css liés à différents pages.

    • Bonjour,

      Merci pour votre commentaire. Vous pouvez créer autant de fichier CSS que vous le souhaitez, le tout étant de ne pas oublier de lier les fichiers CSS voulus aux fichiers HTML.

      Amicalement,
      Pierre

  7. Bonjour Pierre Giraud! C’est cherchant des vidéos sur youtube concernant le HTML / CSS que je suis tombé sur par hasard une de tes vidéos:HTML/CSS. J’avoue que le cours sur HTML/CSS est très pédagogique simple . Je suis sûr qu’avec tes cours je vais savoir coder tout comme toi.

    Merci!

  8. bonjour Pierre,
    je saisi cela peut paraître c..
    mais je ne parviens pas à trouver une adresse mail pour télécharger js bin, lol
    on me renvois systématiquement à node que j’ai téléchargé, et puis … ?

    je suis sur mac maverick,;textWrangler

    merci; A+

  9. Bonjour Pierre,

    Merci infiniment pour vos cours (je suis celui sur le html/css actuellement.
    C’est clair et bien enseigné.

  10. Boivin Christophe

    Bonjour Pierre,

    C’est simple, l’un des meilleur tutoriel (voir le meilleur) pour apprendre HTML et CSS.
    Je commence à peine la construction de mon futur site dédié au Moyen Age.
    J’ai plus appris avec ce tutoriel en quelques heures que d’autres en plusieurs jours.

    Merci

  11. Bonjour Pierre,

    Il se fait tard, mais après avoir regarder tes quelques 4h30 de cours html/css, je ne pouvais pas m’endormir sans te laisser un commentaire. Ton approche pédagogique est tout bonnement incroyable (moi qui passe le concours de prof dans l’année, ça met la pression 🙂 ). Et j’en ai vu des tutos de tout genre, mais je dois dire que rares sont ceux avec une voix aussi agréable à écouter pendant plusieurs heures derrière un écran. Je ne peux que te féliciter pour ton travail en espérant pouvoir suivre tes prochaines vidéos (notamment sur le responsive design). Bon trêves de compliments, tu y prendrais gout…soit certain que je passerai par toi une fois mon site terminé pour prendre un herbergeur qui te rapporte quelques piecettes. Encore bravo et à bientôt.
    Boris

    • Bonjour,

      Merci beaucoup pour ce commentaire qui fait très plaisir à lire, d’autant plus de la part d’un futur professeur (je l’espère !) ! Et merci d’avance pour l’attention quant à l’hébergeur. Bon courage pour la suite !

      Amicalement,
      Pierre

  12. super votre approche – pouvez vous m’envoyer le fichier PDF
    merci
    cordialement
    alain

  13. Bjr mr Pierre avant tout merci pour ce tuto sur comment crée un site avec HTML et CSS encore merci mes j’aimerai avoir aussi la suite de vos vidéo pour ce cour. Je vais m’abonner maintenant sur votre compte youtube et j’espère avoir un liens pour avoir la suite des cours

    Merci

    • Bonjour,

      Vous pouvez trouver toutes les vidéos de mon cours HTML / CSS sur mon site dans l’article relatif, ou sur YouTube. Le cours est complet et toutes les vidéos sont là.

      Amicalement,
      Pierre

  14. Bonjour, et bonne et heureuse année 2015.
    Merci de votre aide pour un grand débutant comme moi. En formation Community Manager depuis 1 mois, j’ai effectivement compris qu’il va m’être utile d’avoir des bases pour gagner du temps avec les développeurs par exemple.
    Vos vidéos sont pédagogiques. Cela fait plaisir quand on trouve quelqu’un qui se met à la portée des autres.
    Pourriez vous en retour m’envoyer le support sur ma boite mail. Je vous écris en parallèle sur pierre.giraud@edhec.com.
    Bien à vous
    OA

  15. Bonjour,

    Tout d’abord une très bonne année à toi. Ensuite un grand merci pour tes tutos qui sont très explicites et très complets. Je me suis abonné à ta chaine Youtube et je vais suivre l’évolution de ton site. si j’ai besoin de ton aide je n’hésiterai pas à faire appel à toi. Encore merci pour tes tutos 😉

  16. Salut Pierre,

    tout d’abord, merci beaucoup pour tes cours et je te souhaite une très bonne et heureuse année. J’espère apprendre le HTML, le CSS et tout savoir sur le PHP via tes cours :). Autrement dit, j’espère que tu nous réserve encore de nombreuses vidéos. 🙂 Je n’ai malheureusement pas eu le doc PDF. Peux-tu me l’envoyer par mail stp ? 🙂

  17. Salut,
    Merci bcp pour tes efforts, je suis débutant et j’ai une petite question concernant le problème d’affichage des accents sachant que j’ai utilisé le metacharset « utf-8 » comme indiqué, et j’ai toujours des points d’interrogations à la place. Peux-tu m’aider sur ce point s’il te plait ?
    N.B. j’utilise un mac ; j’ai testé sur Firefox et Safari (même problème d’accents).
    Merci encore une fois.

    • Bonjour,

      Le meta charset va aider Google (ou Yahoo, etc.) à savoir comment lire ta page. Il n’y aura donc pas de problème d’accent une fois sur le web. Cependant, si tu travailles en local, il faut bien faire attention à ce que ton éditeur soit lui aussi en tuf-8. Par défaut, je sais qu’avec Mac on a droit au format étrange « Mac-Rom »… Il faut donc chercher l’onglet « encodage » dans ton éditeur de texte et fixer ça.

      Amicalement,
      Pierre

      • Mohamed FERSSIWI

        Je te souhaite d’abord une année 2015 pleine de succès dans tes projets.

        Effectivement, j’ai changé dans les préférences de Komodo « Custom encoding » et « Default encoding » à « Utf-8 » j’ai écrasé mes anciens fichiers html mais les « ? » persistent sur firefox et safari même avec un test en ligne !

        Merci bcp !

        • Bonjour,

          Merci, bonne année à toi aussi !

          Si tu utilises Komodo, regarde en bas de ta fenêtre lorsque tu as un fichier ouvert. Tu peux changer l’encodage à partir de là également. Ensuite, normalement, il n’y a plus qu’à enregistrer le fichier et à rafraichir la page si elle était déjà ouverte. Les points d’interrogations devraient disparaitre… en théorie.

          Bon courage !

  18. bonjour et MERCI.

    Super travail, tutos clairs, nets et précis (sans parler de la qualité pédagogique des vidéos).
    Vidéos découvertes par hasard au gré de mes navigations sur le web… maintenant votre site est épinglé dans mes favoris, et je viens le voir régulièrement.
    SUPER
    Philippe

  19. bonjour pierre
    j’essaye de partager sur fbook pour telecharger le pdf mais ca ne marche pas.
    je vous envoies alors un email à pierre.giraud@edhec.com

  20. Salut,
    J ai un soucis je tweet je share mais rien ne passe.j aimerai bien avoir le tuto en pdf ce serait plus utile pr moi.Merci d avance.

  21. Je viens de parcourir rapidement vos tutos,ils sont impecable.Merci de continuer avec cette allure.J;ai aussi le même problème avec un des internautes concernant le téléchargement.Voici mon adresse mail

  22. Salut Pierre,

    Merci beaucoup pour ces tutos très bien conçus !
    Je voulais télécharger le pdf mais malgré un partage sur twitter, et le partage facebook qui ne fonctionne pas, je n’ai pas pu me le procurer.
    Si tu peux faire qqch 🙂

    Merci à toi !

    Deborah

  23. J »ai prix gout aux html et css grace à tes tutos.ces derniers moments, je me suis vraiment accroché à mon ordi pour revoirr agréablement et sans cesse tes tutos.Bon courage et merci.

  24. Juste un grand merci pour toutes ces formations, ce temps passé à nous expliquer (ce que tu fais très bien).
    Un grand MERCI encore et continue c super !!!!!!

  25. Bonjour Mr.Pierre:
    Je voudrais vous remercier pour votre formation si instructive,mais,est-ce à tout ce qu’il y a à savoir dans ces deux langages ? Je veux apprendre plus
    Par exemple,votre formation PhP e SQL sur youtube ,est elle complète ou y a t-il d’autres vidéos à venir ?
    Et pour finr,où pourais-je apprendre plus ?

    • Bonjour,

      Il y a toujours à apprendre ! Mais concernant HTML et CSS, je fais quand même un joli tour d’horizon avec ce cours, donc on peut dire que la formation est « complète ». Concernant mon cours sur PhP et MySQL, celui ci est en cours; et est assez loin d’être terminé !

      Il existe de nombreuses autres ressources pour apprendre à coder, comme le site du w3c par exemple. Je vous laisse chercher sur ce point.

      Amicalement,
      Pierre

  26. Salut Pierre,

    Je viens de terminer cette excellente formation sur le html et le css. Merci de donner de ton temps et de partager tes connaissances! C’est un vrai plaisir de te suivre.
    Je commence de suite ta formation sur le php!

    A bientôt
    Grégory

  27. Bjr Pierre , j’ai suivi le cours sur html et css, c’est vraiment très claire et compréhensible, j’ai créer un compte sur youtube mais je ne sais pas comment acédé à vos vidéo étand dans mon compte youtube je vx uniquement suivre vos cours car tu explique clairement et ça m’aide à avancé sur le codage htmal & css.

    Que Dieu vous prolonge la vie bcp des d’années ,afin que d’autre génération soient former par votre expérience.
    MERCI EN TOUT CAS Pierre tu es excellent;

    J’attend impatiemment les cours de langage PHP

    Merci à vous !

  28. j’ai suivi vos cours avec beaucoup d’intérêt. ils sont vraiment très bien agencés, merci bcp!!
    par ailleurs, je ne sais toujours pas comment découper une page comme ta page d’accueil.

    encore merci

  29. Merci Pierre Giraud pour votre formation sur le HTML et le CSS, grâce à vous je suis prêt à attaquer le PHP et le SQL !

    Encore merci !

  30. Bonjour

    Merci, beaucoup pour la presentation, mais est ce tu peux m’aider à telechrger le jsbin pour et l’exemple de la presentation afin de relire l’esempe à tete repose.
    ça urge pour mettre l’evemple en ppratique afin de maitriser bien les cours .
    et est ce que tu as fait les cours de Javascript et PHP Merci d’avance et à bientot

    • Bonjour,
      Impossible de télécharger JsBin : c’est un service offert sur le web sous forme de site web, pas un logiciel téléchargeable. Concernant Js et PhP je suis en train de créer les scripts.
      Amicalement,
      Pierre

  31. fodemoudou kaba

    je suis lnformaticien et je souhaitrais apprendre beaucoup de langage avec pierre car j’aime sa façon d’enseigner c’est un vrai pédagogue

  32. Bonjour,

    Je navigue depuis longtemps sur le WEB pour examiner les tutoriels proposés sur divers sujets.
    Concernant l’apprentissage du HTML et du CSS, je trouve que vos cours sont d’une excellente qualité, même par rapports à des concurrents tels que le site du ZERO qui excelle dans la méthode.
    Bravo les 4 vidéos sont géniales.
    Apres avoir travaillé de longs mois sur ces 2 langages, j’essaie d’aborder doucement le JavaScript.
    Qui vivra verra !!
    Bravo encore et merci

    • Bonjour,

      Merci beaucoup pour ce commentaire qui fait plaisir à lire ! Je suis heureux que mes cours vous aient plu & aient pu vous être utiles.
      J’ai été un petit peu débordé par les événements ce mois-ci (déménagement, site e-commerce à créer…) ce qui explique le manque d’article. Cependant, je compte bien finir mon cors sur HTML et CSS et ensuite poursuivre sur ma lancée avec du PhP et le JavaScript. N’hésitez donc pas à revenir jeter un coup d’oeil de temps en temps !

      Dans tous les cas, bon courage dans votre apprentissage et encore merci,
      Pierre

Répondre

Votre adresse email ne sera pas publiée. Les champs obligatoires sont marqués d'une étoile *

*