Cr\u00e9er un Portfolio en HTML<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n \n <p><strong>Cr\u00e9er un Portfolio en HTML<\/strong> est une comp\u00e9tence essentielle pour les d\u00e9veloppeurs et designers souhaitant montrer leur travail en ligne. Comprendre comment structurer et styliser votre portfolio peut significativement am\u00e9liorer votre visibilit\u00e9 et attirer des opportunit\u00e9s professionnelles. Apprenons \u00e0 cr\u00e9er un portfolio en HTML avec ce guide complet, accompagn\u00e9 d’exemples concrets de code.<\/p>\n \n\n \n <h2 class=\"wp-block-heading\">Introduction \u00e0 la Cr\u00e9ation d’un Portfolio 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\/586680087?dnt=1&fullscreen=0&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 \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 \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>\n document.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>Un portfolio en HTML vous permet de cr\u00e9er une pr\u00e9sence en ligne personnalis\u00e9e et professionnelle. En utilisant des balises HTML de base et en appliquant du CSS pour le style, vous pouvez cr\u00e9er une page attrayante pour pr\u00e9senter vos projets. Commen\u00e7ons par la structure de base de votre portfolio.<\/p>\n \n\n \n <h3 class=\"wp-block-heading\">\u00c9tape 1 : Mise en Place de la Structure de Base<\/h3>\n \n\n \n <p>Commen\u00e7ons par cr\u00e9er une structure HTML de base. Cr\u00e9ez un fichier <code>index.html<\/code> et ajoutez-y les \u00e9l\u00e9ments suivants :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-html\">\n <code>\n <!DOCTYPE html>\n <html lang=\"fr\">\n <head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Mon Portfolio<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n <\/head>\n <body>\n <header>\n <h1>Bienvenue sur mon Portfolio<\/h1>\n <nav>\n <ul>\n <li><a href=\"#about\">\u00c0 propos<\/a><\/li>\n <li><a href=\"#projects\">Projets<\/a><\/li>\n <li><a href=\"#contact\">Contact<\/a><\/li>\n <\/ul>\n <\/nav>\n <\/header>\n <main>\n <section id=\"about\">\n <h2>\u00c0 propos de moi<\/h2>\n <p>Je suis un d\u00e9veloppeur passionn\u00e9 par la cr\u00e9ation de sites web modernes et interactifs.<\/p>\n <\/section>\n <section id=\"projects\">\n <h2>Mes Projets<\/h2>\n \n <\/section>\n <section id=\"contact\">\n <h2>Contactez-moi<\/h2>\n \n <\/section>\n <\/main>\n <footer>\n <p>© 2023 Mon Portfolio<\/p>\n <\/footer>\n <\/body>\n <\/html>\n <\/code>\n <\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">\u00c9tape 2 : Ajout du Style avec CSS<\/h3>\n \n\n \n <p>Pour rendre votre portfolio plus attrayant, ajoutez du style avec CSS. Cr\u00e9ez un fichier <code>styles.css<\/code> et d\u00e9finissez des styles de base :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\">\n <code>\n body {\n font-family: Arial, sans-serif;\n line-height: 1.6;\n margin: 0;\n padding: 0;\n }\n\n header {\n background: #333;\n color: #fff;\n padding: 1rem 0;\n text-align: center;\n }\n\n nav ul {\n list-style: none;\n padding: 0;\n }\n\n nav ul li {\n display: inline;\n margin: 0 1rem;\n }\n\n nav ul li a {\n color: #fff;\n text-decoration: none;\n }\n\n main {\n padding: 2rem;\n }\n\n section {\n margin-bottom: 2rem;\n }\n\n footer {\n background: #333;\n color: #fff;\n text-align: center;\n padding: 1rem 0;\n }\n <\/code>\n <\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">\u00c9tape 3 : Ajout des Projets<\/h3>\n \n\n \n <p>Cr\u00e9ez des cartes de projet pour afficher vos travaux. Ajoutez le code HTML suivant dans la section \u00ab\u00a0Projets\u00a0\u00bb de votre fichier <code>index.html<\/code> :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-html\">\n <code>\n <section id=\"projects\">\n <h2>Mes Projets<\/h2>\n <div class=\"project-card\">\n <h3>Projet 1<\/h3>\n <p>Description de mon premier projet.<\/p>\n <\/div>\n <div class=\"project-card\">\n <h3>Projet 2<\/h3>\n <p>Description de mon deuxi\u00e8me projet.<\/p>\n <\/div>\n <\/section>\n <\/code>\n <\/pre>\n \n\n \n <p>Et ajoutez les styles CSS correspondants dans votre fichier <code>styles.css<\/code> :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\">\n <code>\n .project-card {\n border: 1px solid #ddd;\n padding: 1rem;\n margin: 1rem 0;\n border-radius: 5px;\n }\n\n .project-card h3 {\n margin-top: 0;\n }\n <\/code>\n <\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">\u00c9tape 4 : Ajout d’un Formulaire de Contact<\/h3>\n \n\n \n <p>Permettez aux visiteurs de vous contacter en ajoutant un formulaire de contact. Ajoutez le code suivant dans la section \u00ab\u00a0Contact\u00a0\u00bb de votre fichier <code>index.html<\/code> :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-html\">\n <code>\n <section id=\"contact\">\n <h2>Contactez-moi<\/h2>\n <form action=\"https:\/\/example.com\/contact\" method=\"POST\">\n <label for=\"name\">Nom :<\/label>\n <input type=\"text\" id=\"name\" name=\"name\" required>\n <label for=\"email\">Email :<\/label>\n <input type=\"email\" id=\"email\" name=\"email\" required>\n <label for=\"message\">Message :<\/label>\n <textarea id=\"message\" name=\"message\" required><\/textarea>\n <button type=\"submit\">Envoyer<\/button>\n <\/form>\n <\/section>\n <\/code>\n <\/pre>\n \n\n \n <p>Ajoutez des styles pour le formulaire dans votre fichier <code>styles.css<\/code> :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\">\n <code>\n form {\n display: flex;\n flex-direction: column;\n }\n\n label {\n margin-top: 1rem;\n }\n\n input, textarea {\n padding: 0.5rem;\n margin-top: 0.5rem;\n border: 1px solid #ddd;\n border-radius: 5px;\n }\n\n button {\n margin-top: 1rem;\n padding: 0.5rem;\n border: none;\n background: #333;\n color: #fff;\n border-radius: 5px;\n cursor: pointer;\n }\n\n button:hover {\n background: #555;\n }\n <\/code>\n <\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s pour Am\u00e9liorer Votre Portfolio<\/h3>\n \n\n \n <p>Pour rendre votre portfolio encore plus impressionnant, vous pouvez ajouter des fonctionnalit\u00e9s avanc\u00e9es comme des animations CSS, des int\u00e9grations API, ou m\u00eame des projets interactifs. Voici quelques id\u00e9es :<\/p>\n \n\n \n <h4 class=\"wp-block-heading\">Ajout d’Animations CSS<\/h4>\n \n\n \n <p>Une animation simple pour les cartes de projet :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\">\n <code>\n .project-card:hover {\n transform: scale(1.05);\n transition: transform 0.3s ease-in-out;\n }\n <\/code>\n <\/pre>\n \n\n \n <h4 class=\"wp-block-heading\">Int\u00e9gration d’une API de R\u00e9seaux Sociaux<\/h4>\n \n\n \n <p>Pour afficher vos derniers tweets ou posts Instagram, vous pourriez int\u00e9grer une API de r\u00e9seaux sociaux. Par exemple, utilisez l’API Twitter pour afficher vos tweets r\u00e9cents :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-js\">\n <code>\n fetch('https:\/\/api.twitter.com\/2\/tweets?ids=your_tweet_ids', {\n headers: {\n 'Authorization': 'Bearer your_bearer_token'\n }\n })\n .then(response => response.json())\n .then(data => {\n const tweets = data.data;\n const tweetContainer = document.getElementById('tweets');\n tweets.forEach(tweet => {\n const tweetElement = document.createElement('div');\n tweetElement.className = 'tweet';\n tweetElement.textContent = tweet.text;\n tweetContainer.appendChild(tweetElement);\n });\n })\n .catch(error => console.error('Error fetching tweets:', error));\n <\/code>\n <\/pre>\n \n\n \n <h2 class=\"wp-block-heading\">Conclusion<\/h2>","protected":false},"excerpt":{"rendered":"<p>Voici l’article am\u00e9lior\u00e9 avec toutes les modifications SEO demand\u00e9es : \u00ab\u00a0`html Cr\u00e9er un Portfolio en HTML Cr\u00e9er un Portfolio en HTML est une comp\u00e9tence essentielle…<\/p>\n","protected":false},"author":2,"featured_media":2719,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5479","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\/5479","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=5479"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5479\/revisions"}],"predecessor-version":[{"id":5480,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5479\/revisions\/5480"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2719"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5479"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5479"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":5479,"date":"2024-08-27T20:49:05","date_gmt":"2024-08-27T20:49:05","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/creer-portfolio-html-guide\/"},"modified":"2024-08-27T20:49:08","modified_gmt":"2024-08-27T20:49:08","slug":"creer-portfolio-html-guide","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/creer-portfolio-html-guide\/","title":{"rendered":"11.13 Cr\u00e9er un Portfolio en HTML : Guide Complet"},"content":{"rendered":"Voici l’article am\u00e9lior\u00e9 avec toutes les modifications SEO demand\u00e9es :\n\n\u00ab\u00a0`html\n\n\n\n \n \n Cr\u00e9er un Portfolio en HTML<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n \n <p><strong>Cr\u00e9er un Portfolio en HTML<\/strong> est une comp\u00e9tence essentielle pour les d\u00e9veloppeurs et designers souhaitant montrer leur travail en ligne. Comprendre comment structurer et styliser votre portfolio peut significativement am\u00e9liorer votre visibilit\u00e9 et attirer des opportunit\u00e9s professionnelles. Apprenons \u00e0 cr\u00e9er un portfolio en HTML avec ce guide complet, accompagn\u00e9 d’exemples concrets de code.<\/p>\n \n\n \n <h2 class=\"wp-block-heading\">Introduction \u00e0 la Cr\u00e9ation d’un Portfolio 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\/586680087?dnt=1&fullscreen=0&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 \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 \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>\n document.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>Un portfolio en HTML vous permet de cr\u00e9er une pr\u00e9sence en ligne personnalis\u00e9e et professionnelle. En utilisant des balises HTML de base et en appliquant du CSS pour le style, vous pouvez cr\u00e9er une page attrayante pour pr\u00e9senter vos projets. Commen\u00e7ons par la structure de base de votre portfolio.<\/p>\n \n\n \n <h3 class=\"wp-block-heading\">\u00c9tape 1 : Mise en Place de la Structure de Base<\/h3>\n \n\n \n <p>Commen\u00e7ons par cr\u00e9er une structure HTML de base. Cr\u00e9ez un fichier <code>index.html<\/code> et ajoutez-y les \u00e9l\u00e9ments suivants :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-html\">\n <code>\n <!DOCTYPE html>\n <html lang=\"fr\">\n <head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Mon Portfolio<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n <\/head>\n <body>\n <header>\n <h1>Bienvenue sur mon Portfolio<\/h1>\n <nav>\n <ul>\n <li><a href=\"#about\">\u00c0 propos<\/a><\/li>\n <li><a href=\"#projects\">Projets<\/a><\/li>\n <li><a href=\"#contact\">Contact<\/a><\/li>\n <\/ul>\n <\/nav>\n <\/header>\n <main>\n <section id=\"about\">\n <h2>\u00c0 propos de moi<\/h2>\n <p>Je suis un d\u00e9veloppeur passionn\u00e9 par la cr\u00e9ation de sites web modernes et interactifs.<\/p>\n <\/section>\n <section id=\"projects\">\n <h2>Mes Projets<\/h2>\n \n <\/section>\n <section id=\"contact\">\n <h2>Contactez-moi<\/h2>\n \n <\/section>\n <\/main>\n <footer>\n <p>© 2023 Mon Portfolio<\/p>\n <\/footer>\n <\/body>\n <\/html>\n <\/code>\n <\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">\u00c9tape 2 : Ajout du Style avec CSS<\/h3>\n \n\n \n <p>Pour rendre votre portfolio plus attrayant, ajoutez du style avec CSS. Cr\u00e9ez un fichier <code>styles.css<\/code> et d\u00e9finissez des styles de base :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\">\n <code>\n body {\n font-family: Arial, sans-serif;\n line-height: 1.6;\n margin: 0;\n padding: 0;\n }\n\n header {\n background: #333;\n color: #fff;\n padding: 1rem 0;\n text-align: center;\n }\n\n nav ul {\n list-style: none;\n padding: 0;\n }\n\n nav ul li {\n display: inline;\n margin: 0 1rem;\n }\n\n nav ul li a {\n color: #fff;\n text-decoration: none;\n }\n\n main {\n padding: 2rem;\n }\n\n section {\n margin-bottom: 2rem;\n }\n\n footer {\n background: #333;\n color: #fff;\n text-align: center;\n padding: 1rem 0;\n }\n <\/code>\n <\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">\u00c9tape 3 : Ajout des Projets<\/h3>\n \n\n \n <p>Cr\u00e9ez des cartes de projet pour afficher vos travaux. Ajoutez le code HTML suivant dans la section \u00ab\u00a0Projets\u00a0\u00bb de votre fichier <code>index.html<\/code> :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-html\">\n <code>\n <section id=\"projects\">\n <h2>Mes Projets<\/h2>\n <div class=\"project-card\">\n <h3>Projet 1<\/h3>\n <p>Description de mon premier projet.<\/p>\n <\/div>\n <div class=\"project-card\">\n <h3>Projet 2<\/h3>\n <p>Description de mon deuxi\u00e8me projet.<\/p>\n <\/div>\n <\/section>\n <\/code>\n <\/pre>\n \n\n \n <p>Et ajoutez les styles CSS correspondants dans votre fichier <code>styles.css<\/code> :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\">\n <code>\n .project-card {\n border: 1px solid #ddd;\n padding: 1rem;\n margin: 1rem 0;\n border-radius: 5px;\n }\n\n .project-card h3 {\n margin-top: 0;\n }\n <\/code>\n <\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">\u00c9tape 4 : Ajout d’un Formulaire de Contact<\/h3>\n \n\n \n <p>Permettez aux visiteurs de vous contacter en ajoutant un formulaire de contact. Ajoutez le code suivant dans la section \u00ab\u00a0Contact\u00a0\u00bb de votre fichier <code>index.html<\/code> :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-html\">\n <code>\n <section id=\"contact\">\n <h2>Contactez-moi<\/h2>\n <form action=\"https:\/\/example.com\/contact\" method=\"POST\">\n <label for=\"name\">Nom :<\/label>\n <input type=\"text\" id=\"name\" name=\"name\" required>\n <label for=\"email\">Email :<\/label>\n <input type=\"email\" id=\"email\" name=\"email\" required>\n <label for=\"message\">Message :<\/label>\n <textarea id=\"message\" name=\"message\" required><\/textarea>\n <button type=\"submit\">Envoyer<\/button>\n <\/form>\n <\/section>\n <\/code>\n <\/pre>\n \n\n \n <p>Ajoutez des styles pour le formulaire dans votre fichier <code>styles.css<\/code> :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\">\n <code>\n form {\n display: flex;\n flex-direction: column;\n }\n\n label {\n margin-top: 1rem;\n }\n\n input, textarea {\n padding: 0.5rem;\n margin-top: 0.5rem;\n border: 1px solid #ddd;\n border-radius: 5px;\n }\n\n button {\n margin-top: 1rem;\n padding: 0.5rem;\n border: none;\n background: #333;\n color: #fff;\n border-radius: 5px;\n cursor: pointer;\n }\n\n button:hover {\n background: #555;\n }\n <\/code>\n <\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s pour Am\u00e9liorer Votre Portfolio<\/h3>\n \n\n \n <p>Pour rendre votre portfolio encore plus impressionnant, vous pouvez ajouter des fonctionnalit\u00e9s avanc\u00e9es comme des animations CSS, des int\u00e9grations API, ou m\u00eame des projets interactifs. Voici quelques id\u00e9es :<\/p>\n \n\n \n <h4 class=\"wp-block-heading\">Ajout d’Animations CSS<\/h4>\n \n\n \n <p>Une animation simple pour les cartes de projet :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\">\n <code>\n .project-card:hover {\n transform: scale(1.05);\n transition: transform 0.3s ease-in-out;\n }\n <\/code>\n <\/pre>\n \n\n \n <h4 class=\"wp-block-heading\">Int\u00e9gration d’une API de R\u00e9seaux Sociaux<\/h4>\n \n\n \n <p>Pour afficher vos derniers tweets ou posts Instagram, vous pourriez int\u00e9grer une API de r\u00e9seaux sociaux. Par exemple, utilisez l’API Twitter pour afficher vos tweets r\u00e9cents :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-js\">\n <code>\n fetch('https:\/\/api.twitter.com\/2\/tweets?ids=your_tweet_ids', {\n headers: {\n 'Authorization': 'Bearer your_bearer_token'\n }\n })\n .then(response => response.json())\n .then(data => {\n const tweets = data.data;\n const tweetContainer = document.getElementById('tweets');\n tweets.forEach(tweet => {\n const tweetElement = document.createElement('div');\n tweetElement.className = 'tweet';\n tweetElement.textContent = tweet.text;\n tweetContainer.appendChild(tweetElement);\n });\n })\n .catch(error => console.error('Error fetching tweets:', error));\n <\/code>\n <\/pre>\n \n\n \n <h2 class=\"wp-block-heading\">Conclusion<\/h2>","protected":false},"excerpt":{"rendered":"<p>Voici l’article am\u00e9lior\u00e9 avec toutes les modifications SEO demand\u00e9es : \u00ab\u00a0`html Cr\u00e9er un Portfolio en HTML Cr\u00e9er un Portfolio en HTML est une comp\u00e9tence essentielle…<\/p>\n","protected":false},"author":2,"featured_media":2719,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5479","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\/5479","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=5479"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5479\/revisions"}],"predecessor-version":[{"id":5480,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5479\/revisions\/5480"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2719"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5479"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5479"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}