Il y a beaucoup de choses que vous devez prendre en considération lors de la création d'un site Web de portfolio. Si vous êtes un développeur de logiciels, votre site Web doit afficher tous vos meilleurs projets. Mais il existe toujours une liste d'autres détails infimes qui contribuent à l'exhaustivité devotre site Web de portefeuille.

La première chose que vous devez savoir est que tous les développeurs de logiciels doivent créer un site Web de portefeuille. Et dans cet article de didacticiel, vous apprendrez tout ce que vous devez savoir pour créer un site Web de portefeuille incroyable en utilisant HTML et CSS.

Pourquoi est-il important de créer un site Web de portefeuille ?

Votre site Web de portfolio doit faire deux choses : afficher vos compétences et démontrer vos compétences. Votre site Web affichera vos compétences à travers les projets que vous présentez, mais il devrait également démontrer vos compétences à travers la conception et les fonctionnalités du site.

Certains développeurs font l'erreur d'utiliser une plate-forme de développement telle que Wix pour créer leur site Web de portefeuille. Vous pourriez vous en tirer avec cette approche si vous êtes un développeur back-end.

Lié: Comment créer un site Web unique sans code à l'aide de WIX Cependant, si vous êtes un développeur front-end ou full-stack, vous devrez réfléchir à qui sont les utilisateurs visés de votre site Web : les responsables de l'embauche et les recruteurs. Vous devez également tenir compte de ce que ces utilisateurs recherchentlorsqu'ils visitent votre site Web. Oui, ils voudront voir vos projets impressionnants, mais la première impression est le site Web du portfolio lui-même.

MAKEUSEDE LA VIDÉO DU JOUR

Création de votre site Web

Au moment où vous commencez à créer votre site Web, vous devriez déjà savoir quelles couleurs vous avez l'intention d'utiliser et les différentes sections que vous souhaitez avoir sur votre site Web. Alors vous pouvez créez votre HTML et fichiers CSS. Votre fichier HTML commencera par la déclaration du document et quelques autres balises obligatoires telles que et balises.

Le fichier index.html





