Réaliser un Tableau de bord avec HTML CSS & JS

Salut les lecteurs pour ce nouveau tutoriel on va réaliser un superbe tableau de bord avec HTML CSS & CSS. Si ce projet vous plait partager ce blog en vos amis intéressés pour que la page se développe & qu'on publie encore plus. Le code source est disponible en bas de la page n'oubliez pas de commenter dans la section des commentaires si vous rencontrais des difficultés.

Tableau de bord: CODE SOURCES

Avant de commencer créer trois fichier /index.html /style.css et script.js et de coller ce code suivant...

See the Pen Project Management Dashboard UI by Aybüke Ceylan (@aybukeceylan) on CodePen.

C'est tous maintenant vous avez créer un tableau de bord avec HTML CSS & JavaScript et qui est responsive...

Participer à la conversation (2)

2 commentaires

Anonyme

Il y'a 173 erreurs dans le CSS, ce qui ne donne pas le résultat attendu dans le navigateur
1. Anonyme
  
  Hey votre feuille de style dvrait se terminer par scss example style.sccs

N'hésitez pas de mentionner votre nom d'utilisateur Telegram à la fin de votre message pour recevoir des cadeaux de la part des modérateurs. Merci de commenter

<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2422103421-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY57pDmYR57VPdcO6Zj2v4lBQenbiw:1755542244596';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d3407944014762602824','//codingteamblog.blogspot.com/2021/12/realiser-un-tableau-de-bord-avec-html.html','3407944014762602824');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '3407944014762602824', 'title': 'Coding Team', 'url': 'https://codingteamblog.blogspot.com/2021/12/realiser-un-tableau-de-bord-avec-html.html', 'canonicalUrl': 'https://codingteamblog.blogspot.com/2021/12/realiser-un-tableau-de-bord-avec-html.html', 'homepageUrl': 'https://codingteamblog.blogspot.com/', 'searchUrl': 'https://codingteamblog.blogspot.com/search', 'canonicalHomepageUrl': 'https://codingteamblog.blogspot.com/', 'blogspotFaviconUrl': 'https://codingteamblog.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'fr', 'localeUnderscoreDelimited': 'fr', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Coding Team - Atom\x22 href\x3d\x22https://codingteamblog.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Coding Team - RSS\x22 href\x3d\x22https://codingteamblog.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Coding Team - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/3407944014762602824/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Coding Team - Atom\x22 href\x3d\x22https://codingteamblog.blogspot.com/feeds/2062087214000138477/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-1214813439421958', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': true, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/e5cf7f8e1203bae2', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Obtenir le lien', 'key': 'link', 'shareMessage': 'Obtenir le lien', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Partager sur Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Partager sur X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Partager sur Pinterest', 'target': 'pinterest'}, {'name': 'E-mail', 'key': 'email', 'shareMessage': 'E-mail', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27fr\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': true, 'jumpLinkMessage': 'Lire le post', 'pageType': 'item', 'postId': '2062087214000138477', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/a/AVvXsEjJ8EeWimj68SaqcszBvrei0LYG_0EX2ta2tS_oWuOJsnX-v3cg6XQo30uGvOmkrQRhKdMU4vTkRP8QtXbt27rCrGfoaPBqa8orSa9lNts5ii86GMQLvGJ_FjQh_2PoPU7fQzvMC38JFQ2JtrRYlRJn6dgceDPAUDaixmwEbazchUMIoRdQA6a075vC\x3ds72-w640-c-h283', 'postImageUrl': 'https://blogger.googleusercontent.com/img/a/AVvXsEjJ8EeWimj68SaqcszBvrei0LYG_0EX2ta2tS_oWuOJsnX-v3cg6XQo30uGvOmkrQRhKdMU4vTkRP8QtXbt27rCrGfoaPBqa8orSa9lNts5ii86GMQLvGJ_FjQh_2PoPU7fQzvMC38JFQ2JtrRYlRJn6dgceDPAUDaixmwEbazchUMIoRdQA6a075vC\x3dw640-h283', 'pageName': 'R\xe9aliser un Tableau de bord avec HTML CSS \x26 JS', 'pageTitle': 'Coding Team: R\xe9aliser un Tableau de bord avec HTML CSS \x26 JS', 'metaDescription': ''}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Modifier', 'linkCopiedToClipboard': 'Lien copi\xe9 dans le presse-papiers\xa0!', 'ok': 'OK', 'postLink': 'Publier le lien'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Personnaliser', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'R\xe9aliser un Tableau de bord avec HTML CSS \x26 JS', 'description': 'Coding Team est une plateforme en ligne d\xe9di\xe9e au partage des contenues sur la programmation', 'featuredImage': 'https://blogger.googleusercontent.com/img/a/AVvXsEjJ8EeWimj68SaqcszBvrei0LYG_0EX2ta2tS_oWuOJsnX-v3cg6XQo30uGvOmkrQRhKdMU4vTkRP8QtXbt27rCrGfoaPBqa8orSa9lNts5ii86GMQLvGJ_FjQh_2PoPU7fQzvMC38JFQ2JtrRYlRJn6dgceDPAUDaixmwEbazchUMIoRdQA6a075vC\x3dw640-h283', 'url': 'https://codingteamblog.blogspot.com/2021/12/realiser-un-tableau-de-bord-avec-html.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 2062087214000138477}}, {'name': 'widgets', 'data': [{'title': 'Coding Team (en-t\xeate)', 'type': 'Header', 'sectionId': 'sec_Header_Title', 'id': 'Header01'}, {'title': 'Tu cherches quelque chose ?', 'type': 'BlogSearch', 'sectionId': 'sec_Header_Search', 'id': 'BlogSearch01'}, {'title': 'Header Icon', 'type': 'TextList', 'sectionId': 'sec_Header_Icon', 'id': 'TextList01'}, {'title': 'Account Popup', 'type': 'HTML', 'sectionId': 'sec_Header_Icon', 'id': 'HTML101'}, {'title': 'Mes articles sauvegard\xe9s', 'type': 'LinkList', 'sectionId': 'sec_Header_Icon', 'id': 'LinkList02'}, {'title': 'Traduction', 'type': 'LinkList', 'sectionId': 'sec_Header_Icon', 'id': 'LinkList03'}, {'title': 'Navigation Menu', 'type': 'HTML', 'sectionId': 'sec_Nav_Widgets_1', 'id': 'HTML01'}, {'title': 'Additional Links', 'type': 'PageList', 'sectionId': 'sec_Nav_Widgets_2', 'id': 'PageList02'}, {'title': 'Social Links', 'type': 'LinkList', 'sectionId': 'sec_Nav_Widgets_2', 'id': 'LinkList04'}, {'title': '\xc0 la une', 'type': 'FeaturedPost', 'sectionId': 'sec_Top_Widgets', 'id': 'FeaturedPost01', 'postId': '7009507976147434963'}, {'title': 'Articles du blog', 'type': 'Blog', 'sectionId': 'sec_Main_Widgets', 'id': 'Blog01', 'posts': [{'id': '2062087214000138477', 'title': 'R\xe9aliser un Tableau de bord avec HTML CSS \x26 JS', 'featuredImage': 'https://blogger.googleusercontent.com/img/a/AVvXsEjJ8EeWimj68SaqcszBvrei0LYG_0EX2ta2tS_oWuOJsnX-v3cg6XQo30uGvOmkrQRhKdMU4vTkRP8QtXbt27rCrGfoaPBqa8orSa9lNts5ii86GMQLvGJ_FjQh_2PoPU7fQzvMC38JFQ2JtrRYlRJn6dgceDPAUDaixmwEbazchUMIoRdQA6a075vC\x3dw640-h283', 'showInlineAds': false}], 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'author', 'label': '\xc9crit par'}, {'name': 'timestamp', 'label': 'Le'}, {'name': 'comments', 'label': 'Comment'}, {'name': 'share', 'label': ''}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': '\xbb'}]}, {'regionName': 'footer3', 'items': [{'name': 'location', 'label': 'Location:'}]}], 'allBylineItems': [{'name': 'author', 'label': '\xc9crit par'}, {'name': 'timestamp', 'label': 'Le'}, {'name': 'comments', 'label': 'Comment'}, {'name': 'share', 'label': ''}, {'name': 'labels', 'label': '\xbb'}, {'name': 'location', 'label': 'Location:'}]}, {'title': 'Retrouve les posts par th\xe8me', 'type': 'LinkList', 'sectionId': 'sec_Main_Widgets', 'id': 'LinkList08'}, {'title': 'Sommaire', 'type': 'HTML', 'sectionId': 'sec_Main_Widgets', 'id': 'HTML11'}, {'title': 'Les plus consult\xe9s', 'type': 'PopularPosts', 'sectionId': 'sec_Side_Widgets', 'id': 'PopularPosts01', 'posts': [{'title': 'Viens, on recr\xe9e le jeu Mario en JavaScript de A \xe0 Z', 'id': 7009507976147434963}, {'title': 'Viens, on code un d\xe9tecteur de visages avec JavaScript', 'id': 6428505793949372787}, {'title': 'Comment les sites rep\xe8rent ton VPN\u2026 et comment coder \xe7a en JavaScript', 'id': 6245062989513308616}, {'title': 'annyang : La reconnaissance vocale en JavaScript, facile comme bonjour !', 'id': 1535200490824420115}, {'title': 'Guide complet sur la s\xe9curit\xe9 web : apprenez \xe0 prot\xe9ger votre site', 'id': 6841632117234841512}, {'title': 'Viens, on r\xe9cup\xe8re toutes les infos de ton appareil avec les APIs JavaScript', 'id': 7350947031185507071}, {'title': ' D\xe9couvrez 10 actions surpuissantes que JavaScript peut r\xe9aliser dans le navigateur', 'id': 1801905118542041424}]}, {'title': 'Parcourir par cat\xe9gorie', 'type': 'Label', 'sectionId': 'sec_Side_Widgets', 'id': 'Label01'}, {'title': 'Amenez-moi l\xe0-bas', 'type': 'HTML', 'sectionId': 'sec_Error_404', 'id': 'HTML404'}, {'title': 'Coding Team', 'type': 'Image', 'sectionId': 'sec_Footer_Organization', 'id': 'Image21'}, {'title': 'Nos r\xe9seaux sociaux', 'type': 'LinkList', 'sectionId': 'sec_Footer_Organization', 'id': 'LinkList21'}, {'title': 'Nos services', 'type': 'LinkList', 'sectionId': 'sec_Footer_Widgets', 'id': 'LinkList22'}, {'title': 'Resources', 'type': 'LinkList', 'sectionId': 'sec_Footer_Widgets', 'id': 'LinkList23'}, {'title': 'Nos projets', 'type': 'LinkList', 'sectionId': 'sec_Footer_Widgets', 'id': 'LinkList25'}, {'title': 'Credit', 'type': 'HTML', 'sectionId': 'sec_Footer_Bottom', 'id': 'HTML21'}, {'title': 'Menu Mobile', 'type': 'TextList', 'sectionId': 'sec_Mobile_Menu', 'id': 'TextList99'}, {'title': 'Labels', 'type': 'Label', 'sectionId': 'sec_Theme_Hidden', 'id': 'Label41'}, {'title': '\u09af\u09cb\u0997\u09be\u09af\u09cb\u0997 \u09ab\u09b0\u09cd\u09ae', 'type': 'ContactForm', 'sectionId': 'sec_Theme_Hidden', 'id': 'ContactForm41'}, {'title': 'Pageviews last month', 'type': 'Stats', 'sectionId': 'sec_Theme_Hidden', 'id': 'Stats41'}, {'title': 'Firebase Configurations', 'type': 'LinkList', 'sectionId': 'sec_Addon_Widgets', 'id': 'LinkList61'}, {'title': 'Progressive Web App', 'type': 'LinkList', 'sectionId': 'sec_Addon_Widgets', 'id': 'LinkList62'}, {'title': 'Accepter les cookies', 'type': 'LinkList', 'sectionId': 'sec_Addon_Widgets', 'id': 'LinkList63'}]}]);
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header01', 'sec_Header_Title', document.getElementById('Header01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogSearchView', new _WidgetInfo('BlogSearch01', 'sec_Header_Search', document.getElementById('BlogSearch01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TextListView', new _WidgetInfo('TextList01', 'sec_Header_Icon', document.getElementById('TextList01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML101', 'sec_Header_Icon', document.getElementById('HTML101'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList02', 'sec_Header_Icon', document.getElementById('LinkList02'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList03', 'sec_Header_Icon', document.getElementById('LinkList03'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML01', 'sec_Nav_Widgets_1', document.getElementById('HTML01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList02', 'sec_Nav_Widgets_2', document.getElementById('PageList02'), {'title': 'Additional Links', 'links': [{'isCurrentPage': false, 'href': 'https://codingteamblog.blogspot.com/p/sitemaps.html', 'id': '6194121330377685704', 'title': 'Plan du site (Sitemap)'}], 'mobile': false, 'showPlaceholder': true, 'hasCurrentPage': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList04', 'sec_Nav_Widgets_2', document.getElementById('LinkList04'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_FeaturedPostView', new _WidgetInfo('FeaturedPost01', 'sec_Top_Widgets', document.getElementById('FeaturedPost01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog01', 'sec_Main_Widgets', document.getElementById('Blog01'), {'cmtInteractionsEnabled': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList08', 'sec_Main_Widgets', document.getElementById('LinkList08'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML11', 'sec_Main_Widgets', document.getElementById('HTML11'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts01', 'sec_Side_Widgets', document.getElementById('PopularPosts01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label01', 'sec_Side_Widgets', document.getElementById('Label01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML404', 'sec_Error_404', document.getElementById('HTML404'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ImageView', new _WidgetInfo('Image21', 'sec_Footer_Organization', document.getElementById('Image21'), {'resize': true}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList21', 'sec_Footer_Organization', document.getElementById('LinkList21'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList22', 'sec_Footer_Widgets', document.getElementById('LinkList22'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList23', 'sec_Footer_Widgets', document.getElementById('LinkList23'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList25', 'sec_Footer_Widgets', document.getElementById('LinkList25'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML21', 'sec_Footer_Bottom', document.getElementById('HTML21'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TextListView', new _WidgetInfo('TextList99', 'sec_Mobile_Menu', document.getElementById('TextList99'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label41', 'sec_Theme_Hidden', document.getElementById('Label41'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm41', 'sec_Theme_Hidden', document.getElementById('ContactForm41'), {'contactFormMessageSendingMsg': 'Envoi en cours...', 'contactFormMessageSentMsg': 'Votre message a \xe9t\xe9 envoy\xe9.', 'contactFormMessageNotSentMsg': 'Impossible d\x27envoyer le message. Veuillez r\xe9essayer ult\xe9rieurement.', 'contactFormInvalidEmailMsg': 'Veuillez indiquer une adresse e-mail valide.', 'contactFormEmptyMessageMsg': 'Le champ de message doit \xeatre renseign\xe9.', 'title': '\u09af\u09cb\u0997\u09be\u09af\u09cb\u0997 \u09ab\u09b0\u09cd\u09ae', 'blogId': '3407944014762602824', 'contactFormNameMsg': 'Nom', 'contactFormEmailMsg': 'E-mail', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Envoyer', 'contactFormToken': 'AOuZoY52mbI3XNdNXYAStr94aHJId1Uvhg:1755542244597', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_StatsView', new _WidgetInfo('Stats41', 'sec_Theme_Hidden', document.getElementById('Stats41'), {'title': 'Pageviews last month', 'showGraphicalCounter': false, 'showAnimatedCounter': false, 'showSparkline': true, 'statsUrl': '//codingteamblog.blogspot.com/b/stats?style\x3dBLACK_TRANSPARENT\x26timeRange\x3dLAST_WEEK\x26token\x3dAPq4FmA6jSRhD1QY6TSqVYe-wZjvGXpB9TLqC1O3XfXvS_qKotbayBD95zjZmAH9KxkSkqTpyVH1VBCkQV5fo57iq66bFawtyQ'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList61', 'sec_Addon_Widgets', document.getElementById('LinkList61'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList62', 'sec_Addon_Widgets', document.getElementById('LinkList62'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList63', 'sec_Addon_Widgets', document.getElementById('LinkList63'), {}, 'displayModeFull'));
</script>
</body>

Coding Team

Réaliser un Tableau de bord avec HTML CSS & JS

Tableau de bord: CODE SOURCES

Avant de commencer créer trois fichier /index.html /style.css et script.js et de coller ce code suivant...

C'est tous maintenant vous avez créer un tableau de bord avec HTML CSS & JavaScript et qui est responsive...

2 commentaires

Viens, on recrée le jeu Mario en JavaScript de A à Z

Viens, on code un détecteur de visages avec JavaScript

Comment les sites repèrent ton VPN… et comment coder ça en JavaScript

annyang : La reconnaissance vocale en JavaScript, facile comme bonjour !

Guide complet sur la sécurité web : apprenez à protéger votre site

Viens, on récupère toutes les infos de ton appareil avec les APIs JavaScript

Découvrez 10 actions surpuissantes que JavaScript peut réaliser dans le navigateur