{"id":5477,"date":"2024-08-27T20:44:54","date_gmt":"2024-08-27T20:44:54","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/creer-boite-competences-html\/"},"modified":"2024-11-07T17:30:25","modified_gmt":"2024-11-07T17:30:25","slug":"creer-boite-competences-html","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/creer-boite-competences-html\/","title":{"rendered":"11.12 Cr\u00e9er une Bo\u00eete de Comp\u00e9tences en HTML"},"content":{"rendered":"\n\n\n<p><strong>Cr\u00e9er une Bo\u00eete de Comp\u00e9tences en HTML <\/strong> est une excellente fa\u00e7on de montrer vos talents et comp\u00e9tences sur votre site web ou votre portfolio. En utilisant HTML et un peu de CSS, vous pouvez cr\u00e9er une pr\u00e9sentation visuelle attrayante et dynamique de vos comp\u00e9tences. Apprenons comment construire une bo\u00eete de comp\u00e9tences \u00e9tape par \u00e9tape.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la Cr\u00e9ation d&rsquo;une Bo\u00eete de Comp\u00e9tences en HTML<\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/586679970?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n\n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>Dans ce tutoriel, nous allons concevoir une bo\u00eete de comp\u00e9tences simple utilisant HTML et CSS. Cette bo\u00eete de pr\u00e9sentation est id\u00e9ale pour les portfolios, les CV en ligne ou toute autre utilisation o\u00f9 vous souhaitez afficher vos comp\u00e9tences de mani\u00e8re claire et esth\u00e9tique. Voici comment proc\u00e9der, \u00e9tape par \u00e9tape.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c9tape 1: Structurer le HTML<\/h3>\n\n\n\n<p>Commen\u00e7ons par cr\u00e9er une structure de base en HTML pour notre bo\u00eete de comp\u00e9tences. Nous utiliserons des <code>&lt;div&gt;<\/code> pour contenir et organiser notre contenu.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"fr\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;title&gt;Bo\u00eete de Comp\u00e9tences&lt;\/title&gt;\n    &lt;link rel=\"stylesheet\" href=\"styles.css\"&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div class=\"skills-box\"&gt;\n        &lt;h2&gt;Mes Comp\u00e9tences&lt;\/h2&gt;\n        &lt;div class=\"skill\"&gt;\n            &lt;h3&gt;HTML&lt;\/h3&gt;\n            &lt;div class=\"skill-bar\"&gt;\n                &lt;div class=\"skill-level\" style=\"width: 90%;\"&gt;&lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"skill\"&gt;\n            &lt;h3&gt;CSS&lt;\/h3&gt;\n            &lt;div class=\"skill-bar\"&gt;\n                &lt;div class=\"skill-level\" style=\"width: 75%;\"&gt;&lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"skill\"&gt;\n            &lt;h3&gt;JavaScript&lt;\/h3&gt;\n            &lt;div class=\"skill-bar\"&gt;\n                &lt;div class=\"skill-level\" style=\"width: 60%;\"&gt;&lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c9tape 2: Styliser avec CSS<\/h3>\n\n\n\n<p>Pour rendre notre bo\u00eete de comp\u00e9tences visuellement attrayante, nous allons \u00e9crire quelques styles CSS. Nous allons ajouter une mise en page simple, des couleurs, et des barres de progression pour chaque comp\u00e9tence.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* styles.css *\/\nbody {\n    font-family: Arial, sans-serif;\n    background-color: #f4f4f4;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100vh;\n    margin: 0;\n}\n\n.skills-box {\n    background: #fff;\n    padding: 20px;\n    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n    border-radius: 8px;\n    max-width: 400px;\n    width: 100%;\n}\n\n.skills-box h2 {\n    text-align: center;\n    margin-bottom: 20px;\n}\n\n.skill {\n    margin-bottom: 15px;\n}\n\n.skill h3 {\n    margin: 0 0 5px;\n}\n\n.skill-bar {\n    background: #ddd;\n    border-radius: 5px;\n    overflow: hidden;\n}\n\n.skill-level {\n    height: 20px;\n    background: linear-gradient(90deg, #4CAF50, #8BC34A);\n    text-align: right;\n    padding-right: 5px;\n    line-height: 20px;\n    color: #fff;\n    border-radius: 5px 0 0 5px;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c9tape 3: Adjuster les D\u00e9tails et Ajouter des Barres de Progression Dynamiques<\/h3>\n\n\n\n<p>Nous pouvons ajouter quelques styles suppl\u00e9mentaires pour faire ressortir la bo\u00eete de comp\u00e9tences. Vous pouvez \u00e9galement rendre les barres de progression dynamiques en utilisant des animations CSS pour les faire progresser lorsqu&rsquo;elles apparaissent dans la vue.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Ajoutons quelques animations *\/\n@keyframes progress {\n    from {\n        width: 0;\n    }\n    to {\n        width: inherit;\n    }\n}\n\n.skill-level {\n    animation: progress 2s;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c9tape 4: Ajuster pour les Mobiles<\/h3>\n\n\n\n<p>Assurez-vous que votre bo\u00eete de comp\u00e9tences est r\u00e9active et fonctionne bien sur diff\u00e9rents appareils. Vous pouvez utiliser des media queries pour ajuster les styles pour les \u00e9crans plus petits.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>@media (max-width: 600px) {\n    .skills-box {\n        padding: 15px;\n    }\n\n    .skill-level {\n        height: 15px;\n        line-height: 15px;\n    }\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>En suivant ces \u00e9tapes simples, vous pouvez cr\u00e9er une <strong>Bo\u00eete de Comp\u00e9tences en HTML<\/strong> \u00e9l\u00e9gante et professionnelle. Non seulement cela am\u00e9liore le design de votre portfolio ou CV en ligne, mais cela montre \u00e9galement aux employeurs potentiels votre capacit\u00e9 \u00e0 structurer et styliser du contenu web. Pour d&rsquo;autres tutoriels HTML et CSS, consultez notre <a href=\"https:\/\/wikiform.fr\">site internet<\/a> ou suivez des cours en ligne sur des plateformes comme <a href=\"https:\/\/www.coursera.org\/\" target=\"_blank\" rel=\"noopener\">Coursera<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/web-dev-html-css\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-web-dev-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation Web Dev Offre 50%\" title=\"\"><\/a>\n\n\n<p>.<\/p>\n\n\n<p>Pour plus d&rsquo;informations sur la <strong>cr\u00e9ation de bo\u00eetes de comp\u00e9tences<\/strong>, vous pouvez consulter nos guides sur le <a href=\"https:\/\/wikiform.fr\/codespace\/creer-portfolio-html-guide\" target=\"_blank\" rel=\"noopener\">cr\u00e9ation d&rsquo;un portfolio HTML<\/a> et <a href=\"https:\/\/wikiform.fr\/codespace\/creer-curriculum-vitae-html\">comment cr\u00e9er un curriculum vitae en HTML<\/a>. Ces ressources vous fournissent des instructions d\u00e9taill\u00e9es pour am\u00e9liorer le design et la fonctionnalit\u00e9 de vos projets web.<\/p>\n\n\n\n<p>En plus, pour optimiser l&rsquo;impact de votre bo\u00eete de comp\u00e9tences, n&rsquo;oubliez pas d&rsquo;int\u00e9grer des \u00e9l\u00e9ments visuels et des <a href=\"https:\/\/wikiform.fr\/codespace\/element-html-head-tout-savoir\" target=\"_blank\" rel=\"noopener\">m\u00e9tadonn\u00e9es performantes<\/a>, qui peuvent aider \u00e0 l&rsquo;optimisation SEO de votre page. Un autre conseil consiste \u00e0 valider votre code en utilisant <a href=\"https:\/\/wikiform.fr\/codespace\/validation-code-html-w3c-tutoriel\" target=\"_blank\" rel=\"noopener\">les outils de validation du W3C<\/a>.<\/p>\n\n\n\n<p>Pour les utilisateurs qui pr\u00e9f\u00e8rent des balises conteneur g\u00e9n\u00e9rales comme <a href=\"https:\/\/wikiform.fr\/codespace\/conteneur-generique-div-span-html\" target=\"_blank\" rel=\"noopener\">&lt;div&gt; et &lt;span&gt;<\/a>, n&rsquo;h\u00e9sitez pas \u00e0 visiter notre guide complet sur <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-div-span-css-guide-complet\">l&rsquo;utilisation de div et span en CSS<\/a>. Vous trouverez des astuces et des techniques avanc\u00e9es pour am\u00e9liorer vos comp\u00e9tences en d\u00e9veloppement web.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-HTML-ET-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation HTML et CSS Offre 50%\" title=\"\"><\/a>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Cr\u00e9er une Bo\u00eete de Comp\u00e9tences en HTML est une excellente fa\u00e7on de montrer vos talents et comp\u00e9tences sur votre site web ou votre portfolio. En&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2717,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5477","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3-css","category-2-html","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5477","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5477"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5477\/revisions"}],"predecessor-version":[{"id":6016,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5477\/revisions\/6016"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2717"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5477"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5477"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}