MIVA STUDY PACK — Web Developer / Digital Designer (Français) Downloaded 2026-09-29. Free to pass on. Web Developer / Digital Designer — Lesson 1: Comment les Sites Web Fonctionnent 12 minutes de lecture OBJECTIVE: À la fin de cette leçon, vous pouvez expliquer le processus fondamental de la façon dont un navigateur web demande et affiche le contenu d'un site web à partir d'un serveur. Chaque fois que tu prends ton téléphone et que tu tapes l'adresse d'un site web, comme un site d'infos locales ou ton blog préféré de recettes de Jollof, un truc incroyable se passe. En un clin d'œil, ton téléphone se connecte à un ordinateur lointain. Cet ordinateur, qu'on appelle un serveur, renvoie des fichiers spéciaux. Ton téléphone prend ensuite ces fichiers et construit instantanément le site web que tu vois sur ton écran. Tout ce processus, depuis que ton téléphone demande l'info jusqu'à ce qu'il te montre la page, se déroule super vite, même si le serveur est dans un autre pays. TON NAVIGATEUR ET LE SERVEUR : UNE PETITE DISCUSSION Imagine ça comme ça : ton navigateur web (c'est l'application que tu utilises pour aller sur internet, comme Chrome ou Safari) est comme toi qui envoies un message. Quand tu tapes 'facebook.com', ton navigateur envoie une requête via internet au serveur de Facebook. Le serveur est un ordinateur puissant, toujours allumé, qui stocke tous les fichiers du site web de Facebook. C'est comme un commerçant avec toutes ses marchandises bien rangées. Quand ton navigateur demande quelque chose, le serveur trouve rapidement les bons fichiers et les renvoie. - HTML (HyperText Markup Language) : La Structure. C'est le squelette du site web. Imagine que tu construis un étal au marché. HTML crée le cadre : le toit, les poteaux de support, le comptoir. Il définit où vont tes photos, ton texte et tes boutons. Sans HTML, il n'y a rien à afficher pour ton navigateur. - CSS (Cascading Style Sheets) : Le Style. C'est comme peindre ton étal de marché, choisir les couleurs du toit, décider du type de bois pour le comptoir et ajouter des décorations. CSS embellit ton site web. Il contrôle les couleurs, les polices, l'espacement et la façon dont tout est agencé sur la page. - JavaScript : L'Action. C'est ce qui rend ton étal de marché interactif. C'est comme ajouter une porte automatique qui s'ouvre quand les clients approchent, ou un interrupteur qui allume une lampe. JavaScript permet aux choses de bouger, de changer ou de réagir quand tu cliques dessus. Pense aux messages pop-up, aux carrousels d'images ou aux formulaires que tu remplis en ligne – c'est JavaScript qui fait le boulot. [Pourquoi C'est Important pour Toi] En tant que développeur web, ton travail principal est d'écrire ces trois langages. Tu les utiliseras pour construire des sites web qui ont une belle apparence et qui fonctionnent bien. Dans des villes comme Accra, Lagos et Lomé, de nombreuses petites entreprises – des tailleurs aux vendeurs de nourriture – recherchent des sites web simples et abordables. Elles ont besoin d'une 'vitrine' numérique pour montrer leurs produits, lister leurs services ou prendre des commandes de clients. Apprendre ces compétences signifie que tu peux aider ces entreprises à grandir, et tu es payé pour ça ! Alors, la prochaine fois que tu navigues en ligne, souviens-toi du voyage. Ton téléphone demande, un serveur répond, et trois langages essentiels travaillent ensemble pour construire la page juste sous tes yeux. Comprendre cette base est ton premier pas vers la création de tes propres sites web incroyables. PRACTICE QUESTIONS 1. Quel langage est responsable de la STRUCTURE d'un site web ? A) CSS B) JavaScript C) HTML D) Python Answer: C — Bien joué ! HTML (HyperText Markup Language) crée la structure ou le 'squelette' d'un site web. Il définit tous les éléments comme les titres, les paragraphes, les images et les liens. Imagine ça comme les fondations solides et les murs d'un bâtiment. Sans HTML, il n'y a rien à styliser ou à rendre interactif. CSS ajoute l'apparence et le ressenti, et JavaScript ajoute les actions interactives. 2. Quand tu tapes une adresse web comme 'mivaskills.com' dans ton navigateur, qu'est-ce qui renvoie les fichiers nécessaires pour afficher le site web ? A) Ton fournisseur de réseau mobile B) Un ordinateur puissant appelé serveur C) Le navigateur web lui-même D) D'autres sites web que tu as visités Answer: B — C'est exact ! Le serveur est l'ordinateur puissant qui stocke tous les fichiers du site web (HTML, CSS, JavaScript, images, etc.). Lorsque ton navigateur demande un site web, le serveur trouve ces fichiers et les renvoie à ton navigateur, qui affiche ensuite la page. ---------------------------------------- Web Developer / Digital Designer — Lesson 2: Bases de l'HTML : Vos Premiers Pas pour Construire le Web 10 minutes de lecture OBJECTIVE: À la fin de cette leçon, vous pouvez utiliser les balises HTML pour structurer une page web de base, y compris les titres, les paragraphes, les images et les liens. Salut, futur développeur web ! Vous êtes sur le point d'apprendre la base de chaque site web que vous visitez, que ce soit pour vérifier votre solde de mobile money ou pour parcourir vos sites d'actualités préférés. Cette base s'appelle HTML, ce qui signifie HyperText Markup Language. Pensez à l'HTML comme au squelette d'un site web. Il donne à la page sa structure : où se trouvent les titres, où vont les paragraphes, et où vivent les images et les liens. LES BALISES : LES ÉLÉMENTS FONDAMENTAUX DE L'HTML L'HTML utilise des instructions spéciales appelées 'balises' pour dire au navigateur web comment afficher le contenu. Les balises sont encadrées par des chevrons, comme ceci : < >. Ce sont comme de petites étiquettes que vous mettez autour de votre texte pour lui donner un sens. Par exemple, si vous voulez un grand titre pour votre page, vous utiliseriez une balise de titre. Si vous voulez un paragraphe de texte ordinaire, vous utiliseriez une balise de paragraphe. La plupart des balises viennent par paires : une balise ouvrante et une balise fermante. La balise fermante a toujours une barre oblique avant le nom de la balise. -

Ceci est un grand titre

: Cela crée un grand titre important, comme le titre d'un article sur un site d'actualités. -

Ceci est un paragraphe de texte.

: Ceci est pour les blocs de texte ordinaires, comme une histoire dans un article de blog. - Scène de marché à Accra : Ceci affiche une image. La partie 'src' indique au navigateur où trouver l'image, comme une photo d'un étal de marché animé à Lagos. La partie 'alt' décrit l'image pour les personnes qui ne peuvent pas la voir ou si l'image ne se charge pas. - Contactez-nous : Ceci crée un lien cliquable. C'est comme ça qu'on passe d'une page à l'autre, comme cliquer sur un bouton pour envoyer un message à une entreprise ou trouver son emplacement. Vous voyez comment la plupart d'entre elles ont une balise ouvrante (comme

) et une balise fermante (comme

) ? Le contenu que vous voulez structurer se trouve entre les deux. La balise est un peu différente ; c'est une balise auto-fermante parce qu'elle n'enveloppe pas de texte mais pointe plutôt vers une source d'image. [Chaque page HTML a une structure] Tout comme une maison a besoin de fondations, de murs et d'un toit, chaque page HTML a une structure de base. Elle ressemble à ceci : Votre Titre de PageVotre contenu va ici. La section 'head' contient des informations sur la page que les utilisateurs ne voient généralement pas, comme son titre dans l'onglet du navigateur. La section 'body' est l'endroit où se trouve tout votre contenu visible – le texte, les images et les liens avec lesquels les visiteurs interagissent. C'est comme la partie principale de votre boutique, où toutes les marchandises sont exposées ! Vous pouvez commencer à écrire de l'HTML dès maintenant ! Tout ce dont vous avez besoin est un simple éditeur de texte. Cela peut être le Bloc-notes sur un ordinateur Windows, TextEdit sur un Mac, ou un éditeur de code gratuit et puissant comme VS Code (que de nombreux développeurs professionnels utilisent). Écrivez votre code HTML, puis enregistrez le fichier avec une extension '.html' (par exemple, 'mapremierepage.html'). Une fois enregistré, vous pouvez ouvrir ce fichier dans n'importe quel navigateur web que vous utilisez – Chrome, Firefox ou Safari – et voir votre création prendre vie ! Aucune connexion Internet spéciale n'est nécessaire pour simplement visualiser vos fichiers locaux, c'est comme faire tourner votre groupe électrogène à la maison pour alimenter vos lumières. PRACTICE QUESTIONS 1. À quoi sert la balise en HTML ? A) Affiche une image B) Crée un lien cliquable vers une autre page C) Crée un grand titre D) Joue une vidéo Answer: B — La balise (ancre) crée des hyperliens – le texte ou les images cliquables qui vous mènent à une autre page. L'attribut 'href' indique au navigateur OÙ aller. Sans liens, les sites web sont des impasses. Avec les liens, ils deviennent une expérience connectée, comme suivre un chemin d'une partie du marché à une autre. 2. Quelle est la bonne façon de créer un grand titre en HTML ? A) Mon Titre B)

