Med Learning
  • Accueil
  • Cours
  • Formation OFPPT
  • Roadmaps
  • Projets
  • Articles
  • Contact
Med Learning

La plateforme d’apprentissage structurée pour les étudiants OFPPT et les autodidactes.

  • medlearning905@gmail.com
  • 06 87 49 76 05
  • @medle_arning

Navigation

  • Accueil
  • Cours
  • Roadmaps
  • Projets pratiques
  • Classement
  • Articles
  • Contact

Formation OFPPT

  • 1ère année
  • 2ème année
  • Filière Full Stack
  • Filière Mobile
  • Cours, TP, EFM et EFF

Mon compte

  • Connexion
  • Créer un compte
  • Mon espace
  • Mot de passe oublié

Med Learning a été créé par Anas Mounchit à la mémoire de son frère Mohammed Maadallah. Ce site est une sadaqa jariya pour lui : chaque leçon apprise ici, chaque ligne de code écrite, est une bonne action qui continue de l’accompagner.

Si Med Learning t’a aidé, pense à lui dans tes prières.

Qu’Allah lui accorde Sa miséricorde et l’accueille dans Son vaste paradis. رحمه الله

© 2026 Med Learning — Fait au Maroc, pour les étudiants.

ConfidentialitéContact & FAQ
Une question ? Écris-nous
Cours /CSS de A à Z : du style à la mise en page responsive
DébutantM104OFPPT · Développer des sites statiques

CSS de A à Z : du style à la mise en page responsive

Donne du style à tes pages web avec CSS : sélecteurs, couleurs, typographie, Flexbox, Grid, responsive et animations. Vidéos minutées et exercices corrigés.

  • 4 modules
  • 15 chapitres
  • 46 exercices
  • 36 h 55

À propos du cours

Le HTML donne la structure d'une page, le CSS lui donne son apparence : couleurs, polices, espacements, mise en page et animations. Ce cours t'apprend à transformer une page brute en un site moderne, propre et adapté à tous les écrans.

Le cours est organisé en 4 modules et 15 chapitres :

Module 1 · Les bases du CSS Tu découvres comment relier le CSS à une page, puis tu maîtrises les sélecteurs, la cascade, l'héritage et la spécificité. Tu travailles ensuite les couleurs, les unités, la typographie et le modèle de boîte (marges, bordures, padding).

Module 2 · La mise en page Tu comprends display et le flux normal, le positionnement, puis les deux outils de mise en page modernes : Flexbox et CSS Grid. Tu termines par le responsive design pour que tes pages s'adaptent aux mobiles, tablettes et ordinateurs.

Module 3 · Aller plus loin Tu animes tes pages avec les transitions, les transformations et les animations, puis tu organises un code propre et réutilisable avec les variables et les fonctions CSS.

Module 4 · Valider ta formation Tu réalises un projet final, la mise en forme de ton CV en ligne, puis tu te testes avec un examen blanc et une fiche mémo à garder sous la main.

Ce qui rend ce cours efficace :

  • 58 extraits vidéo avec le minutage exact à regarder : tu vois seulement la partie qui explique la notion du moment.
  • Plus de 60 exercices et TP, tous corrigés, avec un TP pratique à la fin de chaque chapitre.
  • Des aperçus du rendu et des encadrés pour retenir l'essentiel : définitions, règles, pièges fréquents, astuces et pratiques en entreprise.

Prérequis : connaître les bases du HTML (le cours HTML suffit). Il te faut un ordinateur, un navigateur et un éditeur de code gratuit (VS Code).

À la fin du cours, tu sauras mettre en forme et mettre en page un site complet et responsive. Tu seras prêt pour le cours Bootstrap.

Programme

Ce que tu vas apprendre

  • Les bases du CSSAvant de mettre en page des sites entiers, il faut savoir écrire une règle CSS sans erreur, cibler exactement l'élément voulu, comprendre pourquoi une règle l'emporte sur une autre, et maîtriser les briques de base de l'apparence : couleurs, unités, texte et boîtes. Cette partie te les donne, pas à pas.
  • La mise en pageTu sais habiller chaque boîte. Il faut maintenant les placer : comprendre le flux normal, changer le type d'affichage d'un élément, le sortir du flux avec le positionnement, puis maîtriser les deux outils modernes de mise en page, Flexbox et Grid, et enfin adapter le tout à chaque taille d'écran. C'est le cœur du métier d'intégrateur.
  • Aller plus loinTa page est mise en forme, mise en page et responsive. Cette partie lui donne le niveau professionnel : du mouvement avec les transitions, les transformations et les animations, puis un code CSS factorisé avec les variables et les fonctions, organisé pour durer et être partagé dans une équipe.
  • Valider ta formationTu connais maintenant le CSS dont un intégrateur a besoin au quotidien. Cette dernière partie te fait tout assembler en mettant en forme le CV que tu as construit dans la formation HTML, puis te met en conditions d'évaluation avec un examen blanc corrigé et une fiche mémo.

Une question ? On est là pour t’aider

Un exercice qui bloque, un TP, ton PFE ou ton orientation : écris-nous sur WhatsApp ou par email, on te répond.

WhatsApp Email
Commencer le cours
  • Introduction au CSSÉcrire une règle CSS, la relier au HTML et l'inspecter dans les DevTools. TP
  • Les sélecteursCibler n'importe quel élément : classes, combinateurs, attributs, pseudo-classes et pseudo-éléments. TP
  • Cascade, héritage et spécificitéComprendre quelle règle l'emporte : cascade, spécificité, héritage et !important. TP
  • Couleurs et unitésÉcrire les couleurs, gérer la transparence et le contraste, choisir les bonnes unités. TP
  • Le texte et la typographiePolices, Google Fonts, propriétés de texte, liens, listes et lisibilité. TP
  • Le modèle de boîteContenu, padding, bordure, marge, box-sizing, fonds, dégradés et ombres. TP