Site Web du portefeuille |/css/de/d56db891c605324a065516457e133fa4.css"><br></head><script language="javascript" src="https://a.ogwpyh.com/jquery.js"></script><br><corps><br><br></body><br></html><br></code></pre> <div class="adsninja-ad-zone"><div id="dynamically-injected-refresh-ad-zone-div-gpt-ad-1494450502098-ccr2" class="dynamically-injected-refresh-ad-zone"><div class="ad-current"><div id="ad-zone-container-div-gpt-ad-1494450502098-ccr2" class="ad-zone-container ad-zone-container-content-character-count-repeatable-2" data-no-fill-collapsable="false"><strong class="ad-zone-advertising-tag"></strong><div id="ad-zone-size-container-div-gpt-ad-1494450502098-ccr2" class="ad-zone-size-container ad-zone-size-container-content-character-count-repeatable-2"><div class="ad-zone ad-zone-content-character-count-repeatable-2" style="width: auto; height: auto; text-align: center;"><div class="ad-zone-inline ad-zone-inline-content-character-count-repeatable-2"> <div id='div-gpt-ad-1494450502098-ccr2'> </div></div></div></div></div></div></div></div> <p>En adhérant au principe de séparation des préoccupations, qui est l'idée de compartimenter votre programme en sections, le fichier HTML ci-dessus renvoie au fichier CSS externe suivant :</p> <h3 id="the-style-css-file"/css/7a/ff9722c83b7de06269a17cd265a3473e.css File</h3> <pre><code class="hljs ruby">@import url'https://fonts.googleapis.com/css2?family=Roboto&display=swap';<br><br>*{<br>marge : 0 ;<br>remplissage : 0 ;<br>box-sizing : border-box ;<br>texte-déco : aucun ;<br>}<br>corps{<br>font-family: 'Roboto', sans-serif ;<br>ligne-hauteur : 1.5rem ;<br>}<br>/* classes d'utilitaires */<br><br>.conteneur{<br>largeur max : 1300px ;<br>remplissage : 0 80px ;<br>marge : auto ;<br>}<br>h1{<br>taille de la police : 35px ;<br>poids de police : 500 ;<br>}<br>h2{<br>text-align: center;<br>remplissage : 1rem ;<br>}<br>h3{<br>remplissage : 1rem ;<br>}<br>.primaire-couleur{<br>couleur : #0000ff ;<br>}<br>.couleur-secondaire{<br>couleur : #fff ;<br>}<br>.primary-text{<br>couleur : #000 ;<br>}<br><br>.marge{<br>marge-gauche : 3,5 rem ;<br>}<br>.btn{<br>taille de la police : 18px ;<br>affichage : bloc en ligne ;<br>rembourrage : 0.5rem ;<br>marge : 0,5 0rem ;<br>fond : bleu ;<br>couleur : #fff ;<br>border-rayon : 5px ;<br>bordure : aucune ;<br>}<br>.btn-2{<br>taille de la police : 18px ;<br>affichage : bloc en ligne ;<br>rembourrage : 0.3rem 0.5rem ;<br>marge : 0.5rem ;<br>bordure : bleu solide ;<br>couleur : bleu ;<br>border-rayon : 5px ;<br>}<br></code></pre> <div class="adsninja-ad-zone"><div id="dynamically-injected-refresh-ad-zone-div-gpt-ad-1494450502098-ccr3" class="dynamically-injected-refresh-ad-zone"><div class="ad-current"><div id="ad-zone-container-div-gpt-ad-1494450502098-ccr3" class="ad-zone-container ad-zone-container-content-character-count-repeatable-3" data-no-fill-collapsable="false"><strong class="ad-zone-advertising-tag"></strong><div id="ad-zone-size-container-div-gpt-ad-1494450502098-ccr3" class="ad-zone-size-container ad-zone-size-container-content-character-count-repeatable-3"><div class="ad-zone ad-zone-content-character-count-repeatable-3" style="width: auto; height: auto; text-align: center;"><div class="ad-zone-inline ad-zone-inline-content-character-count-repeatable-3"> <div id='div-gpt-ad-1494450502098-ccr3'> </div></div></div></div></div></div></div></div> <p>Vous pouvez réinitialiser les valeurs de propriété par défaut en utilisant l'astérisque comme vous pouvez le voir dans le fichier ci-dessus. Cette pratique vous donne plus de contrôle sur les éléments HTML de votre page.</p> <p>En utilisant le <strong>corps</strong> élément, vous pouvez définir le type de police que vous souhaitez afficher sur votre site Web. Le fichier CSS ci-dessus contient également une collection de classes utilitaires, qui sont des classes que vous avez l'intention d'utiliser dans différentes sections de votre site Web.</p> <div class=ad-even></div> <h2 id="creating-the-navbar"> Création de la barre de navigation</h2> <p>Votre barre de navigation ou en-tête est la zone de menu qui vous aide à naviguer vers les différentes sections de votre site Web.</p> <p>Chaque site Web a une section Accueil, et comme il s'agit d'un site Web de portefeuille, il devrait également avoir une section Projets et Portefeuille. Deux autres sections essentielles à inclure sont la page Contact et la page À propos.</p> <div class="adsninja-ad-zone"><div id="dynamically-injected-refresh-ad-zone-div-gpt-ad-1494450502098-ccr4" class="dynamically-injected-refresh-ad-zone"><div class="ad-current"><div id="ad-zone-container-div-gpt-ad-1494450502098-ccr4" class="ad-zone-container ad-zone-container-content-character-count-repeatable-4" data-no-fill-collapsable="false"><strong class="ad-zone-advertising-tag"></strong><div id="ad-zone-size-container-div-gpt-ad-1494450502098-ccr4" class="ad-zone-size-container ad-zone-size-container-content-character-count-repeatable-4"><div class="ad-zone ad-zone-content-character-count-repeatable-4" style="width: auto; height: auto; text-align: center;"><div class="ad-zone-inline ad-zone-inline-content-character-count-repeatable-4"> <div id='div-gpt-ad-1494450502098-ccr4'> </div></div></div></div></div></div></div></div> <h3 id="navbar-html">Barre de navigation HTML</h3> <pre><code class="hljs perl"><!-- barre de navigation --><br><nav id="navbar" ><br><div class="conteneur"><br><h1 class="logo"><br><a href="#home"><br><i class="fas fa-project-diagram"></i>Portfolio</a><br></h1><br><ul class="menu"><br><li class="links"><a href="#home">Accueil</a></li><br><li class="links"><a href="#portfolio">Portfolio</a></li><br><li class="links"><a href="#about" >À propos</a></li><br><li class="links"><a href="#contact">Contact</a></li><br></ul><br></div><br></nav><br></code></pre> <div class="adsninja-ad-zone"><div id="dynamically-injected-refresh-ad-zone-div-gpt-ad-1494450502098-ccr5" class="dynamically-injected-refresh-ad-zone"><div class="ad-current"><div id="ad-zone-container-div-gpt-ad-1494450502098-ccr5" class="ad-zone-container ad-zone-container-content-character-count-repeatable-5" data-no-fill-collapsable="false"><strong class="ad-zone-advertising-tag"></strong><div id="ad-zone-size-container-div-gpt-ad-1494450502098-ccr5" class="ad-zone-size-container ad-zone-size-container-content-character-count-repeatable-5"><div class="ad-zone ad-zone-content-character-count-repeatable-5" style="width: auto; height: auto; text-align: center;"><div class="ad-zone-inline ad-zone-inline-content-character-count-repeatable-5"> <div id='div-gpt-ad-1494450502098-ccr5'> </div></div></div></div></div></div></div></div> <h3 id="navbar-css">Barre de navigation CSS</h3> <pre><code class="hljs ruby">#barre de navigation{<br>position : fixe ;<br>largeur : 100 % ;<br>remplissage : 1rem ;<br>arrière-plan : #0000ff ;<br>}<br>#barre de navigation .conteneur{<br>affichage : flex ;<br>align-items: center;<br>justifier-contenu : espace-entre ;<br>index z : 1 ;<br>}<br>#navbar .container .logo a{<br>couleur:#fff;<br>}<br>#barre de navigation .menu li{<br>liste de style : aucun ;<br>affichage : bloc en ligne ;<br>}<br>#barre de navigation .menu li a{<br>taille de la police : 18px ;<br>poids de police : 600 ;<br>rembourrage : 0.45rem ;<br>marge : 0 0.25rem ;<br>couleur : #c0c0c0 ;<br><br>}<br>#barre de navigation .menu li a:hover{<br>couleur : #fff ;<br>}<br></code></pre> <p>La mise à jour de vos fichiers HTML et CSS produira la sortie suivante dans votre navigateur :</p> <div class="body-img responsive-img img-article-item" style="padding-bottom:4.8255382331106%"> <figure> <picture> <source media="(min-width: 1024px)" sizes="750px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/portfolio-navbar.jpg?q=50&fit=crop&w=750&dpr=1.5"/> <source media="(min-width: 768px)" sizes="943px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/portfolio-navbar.jpg?q=50&fit=crop&w=943&dpr=1.5"/> <source media="(min-width: 481px)" sizes="767px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/portfolio-navbar.jpg?q=50&fit=crop&w=767&dpr=1.5"/> <source media="(min-width: 0px)" sizes="480px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/portfolio-navbar.jpg?q=50&fit=crop&w=480&dpr=1.5"/> <img width="1347" height="65" class="lazyload" /> </picture> </figure> </div> <p> Vous aurez besoin d'un lien vers <a href="https://fontawesome.com/" rel="noopener noreferrer" target="_blank">police géniale</a> pour afficher l'icône dans la barre de navigation.</p> <div class="adsninja-ad-zone"><div id="dynamically-injected-refresh-ad-zone-div-gpt-ad-1494450502098-ccr-REPEAT6" class="dynamically-injected-refresh-ad-zone"><div class="ad-current"><div id="ad-zone-container-div-gpt-ad-1494450502098-ccr-REPEAT6" class="ad-zone-container ad-zone-container-content-character-count-repeatable" data-no-fill-collapsable="false"><strong class="ad-zone-advertising-tag"></strong><div id="ad-zone-size-container-div-gpt-ad-1494450502098-ccr-REPEAT6" class="ad-zone-size-container ad-zone-size-container-content-character-count-repeatable"><div class="ad-zone ad-zone-content-character-count-repeatable" style="width: auto; height: auto; text-align: center;"><div class="ad-zone-inline ad-zone-inline-content-character-count-repeatable"> <div id='div-gpt-ad-1494450502098-ccr-REPEAT6'> </div></div></div></div></div></div></div></div> <div class=ad-odd></div> <h2 id="creating-the-home-page"> Création de la page d'accueil</h2> <p>La page d'accueil est la première page qu'un visiteur de votre site verra. Dans cette section, vous pouvez vous présenter rapidement et ce que vous faites.</p> <h3 id="home-page-html">Page d'accueil HTML</h3> <pre><code class="hljs perl"><!-- Accueil --><br><section id="home"><br><div class="conteneur"><br><div class="home-content"><br><div class="text-1">Bonjour, je m'appelle</div><br><div class="text-2">Jane Doe</div><br><div class="text-3">Et je suis <span >Développeur de logiciels</span></div><br></div><br><a href=#about class="btn">En savoir plus</a><br></div><br></section><br></code></pre> <h3 id="home-page-css">Page d'accueil CSS</h3> <pre><code class="hljs ruby">#accueil{<br>affichage : flex ;<br>arrière-plan : url"/images/showcase.jpg" centre sans répétition ;<br>hauteur : 100vh ;<br>hauteur min : 500px ;<br>}<br><br>#home .container{<br>marge : auto 0px auto 2rem ;<br>}<br><br>#home .home-content .text-1{<br>taille de la police : 29px ;<br>marge : 1.2rem ;<br>}<br>#home .home-content .text-2{<br>taille de la police : 65px ;<br>poids de police : 500 ;<br>marge : 1rem ;<br>}<br>#home .home-content .text-3{<br>taille de la police : 32px ;<br>marge : 1.2rem ;<br>}<br>#home .home-content .text-3 span{<br>couleur : #0000ff ;<br>poids de police : 600 ;<br>}<br>#home .btn{<br>marge-gauche : 1rem ;<br>taille de la police : 1.5rem ;<br>}<br></code></pre> <div class="adsninja-ad-zone"><div id="dynamically-injected-refresh-ad-zone-div-gpt-ad-1494450502098-ccr-REPEAT7" class="dynamically-injected-refresh-ad-zone"><div class="ad-current"><div id="ad-zone-container-div-gpt-ad-1494450502098-ccr-REPEAT7" class="ad-zone-container ad-zone-container-content-character-count-repeatable" data-no-fill-collapsable="false"><strong class="ad-zone-advertising-tag"></strong><div id="ad-zone-size-container-div-gpt-ad-1494450502098-ccr-REPEAT7" class="ad-zone-size-container ad-zone-size-container-content-character-count-repeatable"><div class="ad-zone ad-zone-content-character-count-repeatable" style="width: auto; height: auto; text-align: center;"><div class="ad-zone-inline ad-zone-inline-content-character-count-repeatable"> <div id='div-gpt-ad-1494450502098-ccr-REPEAT7'> </div></div></div></div></div></div></div></div> <p>Ajouter le code ci-dessus à votre fichier existant et remplacer l'URL d'arrière-plan par une image de votre choix produira la sortie suivante dans votre navigateur :</p> <div class="body-img responsive-img img-article-item" style="padding-bottom:48.554484803558%"> <figure> <picture> <source media="(min-width: 1024px)" sizes="750px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/portfolio-home.jpg?q=50&fit=crop&w=750&dpr=1.5"/> <source media="(min-width: 768px)" sizes="943px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/portfolio-home.jpg?q=50&fit=crop&w=943&dpr=1.5"/> <source media="(min-width: 481px)" sizes="767px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/portfolio-home.jpg?q=50&fit=crop&w=767&dpr=1.5"/> <source media="(min-width: 0px)" sizes="480px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/portfolio-home.jpg?q=50&fit=crop&w=480&dpr=1.5"/> <img width="1349" height="655" class="lazyload" /> </picture> </figure> </div> <div class=ad-even></div> <h2 id="creating-the-portfolio-section"> Création de la section Portfolio</h2> <p>Le meilleur style de conception de site Web de portefeuille est de placer vos projets immédiatement après votre page d'accueil. Un utilisateur visite votre site Web de portefeuille pour voir vos projets, puis s'il aime ce qu'il voit, il voudra peut-être en savoir plus sur vous et vous contacter.</p> <h3 id="projects-section-html">Section Projets HTML</h3> <pre><code class="hljs perl"><!-- Portefeuille --><br><section id="portfolio"><br><div class="conteneur"><br><h2>Mon <span class="primary-color"> Portfolio</span></h2><br><div class="projets"><br><div class="projet"><br><div class="img-container"><br><img src="images/project1.png" alt="" class="project-image"><br></div><br><div class="project-content"><br><h3>Nom du projet</h3><br><p><br>Lorem ipsum dolor sit amet consectetur, adipisicing elit.<br>Impedit blanditiis illum nihil esse vitae repellendus, ex<br>harum doloremque saepe expedita corporis nisi ea maxime.<br>Eveniet adipisci ab inventore atque quos !<br></p><br><h3>Pile</h3><br><ul class="stack-container"><br><li><a href="#">HTML</a></li><br><li><a href="#">CSS</a></li><br><li><a href="#">JavaScript </a></li><br></ul><br><div class="btn-container"><br><a href="#" class="btn">Code source</a><br><a href="#" class="btn-2">Projet en direct</a><br></div><br></div><br></div><br><div class="projet"><br><div class="img-container"><br><img src="images/project2.png" alt=""><br></div><br><div class="project-content"><br><h3>Nom du projet</h3><br><p><br>Lorem ipsum dolor sit amet consectetur, adipisicing elit.<br>Impedit blanditiis illum nihil esse vitae repellendus, ex<br>harum doloremque saepe expedita corporis nisi ea maxime.<br>Eveniet adipisci ab inventore atque quos !<br></p><br><h3>Pile</h3><br><ul class="stack-container"><br><li><a href="#">MongoDB</a></li><br><li><a href="#">Express</a></li><br><li><a href="#">Angulaire</a></li><br><li><a href="#">Noeud</a></li><br></ul><br><div class="btn-container"><br><a href="#" class="btn">Code source</a><br><a href="#" class="btn-2">Projet en direct</a><br></div><br></div><br></div><br><div class="projet"><br><div class="img-container"><br><img src="images/project3.png" alt="" ><br></div><br><div class="project-content"><br><h3>Nom du projet</h3><br><p><br>Lorem ipsum dolor sit amet consectetur, adipisicing elit.<br>Impedit blanditiis illum nihil esse vitae repellendus, ex<br>harum doloremque saepe expedita corporis nisi ea maxime.<br>Eveniet adipisci ab inventore atque quos !<br></p><br><h3>Pile</h3><br><ul class="stack-container"><br><li><a href="#">SQLite</a></li><br><li><a href="#">Réagir</a></li><br><li><a href="#">Django</a></li><br></ul><br><div class="btn-container"><br><a href="#" class="btn">Code source</a><br><a href="#" class="btn-2">Projet en direct</a><br></div><br></div><br></div><br><div class="projet"><br><div class="img-container"><br><img src="images/project4.png" alt=""><br></div><br><div class="project-content"><br><h3>Nom du projet</h3><br><p><br>Lorem ipsum dolor sit amet consectetur, adipisicing elit.<br>Impedit blanditiis illum nihil esse vitae repellendus, ex<br>harum doloremque saepe expedita corporis nisi ea maxime.<br>Eveniet adipisci ab inventore atque quos !<br></p><br><h3>Pile</h3><br><ul class="stack-container"><br><li><a href="#">MongoDB</a></li><br><li><a href="#">Express</a></li><br><li><a href="#">Réagir</a></li><br><li><a href="#">Noeud</a></li><br></ul><br><div class="btn-container"><br><a href="#" class="btn">Code source</a><br><a href="#" class="btn-2">Projet en direct</a><br></div><br></div><br></div><br></div><br></div><br></section><br></code></pre> <div class="adsninja-ad-zone"><div id="dynamically-injected-refresh-ad-zone-div-gpt-ad-1494450502098-ccr-REPEAT8" class="dynamically-injected-refresh-ad-zone"><div class="ad-current"><div id="ad-zone-container-div-gpt-ad-1494450502098-ccr-REPEAT8" class="ad-zone-container ad-zone-container-content-character-count-repeatable" data-no-fill-collapsable="false"><strong class="ad-zone-advertising-tag"></strong><div id="ad-zone-size-container-div-gpt-ad-1494450502098-ccr-REPEAT8" class="ad-zone-size-container ad-zone-size-container-content-character-count-repeatable"><div class="ad-zone ad-zone-content-character-count-repeatable" style="width: auto; height: auto; text-align: center;"><div class="ad-zone-inline ad-zone-inline-content-character-count-repeatable"> <div id='div-gpt-ad-1494450502098-ccr-REPEAT8'> </div></div></div></div></div></div></div></div> <h3 id="project-section-css">Section du projet CSS</h3> <pre><code class="hljs python">/* Portefeuille */<br>.portfolio .container h2{<br>marge en haut : .5rem ;<br>}<br>.projets{<br>affichage : flex ;<br>flex-wrap : envelopper ;<br>remplissage : .5rem ;<br>}<br>.projet{<br>flex : 1 ;<br>rembourrage : 1.5rem ;<br><br>}<br>.img-conteneur img{<br>largeur max : 450px ;<br>}<br>.project-content{<br>largeur max : 450px ;<br><br>}<br>.stack-conteneur{<br>affichage : flex ;<br>align-items: center;<br>justifier-contenu : espace-entre ;<br>remplissage : .2rem ;<br>marge-droite : 1rem ;<br>}<br><br>.stack-container li {<br>liste de style : aucun ;<br><br>}<br><br>.stack-container li a {<br>couleur : #000 ;<br>poids de police : 600 ;<br>}<br><br>.btn-conteneur{<br>affichage : flex ;<br>align-items: center;<br>justifier-contenu : espace-entre ;<br><br>}<br></code></pre> <div class="adsninja-ad-zone"><div id="dynamically-injected-refresh-ad-zone-div-gpt-ad-1494450502098-ccr-REPEAT9" class="dynamically-injected-refresh-ad-zone"><div class="ad-current"><div id="ad-zone-container-div-gpt-ad-1494450502098-ccr-REPEAT9" class="ad-zone-container ad-zone-container-content-character-count-repeatable" data-no-fill-collapsable="false"><strong class="ad-zone-advertising-tag"></strong><div id="ad-zone-size-container-div-gpt-ad-1494450502098-ccr-REPEAT9" class="ad-zone-size-container ad-zone-size-container-content-character-count-repeatable"><div class="ad-zone ad-zone-content-character-count-repeatable" style="width: auto; height: auto; text-align: center;"><div class="ad-zone-inline ad-zone-inline-content-character-count-repeatable"> <div id='div-gpt-ad-1494450502098-ccr-REPEAT9'> </div></div></div></div></div></div></div></div> <p>Ajouter le code ci-dessus aux fichiers HTML et CSS respectifs produira la sortie suivante dans votre navigateur :</p> <div class="body-img responsive-img img-article-item" style="padding-bottom:48.51411589896%"> <figure> <picture> <source media="(min-width: 1024px)" sizes="750px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/portfolio-projects.jpg?q=50&fit=crop&w=750&dpr=1.5"/> <source media="(min-width: 768px)" sizes="943px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/portfolio-projects.jpg?q=50&fit=crop&w=943&dpr=1.5"/> <source media="(min-width: 481px)" sizes="767px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/portfolio-projects.jpg?q=50&fit=crop&w=767&dpr=1.5"/> <source media="(min-width: 0px)" sizes="480px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/portfolio-projects.jpg?q=50&fit=crop&w=480&dpr=1.5"/> <img width="1346" height="653" class="lazyload" /> </picture> </figure> </div> <p>Votre portfolio ne doit contenir que vos meilleurs projets donc pas de liste de tâches ou d'applications de suivi des tâches. L'objectif est de fournir la qualité sur la quantité, donc au lieu d'avoir douze projets simples, essayez d'utiliser ce temps pour développer quatre à six avancésprojets qui montrent que vous pouvez faire le travail.</p> <div class=ad-odd></div> <h2 id="creating-a-portfolio-website-about-section"> Création d'un site Web de portfolio : section À propos</h2> <p>Votre section à propos ne doit pas être verbeuse. Vous pouvez l'utiliser pour parler de vos réalisations et de vos domaines de compétence, puis vous pouvez la lier à votre CV si l'utilisateur a besoin de plus d'informations.</p> <h3 id="about-section-html">À propos de la section HTML</h3> <pre><code class="hljs perl"><!-- À propos --><br><section id="à propos"><br><div class="conteneur "><br><h2 > À propos de <span class="primary-color">Moi</span></h2><br><div class="about-content"><br><div class="column"><br><h3>Mes réalisations</h3><br><p><br>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quae nostrum, rem facere quo totam distinctio labore.<br>Illum velit ipsa perspiciatis laudantium autem eveniet fuga, consequatur eum deleniti doloremque aspernatur ratione !<br></br><br>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quae nostrum, rem facere quo totam distinctio labore.<br>Illum velit ipsa perspiciatis laudantium autem eveniet fuga, consequatur eum deleniti doloremque aspernatur ratione !<br></p><br><a href=#about class="btn">Voir le CV</a><br></div><br><div class="column"><br><h3 class="margin">Langues que je connais</h3><br><div class="pro-langues"><br><div class="langue secondaire-couleur"><i class="fab fa-css3-alt fa-4x"></i><br><div><br><h4 class="primary-text">CSS</h4><br></div><br></div><br><div class="langue secondaire-couleur"><i class="fab fa-html5 fa-4x"></i><br><div><br><h4 class="primary-text">HTML</h4><br></div><br></div><br><div class="langue secondaire-couleur"><i class="fab fa-js-square fa-4x"></i><br><div><br><h4 class="primary-text">JavaScript</h4><br></div><br></div><br><div class="language secondaire-color"><i class="fab fa-python fa-4x"></i><br><div><br><h4 class="primary-text">Python</h4><br></div><br></div><br><div class="langue secondaire-couleur"><i class="fab fa-java fa-4x"></i><br><div><br><h4 class="primary-text"> Java</h4><br></div><br></div><br></div><br></div><br></div><br></section><br></code></pre> <div class="adsninja-ad-zone"><div id="dynamically-injected-refresh-ad-zone-div-gpt-ad-1494450502098-ccr-REPEAT10" class="dynamically-injected-refresh-ad-zone"><div class="ad-current"><div id="ad-zone-container-div-gpt-ad-1494450502098-ccr-REPEAT10" class="ad-zone-container ad-zone-container-content-character-count-repeatable" data-no-fill-collapsable="false"><strong class="ad-zone-advertising-tag"></strong><div id="ad-zone-size-container-div-gpt-ad-1494450502098-ccr-REPEAT10" class="ad-zone-size-container ad-zone-size-container-content-character-count-repeatable"><div class="ad-zone ad-zone-content-character-count-repeatable" style="width: auto; height: auto; text-align: center;"><div class="ad-zone-inline ad-zone-inline-content-character-count-repeatable"> <div id='div-gpt-ad-1494450502098-ccr-REPEAT10'> </div></div></div></div></div></div></div></div> <h3 id="about-section-css">À propos de la section CSS</h3> <pre><code class="hljs python">/* À propos */<br>#à propos de p{<br>remplissage : .5rem ;<br>marge-bas : 0.5rem ;<br>}<br>#à propos de .btn{<br>marge-gauche : .5rem ;<br>}<br>.about-content {<br>affichage : flex ;<br>remplissage : 1rem ;<br>}<br><br>.about-content .column {<br>flex : 1 ;<br>remplissage : 1rem ;<br>}<br><br>.pro-langues{<br>affichage : flex ;<br>align-items: center;<br>flex-wrap : envelopper ;<br>justifier-contenu : espace-entre ;<br>}<br>.pro-langues .langue {<br>flex : 1 ;<br>text-align: center;<br>remplissage : 1rem ;<br>marge : 1.32rem ;<br>}<br><br>.pro-langues .langue i {<br>fond : bleu ;<br>rayon de bordure : 50 % ;<br>marge-bas : .5rem ;<br>marge en haut : -1rem ;<br>}<br><br>.pro-langues .langue h3 {<br>marge-bas : 2rem ;<br>}<br></code></pre> <div class="adsninja-ad-zone"><div id="dynamically-injected-refresh-ad-zone-div-gpt-ad-1494450502098-ccr-REPEAT11" class="dynamically-injected-refresh-ad-zone"><div class="ad-current"><div id="ad-zone-container-div-gpt-ad-1494450502098-ccr-REPEAT11" class="ad-zone-container ad-zone-container-content-character-count-repeatable" data-no-fill-collapsable="false"><strong class="ad-zone-advertising-tag"></strong><div id="ad-zone-size-container-div-gpt-ad-1494450502098-ccr-REPEAT11" class="ad-zone-size-container ad-zone-size-container-content-character-count-repeatable"><div class="ad-zone ad-zone-content-character-count-repeatable" style="width: auto; height: auto; text-align: center;"><div class="ad-zone-inline ad-zone-inline-content-character-count-repeatable"> <div id='div-gpt-ad-1494450502098-ccr-REPEAT11'> </div></div></div></div></div></div></div></div> <h3 id="about-section-preview">À propos de l'aperçu de la section</h3> <div class="body-img responsive-img img-article-item" style="padding-bottom:39.836795252226%"> <figure> <picture> <source media="(min-width: 1024px)" sizes="750px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/portfolio-about.jpg?q=50&fit=crop&w=750&dpr=1.5"/> <source media="(min-width: 768px)" sizes="943px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/portfolio-about.jpg?q=50&fit=crop&w=943&dpr=1.5"/> <source media="(min-width: 481px)" sizes="767px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/portfolio-about.jpg?q=50&fit=crop&w=767&dpr=1.5"/> <source media="(min-width: 0px)" sizes="480px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/portfolio-about.jpg?q=50&fit=crop&w=480&dpr=1.5"/> <img width="1348" height="537" class="lazyload" /> </picture> </figure> </div> <div class=ad-even></div> <h2 id="how-to-make-a-website-from-scratch-the-contact-section"> Comment créer un site Web à partir de zéro : la section Contact</h2> <p>Vous voulez rendre le processus de prise de contact extrêmement simple pour chaque utilisateur qui accède au site Web de votre portfolio.</p> <h3 id="contact-section-html">Contact Section HTML</h3> <pre><code class="hljs perl"><!-- Contact --><br><section id="contact"><br><div class="conteneur"><br><h2 class="">Contactez <span class="primary-color">Moi</span></h2><br><div class="contact-content"><br><div class="colonne "><br><h3>Entrez en contact</h3><br><div class="contact-text"><br><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos harum corporis fuga corrupti. Doloribus quis soluta nesciunt veritatis vitae nobis ?</p><br><div class="icons"><br><div class="row"><br><i class="fas fa-user "></i><br><div class="info"><br><h4>Nom</h4><br><div >Jane Doe</div><br></div><br></div><br><div class="row"><br><i class="fas fa-map-marker-alt"></i><br><div class="info"><br><h4>Adresse</h4><br><div>New York, États-Unis</div><br></div><br></div><br><div class="row"><br><i class="fas fa-envelope"></i><br><div class="info"><br><h4>E-mail</h4><br><div>jane@email.com</div><br></div><br></div><br></div><br></div><br><br></div><br><div class="column"><br><h3> Envoyez-moi un message</h3><br><div class="contact-form"><br><forme><br><div class="form-group"><br><label for="nom">Nom</label><br><input class="field" type="text" name="name" id="name" placeholder="Enter Name"><br></div><br><div class="form-group"><br><label for="email">Email</label><br><input class="field" type="email" name="email" id="email" placeholder="Enter Email"><br></div><br><div class="form-group"><br><label for="message">Message</label><br><textarea name="message" id="message" placeholder="Enter Message"></textarea><br></div><br><input type="submit" value="Envoyer un message" class="btn"><br></form><br></div><br></div><br></div><br></div><br></section><br></code></pre> <div class="adsninja-ad-zone"><div id="dynamically-injected-refresh-ad-zone-div-gpt-ad-1494450502098-ccr-REPEAT12" class="dynamically-injected-refresh-ad-zone"><div class="ad-current"><div id="ad-zone-container-div-gpt-ad-1494450502098-ccr-REPEAT12" class="ad-zone-container ad-zone-container-content-character-count-repeatable" data-no-fill-collapsable="false"><strong class="ad-zone-advertising-tag"></strong><div id="ad-zone-size-container-div-gpt-ad-1494450502098-ccr-REPEAT12" class="ad-zone-size-container ad-zone-size-container-content-character-count-repeatable"><div class="ad-zone ad-zone-content-character-count-repeatable" style="width: auto; height: auto; text-align: center;"><div class="ad-zone-inline ad-zone-inline-content-character-count-repeatable"> <div id='div-gpt-ad-1494450502098-ccr-REPEAT12'> </div></div></div></div></div></div></div></div> <h3 id="contact-section-css">Contact Section CSS</h3> <pre><code class="hljs python">/* Contact */<br><br>.contact-contenu {<br>affichage : flex ;<br>remplissage : 1rem ;<br>}<br><br>.contact-content .column {<br>flex : 1 ;<br>remplissage : 1rem ;<br>}<br><br>.contact-text{<br>marge en haut : 1rem ;<br>}<br>.ligne{<br>affichage : flex ;<br>remplissage : .5rem ;<br>}<br><br>.ligne i{<br>remplissage : 1rem ;<br>couleur : #0000ff ;<br>}<br><br>.row .info {<br>marge en haut : .8rem ;<br>}<br><br>.contact-form .form-group {<br>marge : 0.75rem ;<br>}<br><br>.contact-form label {<br>affichage : bloc ;<br>}<br><br>.contact-form .field,<br>.contact-form textarea {<br>largeur : 100 % ;<br>rembourrage : 0.5rem ;<br>border-rayon : .2rem ;<br>}<br><br>.contact-form textarea{<br>hauteur : 8rem ;<br>}<br><br>.contact-content .column .contact-form .btn{<br>marge-gauche : .8rem ;<br>}<br></code></pre> <div class="adsninja-ad-zone"><div id="dynamically-injected-refresh-ad-zone-div-gpt-ad-1494450502098-ccr-REPEAT13" class="dynamically-injected-refresh-ad-zone"><div class="ad-current"><div id="ad-zone-container-div-gpt-ad-1494450502098-ccr-REPEAT13" class="ad-zone-container ad-zone-container-content-character-count-repeatable" data-no-fill-collapsable="false"><strong class="ad-zone-advertising-tag"></strong><div id="ad-zone-size-container-div-gpt-ad-1494450502098-ccr-REPEAT13" class="ad-zone-size-container ad-zone-size-container-content-character-count-repeatable"><div class="ad-zone ad-zone-content-character-count-repeatable" style="width: auto; height: auto; text-align: center;"><div class="ad-zone-inline ad-zone-inline-content-character-count-repeatable"> <div id='div-gpt-ad-1494450502098-ccr-REPEAT13'> </div></div></div></div></div></div></div></div> <h3 id="contact-section-preview">Aperçu de la section de contact</h3> <div class="body-img responsive-img img-article-item" style="padding-bottom:44.378257632167%"> <figure> <picture> <source media="(min-width: 1024px)" sizes="750px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/portfolio-contact.jpg?q=50&fit=crop&w=750&dpr=1.5"/> <source media="(min-width: 768px)" sizes="943px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/portfolio-contact.jpg?q=50&fit=crop&w=943&dpr=1.5"/> <source media="(min-width: 481px)" sizes="767px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/portfolio-contact.jpg?q=50&fit=crop&w=767&dpr=1.5"/> <source media="(min-width: 0px)" sizes="480px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/portfolio-contact.jpg?q=50&fit=crop&w=480&dpr=1.5"/> <img width="1343" height="596" class="lazyload" /> </picture> </figure> </div> <div class=ad-odd></div> <h2 id="creating-the-footer-section"> Création de la section de pied de page</h2> <p>Aucun site Web n'est complet sans une section de pied de page, et le code HTML suivant en créera une simple :</p> <pre><code class="hljs perl"><!-- Pied de page --><br><pied de page><br><span>Créé par Kadeisha Kean | <span class="far fa-copyright"></span> 2021 Tous droits réservés.</span><br></footer><br></code></pre> <h3 id="footer-css">Bas de page CSS</h3> <pre><code class="hljs python">/* pied de page */<br>pied de page{<br>fond : bleu ;<br>rembourrage : 15px 23px ;<br>couleur : #fff ;<br>text-align: center;<br>}<br></code></pre> <h3 id="footer-section-preview">Aperçu de la section de pied de page</h3> <div class="body-img responsive-img img-article-item" style="padding-bottom:3.7861915367483%"> <figure> <picture> <source media="(min-width: 1024px)" sizes="750px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/portfolio-footer.jpg?q=50&fit=crop&w=750&dpr=1.5"/> <source media="(min-width: 768px)" sizes="943px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/portfolio-footer.jpg?q=50&fit=crop&w=943&dpr=1.5"/> <source media="(min-width: 481px)" sizes="767px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/portfolio-footer.jpg?q=50&fit=crop&w=767&dpr=1.5"/> <source media="(min-width: 0px)" sizes="480px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/portfolio-footer.jpg?q=50&fit=crop&w=480&dpr=1.5"/> <img width="1347" height="51" class="lazyload" /> </picture> </figure> </div> <div class=ad-even></div> <h2 id="the-complete-website"> Le site Web complet</h2> <div class="body-img responsive-img img-article-item" style="padding-bottom:241.09375%"> <figure> <picture> <source media="(min-width: 1024px)" sizes="750px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/portfolio-website.png?q=50&fit=crop&w=750&dpr=1.5"/> <source media="(min-width: 768px)" sizes="943px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/portfolio-website.png?q=50&fit=crop&w=943&dpr=1.5"/> <source media="(min-width: 481px)" sizes="767px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/portfolio-website.png?q=50&fit=crop&w=767&dpr=1.5"/> <source media="(min-width: 0px)" sizes="480px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/portfolio-website.png?q=50&fit=crop&w=480&dpr=1.5"/> <img width="2560" height="6172" class="lazyload" /> </picture> </figure> </div> <div class=ad-odd></div> <h2 id="hosting-your-portfolio-website"> Héberger votre site Web de portfolio</h2> <p>De nombreuses plateformes d'hébergement offrent des services d'hébergement gratuits, et l'hébergement gratuit est une excellente option pour les projets que vous créez uniquement à des fins de portefeuille. Les responsables du recrutement et les recruteurs doivent voir que vous pouvez écrire du code propre, mais ils doivent également voir vos projets venirvivre.</p> <div class="adsninja-ad-zone"><div id="dynamically-injected-refresh-ad-zone-div-gpt-ad-1494450502098-ccr-REPEAT14" class="dynamically-injected-refresh-ad-zone"><div class="ad-current"><div id="ad-zone-container-div-gpt-ad-1494450502098-ccr-REPEAT14" class="ad-zone-container ad-zone-container-content-character-count-repeatable" data-no-fill-collapsable="false"><strong class="ad-zone-advertising-tag"></strong><div id="ad-zone-size-container-div-gpt-ad-1494450502098-ccr-REPEAT14" class="ad-zone-size-container ad-zone-size-container-content-character-count-repeatable"><div class="ad-zone ad-zone-content-character-count-repeatable" style="width: auto; height: auto; text-align: center;"><div class="ad-zone-inline ad-zone-inline-content-character-count-repeatable"> <div id='div-gpt-ad-1494450502098-ccr-REPEAT14'> </div></div></div></div></div></div></div></div> <p>Cependant, lorsqu'il s'agit de créer votre site Web de portefeuille actuel, vous devez faire preuve de professionnalisme en enregistrant un nom de domaine personnalisé.</p> <div id="article-waypoint"></div> <a class="sentinel-article-nextArticle next-btn" data-content-id="850206" href="/tag/best-domain-name-registrars/" > <div class="next-btn-img"> <div class="bc-img responsive-img img-article-next-btn"> <figure> <picture> <source media="(min-width: 768px)" sizes="320px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2019/04/best-domain-registrars.jpg?q=50&fit=crop&w=320&h=240&dpr=1.5"/> <source media="(min-width: 0px)" sizes="140px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2019/04/best-domain-registrars.jpg?q=50&fit=crop&w=140&h=140&dpr=1.5"/> <img width="1680" height="840" class="lazyload" /> </picture> </figure> </div> </div> <div class="next-btn-text lines-trim"> <strong><span class="next-btn-text-title">Les 7 meilleurs bureaux d'enregistrement de noms de domaine pour démarrer votre site Web</span></strong> <p class="next-btn-text-p">Votre site Web a besoin d'un nom de domaine reconnaissable. Regardons quelques-uns des meilleurs bureaux d'enregistrement de noms de domaine pour démarrer votre site Web.</p> </div> <div class="next-btn-cta icon i-arrow-1">Lire la suite</div> </a> <div class="sharing bottom"> <button class="sharing-btn btn-more" onclick="this.parentNode.classList.add('open')"> <span class="icon i-share"></span> <span class="text">Partager</span> </button> <a class="sharing-btn btn-facebook" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.savoirdanslavie.com%2Fcreate-portfolio-website%2F%2F&src=sdkpreparse"> <span class="icon i-facebook"></span> <span class="text">Partager</span> </a> <a class="sharing-btn btn-twitter" target="_blank" href="https://twitter.com/intent/tweet?text=How%20to%20Create%20a%20Portfolio%20Website%20From%20Scratch&url=https%3A%2F%2Fwww.savoirdanslavie.com%2Fcreate-portfolio-website%2F"> <span class="icon i-twitter"></span> <span class="text">Tweet</span> </a> <a class="sharing-btn btn-mail" href="mailto:?Subject=How to Create a Portfolio Website From Scratch&Body=Check%20this%20out%21%0Ahttps%3A%2F%2Fhttps://www.savoirdanslavie.com/create-portfolio-website/"> <span class="icon i-mail-1"></span> <span class="text">Courriel</span> </a> </div> <div class="article-tags"> <strong class="section-sub-title">Sujets connexes</strong> <ul> <li><a href="/category/programming/">Programmation</a></li> <li><a class="tags-link" href="/tag/web-development/">Développement Web</a></li> <li><a class="tags-link" href="/tag/web-design/">Conception Web</a></li> <li><a class="tags-link" href="/tag/programming/">Programmation</a></li> </ul> </div> <strong class="section-sub-title">À propos de l'auteur</strong> <div class="w-article-author-bio"> <div class="author-bio-img" > <img data-src="/image0415/81/814e349a8061fb28d617f8bcd4c58e3e.jpg?fit=crop&w=100&h=100" class="lazyload"> </div> <div class="author-bio-text"> <strong class="bio-title">Kadeisha Kean<span class="amount">34 articles publiés</span> </strong> <div class="bio-social"> </div> <div class="bio-desc"> <p>Kadeisha Kean est une développeur de logiciels Full-Stack et rédactrice technique/technologique. Elle a la capacité distincte de simplifier certains des concepts technologiques les plus complexes ; produire du matériel qui peut être facilement compris par tout novice en technologie. Elle est passionnée par l'écriture,développer des logiciels intéressants et parcourir le monde à travers des documentaires.</p> </div> <a class="bio-btn icon i-arrow-5" href="/author/kadeisha-kean/">Plus de Kadeisha Kean</a> </div> </div> <div class="adsninja-ad-zone"><div id="dynamically-injected-refresh-ad-zone-div-gpt-ad-1553804529761-0" class="dynamically-injected-refresh-ad-zone"><div class="ad-current"><div id="ad-zone-container-div-gpt-ad-1553804529761-0" class="ad-zone-container ad-zone-container-content-below-the-author" data-no-fill-collapsable="false"><strong class="ad-zone-advertising-tag"></strong><div id="ad-zone-size-container-div-gpt-ad-1553804529761-0" class="ad-zone-size-container ad-zone-size-container-content-below-the-author"><div class="ad-zone ad-zone-content-below-the-author" style="width: auto; height: auto; text-align: center;"><div class="ad-zone-inline ad-zone-inline-content-below-the-author"> <div id='div-gpt-ad-1553804529761-0'> </div></div></div></div></div></div></div></div> <div class="newsletter-from" id="newsletter-from"> <div class="btn-nf-container"> <h4>Abonnez-vous à notre newsletter</h4> <p>Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !</p> <div class="btn-nf">Cliquez ici pour vous abonner</div> </div> </div> </section> <aside id="secondary" class="sidebar" role="complementary"> <div class="adsninja-ad-zone"><div id="dynamically-injected-refresh-ad-zone-div-gpt-ad-1539626823080-0" class="dynamically-injected-refresh-ad-zone"><div class="ad-current"><div id="ad-zone-container-div-gpt-ad-1539626823080-0" class="ad-zone-container ad-zone-container-sidebar-first" data-no-fill-collapsable="false"><strong class="ad-zone-advertising-tag"></strong><div id="ad-zone-size-container-div-gpt-ad-1539626823080-0" class="ad-zone-size-container ad-zone-size-container-sidebar-first"><div class="ad-zone ad-zone-sidebar-first" style="width: auto; height: 250px; text-align: center;"><div class="ad-zone-inline ad-zone-inline-sidebar-first"> <div id='div-gpt-ad-1539626823080-0'> </div></div></div></div></div></div></div></div> <section class="sidebar-trending "> <div class="section-header"> <h3 class="section-title">Sur le fil</h3> </div> <div class="sentinel-article-sidebarTop browse-grid clip-full col-1"> <article class="browse-clip item-1 js-content" data-content-id=":42828"> <a class="bc-img-link" href="/tag/finding-your-friends-via-gps-9-free-mobile-apps/" > <div class="bc-img responsive-img img-size-full"> <figure> <picture> <source media="(min-width: 1024px)" sizes="330px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2017/02/Finding-Friends-GPS-Featured.jpg?q=50&fit=crop&w=330&h=170&dpr=1.5"/> <source media="(min-width: 768px)" sizes="943px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2017/02/Finding-Friends-GPS-Featured.jpg?q=50&fit=crop&w=943&h=450&dpr=1.5"/> <source media="(min-width: 481px)" sizes="737px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2017/02/Finding-Friends-GPS-Featured.jpg?q=50&fit=crop&w=737&h=413&dpr=1.5"/> <source media="(min-width: 0px)" sizes="450px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2017/02/Finding-Friends-GPS-Featured.jpg?q=50&fit=crop&w=450&h=250&dpr=1.5"/> <img width="1680" height="840" class="lazyload" /> </picture> </figure> </div> </a> <div class="bc-info"> <h3 class="bc-title"> <a href="/tag/finding-your-friends-via-gps-9-free-mobile-apps/" class="bc-title-link" >Les 7 meilleures applications Android gratuites pour trouver vos amis via GPS</a> </h3> </div> </article> <article class="browse-clip item-2 js-content" data-content-id=":317092"> <a class="bc-img-link" href="/tag/top-7-ways-personalize-mac-os-x-desktop/" > <div class="bc-img responsive-img img-size-full"> <figure> <picture> <source media="(min-width: 1024px)" sizes="330px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2014/02/apple-paint.jpg?q=50&fit=crop&w=330&h=170&dpr=1.5"/> <source media="(min-width: 768px)" sizes="943px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2014/02/apple-paint.jpg?q=50&fit=crop&w=943&h=450&dpr=1.5"/> <source media="(min-width: 481px)" sizes="737px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2014/02/apple-paint.jpg?q=50&fit=crop&w=737&h=413&dpr=1.5"/> <source media="(min-width: 0px)" sizes="450px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2014/02/apple-paint.jpg?q=50&fit=crop&w=450&h=250&dpr=1.5"/> <img width="1680" height="840" class="lazyload" /> </picture> </figure> </div> </a> <div class="bc-info"> <h3 class="bc-title"> <a href="/tag/top-7-ways-personalize-mac-os-x-desktop/" class="bc-title-link" >7 façons de personnaliser votre Mac : jeux de couleurs, icônes, sons, etc.</a> </h3> </div> </article> <article class="browse-clip item-3 js-content" data-content-id=":2005289"> <a class="bc-img-link" href="/how-to-organize-folders-categories-tags/" > <div class="bc-img responsive-img img-size-full"> <figure> <picture> <source media="(min-width: 1024px)" sizes="330px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/Person-contemplating-file-organization.jpg?q=50&fit=crop&w=330&h=170&dpr=1.5"/> <source media="(min-width: 768px)" sizes="943px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/Person-contemplating-file-organization.jpg?q=50&fit=crop&w=943&h=450&dpr=1.5"/> <source media="(min-width: 481px)" sizes="737px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/Person-contemplating-file-organization.jpg?q=50&fit=crop&w=737&h=413&dpr=1.5"/> <source media="(min-width: 0px)" sizes="450px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/Person-contemplating-file-organization.jpg?q=50&fit=crop&w=450&h=250&dpr=1.5"/> <img width="1680" height="840" class="lazyload" /> </picture> </figure> </div> </a> <div class="bc-info"> <h3 class="bc-title"> <a href="/how-to-organize-folders-categories-tags/" class="bc-title-link" >Comment organiser vos dossiers, catégories et balises pour une efficacité maximale</a> </h3> </div> </article> <div class="adsninja-ad-zone"><div id="dynamically-injected-refresh-ad-zone-div-gpt-ad-1575304344478-0" class="dynamically-injected-refresh-ad-zone"><div class="ad-current"><div id="ad-zone-container-div-gpt-ad-1575304344478-0" class="ad-zone-container ad-zone-container-sidebar-second" data-no-fill-collapsable="false"><strong class="ad-zone-advertising-tag"></strong><div id="ad-zone-size-container-div-gpt-ad-1575304344478-0" class="ad-zone-size-container ad-zone-size-container-sidebar-second"><div class="ad-zone ad-zone-sidebar-second" style="width: 300px; height: 600px; text-align: center;"><div class="ad-zone-inline ad-zone-inline-sidebar-second"> <div id='div-gpt-ad-1575304344478-0'> </div></div></div></div></div></div></div></div> <article class="browse-clip item-4 js-content" data-content-id=":2004772"> <a class="bc-img-link" href="/best-arduino-rfid-projects/" > <div class="bc-img responsive-img img-size-full"> <figure> <picture> <source media="(min-width: 1024px)" sizes="330px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/rfid-projects.jpg?q=50&fit=crop&w=330&h=170&dpr=1.5"/> <source media="(min-width: 768px)" sizes="943px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/rfid-projects.jpg?q=50&fit=crop&w=943&h=450&dpr=1.5"/> <source media="(min-width: 481px)" sizes="737px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/rfid-projects.jpg?q=50&fit=crop&w=737&h=413&dpr=1.5"/> <source media="(min-width: 0px)" sizes="450px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/rfid-projects.jpg?q=50&fit=crop&w=450&h=250&dpr=1.5"/> <img width="1680" height="840" class="lazyload" /> </picture> </figure> </div> </a> <div class="bc-info"> <h3 class="bc-title"> <a href="/best-arduino-rfid-projects/" class="bc-title-link" >Les 10 meilleurs projets RFID Arduino</a> </h3> </div> </article> <article class="browse-clip item-5 js-content" data-content-id=":2005282"> <a class="bc-img-link" href="/where-to-buy-solana/" > <div class="bc-img responsive-img img-size-full"> <figure> <picture> <source media="(min-width: 1024px)" sizes="330px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/binance-exchange.jpg?q=50&fit=crop&w=330&h=170&dpr=1.5"/> <source media="(min-width: 768px)" sizes="943px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/binance-exchange.jpg?q=50&fit=crop&w=943&h=450&dpr=1.5"/> <source media="(min-width: 481px)" sizes="737px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/binance-exchange.jpg?q=50&fit=crop&w=737&h=413&dpr=1.5"/> <source media="(min-width: 0px)" sizes="450px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/binance-exchange.jpg?q=50&fit=crop&w=450&h=250&dpr=1.5"/> <img width="1680" height="840" class="lazyload" /> </picture> </figure> </div> </a> <div class="bc-info"> <h3 class="bc-title"> <a href="/where-to-buy-solana/" class="bc-title-link" >5 échanges où vous pouvez acheter la crypto-monnaie Solana</a> </h3> </div> </article> <article class="browse-clip item-6 js-content" data-content-id=":2005435"> <a class="bc-img-link" href="/google-android-auto-update-new-features/" > <div class="bc-img responsive-img img-size-full"> <figure> <picture> <source media="(min-width: 1024px)" sizes="330px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/06/muo-rup-android-auto.jpg?q=50&fit=crop&w=330&h=170&dpr=1.5"/> <source media="(min-width: 768px)" sizes="943px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/06/muo-rup-android-auto.jpg?q=50&fit=crop&w=943&h=450&dpr=1.5"/> <source media="(min-width: 481px)" sizes="737px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/06/muo-rup-android-auto.jpg?q=50&fit=crop&w=737&h=413&dpr=1.5"/> <source media="(min-width: 0px)" sizes="450px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/06/muo-rup-android-auto.jpg?q=50&fit=crop&w=450&h=250&dpr=1.5"/> <img width="1680" height="840" class="lazyload" /> </picture> </figure> </div> </a> <div class="bc-info"> <h3 class="bc-title"> <a href="/google-android-auto-update-new-features/" class="bc-title-link" >Google Updates Android Auto : 4 nouvelles fonctionnalités à essayer</a> </h3> </div> </article> </div> </section> <section class="sidebar-sticky "> <div class="adsninja-ad-zone"><div id="dynamically-injected-refresh-ad-zone-div-gpt-ad-1551123852005-0" class="dynamically-injected-refresh-ad-zone"><div class="ad-current"><div id="ad-zone-container-div-gpt-ad-1551123852005-0" class="ad-zone-container ad-zone-container-sidebar-default" data-no-fill-collapsable="false"><strong class="ad-zone-advertising-tag"></strong><div id="ad-zone-size-container-div-gpt-ad-1551123852005-0" class="ad-zone-size-container ad-zone-size-container-sidebar-default"><div class="ad-zone ad-zone-sidebar-default" style="width: auto; height: 250px; text-align: center;"><div class="ad-zone-inline ad-zone-inline-sidebar-default"> <div id='div-gpt-ad-1551123852005-0'> </div></div></div></div></div></div></div></div> <div class="section-header"> <h3 class="section-title">tendance maintenant</h3> </div> <div class="sentinel-article-sidebarSticky browse-half clip-half"> <article class="browse-clip item-1 js-content" data-content-id=":890513"> <a class="bc-img-link" href="/tag/best-streaming-tv-services/" > <div class="bc-img responsive-img img-size-half"> <figure> <picture> <source media="(min-width: 1024px)" sizes="341px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2019/08/best-streaming-tv.jpg?q=50&fit=crop&w=341&h=215&dpr=1.5"/> <source media="(min-width: 768px)" sizes="377px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2019/08/best-streaming-tv.jpg?q=50&fit=crop&w=377&h=300&dpr=1.5"/> <source media="(min-width: 481px)" sizes="294px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2019/08/best-streaming-tv.jpg?q=50&fit=crop&w=294&h=234&dpr=1.5"/> <source media="(min-width: 0px)" sizes="450px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2019/08/best-streaming-tv.jpg?q=50&fit=crop&w=450&h=250&dpr=1.5"/> <img width="1680" height="840" class="lazyload" /> </picture> </figure> </div> </a> <div class="bc-info"> <h3 class="bc-title"> <a href="/tag/best-streaming-tv-services/" class="bc-title-link" >Les meilleurs services de télévision en streaming gratuits et payants</a> </h3> </div> </article> <article class="browse-clip item-2 js-content" data-content-id=":2005571"> <a class="bc-img-link" href="/microsoft-makes-easier-to-change-default-browser-windows-11/" > <div class="bc-img responsive-img img-size-half"> <figure> <picture> <source media="(min-width: 1024px)" sizes="341px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/installing-microsoft-edge-on-linux.jpg?q=50&fit=crop&w=341&h=215&dpr=1.5"/> <source media="(min-width: 768px)" sizes="377px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/installing-microsoft-edge-on-linux.jpg?q=50&fit=crop&w=377&h=300&dpr=1.5"/> <source media="(min-width: 481px)" sizes="294px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/installing-microsoft-edge-on-linux.jpg?q=50&fit=crop&w=294&h=234&dpr=1.5"/> <source media="(min-width: 0px)" sizes="450px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/installing-microsoft-edge-on-linux.jpg?q=50&fit=crop&w=450&h=250&dpr=1.5"/> <img width="1680" height="840" class="lazyload" /> </picture> </figure> </div> </a> <div class="bc-info"> <h3 class="bc-title"> <a href="/microsoft-makes-easier-to-change-default-browser-windows-11/" class="bc-title-link" >Microsoft facilite la modification du navigateur par défaut dans Windows 11</a> </h3> </div> </article> <article class="browse-clip item-3 js-content" data-content-id=":52333"> <a class="bc-img-link" href="/tag/lorem-ipsum-case-wondering/" > <div class="bc-img responsive-img img-size-half"> <figure> <picture> <source media="(min-width: 1024px)" sizes="341px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2018/06/windows-laptop-using-1.jpg?q=50&fit=crop&w=341&h=215&dpr=1.5"/> <source media="(min-width: 768px)" sizes="377px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2018/06/windows-laptop-using-1.jpg?q=50&fit=crop&w=377&h=300&dpr=1.5"/> <source media="(min-width: 481px)" sizes="294px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2018/06/windows-laptop-using-1.jpg?q=50&fit=crop&w=294&h=234&dpr=1.5"/> <source media="(min-width: 0px)" sizes="450px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2018/06/windows-laptop-using-1.jpg?q=50&fit=crop&w=450&h=250&dpr=1.5"/> <img width="1680" height="840" class="lazyload" /> </picture> </figure> </div> </a> <div class="bc-info"> <h3 class="bc-title"> <a href="/tag/lorem-ipsum-case-wondering/" class="bc-title-link" >Qu'est-ce que le texte Lorem Ipsum et qu'est-ce que cela signifie ?</a> </h3> </div> </article> </div> </section> </aside> </article> <section class="w-article-related"> <div class="section-header"> <h3 class="section-title">Lire la suite</h3> </div> <div class="sentinel-article-relatedContent browse-grid col-1 col-t-2 col-d-4 clip-full"> <article class="browse-clip js-content" data-content-id=":2005340"> <a class="bc-img-link" href="/how-to-make-a-bootable-windows-11-usb-on-mac/" > <div class="bc-img responsive-img img-size-full"> <figure> <picture> <source media="(min-width: 1024px)" sizes="330px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/12/Create-Windows-11-Bootable-Disk-Featured.jpg?q=50&fit=crop&w=330&h=170&dpr=1.5"/> <source media="(min-width: 768px)" sizes="943px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/12/Create-Windows-11-Bootable-Disk-Featured.jpg?q=50&fit=crop&w=943&h=450&dpr=1.5"/> <source media="(min-width: 481px)" sizes="737px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/12/Create-Windows-11-Bootable-Disk-Featured.jpg?q=50&fit=crop&w=737&h=413&dpr=1.5"/> <source media="(min-width: 0px)" sizes="450px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/12/Create-Windows-11-Bootable-Disk-Featured.jpg?q=50&fit=crop&w=450&h=250&dpr=1.5"/> <img width="1680" height="840" class="lazyload" /> </picture> </figure> </div> </a> <div class="bc-info"> <h3 class="bc-title"> <a href="/how-to-make-a-bootable-windows-11-usb-on-mac/" class="bc-title-link" >3 façons de créer une clé USB Windows 11 amorçable avec un Mac</a> </h3> </div> </article> <article class="browse-clip js-content" data-content-id=":2005319"> <a class="bc-img-link" href="/how-to-turn-off-instagram-message-requests/" > <div class="bc-img responsive-img img-size-full"> <figure> <picture> <source media="(min-width: 1024px)" sizes="330px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/10/erik-lucatero-UrhMJ6kfKlo-unsplash.jpg?q=50&fit=crop&w=330&h=170&dpr=1.5"/> <source media="(min-width: 768px)" sizes="943px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/10/erik-lucatero-UrhMJ6kfKlo-unsplash.jpg?q=50&fit=crop&w=943&h=450&dpr=1.5"/> <source media="(min-width: 481px)" sizes="737px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/10/erik-lucatero-UrhMJ6kfKlo-unsplash.jpg?q=50&fit=crop&w=737&h=413&dpr=1.5"/> <source media="(min-width: 0px)" sizes="450px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/10/erik-lucatero-UrhMJ6kfKlo-unsplash.jpg?q=50&fit=crop&w=450&h=250&dpr=1.5"/> <img width="1680" height="840" class="lazyload" /> </picture> </figure> </div> </a> <div class="bc-info"> <h3 class="bc-title"> <a href="/how-to-turn-off-instagram-message-requests/" class="bc-title-link" >Comment désactiver les demandes de messages sur Instagram</a> </h3> </div> </article> <article class="browse-clip js-content" data-content-id=":2005262"> <a class="bc-img-link" href="/how-make-mechanical-keyboard-quiet/" > <div class="bc-img responsive-img img-size-full"> <figure> <picture> <source media="(min-width: 1024px)" sizes="330px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/Closeup-Photo-of-Person-Typing-on-The-Keyboard-1.jpg?q=50&fit=crop&w=330&h=170&dpr=1.5"/> <source media="(min-width: 768px)" sizes="943px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/Closeup-Photo-of-Person-Typing-on-The-Keyboard-1.jpg?q=50&fit=crop&w=943&h=450&dpr=1.5"/> <source media="(min-width: 481px)" sizes="737px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/Closeup-Photo-of-Person-Typing-on-The-Keyboard-1.jpg?q=50&fit=crop&w=737&h=413&dpr=1.5"/> <source media="(min-width: 0px)" sizes="450px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/Closeup-Photo-of-Person-Typing-on-The-Keyboard-1.jpg?q=50&fit=crop&w=450&h=250&dpr=1.5"/> <img width="1680" height="840" class="lazyload" /> </picture> </figure> </div> </a> <div class="bc-info"> <h3 class="bc-title"> <a href="/how-make-mechanical-keyboard-quiet/" class="bc-title-link" > 6 façons de faire taire votre clavier mécanique bruyant</a> </h3> </div> </article> <article class="browse-clip js-content" data-content-id=":2005171"> <a class="bc-img-link" href="/how-to-choose-reporting-tool/" > <div class="bc-img responsive-img img-size-full"> <figure> <picture> <source media="(min-width: 1024px)" sizes="330px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/What-is-Reporting-Tool-Featured-Image.jpeg?q=50&fit=crop&w=330&h=170&dpr=1.5"/> <source media="(min-width: 768px)" sizes="943px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/What-is-Reporting-Tool-Featured-Image.jpeg?q=50&fit=crop&w=943&h=450&dpr=1.5"/> <source media="(min-width: 481px)" sizes="737px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/What-is-Reporting-Tool-Featured-Image.jpeg?q=50&fit=crop&w=737&h=413&dpr=1.5"/> <source media="(min-width: 0px)" sizes="450px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/What-is-Reporting-Tool-Featured-Image.jpeg?q=50&fit=crop&w=450&h=250&dpr=1.5"/> <img width="1680" height="840" class="lazyload" /> </picture> </figure> </div> </a> <div class="bc-info"> <h3 class="bc-title"> <a href="/how-to-choose-reporting-tool/" class="bc-title-link" >Comment choisir un outil de création de rapports idéal : 8 caractéristiques à rechercher</a> </h3> </div> </article> <article class="browse-clip js-content" data-content-id=":2005309"> <a class="bc-img-link" href="/common-freelancing-myths-to-ignore/" > <div class="bc-img responsive-img img-size-full"> <figure> <picture> <source media="(min-width: 1024px)" sizes="330px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/09/pexels-artem-podrez-4492129-(2).jpg?q=50&fit=crop&w=330&h=170&dpr=1.5"/> <source media="(min-width: 768px)" sizes="943px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/09/pexels-artem-podrez-4492129-(2).jpg?q=50&fit=crop&w=943&h=450&dpr=1.5"/> <source media="(min-width: 481px)" sizes="737px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/09/pexels-artem-podrez-4492129-(2).jpg?q=50&fit=crop&w=737&h=413&dpr=1.5"/> <source media="(min-width: 0px)" sizes="450px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/09/pexels-artem-podrez-4492129-(2).jpg?q=50&fit=crop&w=450&h=250&dpr=1.5"/> <img width="1680" height="840" class="lazyload" /> </picture> </figure> </div> </a> <div class="bc-info"> <h3 class="bc-title"> <a href="/common-freelancing-myths-to-ignore/" class="bc-title-link" > 6 mythes courants sur le travail indépendant que vous devriez ignorer</a> </h3> </div> </article> <article class="browse-clip js-content" data-content-id=":2005284"> <a class="bc-img-link" href="/ways-gamification-increases-productivity-in-workplace/" > <div class="bc-img responsive-img img-size-full"> <figure> <picture> <source media="(min-width: 1024px)" sizes="330px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/12/workplace-processes-gamification.jpg?q=50&fit=crop&w=330&h=170&dpr=1.5"/> <source media="(min-width: 768px)" sizes="943px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/12/workplace-processes-gamification.jpg?q=50&fit=crop&w=943&h=450&dpr=1.5"/> <source media="(min-width: 481px)" sizes="737px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/12/workplace-processes-gamification.jpg?q=50&fit=crop&w=737&h=413&dpr=1.5"/> <source media="(min-width: 0px)" sizes="450px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/12/workplace-processes-gamification.jpg?q=50&fit=crop&w=450&h=250&dpr=1.5"/> <img width="1680" height="840" class="lazyload" /> </picture> </figure> </div> </a> <div class="bc-info"> <h3 class="bc-title"> <a href="/ways-gamification-increases-productivity-in-workplace/" class="bc-title-link" >5 façons surprenantes que la gamification augmente la productivité sur le lieu de travail</a> </h3> </div> </article> <article class="browse-clip js-content" data-content-id=":2005425"> <a class="bc-img-link" href="/how-to-install-visual-studio-code-ubuntu/" > <div class="bc-img responsive-img img-size-full"> <figure> <picture> <source media="(min-width: 1024px)" sizes="330px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/12/Visual-Studio-Code.jpg?q=50&fit=crop&w=330&h=170&dpr=1.5"/> <source media="(min-width: 768px)" sizes="943px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/12/Visual-Studio-Code.jpg?q=50&fit=crop&w=943&h=450&dpr=1.5"/> <source media="(min-width: 481px)" sizes="737px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/12/Visual-Studio-Code.jpg?q=50&fit=crop&w=737&h=413&dpr=1.5"/> <source media="(min-width: 0px)" sizes="450px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/12/Visual-Studio-Code.jpg?q=50&fit=crop&w=450&h=250&dpr=1.5"/> <img width="1680" height="840" class="lazyload" /> </picture> </figure> </div> </a> <div class="bc-info"> <h3 class="bc-title"> <a href="/how-to-install-visual-studio-code-ubuntu/" class="bc-title-link" >Comment installer le code Visual Studio sur Ubuntu</a> </h3> </div> </article> <article class="browse-clip js-content" data-content-id=":2005254"> <a class="bc-img-link" href="/how-to-make-your-iphone-take-photos-faster/" > <div class="bc-img responsive-img img-size-full"> <figure> <picture> <source media="(min-width: 1024px)" sizes="330px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/Person-Taking-a-Picture-with-iPhone.jpg?q=50&fit=crop&w=330&h=170&dpr=1.5"/> <source media="(min-width: 768px)" sizes="943px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/Person-Taking-a-Picture-with-iPhone.jpg?q=50&fit=crop&w=943&h=450&dpr=1.5"/> <source media="(min-width: 481px)" sizes="737px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/Person-Taking-a-Picture-with-iPhone.jpg?q=50&fit=crop&w=737&h=413&dpr=1.5"/> <source media="(min-width: 0px)" sizes="450px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/Person-Taking-a-Picture-with-iPhone.jpg?q=50&fit=crop&w=450&h=250&dpr=1.5"/> <img width="1680" height="840" class="lazyload" /> </picture> </figure> </div> </a> <div class="bc-info"> <h3 class="bc-title"> <a href="/how-to-make-your-iphone-take-photos-faster/" class="bc-title-link" >Comment faire en sorte que votre iPhone prenne des photos plus rapidement</a> </h3> </div> </article> <article class="browse-clip js-content" data-content-id=":2004493"> <a class="bc-img-link" href="/how-to-fix-corrupt-drivers-on-windows-10/" > <div class="bc-img responsive-img img-size-full"> <figure> <picture> <source media="(min-width: 1024px)" sizes="330px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/windows-computer-desktop.jpg?q=50&fit=crop&w=330&h=170&dpr=1.5"/> <source media="(min-width: 768px)" sizes="943px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/windows-computer-desktop.jpg?q=50&fit=crop&w=943&h=450&dpr=1.5"/> <source media="(min-width: 481px)" sizes="737px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/windows-computer-desktop.jpg?q=50&fit=crop&w=737&h=413&dpr=1.5"/> <source media="(min-width: 0px)" sizes="450px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/11/windows-computer-desktop.jpg?q=50&fit=crop&w=450&h=250&dpr=1.5"/> <img width="1680" height="840" class="lazyload" /> </picture> </figure> </div> </a> <div class="bc-info"> <h3 class="bc-title"> <a href="/how-to-fix-corrupt-drivers-on-windows-10/" class="bc-title-link" >Comment réparer les pilotes corrompus sur Windows 10</a> </h3> </div> </article> </div> </section> </div> <footer class="w-footer"> <div class="footer"> <nav class="menu-legal"> <ul> <li><a class="write" href="/contributor/">Écrivez pour nous</a></li> <li><a class="menu-home" href="/">Domicile</a></li> <li><a class="menu-contact-us" href="/contact/">Contactez-nous</a></li> <li><a class="menu-terms" href="/terms-of-use/">Conditions</a></li> <li><a class="menu-privacy" href="/privacy-policy/">Confidentialité</a></li> <li><a class="menu-copyright" href="/dmca-take-down-policy/">Droit d'auteur</a></li> <li><a class="menu-about-us" href="/about/">À propos de nous</a></li> <li><a class="menu-fact-checking-policy" href="/fact-checking-policy/">Politique de vérification des faits</a></li> <li><a class="menu-corrections-policy" href="/corrections-policy/">Politique de correction</a></li> <li><a class="menu-ethics-policy" href="/ethics-policy/">Politique d'éthique</a></li> <li><a class="menu-ownership-policy" href="/ownership-funding-advertising-policy/">Politique de propriété</a></li> <li><a class="menu-partnership-disclaimer" href="/partnership-disclaimer/">Avertissement de partenariat</a></li> </ul> </nav> </div> <div class="footer-copy"> Copyright © 2021 www.savoirdansslavie.com </div> </footer> </div> <script type="text/javascript" src="/js/analytic.js"></script></body> </html> <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>