PracticalWeb DevelopmentBeginner

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 of training
  • 5 modules · 25 lessons
  • 61 exercises
  • 2 projects
  • Certificate included

What you will be able to do

  • 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)

What you will produce

  • 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

Possible earnings

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.

Indicative estimate, depending on your market, pace and work. No income is guaranteed.

Tools used

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

What you'll learn

  • 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

Prerequisites

  • 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

About this course

## 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.

Who it is for: 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.

Curriculum

A module-by-module path: lessons, exercises, quizzes and projects to submit.

  1. Module 1· 12 exercises

    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 fichiersFree preview15 min
    • Les balises sémantiques : header, nav, main, section, article et footerFree preview18 min
    • Liens entre pages, ancres et navigation principaleFree preview15 min
    • Images, figures et médias : formats, texte alternatif et poidsFree preview15 min
    • Support du module (PDF)Free preview5 min
    • Quiz : HTML sémantiqueModule quiz

  2. Module 2· 12 exercises

    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éModule quiz

  3. Module 3· 12 exercises

    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 CSSModule quiz
    • Landing page d'un restaurant de DakarProject to submit

  4. Module 4· 12 exercises

    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 responsiveModule quiz

  5. Module 5· 13 exercises

    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 ligneModule quiz
    • Projet final : le site vitrine responsive d'une PMECapstone

  6. Certificate included

Your certificate at the end

A numbered certificate with your validated skills, a public page and a verification QR code. Add it to LinkedIn in one click.

Kolonell Academy
Verified by Kolonell Academy

Certificate of skills

Your name

has completed and validated the course

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

Certified skills

  • 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)

Number KOL-CERT-2026-XXXXX

Mohamed Bah

Founder, Kolonell Academy

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

Course poster

Download the poster to print it, send it to your employer or share it with colleagues. The full programme details every module.

Download PNGDownload PDFFull programme (PDF)

This course is part of the track

Développement web

Level 2 of 5 · Practical

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
See the 5 track levels

Next level · 3/5 Advanced

JavaScript : rendre un site vivant et interactif

A specialty you can bill for

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

75,000 FCFA 16 h

View the next level

Your instructor

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 about this course

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.

How do I pay?

Via Wave or Orange Money. After enrolling you receive a pro forma invoice by email with the number to pay. Send the proof on WhatsApp: your access is activated within 24 business hours.

How long do I keep access?

For life, updates included. Learn at your own pace and revisit lessons as often as you need.

How do I get the certificate?

Complete the lessons and pass each module quiz with at least 70%. The certificate is generated automatically, with a unique number and a public verification page.

Our commitments

  • Lifetime access, updates included
  • Publicly verifiable certificate
  • Wave / Orange Money payment, activation within 24 business hours
  • WhatsApp support

50,000 FCFA · 76 €

Practical