Mon Titre

C)

Mon Titre

D) Mon Titre Answer: C — La balise

est utilisée pour le titre le plus important d'une page. Le 'h' signifie 'heading' (titre) et '1' signifie que c'est le niveau supérieur, comme l'enseigne principale d'un magasin. D'autres balises de titre vont jusqu'à

pour des titres plus petits. ---------------------------------------- Web Developer / Digital Designer — Lesson 3: Bases du CSS — Rendre les pages attrayantes 10 minutes de lecture OBJECTIVE: À la fin de cette leçon, vous pouvez appliquer des propriétés CSS pour modifier l'apparence visuelle des éléments HTML, y compris les couleurs, les polices et la mise en page. Imagine que tu as construit un simple étal en bois sur le marché. Il est fonctionnel, il fait son travail, mais il a l'air… simple. C'est comme ta structure HTML de base. Elle contient toutes tes informations, mais elle n'est pas très excitante à regarder. Maintenant, imagine peindre cet étal avec des couleurs vives, ajouter une belle pancarte, peut-être même un motif. C'est ce que le CSS fait pour ton site web. CSS signifie « Cascading Style Sheets » (feuilles de style en cascade). C'est le langage qui contrôle l'apparence de ton HTML. Il te permet de changer les couleurs, de choisir différentes polices, d'ajuster l'espacement, d'ajouter des images de fond, et d'organiser tout proprement sur la page. Sans CSS, chaque site web ressemblerait à un texte simple sur un fond blanc – très ennuyeux ! COMMENT LE CSS FONCTIONNE : LA RÈGLE EN TROIS PARTIES Chaque fois que tu veux styliser quelque chose avec CSS, tu écris une règle. Cette règle a trois parties principales : - Sélecteur : C'est ce qui indique au CSS *quel* élément HTML tu veux styliser. Veux-tu changer tous les paragraphes ? Juste un titre spécifique ? Le sélecteur le désigne. - Propriété : C'est ce qui indique au CSS *ce que* tu veux changer de cet élément. Veux-tu changer sa couleur ? Sa taille ? Son alignement ? - Valeur : C'est ce qui indique au CSS le *nouveau réglage* pour cette propriété. Si tu as choisi 'couleur' comme propriété, la valeur pourrait être 'bleu'. Si tu as choisi 'taille', la valeur pourrait être '16 pixels'. Voici un exemple : `p { color: blue; font-size: 16px; }` Cette règle sélectionne tous les éléments de paragraphe (`p`). Elle définit leur couleur de texte (`color`) en bleu et leur taille de texte (`font-size`) à 16 pixels. C'est comme décider de la couleur de la peinture et de la taille du pinceau pour l'enseigne de ton étal de marché. [Organiser vos éléments : La mise en page] Une chose que de nombreux débutants trouvent compliquée est l'organisation des éléments côte à côte. Par défaut, les éléments HTML s'empilent souvent les uns sur les autres, comme des boîtes entassées dans un débarras. Pour les faire s'asseoir les uns à côté des autres, comme des marchandises exposées sur un étal de marché, tu as besoin d'outils de mise en page. Les deux principaux sont Flexbox et Grid. Flexbox est excellent pour organiser les éléments en une seule rangée ou colonne. Grid est pour des arrangements plus complexes, comme une page entière avec de nombreuses sections. Pour un site web d'entreprise simple, Flexbox est généralement suffisant pour donner un bel aspect aux choses. Ta première tâche pratique en tant que développeur web pourrait être de construire une simple page de restaurant. Pense à ton endroit local préféré à Accra ou Lagos. Tu voudrais un logo en haut, une liste d'éléments de menu au milieu, et des coordonnées (comme le numéro de téléphone et l'adresse) en bas. Une fois que tu peux rendre cela attrayant et bien arrangé en utilisant le CSS, tu es sur la bonne voie pour construire de vrais sites web pour des clients payants ! PRACTICE QUESTIONS 1. Que contrôle la propriété CSS 'color' ? A) La largeur d'un élément B) La couleur du texte C) La couleur de fond D) La taille de la police Answer: B — En CSS, la propriété 'color' est utilisée spécifiquement pour définir la couleur du texte à l'intérieur d'un élément. Si tu veux changer l'arrière-plan derrière le texte, tu utiliserais la propriété 'background-color'. C'est une confusion initiale courante, comme connaître la différence entre la couleur de la peinture pour les lettres d'une enseigne et la couleur de la peinture pour la planche de l'enseigne elle-même ! 2. Quel outil de mise en page CSS est le mieux adapté pour organiser les éléments en une seule rangée ou colonne, comme une rangée d'éléments de menu ou une pile d'icônes de médias sociaux ? A) Grid B) Float C) Flexbox D) Position Answer: C — Flexbox est conçu spécifiquement pour organiser les éléments dans une seule dimension — soit une rangée, soit une colonne. C'est parfait pour la mise en page des liens de navigation, des groupes de cartes, ou d'autres composants où tu as besoin d'un contrôle fort sur l'alignement et l'espacement le long d'un seul axe. Grid est plus pour les mises en page bidimensionnelles, et Float et Position sont des techniques plus anciennes ou plus spécifiques. ---------------------------------------- Web Developer / Digital Designer — Lesson 4: Bases de JavaScript — Ajouter de l'interactivité 12 minutes de lecture OBJECTIVE: À la fin de cette leçon, vous pouvez décrire comment JavaScript ajoute de l'interactivité aux pages web et identifier les cas d'utilisation courants pour le contenu dynamique. Imagine un site web qui ne bouge pas, comme une affiche. Tu peux le regarder, mais tu ne peux pas vraiment interagir avec. Ça, c'est un site web construit uniquement avec HTML et CSS. Le HTML lui donne sa structure, comme les murs et le toit d'une échoppe au marché. Le CSS lui donne du style, comme la peinture et les décorations. Mais qu'est-ce qui donne vie à l'échoppe ? Qu'est-ce qui permet à un vendeur d'ouvrir un tiroir, de t'offrir un échantillon ou de changer un prix en fonction de tes choix ? C'est là que JavaScript intervient. FAIRE EN SORTE QUE LES SITES WEB FASSENT DES CHOSES JavaScript est le moteur qui fait *agir* les sites web. Il ajoute de l'interactivité. Pense à tes expériences quotidiennes avec les applications et les sites web : - Quand tu cliques sur un bouton dans une application de mobile money et qu'un formulaire s'ouvre pour envoyer de l'argent – c'est JavaScript. - Quand tu commences à taper un nom dans une barre de recherche, et que des suggestions comme 'Aisha' ou 'Kwame' apparaissent automatiquement – c'est JavaScript. - Quand une image sur une boutique en ligne change pour montrer une autre vue d'un produit quand tu passes ta souris dessus – c'est JavaScript. - Quand un cercle de chargement apparaît pendant que ton paiement est en cours, puis disparaît quand c'est fini – c'est JavaScript. C'est la 'couche de comportement' par-dessus la structure HTML et le style CSS. Sans elle, Internet serait un endroit très calme et statique. Avec JavaScript, les pages web deviennent des outils dynamiques et réactifs qui peuvent interagir avec les utilisateurs. CONCEPTS CLÉS : VARIABLES, FONCTIONS ET ÉCOUTEURS D'ÉVÉNEMENTS Pour commencer à rendre les sites web interactifs, il y a trois concepts fondamentaux que tu dois maîtriser. Pense à eux comme à des outils essentiels dans ta boîte à outils de développeur web : - Variables : Imagine une variable comme une petite boîte de rangement avec une étiquette. Tu peux y mettre une valeur (comme 'Kofi', '25' ou 'vrai'), lui donner un nom (comme `nomClient`, `age`, `estConnecte`), et ensuite utiliser cette valeur plus tard. Par exemple : `let nomClient = 'Kofi';` stocke le mot 'Kofi'. Tu peux changer ce qui est dans la boîte à tout moment. C'est comme enregistrer le nouveau numéro de téléphone d'un ami dans tes contacts – le nom reste le même, mais le numéro peut être mis à jour. Fonctions : Une fonction, c'est comme une recette ou un ensemble d'instructions qui effectue une tâche spécifique. Tu écris les instructions une fois, tu donnes un nom à la recette, et ensuite tu peux la 'cuisiner' (l'exécuter) chaque fois que tu en as besoin, sans réécrire toutes les étapes. Par exemple : `function saluerUtilisateur(nom) { return 'Bonjour ' + nom; }` est une recette pour saluer quelqu'un. Tu peux ensuite appeler `saluerUtilisateur('Aisha')` pour obtenir 'Bonjour Aisha' ou `saluerUtilisateur('Chike')` pour obtenir 'Bonjour Chike'. C'est un bloc de code réutilisable. - Écouteurs d'Événements (Event Listeners) : C'est là que la magie de l'interaction opère vraiment. Un écouteur d'événements est un code qui attend patiemment que l'utilisateur fasse quelque chose – comme un agent de sécurité qui surveille la porte principale. Quand l''événement' se produit (quelqu'un clique sur un bouton, tape dans une zone de texte ou fait défiler la page), l'écouteur l''entend' et déclenche alors l'exécution d'un morceau de code spécifique. Par exemple : `bouton.addEventListener('click', function() { alert('Tu as cliqué sur moi !'); });` signifie : 'Hé bouton, quand tu reçois un clic, affiche un message pop-up !' Sans les écouteurs d'événements, ton site web est sourd aux actions des utilisateurs. [Commence à Coder Maintenant !] La meilleure façon d'apprendre JavaScript est de pratiquer. Ne te contente pas de lire. Des ressources gratuites comme freeCodeCamp.org et The Odin Project (theodinproject.com) offrent des leçons et des projets complets et interactifs. Ils fonctionnent très bien même sur un Tecno Spark ou d'autres appareils mobiles, tu peux donc t'entraîner n'importe où ! Commence petit : crée un bouton qui change la couleur du texte, un formulaire qui dit 'Bonjour, [nom] !' ou une simple calculatrice. Chaque petit projet est un énorme pas en avant dans ton apprentissage. PRACTICE QUESTIONS 1. Que fait un écouteur d'événements (event listener) en JavaScript ? A) Stocke une valeur pour une utilisation ultérieure B) Attend une action de l'utilisateur (comme un clic) et exécute du code en réponse C) Change la couleur de l'arrière-plan de la page web D) Envoie un e-mail au propriétaire du site web Answer: B — Un écouteur d'événements, c'est comme un agent de sécurité de nuit — il observe et attend. Quand l'événement spécifié se produit (un clic, une pression de touche, un défilement de page), l'écouteur déclenche le code qui lui est attaché. Sans les écouteurs d'événements, les pages web seraient des affiches statiques. Avec eux, les pages deviennent des outils interactifs qui réagissent aux actions de l'utilisateur en temps réel. 2. Laquelle de ces descriptions correspond le mieux à une 'variable' en JavaScript ? A) Une liste d'étapes que l'ordinateur doit suivre pour effectuer une tâche B) Un emplacement de stockage temporaire pour des informations qui peuvent être nommées et utilisées plus tard C) Une commande qui modifie immédiatement le style de la page D) Un moyen d'envoyer des données directement à un serveur à Lagos Answer: B — Une variable est comme un conteneur étiqueté ou une boîte de rangement. Tu peux y mettre différents types de valeurs (comme des nombres, du texte ou vrai/faux), lui donner un nom, puis te référer à ce nom chaque fois que tu as besoin d'utiliser la valeur stockée plus tard dans ton code. Cela rend ton code flexible et dynamique. ---------------------------------------- Web Developer / Digital Designer — Lesson 5: Créer votre tout premier site web réel 12 minutes de lecture OBJECTIVE: À la fin de cette leçon, vous pouvez construire un site web monopage fonctionnel pour une entreprise locale en utilisant les compétences HTML et CSS acquises. Vous avez appris les bases du HTML et du CSS. C'est un excellent début ! Maintenant, utilisons ces compétences pour construire quelque chose de concret. Nous allons créer un site web simple, mais puissant, pour une entreprise locale. Pensez à cette petite boutique du coin dans votre rue à Accra, ou à l'atelier du tailleur à Lagos, ou au restaurant à Lomé. Eux aussi ont besoin d'être en ligne ! L'ANATOMIE D'UN SITE WEB SIMPLE POUR ENTREPRISE La plupart des petites entreprises n'ont pas besoin d'un site web complexe avec plusieurs pages. Ce dont elles ont vraiment besoin, c'est d'une page claire et bien conçue. Cette page unique agit comme un flyer numérique ou une vitrine sur internet. Elle répond aux questions clés des clients potentiels : Qu'est-ce que vous proposez ? Où êtes-vous situé ? Comment puis-je vous contacter ? - En-tête (Header) : C'est la partie supérieure. Elle contient le nom de l'entreprise et, si elle en a un, son logo. Comme l'enseigne au-dessus de la porte d'un magasin. - Section Héro (Hero Section) : C'est la première chose que les gens voient. Elle contient un message de bienvenue et une superbe photo du magasin ou de ses produits. Imaginez une belle photo de leurs pâtisseries, ou le propriétaire souriant. - Section Services (Services Section) : Que fait l'entreprise ? Listez clairement ses principaux services ou produits. Est-ce qu'ils vendent du tissu ? Réparent des téléphones ? Cuisinent un délicieux riz jollof ? - Section Contact (Contact Section) : Comment les clients peuvent-ils les joindre ? Incluez un numéro de téléphone, un e-mail et leur adresse physique. Peut-être même une petite carte. - Pied de page (Footer) : Tout en bas. Il contient souvent les informations de copyright et peut-être des liens rapides. Chacune de ces sections sera construite à l'aide d'un élément `
` en HTML. Nous donnerons à chaque `
` un `id` unique (comme `id="header"` ou `id="contact"`). Cela nous aide à styliser chaque section séparément en utilisant le CSS. Vous pouvez rendre l'en-tête bleu, la section des services gris clair, et ainsi de suite. [Gardez les choses simples, rendez-les vendables] Votre objectif est de livrer un site web fonctionnel et attrayant rapidement. Concentrez-vous sur la clarté et un 'appel à l'action' – cela signifie un bouton comme 'Appelez maintenant' ou 'Visitez-nous'. Vous pouvez utiliser des modèles gratuits de sites comme HTML5 UP ou Colorlib. Ils offrent un excellent point de départ. Votre travail consiste à le personnaliser : changer les couleurs pour qu'elles correspondent à la marque de l'entreprise, ajouter leur texte spécifique et insérer leurs vraies photos. En un week-end, vous pouvez transformer un modèle en un produit vendable. Imaginez montrer à un commerçant un brouillon de site web avec le nom de son entreprise, une photo de ses produits et son numéro de téléphone juste là. Il sera impressionné ! C'est ainsi que vous commencez à construire votre portfolio et à gagner de l'argent avec vos nouvelles compétences. Ce premier projet de site web réel vous montrera ce qu'il faut pour passer du code à un client satisfait. PRACTICE QUESTIONS 1. De combien de pages un site web typique de petite entreprise a-t-il réellement besoin ? A) Au moins 10 pages B) Une seule page bien conçue est souvent suffisante C) Plus de 50 pages pour le SEO D) Cela dépend du nombre d'employés Answer: B — La plupart des petites entreprises — comme un mécanicien en bord de route, un salon de coiffure ou un tailleur — n'ont besoin que d'une seule page. Cette page unique doit clairement indiquer ce qu'elles font, où elles se trouvent et comment les contacter. C'est comme une carte de visite numérique, mais beaucoup plus puissante. La simplicité est la clé pour les mettre en ligne rapidement et efficacement. 2. Quel élément HTML est principalement utilisé pour créer des sections distinctes (comme un en-tête, une section héro ou une zone de contact) au sein d'un site web, et reçoit souvent un 'id' pour le style ? A)

