PratiqueDéveloppement webDébutant

HTML et CSS : créer et mettre en page un vrai site

Le site vitrine complet d'une PME, codé par toi et en ligne sur mobile

  • 12 h de formation
  • 5 modules · 25 leçons
  • 61 exercices
  • 2 projets
  • Certificat inclus

Ce que vous saurez faire

  • HTML5 sémantique et accessible (structure, formulaires, attributs ARIA de base)
  • CSS moderne (cascade, box model, unités relatives, variables)
  • Mise en page Flexbox et CSS Grid
  • Intégration responsive mobile-first
  • Optimisation des images et performance sur connexion mobile
  • Mise en ligne d'un site statique (Netlify, GitHub Pages)

Ce que vous produisez

  • Une page d'accueil HTML sémantique validée par le validateur du W3C
  • Un formulaire de contact et de réservation accessible
  • Une feuille de style organisée avec variables de couleurs et de typographie
  • Une landing page responsive d'une PME, testée sur trois tailles d'écran
  • Le site vitrine complet de 4 pages d'une PME, en ligne
  • Un rapport Lighthouse de ton site avec tes corrections
  • Une fiche projet pour ton portfolio avec lien, captures et choix techniques

Revenus possibles

Un intégrateur HTML et CSS débutant peut facturer une landing page 75 000 à 150 000 FCFA et un site vitrine simple de 4 à 5 pages 150 000 à 300 000 FCFA à Dakar ou à Abidjan en 2026 ; les offres freelance d'entrée de gamme démarrent autour de 150 000 FCFA, les agences facturent 400 000 à 1 500 000 FCFA. Les sites avec paiement ou back-office demandent les niveaux suivants.

Estimation indicative, selon votre marché, votre rythme et votre travail. Aucun revenu n’est garanti.

Outils utilisés

  • VS Code
  • Google Chrome et ses outils de développement
  • HTML5
  • CSS3
  • Validateur W3C
  • Lighthouse
  • Squoosh
  • Netlify
  • GitHub Pages

Ce que vous allez apprendre

  • Structurer un site de plusieurs pages en HTML sémantique (header, nav, main, section, footer)
  • Construire des formulaires de contact et de réservation accessibles et bien étiquetés
  • Maîtriser la cascade, la spécificité, le box model, les unités et la typographie en CSS
  • Mettre en page des interfaces avec Flexbox et CSS Grid
  • Rendre un site responsive en approche mobile-first avec des media queries
  • Organiser un CSS maintenable avec des variables et des composants réutilisables
  • Optimiser les images et mettre un site en ligne sur Netlify ou GitHub Pages

Prérequis

  • Niveau 1 du parcours (Découvrir le code : comprendre comment un site fonctionne) recommandé, ou savoir écrire une page HTML simple avec titres, liens et images
  • Un ordinateur avec VS Code et Google Chrome installés
  • 3 à 4 heures par semaine pendant 3 à 4 semaines

À propos de cette formation

## Construis un vrai site, pas une page d'exercice À Dakar comme à Abidjan, des centaines de PME cherchent un site simple, rapide et lisible sur téléphone : un restaurant, une clinique, une école privée, un cabinet. Ce travail commence toujours par la même base : du HTML bien structuré et du CSS qui tient sur tous les écrans. C'est cette base que tu vas maîtriser ici. ### À qui s'adresse cette formation - Tu as suivi le niveau 1 (Découvrir le code) ou tu sais déjà écrire une page HTML simple. - Tu veux passer de la page d'exercice à un site de plusieurs pages que tu peux montrer. - Tu es graphiste ou community manager et tu veux intégrer toi-même tes maquettes. ### Ce que tu fais pendant la formation - Tu structures un site en HTML sémantique, avec des formulaires et une accessibilité correcte. - Tu maîtrises la cascade, le box model, les unités et la typographie en CSS. - Tu mets en page avec Flexbox et CSS Grid, puis tu rends tout responsive, en partant du mobile. - Tu organises ton CSS avec des variables, tu optimises tes images et tu mets ton site en ligne. ### Ce avec quoi tu repars Une landing page responsive, puis le site vitrine complet de 4 pages d'une PME (fictive ou réelle), en ligne, rapide sur une connexion 3G et présentable dans ton portfolio. ### Ta place dans le parcours Développement web C'est le niveau 2 : après le niveau 1 (Découvrir le code), avant le niveau 3 (JavaScript : rendre un site vivant et interactif). Le niveau 5, Développeur full-stack, survole HTML et CSS en deux modules ; ici tu y passes douze heures.

