Dans ce chapitre, nous allons développé la partie front-end d'un chat web en HTML5 / CSS3.
Pré-requis :
- Une maitrise du HTML/CSS
- Une maitrise de JavaScript
- Une maitrise de Node.JS
Qu’est-ce qu'un chat web ?
Un chat web est une discussion en ligne, elle permet de discuter via le web/internet, elle peut réunir plusieurs personnes ou simplement une discussion entre deux personnes. Un chat web va se trouver sur un site qui sera développé en HTML/CSS et va souvent utilisé un socket qu'on verra par la suite.
Créer notre chat web
Bon, bon, on y va ? Créez votre dossier pour votre site avec un fichier index.html et un autre fichier style.css puis GO !
La partie HTML
Pour cette partie, on va allez dans notre dossier html qui est un peu vide.. Bon ok ! On va commencé à faire le corp de notre site dans la balise body :
On va venir créer une div container pour notre chat box ensuite on va créer trois div avec la classe header pour le titre, body pour les messages et footer pour envoyer nos messages avec notre pseudo !
Ensuite, on va ajouter une balise H1 pour le titre de notre chat box dans la div header.
Dans notre balise body, on va ajouter une balise div pour le contenu de notre message avec un pseudo. La div de l'utilisateur aura une classe message et ceux des autres utilisateurs message user.
Et pour finir notre balise footer aura une balise div body avec une autre div input qui va contenir l'input pour envoyer un message, mettre notre pseudo et le button pour envoyer le message.
Le code de la partie HTML se trouve sur le github du projet. Maintenant, on peut passer au CSS !
La partie CSS
On pourra aller dans notre fichier style.css pour donner une apparence à notre site. Pour toute la page et le body on va ajouter :
Modifier les couleurs et la famille des fonts à votre façon.
Pour le container de la chat box, on va faire un rectangle avec un dégradé arc-en-ciel et selon la taille de l'ecran il prendra toute la place.
Pour le titre, on va juste le mettre en blanc avec un padding :
Ensuite, on va mettre la partie de nos messages qui prendra lui aussi quasiment une partie du container, on va faire en sorte que le body du container prend toute la largeur avec un fond noir/gris, les messages seront des rectangles avec une couleur qui différe si cela est un message de l'utilisateur ou des autres utilisateurs.
On finit presque avec le footer qui sera juste un rectangle avec les inputs séparés verticalement.
Et pour finir on ajoute le responsive !
Le code de la partie CSS se trouve sur le github du projet.
Voici le résultat :
Pour le prochain chapitre, on va rendre fonctionnel notre chat box avec un socket !
Rejoindre la communauté de développeurs
Rejoins notre communauté de développeurs pour progresser et t'améliorer
Passer au chapitre suivant :