B) C)

D) Answer: C — L'élément `
` est un conteneur de niveau bloc couramment utilisé pour regrouper et structurer le contenu en sections logiques sur une page web. Lui donner un `id` (par exemple, `
`) vous permet de cibler et de styliser cette section spécifique à l'aide du CSS, la faisant ressembler exactement à ce que vous voulez. ---------------------------------------- Web Developer / Digital Designer — Lesson 6: WordPress pour les sites web clients 12 minutes de lecture OBJECTIVE: À la fin de cette leçon, vous pouvez identifier les avantages de l'utilisation de WordPress pour les sites web clients et expliquer ses capacités de gestion de contenu. Imagine que tu aides une petite entreprise au marché de Makola, à Accra, ou à Computer Village, à Lagos, à se connecter. Elles vendent de beaux tissus ou réparent des téléphones. Elles ont besoin d'un site web, mais elles ont aussi besoin de mettre à jour leurs prix ou de montrer souvent les nouveautés. C'est là que WordPress intervient. C'est un outil puissant qui t'aide à construire de superbes sites web, et qui permet à tes clients de gérer leur propre contenu facilement. WordPress propulse environ 40 % de tous les sites web dans le monde. Pense-y comme un système d'exploitation de téléphone mobile populaire – beaucoup de gens l'utilisent, donc il est bien supporté et possède de nombreuses fonctionnalités. Pour les clients qui veulent mettre à jour leur propre contenu, WordPress est le choix pratique. Il leur permet de prendre le contrôle sans avoir besoin d'apprendre un codage complexe. CRÉER UN SITE WORDPRESS : LES ÉTAPES - D'abord, tu installes WordPress chez un hébergeur. Ce sont des entreprises comme Bluehost ou Hostinger. C'est comme louer un espace sur Internet pour ton site web. Bonne nouvelle – Bluehost et Hostinger acceptent les clients nigérians et ghanéens, ce qui facilite le paiement de leurs services. - Ensuite, tu choisis un 'thème'. Un thème, c'est comme le modèle de design du site web. Il existe de nombreuses options gratuites, comme Astra ou GeneratePress, qui ont l'air professionnelles et sont faciles à personnaliser. - Enfin, tu le personnalises. Cela signifie ajouter le logo de ton client, ses couleurs de marque spécifiques, et tout son contenu unique – l'histoire de son entreprise, des photos de ses produits, et ses coordonnées. Tu le rends vraiment à son image. Le meilleur dans tout ça ? Une fois le site construit, ton client reçoit un accès spécial. À partir de là, il peut facilement ajouter de nouveaux articles de blog sur son entreprise, mettre à jour les prix des produits, ou changer les photos de son dernier stock. Il peut faire tout ça sans t'appeler à chaque fois pour un petit changement. C'est aussi simple que de taper un message dans WhatsApp et de cliquer sur 'poster'. [Gagner de l'argent avec WordPress] Cette capacité de self-service rend ton service encore plus précieux pour les clients. Tu peux facturer 1 000-3 000 GHS pour la création initiale du site web. Ensuite, pour le support continu et l'hébergement, tu peux facturer 100-300 GHS par mois. Imagine que tu aies cinq clients qui paient un entretien mensuel. Ça fait 500-1 500 GHS de revenu passif chaque mois ! Cet argent rentre pendant que tu te concentres sur la construction de nouveaux sites web pour d'autres clients, développant ainsi ton entreprise davantage. WordPress n'est pas seulement pour les grandes entreprises. C'est parfait pour la petite boulangerie à Lomé, le garage mécanique à Accra, ou la couturière à Lagos qui veut montrer ses créations. Tu donnes aux entreprises les moyens de se connecter avec plus de clients, tout comme le mobile money les aide à gérer facilement les paiements. Apprendre WordPress est une compétence qui t'ouvre de nombreuses portes, à toi et aux entreprises que tu aides. PRACTICE QUESTIONS 1. Pourquoi WordPress est-il un bon choix pour les clients de petites entreprises ? A) C'est l'option la moins chère B) Les clients peuvent mettre à jour leur propre contenu sans avoir besoin de coder C) Il ne nécessite pas d'internet pour être utilisé D) Il fonctionne uniquement sur les appareils Apple Answer: B — Les clients adorent pouvoir mettre à jour leurs propres prix, photos et annonces sans avoir à te payer à chaque fois. WordPress leur offre un tableau de bord où ils peuvent taper et publier, un peu comme envoyer un message WhatsApp. Tu le construis une fois, ils gèrent leur contenu, et tu peux facturer l'hébergement et le support technique mensuellement, créant ainsi une situation gagnant-gagnant. 2. Laquelle de ces étapes n'est PAS typique lors de la création d'un nouveau site web WordPress pour un client ? A) Installer WordPress chez un hébergeur B) Choisir un thème professionnel C) Développer une application mobile personnalisée pour le client D) Personnaliser le site avec le logo et le contenu du client Answer: C — Bien que certains clients puissent éventuellement vouloir une application mobile, la création d'une application mobile personnalisée est un service distinct et beaucoup plus complexe que la mise en place d'un site web WordPress standard. Les étapes typiques impliquent l'hébergement, la sélection du thème et la personnalisation du contenu. ---------------------------------------- Web Developer / Digital Designer — Lesson 7: Utiliser Canva pour le Design Graphique 10 minutes de lecture OBJECTIVE: À la fin de cette leçon, vous pouvez utiliser Canva pour créer des designs graphiques simples et professionnels pour les médias sociaux ou les supports marketing. En tant que développeur web, vous pourriez penser que le design graphique n'est pas pour vous. Mais beaucoup de petites entreprises ont besoin de plus qu'un simple site web. Elles ont besoin d'images attrayantes pour les réseaux sociaux, de flyers pour leur boutique, ou d'un logo simple. C'est là qu'intervient Canva. C'est un outil en ligne gratuit qui vous aide à créer des designs d'aspect professionnel sans avoir besoin de compétences particulières en design. QU'EST-CE QUE CANVA ET POURQUOI EST-CE UTILE ? Imaginez un vendeur de marché local à Accra ou Lagos. Il vend de magnifiques tissus mais n'a peut-être pas un gros budget pour un graphiste. Il a besoin d'un flyer pour annoncer une nouvelle arrivée ou d'un post Instagram pour montrer ses dernières créations. Canva (canva.com) est parfait pour eux, et pour vous. Il vous permet de créer ces choses rapidement et facilement. Canva utilise des modèles. Considérez un modèle comme une mise en page de design préétablie. Vous en choisissez un qui vous plaît, puis vous modifiez le texte, les couleurs et les images pour répondre aux besoins de votre client. C'est comme remplir les blancs. Une fois que vous êtes satisfait, vous pouvez télécharger l'image et la donner à votre client. C'est aussi simple que cela. Vous n'avez pas besoin d'apprendre des logiciels compliqués comme Photoshop. - Designs de posts Facebook/Instagram : Aidez un client à promouvoir son entreprise en ligne. Vous pouvez facturer 50-200 GHS par série de designs. - Flyers pour événements et promotions : Créez des prospectus accrocheurs pour une vente en boutique ou un événement religieux. Fixez le prix à 100-300 GHS. - Logos d'entreprise : Concevez un logo simple et mémorable pour une nouvelle entreprise. Cela pourrait coûter 200-500 GHS. - Images de catalogue WhatsApp Business : Rendez les photos de produits professionnelles pour la boutique WhatsApp d'un client. Facturez 50-150 GHS par image de produit. - Cartes de visite : Aidez un client à laisser une impression durable avec une carte bien conçue. [Groupez vos services !] Proposez un forfait qui combine vos compétences en conception de sites web avec des graphiques réalisés avec Canva. Par exemple, 'Site web + 10 posts pour les réseaux sociaux pour 2 000 GHS'. Cela rend votre offre beaucoup plus attrayante pour les petites entreprises. Cela montre que vous pouvez répondre à tous leurs besoins numériques, et pas seulement à leur site web. Apprendre Canva vous donne une compétence supplémentaire. Cela signifie que vous pouvez offrir plus de services à vos clients. Cela vous rend plus précieux. Vous pouvez aider les entreprises à travers l'Afrique de l'Ouest, du petit restaurant à Lomé au vendeur d'artisanat à Lagos, à avoir l'air professionnelles en ligne et hors ligne. C'est une arme secrète pour tout développeur web au service des petites entreprises. PRACTICE QUESTIONS 1. Que pouvez-vous créer avec Canva pour les entreprises locales ? A) Uniquement des logos B) Des flyers, des posts pour les réseaux sociaux, des logos, des cartes de visite, et plus encore C) Uniquement des sites web D) Uniquement des vidéos Answer: B — Canva est comme une imprimerie numérique pour de nombreuses choses. Vous pouvez créer des flyers, des logos, des posts Instagram, des cartes de visite, des images de statut WhatsApp, et bien plus encore. Vous commencez avec des modèles et les personnalisez rapidement. Vous n'avez pas besoin d'être un artiste ; les modèles sont conçus par des professionnels. Il vous suffit de modifier le texte et les couleurs pour correspondre à la marque de votre client. 2. Pourquoi Canva est-il particulièrement utile pour les développeurs web qui travaillent avec de petites entreprises ? A) Il aide les développeurs web à apprendre le codage plus rapidement. B) Il permet aux développeurs web d'offrir plus de services de conception sans avoir besoin de compétences avancées en design graphique. C) Il remplace le besoin d'un site web pour les petites entreprises. D) Il est utile uniquement pour créer des vidéos, pas des images statiques. Answer: B — Canva est un outil puissant pour les développeurs web car il élargit la gamme de services que vous pouvez offrir. De nombreuses petites entreprises ont besoin d'un design graphique de base en plus d'un site web, mais ne peuvent pas se permettre un designer séparé. Avec Canva, vous pouvez facilement créer des posts pour les réseaux sociaux, des flyers et des logos, faisant de vous une solution plus complète pour vos clients. Cela signifie plus d'opportunités de revenus pour vous et un meilleur service pour eux. ---------------------------------------- Web Developer / Digital Designer — Lesson 8: Trouver Vos Premiers Clients en Conception Web 10 minutes de lecture OBJECTIVE: À la fin de cette leçon, vous pouvez identifier des entreprises locales potentielles comme premiers clients de conception web et expliquer comment les aborder. Vous avez appris les bases de la conception web. Maintenant, comment trouver des gens qui vous paieront pour votre nouvelle compétence ? Trouver vos premiers clients peut sembler un grand défi. Mais c'est aussi là que vous commencez à construire votre avenir. Voyez ça comme un nouveau stand au marché. Vous devez montrer vos meilleures marchandises pour que les gens s'arrêtent et achètent. Nous allons vous montrer comment faire exactement cela. REGARDEZ AUTOUR DE VOUS : LES ENTREPRISES LOCALES Commencez par regarder dans votre propre ville. Promenez-vous dans votre quartier à Accra, Lagos ou Lomé. Quelles entreprises voyez-vous ? Peut-être un restaurant, un salon de coiffure, une pharmacie ou une petite boutique vendant des accessoires de téléphone. Beaucoup de ces entreprises n'ont pas de site web. Ou, si elles en ont un, il est peut-être vieux et ne s'affiche pas très bien sur un téléphone portable. - Restaurants et 'chop bars' ayant besoin d'un menu en ligne. - Boutiques de mode ou tailleurs souhaitant présenter leurs créations. - Pharmacies pour lister les services et les coordonnées. - Églises ou groupes communautaires pour partager les programmes d'événements. - Organisateurs d'événements pour présenter leurs travaux passés et leurs forfaits. - Agents de mobile money qui veulent paraître plus professionnels en ligne. Vous pouvez aussi chercher en ligne. Parcourez Instagram ou Facebook pour trouver des entreprises locales. Voyez qui a une forte présence sur les réseaux sociaux mais pas de site web digne de ce nom. Ce sont vos clients potentiels. Ils comprennent déjà la valeur d'être en ligne. [Vos Trois Premiers Clients Sont Spéciaux] Vos trois premiers clients sont essentiels. Ne vous souciez pas trop de gagner beaucoup d'argent avec eux. Vos objectifs principaux sont de construire un portfolio de travail et d'obtenir de bonnes références. Considérez cela comme un investissement dans votre future entreprise. Une fois que vous aurez quelques clients satisfaits, d'autres suivront. Lorsque vous trouvez une entreprise, approchez-la avec une offre claire et directe. Par exemple, vous pourriez dire : « Bonjour ! J'ai vu votre incroyable restaurant sur Instagram. Je peux vous créer un site web professionnel avec votre menu complet, des photos de vos délicieux plats et des coordonnées claires. Cela aidera plus de gens à vous trouver en ligne. Je peux le faire pour 1 500 GHS. » C'est concret. Ils savent ce qu'ils obtiennent et combien cela coûte. Mais ne vous contentez pas d'en parler. Montrez-leur ! Créez une simple démo ou une maquette de ce à quoi leur site web pourrait ressembler. Vous pouvez le faire sur votre téléphone ou votre ordinateur portable. Imaginez un commerçant de marché montrant à un client un échantillon de tissu. Cela aide le client à voir la qualité. Quand ils voient un échantillon de leur propre entreprise sur un site web bien conçu, c'est très puissant. Une fois vos trois premiers projets terminés, prenez des captures d'écran. Utilisez-les pour construire votre propre portfolio en ligne. Présentez-les sur votre propre site web et vos réseaux sociaux. C'est ainsi que chaque freelance à succès, d'Accra à Lagos en passant par Lomé, a construit sa clientèle : un client satisfait à la fois. C'est un travail difficile, mais ça en vaut la peine. PRACTICE QUESTIONS 1. Quelle est la meilleure stratégie pour trouver vos premiers clients en conception web ? A) Diffuser des publicités Facebook coûteuses B) Approcher directement les entreprises locales avec une démo et une offre concrète C) Attendre que les clients vous trouvent sur Google D) Imprimer des brochures et les distribuer dans la rue Answer: B — Une approche directe fonctionne mieux parce que le propriétaire de l'entreprise peut immédiatement voir la valeur. Montrer une démo sur votre téléphone, c'est comme un commerçant de marché montrant des échantillons de tissu – le client peut toucher et sentir la qualité. Associez la démo à un prix clair et à ce qu'ils obtiendront. Beaucoup de propriétaires de petites entreprises ont pensé à créer un site web mais ne savaient pas à qui faire confiance. Soyez la personne qui arrive avec une solution. 2. Pourquoi devriez-vous facturer moins cher à vos premiers clients en conception web ? A) Pour s'assurer que vous ne gagnez pas trop d'argent trop rapidement. B) Vos objectifs principaux sont de construire un portfolio et d'obtenir des références, pas de maximiser le profit. C) Parce que vos compétences ne sont pas encore très bonnes, donc vous ne méritez pas plus. D) Cela aide à faire fuir les clients potentiels qui ne sont pas sérieux. Answer: B — Pour vos premiers clients, votre priorité n'est pas de réaliser le profit le plus élevé. Au lieu de cela, vous construisez une collection de votre travail (un portfolio) et obtenez de bonnes recommandations de bouche-à-oreille (références). Cela vous aidera à attirer plus de clients et des clients mieux rémunérés à l'avenir. ---------------------------------------- Web Developer / Digital Designer — Lesson 9: Fixer le prix de vos services de conception web et éviter les arnaques 8 minutes de lecture FIXER DES PRIX JUSTES POUR LE TRAVAIL WEB Lorsque vous commencez à apprendre le développement web, il peut être difficile de savoir combien facturer pour un site web. Si vous demandez trop cher, les petites entreprises locales pourraient refuser. Si vous demandez trop peu, vous pourriez travailler pendant des semaines et finir stressé et sous-payé. En Afrique de l'Ouest, les concepteurs web débutants facturent généralement par projet plutôt que par heure. Un site web simple d'une seule page pour un commerce local peut coûter entre 25 000 et 50 000 Naira au Nigeria, 300 à 600 Cedis au Ghana, ou 25 000 à 50 000 FCFA au Togo. À mesure que vous gagnez de l'expérience et construisez des sites plus grands avec des passerelles de paiement ou des fonctionnalités personnalisées, vos prix peuvent doubler ou tripler. STRUCTUREZ VOS PAIEMENTS AVEC DES ACOMPTES Ne commencez jamais un projet web sans un acompte initial. La norme la plus sûre dans l'industrie du web est la règle du 50/50 : - 50 % d'acompte avant d'écrire le moindre code ou d'acheter l'hébergement. - 50 % du solde final après que le client a approuvé le site, mais AVANT que vous ne lui remettiez les mots de passe administrateur principaux ou ne mettiez le site en ligne sur son domaine. Demander un acompte prouve que le client est sérieux. Cela couvre également vos coûts initiaux, tels que l'achat d'un hébergement de test ou de données mobiles pendant la construction. [Protégez votre travail avant le paiement] Ne transférez jamais la propriété du domaine ni ne remettez les identifiants d'administrateur WordPress complets avant que le paiement final ne soit réglé via mobile money ou virement bancaire. Gardez le site web sur votre propre lien de pré-production ou serveur de démonstration jusqu'à ce que vous receviez le solde complet. GÉRER L'ÉLARGISSEMENT DU PÉRIMÈTRE (SCOPE CREEP) L'élargissement du périmètre se produit lorsqu'un client accepte un site web basique, mais ajoute progressivement des demandes supplémentaires. Par exemple, il pourrait demander un site basique de 3 pages, puis demander plus tard une boutique en ligne, un forum et 50 téléchargements de produits sans proposer d'argent supplémentaire. Pour éviter cela, écrivez exactement ce qui est inclus avant de prendre l'acompte. Listez le nombre de pages, les fonctionnalités et le nombre de révisions de conception que vous proposez. Si le client demande des fonctionnalités supplémentaires plus tard, souriez et dites : 'Je peux absolument ajouter cela ! Cette fonctionnalité coûte 15 000 Naira (ou 150 Cedis / 15 000 FCFA) supplémentaires. Dois-je l'ajouter à la facture finale ?' REPÉRER LES ARNAQUES COURANTES DES CLIENTS Les nouveaux développeurs web sont souvent ciblés par des escrocs en ligne. Voici les signaux d'alarme courants à surveiller : - Faux reçus bancaires : Le client envoie une capture d'écran d'une notification de transfert, mais aucun argent n'entre sur votre compte bancaire ou votre portefeuille mobile. Vérifiez toujours le paiement d'abord dans votre application bancaire. - Arnaque au trop-payé : Un client envoie 'accidentellement' trop d'argent et vous demande de renvoyer l'excédent immédiatement. Le dépôt initial est généralement faux ou provient d'une carte volée. - La promesse d'équité future : 'Je ne peux pas vous payer maintenant, mais construisez ce site gratuitement et je vous donnerai 20 % de mes futurs bénéfices commerciaux.' Insistez toujours sur un travail rémunéré ou un accord écrit clair. - Clients internationaux vagues : Des inconnus vous contactant sur WhatsApp depuis des numéros étrangers inconnus offrant d'énormes sommes pour des sites basiques sans donner de détails commerciaux. [Essayez ceci aujourd'hui] Rédigez une proposition de projet simple d'une page sur votre téléphone ou votre ordinateur. Incluez : Portée du projet (nombre de pages), Calendrier (date d'achèvement), Prix total et Conditions de paiement (50 % à l'avance, 50 % avant le lancement). PRACTICE QUESTIONS 1. Quelle est la règle de paiement standard pour les projets de conception web pour débutants ? A) 100 % de paiement après un an de fonctionnement du site B) 50 % d'acompte avant de commencer, 50 % du solde avant la remise finale du site C) 0 % d'acompte, paiement intégral seulement si le client réalise des ventes D) 100 % en espèces à l'avance avant de discuter de la portée du projet Answer: B — La règle du 50/50 vous protège, vous et le client. Elle garantit que vous disposez des fonds nécessaires pour commencer le travail tout en gardant le contrôle final jusqu'à la réception du paiement intégral. 2. Que devriez-vous faire si un client demande des pages supplémentaires qui ne figuraient pas dans votre accord initial ? A) Construire les pages supplémentaires gratuitement pour que le client reste satisfait B) Refuser de parler au client à nouveau C) Expliquer poliment le coût additionnel et l'ajouter à la facture finale D) Supprimer tout le site web et recommencer Answer: C — Expliquer poliment le coût additionnel protège votre temps tout en maintenant la relation professionnelle. Cela évite l'élargissement du périmètre non rémunéré. ---------------------------------------- Web Developer / Digital Designer — Lesson 10: Créer un Portfolio Web sans Expérience Rémunérée 8 minutes de lecture POURQUOI VOTRE PORTFOLIO COMPTE PLUS QUE LES CERTIFICATS Lorsqu'un propriétaire de petite entreprise à Accra, Lagos ou Lomé souhaite un site web, il demande rarement un diplôme universitaire. Il veut voir de vrais exemples de sites web que vous avez construits. Un portfolio est votre collection de travaux échantillons qui prouve vos compétences en développement web. Vous n'avez pas besoin de clients payants pour bâtir un portfolio solide. En fait, tout développeur web professionnel commence par créer des sites web d'entraînement. TROIS PROJETS EXEMPLES QUE CHAQUE DÉBUTANT PEUT RÉALISER Pour montrer aux clients potentiels que vous savez construire des sites web modernes, créez ces trois projets exemples pour votre portfolio : - Un Site d'Entreprise Locale : Choisissez une vraie entreprise de votre quartier (comme une boulangerie, une pharmacie ou un salon de coiffure) qui n'a pas de site web. Créez un site propre de 3 pages pour elle, à titre d'entraînement. - Une Page d'Accueil d'Événement (Landing Page) : Créez un site web d'une seule page pour un mariage, une conférence technologique locale ou un festival de musique. Incluez un formulaire d'inscription, le programme de l'événement et les coordonnées. - Votre Site Web de Portfolio Personnel : Créez une page qui vous présente, énumère vos compétences en codage (HTML, CSS, JavaScript, WordPress) et affiche des liens vers vos projets exemples. LIEUX GRATUITS POUR HÉBERGER VOTRE PORTFOLIO Vous n'avez pas besoin de dépenser de l'argent pour un hébergement web payant juste pour présenter votre travail. Vous pouvez héberger vos projets HTML, CSS et JavaScript gratuitement en utilisant ces outils : - GitHub Pages : Hébergement gratuit directement depuis votre dépôt de code. Idéal pour montrer un code propre aux employeurs du secteur technologique. - Netlify ou Vercel : Plateformes d'hébergement gratuites qui permettent de glisser-déposer vos dossiers de projet et de les transformer en sites web en direct en quelques secondes. - Tier Gratuit de WordPress.com : Utile pour démontrer des compétences de mise en page de base sur WordPress sans acheter de nom de domaine personnalisé. COMMENT PRÉSENTER CHAQUE PROJET DE PORTFOLIO Lorsque vous affichez un projet sur votre page de portfolio ou envoyez des liens via WhatsApp, incluez toujours trois choses : - Un lien en direct et fonctionnel où les gens peuvent consulter et cliquer sur le site depuis leur téléphone ou leur ordinateur portable. - Un court paragraphe expliquant l'objectif (par exemple, 'Un site web réactif de 3 pages construit pour une pharmacie locale afin d'afficher les heures d'ouverture et les listes de produits.'). - Une liste des technologies utilisées (par exemple, HTML5, CSS Grid, JavaScript, Flexbox). [Essayez ceci aujourd'hui] Prenez un dépliant papier d'une entreprise locale près de chez vous. Convertissez les informations de ce dépliant en un brouillon de site web HTML propre, adapté aux mobiles, d'une seule page sur votre téléphone ou votre ordinateur portable. PRACTICE QUESTIONS 1. Pourquoi un portfolio de conception web est-il nécessaire pour trouver des clients ? A) C'est une exigence légale imposée par les autorités gouvernementales B) Il prouve vos compétences pratiques en montrant des exemples concrets de sites web fonctionnels C) Il dépose automatiquement de l'argent sur votre compte bancaire D) Il remplace le besoin de communiquer avec les clients Answer: B — Les clients veulent des preuves que vous pouvez livrer un travail de qualité. Un portfolio montre des exemples réels et fonctionnels de ce que vous pouvez construire pour eux. 2. Quel outil vous permet d'héberger gratuitement des projets web statiques HTML/CSS ? A) Netlify ou GitHub Pages B) Statut WhatsApp C) Microsoft Word D) Application Mobile Canva Answer: A — Netlify et GitHub Pages offrent un hébergement web gratuit et fiable pour les projets frontend construits avec HTML, CSS et JavaScript. ---------------------------------------- Web Developer / Digital Designer — Lesson 11: Éthique du Web : Sécurité du Client, Domaines et Droit d'Auteur 7 minutes de lecture L'ÉTHIQUE BÂTIT VOTRE RÉPUTATION En tant que développeur web, les clients vous donneront accès à des ressources commerciales sensibles. Ils vous font confiance avec leur identité de marque, leurs comptes de paiement, les adresses e-mail de leurs clients et leurs noms de domaine. Maintenir des normes éthiques élevées est le moyen le plus rapide de bâtir une confiance à long terme et d'obtenir des références organiques. NOMS DE DOMAINE ET PROPRIÉTÉ DE L'HÉBERGEMENT L'une des plus grandes plaintes des propriétaires d'entreprise est que les développeurs web retiennent leurs domaines en otage. Un nom de domaine (comme www.monentreprise.com) est la propriété numérique légale du client. Enregistrez toujours les noms de domaine en utilisant l'adresse e-mail officielle et les informations personnelles du client. Si vous achetez le domaine en leur nom via votre compte, transférez-leur la propriété une fois que le projet est entièrement payé. Retenir le site web ou le domaine d'un client en otage lorsqu'il n'y a pas de litige contractuel est contraire à l'éthique et nuit à votre réputation professionnelle. IMAGES, POLICES ET DROIT D'AUTEUR Vous ne pouvez pas simplement chercher sur Google Images, télécharger des photos et les importer sur le site web d'un client commercial. La plupart des images en ligne appartiennent à des photographes et à des entreprises qui peuvent intenter des actions en justice ou exiger des frais de licence coûteux. Utilisez plutôt ces options sûres : - Plateformes gratuites de photos de stock : Unsplash, Pexels et Pixabay offrent des milliers de photos gratuites de haute qualité, autorisées pour un usage commercial. - Médias fournis par le client : Demandez au client de prendre des photos de son magasin, de ses produits ou de son équipe à l'aide d'un téléphone portable. - Google Fonts : Utilisez des typographies gratuites et open-source de fonts.google.com. [Le Danger des Thèmes et Plugins Nulled] Ne téléchargez jamais de thèmes et plugins WordPress premium piratés ou 'nulled' depuis des sites illégaux de partage de fichiers. Ces fichiers contiennent presque toujours des codes malveillants cachés (malware) qui compromettent le site web de votre client, volent les données des clients ou redirigent les visiteurs vers des sites illégaux. DONNÉES CLIENT ET SÉCURITÉ DES MOTS DE PASSE Lors de la gestion des mots de passe pour les comptes d'hébergement, les fichiers de base de données ou les tableaux de bord d'administration de site : - Ne stockez jamais les mots de passe des clients dans des messages en clair ou des applications de notes non chiffrées. - Utilisez des mots de passe forts et générés aléatoirement contenant des chiffres, des lettres et des symboles. - Encouragez les clients à utiliser des gestionnaires de mots de passe dédiés comme Bitwarden ou 1Password pour partager les identifiants en toute sécurité. PRACTICE QUESTIONS 1. Pourquoi un nom de domaine de site web doit-il toujours être enregistré au nom du client ? A) Parce que les noms de domaine sont légalement gratuits pour les développeurs B) Pour s'assurer que le client possède légalement sa marque et sa propriété numérique C) Parce que les développeurs web ne sont pas autorisés à utiliser les navigateurs internet D) Pour empêcher le site web de s'afficher sur les téléphones portables Answer: B — Le nom de domaine représente l'identité numérique officielle du client. L'enregistrer en son nom garantit qu'il conserve la propriété légale de sa marque commerciale. 2. Quel est le risque majeur d'utiliser des plugins WordPress 'nulled' (piratés) ? A) Ils rendent le site trop rapide à charger B) Ils contiennent des logiciels malveillants cachés qui peuvent compromettre la sécurité du site et les données C) Ils paient automatiquement des frais supplémentaires aux sociétés d'hébergement D) Ils transforment tout le texte en une langue différente Answer: B — Les plugins 'nulled' sont modifiés par des hackers pour injecter des scripts de porte dérobée et des logiciels malveillants dans les sites web, posant de graves risques de sécurité pour vos clients. ---------------------------------------- Web Developer / Digital Designer — Lesson 12: Communication Client et Gestion de Projets Web 8 minutes de lecture UNE COMMUNICATION CLAIRE FAIT AVANCER LES PROJETS De nombreux développeurs web échouent non pas à cause d'un mauvais codage, mais à cause d'une mauvaise communication. Les propriétaires d'entreprise sont souvent non-techniques. Ils ne se soucient pas de la syntaxe du code ; ils se soucient des délais clairs, des explications simples et des résultats fiables. Apprendre à gérer les attentes des clients, à organiser le contenu et à communiquer clairement vous distinguera de vos concurrents. UTILISER WHATSAPP BUSINESS DE MANIÈRE PROFESSIONNELLE En Afrique de l'Ouest, WhatsApp est l'outil commercial principal. Utiliser WhatsApp Business (au lieu d'un compte personnel) donne immédiatement un aspect professionnel à votre service web : - Configurez un profil professionnel : Incluez votre photo ou logo professionnel, les heures d'ouverture, le lieu et le lien de votre portfolio web. - Créez des réponses rapides : Enregistrez des modèles de texte automatisés pour les questions fréquentes des clients, comme les forfaits tarifaires, les méthodes de paiement acceptées et les matériaux requis. - Établissez un catalogue de services : Listez vos forfaits de création de sites web (par exemple, 'Site Basique 1 Page', 'Site Web d'Entreprise Standard', 'Boutique E-commerce') directement sur votre profil WhatsApp. LE PROCESSUS DE PROJET WEB EN 5 ÉTAPES Pour éviter toute confusion, suivez ce processus structuré pour chaque création de site web : - 1. Découverte et Accord : Discutez des exigences, signez un accord simple et collectez l'acompte de 50 %. - 2. Collecte de Contenu : Obtenez les logos, les textes, les photos d'entreprise et les informations de contact du client avant de commencer la conception. - 3. Première Ébauche (Staging) : Construisez le site web sur votre lien de serveur de brouillon et envoyez-le pour révision. - 4. Révisions Client : Accordez jusqu'à 2 séries structurées de modifications basées sur les commentaires du client. - 5. Paiement Final et Lancement : Recevez le solde restant de 50 %, puis connectez le site web au domaine officiel et transférez le contrôle. DÉFINIR DES LIMITES POUR LES RÉVISIONS CLIENT Sans limites claires, les clients peuvent envoyer des messages quotidiens interminables demandant de petites modifications de conception. Indiquez clairement dans votre accord : 'Ce forfait inclut 2 séries de révisions de conception. Toute modification supplémentaire après approbation sera facturée à un tarif additionnel.' Cela permet de faire avancer le projet dans les délais tout en vous gardant, vous et le client, concentrés. [Essayez ceci aujourd'hui] Téléchargez WhatsApp Business et rédigez 2 réponses rapides : l'une listant ce dont vous avez besoin d'un client pour commencer un site web (logo, texte, images) et l'autre expliquant votre structure de paiement 50/50. PRACTICE QUESTIONS 1. Pourquoi est-il important de collecter tous les textes et photos du client AVANT de construire le site ? A) Cela évite les retards causés par l'attente de matériaux manquants pendant la construction B) Cela vous permet de vendre leurs photos à d'autres entreprises C) Cela réduit de moitié vos coûts de données mobiles D) C'est exigé par les sociétés d'enregistrement de noms de domaine Answer: A — Attendre le contenu textuel et les images au milieu d'un projet est la principale cause de retards. Collecter le contenu en premier accélère le développement. 2. Combien de séries de révisions de conception devraient généralement être incluses dans un forfait standard de projet web ? A) Révisions illimitées pour toujours B) Zéro révision autorisée C) 1 à 2 séries de révisions structurées D) 50 révisions par semaine Answer: C — Limiter les révisions à 1 ou 2 séries permet de faire avancer le projet, de fixer des limites claires et d'éviter un travail de révision sans fin et non rémunéré. ---------------------------------------- Web Developer / Digital Designer — Lesson 13: Créez votre profil professionnel 10 min de lecture OBJECTIVE: Set up a simple, honest professional presence online so employers and customers can find and trust you. Avant de vous embaucher ou d'acheter chez vous, les gens font souvent des recherches sur vous. Un profil professionnel est simplement une page claire et honnête qui répond à trois questions : qui êtes-vous, que pouvez-vous faire et comment peut-on vous contacter ? Vous n'avez pas besoin d'être célèbre ou d'avoir un ordinateur. Un téléphone et une bonne photo suffisent pour commencer. COMMENCEZ PAR CE QUI EST GRATUIT - WhatsApp Business — application gratuite. Ajoutez votre métier, vos heures de travail, votre emplacement et un court catalogue de vos travaux ou services. De nombreux clients en Afrique de l'Ouest vous trouveront ici en premier. - Google Business Profile — gratuit. Si vous avez une boutique, un atelier ou un stand, cela vous place sur Google Maps afin que les gens du quartier puissent vous trouver. - LinkedIn (compte Basic gratuit) — utile si vous recherchez un emploi de bureau, dans une ONG ou une entreprise. Ajoutez une photo claire, votre métier ou compétence, et deux ou trois lignes sur ce que vous avez réalisé. - Groupes d'emploi et de commerce locaux — les groupes Facebook et WhatsApp pour votre ville ou votre métier sont les endroits où de nombreuses opportunités réelles sont partagées en premier. Vous n'avez pas besoin des quatre dès le premier jour. Choisissez celui où se trouvent réellement vos clients ou employeurs. Un tailleur ou un traiteur peut tirer davantage de WhatsApp Business et des groupes locaux ; un apprenant en support informatique pourrait avoir besoin de LinkedIn en premier. Ajoutez les autres au fil du temps. CE QUI REND UN PROFIL DIGNE DE CONFIANCE - Une vraie photo de vous — visage visible, arrière-plan simple, vêtements soignés. Pas de lunettes de soleil, pas de filtres. - Votre vrai nom, écrit de la même manière partout. - Une phrase honnête sur ce que vous faites : 'J'installe et répare les systèmes solaires domestiques à Hohoe.' - Preuve : photos de travaux terminés, un certificat ou un court témoignage d'un client satisfait. - Un numéro de téléphone ou un lien WhatsApp qui fonctionne réellement. [Protégez-vous] Ne payez jamais quiconque promet de « vérifier » votre profil ou de vous garantir un emploi moyennant des frais. Les plateformes réelles comme LinkedIn, WhatsApp Business et Google Business Profile sont gratuites à configurer. Toute personne vous demandant de l'argent pour vous inscrire est probablement une arnaque. [Essayez ceci aujourd'hui] Rédigez votre phrase honnête — qui vous êtes et ce que vous faites — et enregistrez-la dans vos notes. Vous la réutiliserez dans chaque profil, CV et présentation à partir de maintenant. PRACTICE QUESTIONS 1. Lequel de ces services est gratuit à configurer et place votre atelier sur Google Maps ? A) Un annuaire professionnel payant B) Google Business Profile C) Un prospectus imprimé D) Un site web que vous payez un développeur pour créer Answer: B — Google Business Profile est gratuit et place votre entreprise sur Google Maps et dans les résultats de recherche, afin que les personnes à proximité puissent vous trouver. Vous n'avez besoin que d'un téléphone et des détails de votre entreprise. 2. Quelle est la qualité la plus importante pour une photo de profil professionnelle ? A) Elle a été prise par un photographe professionnel B) Elle utilise un filtre attrayant C) Votre visage est clairement visible et vous avez l'air soigné D) Elle vous montre avec des objets coûteux Answer: C — Les employeurs et les clients veulent voir une personne réelle et digne de confiance. Une photo claire et soignée avec un arrière-plan simple inspire plus confiance que n'importe quel filtre ou arrière-plan coûteux. ---------------------------------------- Web Developer / Digital Designer — Lesson 14: Fixez Vos Objectifs et Préparez-Vous aux Obstacles 10 min de lecture OBJECTIVE: Turn a wish into a written goal, review it weekly, and use if-then plans to handle the obstacles that usually stop you. Un objectif qui reste dans votre tête est un souhait. Un objectif écrit, avec une date et une prochaine étape, est un plan. Les recherches sur la manière dont les gens changent réellement leur comportement aboutissent toujours au même constat : les personnes qui écrivent leurs objectifs, les vérifient régulièrement et décident à l'avance de ce qu'il faut faire lorsque les choses tournent mal sont beaucoup plus susceptibles de terminer ce qu'elles ont commencé. ÉCRIVEZ-LE, DE MANIÈRE PRATIQUE - Un objectif à la fois. « Terminer le cours sur l'énergie solaire avant le 30 novembre » est plus efficace que cinq souhaits vagues. - Rendez-le vérifiable. Vous devriez pouvoir dire « fait » ou « non fait » — et non « j'ai fait de mon mieux ». - Donnez-lui une date. Un objectif sans date devient tranquillement « un jour ». - Écrivez la toute prochaine petite étape. Non pas « trouver un emploi » mais « envoyer un message à deux quincailleries le samedi matin ». - Gardez-le là où vous le verrez — un carnet, une note sur votre téléphone, ou du papier sur le mur. LA RÉVISION HEBDOMADAIRE — 15 MINUTES QUI CHANGENT TOUT Choisissez un moment fixe chaque semaine — le dimanche soir fonctionne bien pour beaucoup de monde. Posez-vous trois questions : Qu'ai-je terminé cette semaine ? Qu'est-ce qui m'a gêné ? Quelle est ma prochaine étape pour la semaine à venir ? Notez les réponses. Cette petite habitude permet de détecter les problèmes tant qu'ils sont encore petits, et cela vous rappelle que vous avancez, même lorsque les progrès semblent lents. PLANS « SI-ALORS » : DÉCIDEZ AVANT L'ARRIVÉE DE L'OBSTACLE La plupart des plans échouent aux mêmes moments prévisibles : le forfait de données est épuisé, un ami vous invite à sortir un soir d'étude, la pluie annule le travail que vous aviez prévu. Un plan « si-alors » est une décision que vous prenez maintenant, afin qu'un moment difficile ne vous demande pas de volonté plus tard. Le format est simple : « SI [l'obstacle se produit], ALORS je [action spécifique]. » - SI mes données sont épuisées, ALORS j'étudierai plutôt à partir de mes leçons hors ligne téléchargées. - SI il pleut le jour où j'avais prévu de visiter des boutiques, ALORS je les appellerai plutôt et visiterai le lendemain. - SI je me sens trop fatigué pour étudier la nuit, ALORS je ferai juste 10 minutes — commencer est le plus difficile. - SI un client retarde le paiement, ALORS j'enverrai un rappel poli après trois jours, et non je ne discuterai pas. [Une note sur la visualisation] Imaginer votre objectif peut aider — mais visualisez les étapes, pas seulement la récompense. Au lieu de seulement rêver du certificat accroché à votre mur, imaginez-vous ouvrir la leçon, répondre au quiz et envoyer un message au client. Visualiser le processus vous prépare ; visualiser uniquement le prix peut en fait vous détendre au point de ne rien faire. [Essayez ceci aujourd'hui] Écrivez un objectif avec une date, puis écrivez deux plans « si-alors » pour les obstacles les plus susceptibles de vous arrêter. Gardez-les quelque part où vous les verrez cette semaine. PRACTICE QUESTIONS 1. Qu'est-ce qui rend un objectif « vérifiable » ? A) Il est écrit en anglais B) Vous pouvez clairement dire s'il est fait ou non C) D'autres personnes l'approuvent D) Il est assez ambitieux pour impressionner les gens Answer: B — Un objectif vérifiable a une ligne d'arrivée claire : « terminer 8 leçons avant vendredi » peut être marqué comme fait ou non fait. « Faire de mon mieux » ne peut pas — et les objectifs vagues sont faciles à abandonner discrètement. 2. Votre soirée d'étude arrive et votre forfait de données est épuisé. Que fait un bon plan « si-alors » ? A) Il vous force à acheter plus de données immédiatement B) Il vous dit de sauter l'étude jusqu'à la semaine prochaine C) Il vous donne une décision que vous avez prise à l'avance, comme passer à vos leçons hors ligne téléchargées D) Il vous punit de ne pas avoir mieux planifié Answer: C — Un plan « si-alors » élimine le besoin de volonté sur le moment : vous avez décidé plus tôt que SI les données s'épuisent, ALORS vous étudiez hors ligne. La décision est déjà prise, il vous suffit de la suivre. ---------------------------------------- Web Developer / Digital Designer — Lesson 15: Présentez-vous en 30 secondes 8 min de lecture OBJECTIVE: Prepare and practise a short, confident self-introduction you can use with employers, customers and new contacts. Beaucoup de personnes compétentes ratent des opportunités parce qu'elles paniquent quand quelqu'un leur demande : « Alors, qu'est-ce que vous faites dans la vie ? » Une présentation personnelle est une réponse courte et préparée — environ 30 secondes — que vous avez pratiquée jusqu'à ce qu'elle semble naturelle. Il ne s'agit pas de vous vanter. Il s'agit simplement de permettre aux gens de comprendre facilement comment vous pouvez les aider. LE SCÉNARIO EN TROIS PARTIES - Qui vous êtes : votre nom et votre métier ou compétence. « Je m'appelle Amina. Je suis assistante en pharmacie qualifiée. » - Ce que vous pouvez faire : une ou deux choses concrètes, avec des preuves si vous en avez. « J'ai suivi une formation en support de dispensation et en gestion des stocks, et j'ai aidé dans une pharmacie très fréquentée pendant trois mois. » - Ce que vous recherchez : dites-le clairement. « Je recherche un poste en pharmacie ou en clinique dans cette région. » ou « Je prends des commandes de traiteur pour des événements allant jusqu'à 100 personnes. » Mis ensemble, cela donne ceci : « Bonjour, je m'appelle Kofi. Je suis technicien solaire — j'ai terminé une formation certifiée en installation solaire domestique, et j'ai déjà installé des systèmes pour trois familles dans cette ville. Je recherche plus de clients, et je fais aussi des réparations et de la maintenance. Voici mon numéro. » Trente secondes, et l'interlocuteur sait exactement ce que vous offrez. PERSONNALISEZ-LA - Adaptez la fin à l'interlocuteur : un client entend ce que vous vendez ; un employeur entend le poste que vous désirez ; un contact entend comment il peut vous aider. - Pratiquez à voix haute, pas dans votre tête — dites-le à un ami, à un miroir ou à l'enregistreur vocal de votre téléphone, cinq fois. - Restez honnête. Une petite affirmation véridique vaut mieux qu'une grande exagération qui s'effondre à la première question. - Terminez par un moyen de vous joindre : votre numéro, votre WhatsApp, ou l'adresse de votre boutique. [Pour les apprenants timides] Se sentir nerveux est normal et ne signifie pas que vous êtes mauvais dans ce domaine. La préparation est la solution : un scénario pratiqué signifie que vous n'aurez jamais à inventer des phrases quand vous êtes nerveux. Commencez par l'utiliser dans des moments de faible pression — avec un voisin, puis un commerçant — avant le grand entretien ou le client important. [Essayez ceci aujourd'hui] Écrivez votre présentation en trois parties dans vos notes, puis dites-la à voix haute trois fois. Utilisez-la une fois cette semaine avec une personne réelle. PRACTICE QUESTIONS 1. Quelles sont les trois parties d'une bonne présentation de 30 secondes ? A) Qui vous êtes, ce que vous pouvez faire, ce que vous recherchez B) Vos attentes salariales, votre localisation, votre âge C) Vos problèmes, vos besoins, vos plaintes D) Your problems, your needs, your complaints Answer: B — Le scénario répond aux trois questions que tout auditeur se pose : qui est cette personne, que peut-elle faire pour moi, et que veut-elle ? Restez bref, honnête et entraîné. 2. Quelle est la meilleure façon de préparer votre présentation ? A) Mémoriser un long discours sur toute votre vie B) Attendre l'inspiration au moment voulu C) Pratiquer un court scénario à voix haute plusieurs fois avant d'en avoir besoin D) Copier mot pour mot la présentation de quelqu'un d'autre Answer: C — Le fait de le dire à voix haute — à un ami, à un miroir ou à un enregistreur vocal — est ce qui le rend naturel sous pression. Un scénario court, honnête et pratiqué est meilleur que l'improvisation ou un long discours mémorisé. ---------------------------------------- Get the full app: https://miva-skillsnav.lovable.app