Public visé : Débutants qui ont écrit leurs premières balises, étudiants, graphistes, community managers et futurs développeurs de Dakar, Abidjan, Bamako, Cotonou ou de la diaspora qui veulent intégrer proprement un site vitrine responsive à la main.

Programme

Un chemin module par module : leçons, exercices, quiz et projets à rendre.

  1. Module 1· 12 exercices

    HTML sémantique : structurer un site

    Tu découpes un site en pages et en zones sémantiques, et tu écris un HTML propre que les navigateurs, Google et les lecteurs d'écran comprennent.

    • Planifier un site vitrine : pages, contenus et arborescence de fichiersAperçu gratuit15 min
    • Les balises sémantiques : header, nav, main, section, article et footerAperçu gratuit18 min
    • Liens entre pages, ancres et navigation principaleAperçu gratuit15 min
    • Images, figures et médias : formats, texte alternatif et poidsAperçu gratuit15 min
    • Support du module (PDF)Aperçu gratuit5 min
    • Quiz : HTML sémantiqueQuiz de validation

  2. Module 2· 12 exercices

    Formulaires et accessibilité

    Tu construis les formulaires dont une PME a besoin et tu vérifies qu'ils sont utilisables par tous, au clavier comme au lecteur d'écran.

    • Anatomie d'un formulaire : label, input, select et textarea18 min
    • Types de champs et validation native : email, tel, date et required15 min
    • Accessibilité : contrastes, navigation clavier et attributs ARIA utiles18 min
    • Métadonnées et SEO de base : title, description et partage WhatsApp15 min
    • Support du module (PDF)5 min
    • Quiz : formulaires et accessibilitéQuiz de validation

  3. Module 3· 12 exercices

    CSS : les fondamentaux

    Tu comprends pourquoi une règle CSS s'applique ou non, et tu maîtrises boîtes, unités, couleurs et typographie.

    • Sélecteurs, cascade, héritage et spécificité18 min
    • Le box model : margin, border, padding et box-sizing15 min
    • Unités et dimensions : px, rem, %, vw et max-width15 min
    • Couleurs, polices et typographie lisible sur téléphone15 min
    • Support du module (PDF)5 min
    • Quiz : les fondamentaux du CSSQuiz de validation
    • Landing page d'un restaurant de DakarProjet à rendre

  4. Module 4· 12 exercices

    Mise en page : Flexbox, Grid et responsive

    Tu disposes n'importe quelle maquette avec Flexbox et Grid, et tu la fais tenir du petit Android au grand écran.

    • Flexbox : aligner une barre de navigation et des cartes20 min
    • CSS Grid : grilles de services, galeries et mises en page complètes20 min
    • Mobile-first et media queries : partir du téléphone18 min
    • Menu mobile et images responsives sans JavaScript15 min
    • Support du module (PDF)5 min
    • Quiz : Flexbox, Grid et responsiveQuiz de validation

  5. Module 5· 13 exercices

    CSS maintenable, performance et mise en ligne

    Tu organises ton CSS pour qu'il reste propre sur plusieurs pages, tu rends ton site rapide en 3G et tu le publies.

    • Variables CSS et composants réutilisables : boutons, cartes et sections18 min
    • Transitions et animations légères sans alourdir la page15 min
    • Performance : poids des images, formats WebP et chargement différé15 min
    • Mettre en ligne sur Netlify ou GitHub Pages et vérifier avec Lighthouse15 min
    • Support du module (PDF)5 min
    • Quiz : CSS maintenable et mise en ligneQuiz de validation
    • Projet final : le site vitrine responsive d'une PMECapstone

  6. Certificat inclus

Votre certificat à la fin

Un certificat numéroté, avec les compétences validées, une page publique et un QR code de vérification. À ajouter sur LinkedIn en un clic.

Kolonell Academy
Vérifié par Kolonell Academy

Certificat de compétences

Votre nom

a suivi et validé la formation

