Mooc Html5 Css3 OpenClassRoom mon retour d’expérience

J’ai participé en octobre 2013 au mooc HTML5 et CSS3 proposé par Open classroom et je souhaitais vous en faire un retour d’expérience notamment sur son organisation et la méthode d’apprentissage que j’ai utilisé pour assimiler le contenu très riche de ce cours en ligne.

Ce Mooc avait pour objectif d’apprendre les bases du HTML5 et CSS3 pour concevoir un site web. Il s’adressait à un public débutant mais aussi à des personnes qui souhaitaient se rafraîchir la mémoire sur les balises HTML et CSS. D’une durée de 5 semaines le Mooc était animé par Mathieu Nebra et a rassemblé environ 18842 apprenants.

Contenu pédagogique

Ce mooc était composé de 5 chapitres contenant des vidéos dans lesquelles étaient présentées les notions fondamentales du code HTML5 et CSS3. Des exemples et exercices concrets étaient proposés ceux-ci nous permettaient chaque semaine de progresser et d’appréhender les différentes balises et la structuration d’une page HTML5. Personnellement j’ai trouvé que les vidéos étaient d’une très bonne qualité pédagogique et qu’elles convenaient parfaitement au niveau d’un public débutant.

Les évaluations (Quiz et travaux pratiques)

La fin de chaque semaine était rythmée par un quiz nous évaluant sur les éléments les plus importants de la semaine. Ce quiz comptait dans la notre globale du mooc il était donc important d’être rigoureux et de le valider dans les temps. La validation finale à été organisée autour d’un TP dans lequel il fallait reproduire une maquette « Responsive Web Design ». L’évaluation a été réalisée par les apprenants eux-mêmes, en effet chaque participant avait 3 TP à corriger suivant différents critères.

Les interactions (visioconférences et forum)

Des moments d’échanges et de partage avec la communauté étaient prévus à différents moments et sous diverses formes. A la fin de chaque semaine un « Live »  était organisé. Dans cet espace d’échange les participants avaient un résumé de la semaine par Mathieu puis pouvaient interagir avec l’animateur sur des questions via le Tchat et la Webcam. Le forum était l’espace d’entraide et de dialogue dans lequel on pouvait solliciter la communauté sur un conseil ou pour apporter son aide à un participant.

Organiser son apprentissage avec le Mindmapping

Dans le cadre de ce cours nous avons reçu une grande quantité d’information et saisi beaucoup de code, alors comment retenir l’essentiel de ce Mooc ? La méthode du Mindmapping était tout indiquée, car elle permet de réaliser une carte de synthèse et ainsi transformer l’information en connaissance utile. J’ai donc entrepris de cartographier le contenu de chaque chapitre sous forme de carte heuristique pour ainsi me constituer une sorte de bibliothèque de code HTML5 CSS3. Vous trouverez ci-dessous le résultat de ces semaines de Mooc synthétisé en 4 cartes mentales.

Semaine 1 : Découverte de HTML5

http://www.mindmeister.com/331646087/mooc-html5-css3-semaine-1-d-couverte-de-html5

 

Semaine 2 : Mise en forme CSS

http://www.mindmeister.com/333259213/mooc-html5-css3-semaine-2

Semaine 3 : Mise en page du site web

http://www.mindmeister.com/335770431/mooc-html5-css3-semaine-3

Semaine 4 : Fonctionnalités avancées

http://www.mindmeister.com/338028397/mooc-html5-css3-semaine-4

Au bout de 5 semaines le badge HTML5 

Bonne consultation
Olivier L

9 commentaires

  1. Sympa les documents, merci :)
    Je me permets une petite correction pour la semaine 1 : les attributs repeat/ no-repeat/repeat-x et repeat-y se placent dans le CSS et mettent en forme le background-image (et non les images insérées en HTML grâce à la balise )

  2. Gros travail de synthétisation, bravo.
    J’ai moi-même suivi le mooc HTML5CSS3 et validé le badge, ce fut en effet une excellente expérience.

    As-tu essayé de valider cette formation par la certification d’un 1h30 ?

    J’envisage dans le cadre d’un autre mooc que je suis « elearn2(se former au elearning pour former au elearning) »de faire dans le cadre de mon projet final une « formation à distance de préparation à la certification HTML5/CSS3″ en m’appuyant sur les sources du mooc HTML5CSS3 et pourquoi pas sur tes cartes mentales ?
    Mon idée pour rendre la formation attractive (flipped) serait de partir de l’évaluation finale (que j’ai trouvé longue à réaliser) pour intégrer tous les principes et fonctions du HTML5 et le CSS3 nécessaires à certification.
    Qu’en penses-tu ?

  3. Bonjour Corentin et merci pour ton retour.

    Je vais revoir le contenu de certaines de mes cartes et prendre ta remarque en considération notamment sur  » attributs repeat/ no-repeat/repeat-x et repeat-y « .

    Cdt, olivier

  4. Bonjour,

    Merci pour votre retour d’expérience sur le sujet, j’hésitais à m’y inscrire pour avoir des bases suffisantes en HTML5/CSS afin d’aborder la personnalisation avancées du thème de mon site. Vu les point positifs que je lit ici, cela me conforte dans l’idée que c’est ce qu’il me faut!

    Je prend note de la méthode MindMap, cela pourra m’aider surement ! =)

  5. Grégoire Khatchadourian

    Bonjour

    Pour 5 semaines de cours, combien d’heures y passiez-vous par semaine?

    Cordialement

  6. olivier_formateurduweb

    Bonjour,

    J’ai passé environ deux bonnes heures par semaines.
    1 heure sur les vidéos et ensuite 1 autre heure avec des exercices de développement.

    Olivier

  7. bonjour
    je suis actuellement cette formation mais je nage completement.
    vos schémas sont excellent j’aimerai les imprimer .
    les avez vous en pdf?
    merci encore

  8. olivier_formateurduweb

    Bonjour,

    Pour imprimé les cartes en PDF voici la procédure :
    – Dans un premier temps il faudra installer le logiciel gratuit Xmind sur votre ordinateur
    – Ensuite aller sur le site https://www.biggerplate.com/formateurduweb sur lequel j’ai mis toutes les cartes au format Xmind.
    – En téléchargeant les cartes que j’ai déposé sur ce site vous pourrez les ouvrir avec Xmind et ainsi les exporter au format PDF.
    L’inscription au site https://www.biggerplate.com/ est gratuit
    Voila
    Olivier

  9. Bonjour.
    Merci pour ces cartes hyper-pratiques pour les débutants.
    Les cours CSS ont changé, je cherche une carte avec les récaps des flexbox. Avez vous ça sous la main ?

Répondre

Votre adresse email ne sera pas publiée. Les champs obligatoires sont marqués d'une étoile *

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>