admin-dashboard-en-html-et-css

admin-dashboard-en-html-et-css
Particle element

Dans ce tutoriel nous allons vous expliquer comment créer un responsive admin dashboard en html et css pas à pas. 

avant de commencer, il faut d’abord télécharger fontawesome pour charger tous les icones utilisés. si vous ne parvenez pas à le faire, merci de suivre la vidéo depuis youtube : https://youtu.be/fo1xE8yX7C8

en effet premièrement nous allons créer le sidebar c’est à dire la barre de navigation.

par la suite nous allons passer à la création de notre header.  en effet ici vous allez remarquer que, on a crée une class nommée content qui  va désormais contenir l’ensemble de notre admin dashboard. juste une precision le code est une continuité. tous le reste du code se situe à l’intérieur de cette class (content).  et n’oubliez pas de mettre votre image pour la partie profil

ici nous allons créer un main c’est à dire une la partie principal qui va regrouper nos différents elements. et n’oubliez pas que cette class va être placer à l’intérieur de la class content(partie précédente).

alors maintenant nous allons créer les cards. pour les icones comme je les dis plus haut il faut télécharger ou utiliser le cdn de fontawesome.

dans cette partie nous allons créer notre tableau. avant de commencer nous avons premièrement définie une class composant pour un autre contenu cette fois -ci qui va englober tous les autres sous partie sauf le calendrier. mais n’oubliez que nous sommes sur notre class principal content > et notre bloc main.

ici nous avons lister des produits dans un tableau pour mieux se situer:

maintenant on va passer à la partie clients fidèles. n’oubliez pas que vous êtes toujours à l’intérieur de la class précédente (composant). 

il faut aussi définir des images pour faire une representation de clients. en ce qui me concerne j’ai utilisé ma propre image.

et comme est dit en haut, pour charger les icones il faut télécharger fontawesome ou utilisé le lien cdn que j’ai mis cette fois-ci dans le code. vous pouvez maintenant le copier en haut de votre code .

dans cette partie, on va définir un diagramme d’évolution et de définir une légende de nos produits :

dans ce bloc nous allons maintenant  créer notre calendrier. l’idée ici est de définir des reperes de date pour définir un programme selon notre besoin. mais si vous ne l’avez pas besoin aussi c’est unitile pour vous de le mettre dans votre code :

Ainsi que nous avons présenter tous les différentes parties de notre Dashboard, nous allons procéder à la responsivité et maintenant vous aurez tout le code source entier et aussi le lien cdn de fontawesome. il vous suffira juste de copier tout le code HTML ainsi que le code CSS dans votre de texte puis l’exécuter et vous aller voir que vous aurez le meme résultat que moi.

Share on Facebook Share on twitter
Related Posts
Leave a Reply

Your email address will not be published.Required fields are marked *