HTML et CSS : créer et mettre en page un vrai site

Compétences certifiées

  • HTML5 sémantique et accessible (structure, formulaires, attributs ARIA de base)
  • CSS moderne (cascade, box model, unités relatives, variables)
  • Mise en page Flexbox et CSS Grid
  • Intégration responsive mobile-first
  • Optimisation des images et performance sur connexion mobile
  • Mise en ligne d'un site statique (Netlify, GitHub Pages)

Numéro KOL-CERT-2026-XXXXX

Mohamed Bah

Fondateur, Kolonell Academy

Affiche de la formation HTML et CSS : créer et mettre en page un vrai site

Affiche de la formation

Téléchargez l'affiche pour l'imprimer, l'envoyer à votre employeur ou la partager avec vos collègues. Le programme complet détaille chaque module.

Télécharger PNGTélécharger PDFProgramme complet (PDF)

Ce cours fait partie du parcours

Développement web

Niveau 2 sur 5 · Pratique

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
Voir les 5 niveaux du parcours

Niveau suivant · 3/5 Avancé

JavaScript : rendre un site vivant et interactif

Une spécialité qui se facture

Un catalogue interactif avec panier et commande WhatsApp, codé en JavaScript par toi

75 000 FCFA 16 h

Voir le niveau suivant

Votre formateur

Mohamed Bah

Docteur en informatique et fondateur de Kolonell, agence-plateforme digitale basée à Dakar. Il conçoit et déploie des sites et des applications web pour des PME au Sénégal, en Côte d'Ivoire et dans la diaspora, avec les outils enseignés dans ce parcours.

Questions sur cette formation

Faut-il avoir suivi le niveau 1 ?

C'est recommandé mais pas obligatoire. Si tu sais déjà créer un fichier HTML, écrire des titres, des paragraphes, des liens et des images, et ouvrir ta page dans le navigateur, tu peux commencer ici directement.

Pourquoi ne pas utiliser WordPress ou un constructeur de site ?

Ces outils ont leur place, mais tous produisent du HTML et du CSS. Savoir les écrire toi-même te permet de corriger ce que les outils cassent, d'intégrer une maquette au pixel près et de préparer JavaScript et React, qui reposent sur ces bases.

Est-ce qu'on utilise Bootstrap ou Tailwind ?

Non, pas dans ce niveau. Tu écris du CSS à la main pour comprendre ce que font ces outils. Tailwind arrive au niveau 4 (React et Next.js), quand tu sauras exactement ce qu'il génère.

Mon site sera-t-il vraiment en ligne ?

Oui. Le module 5 te fait publier ton site sur Netlify ou GitHub Pages, gratuitement. Tu pourras ensuite le relier à un nom de domaine (6 300 à 8 600 FCFA par an pour un .com, 15 000 à 25 000 FCFA pour un .sn, en septembre 2026) si tu le souhaites.

Combien de temps faut-il prévoir ?

Environ 12 heures : leçons, exercices de code corrigés automatiquement et deux projets. À 3 ou 4 heures par semaine, compte 3 à 4 semaines.

Puis-je déjà proposer des sites à des clients après ce niveau ?

Tu peux proposer des landing pages et des sites vitrines statiques simples. Dès qu'un client veut un formulaire qui enregistre des données, un paiement Wave ou un espace d'administration, il faut les niveaux suivants ou un partenaire développeur.

Comment payer ?

Par Wave ou Orange Money. Après inscription, vous recevez une facture pro forma par email avec le numéro à créditer. Envoyez la preuve sur WhatsApp : votre accès est activé sous 24 h ouvrées.

Combien de temps ai-je accès à la formation ?

À vie, mises à jour comprises. Vous avancez à votre rythme et vous pouvez revenir sur les leçons autant de fois que nécessaire.

Comment obtenir le certificat ?

Terminez les leçons et validez chaque quiz de module avec au moins 70 %. Le certificat est généré automatiquement, avec un numéro unique et une page publique vérifiable.

Nos engagements

  • Accès à vie et mises à jour incluses
  • Certificat vérifiable publiquement
  • Paiement Wave / Orange Money, activation sous 24 h ouvrées
  • Support WhatsApp

50 000 FCFA · 76 €

Pratique