Aussi loin que je m’en rappelle, j’ai tapé mes premières lignes de code entre 2004 et 2005, quand j’avais entre 13 et 14 ans. N’y voyez aucune précocité ici. À l’époque, ma première page web était bêtement conçue sur le moteur “page perso” de Lycos. À cette époque, c’était un peu le “Fisherprice” de la conception de sites Web.
Mon idée était simplement de créer une page web qui me permettrait d’y publier des petits clips réalisés en stop-motion grâce à une webcam bon marché et un casting sauvage constitué de quelques LEGOS et des “Action-Man” qui s’entre-tuaient sans motifs réels.
C’étaient mes premiers émois dans le développement Web, en somme.
Je me rappelle encore assez nettement le plaisir frénétique de constater le bon affichage de mes pages web totalement bancales, en actualisant mon navigateur (Internet Explorer 6). C’est d’ailleurs un plaisir que je peux encore ressentir aujourd’hui (et heureusement !).
Plus tard, durant mes études graphiques (en communication visuelle et web design), je me suis appliqué à tout reprendre de la base, essentiellement en autodidacte. À peine cinq ans après la fin de ce cursus, entre avril et juin 2019, c’était à mon tour de transmettre ces bases à des étudiants débutant leur apprentissage en la matière.
Je vous propose donc aujourd’hui un retour sur mon expérience d’intervenant lors de l’atelier “HTML / CSS pour débutant(e)s” à l’EMA Vendée, avec les MSA2 en communication et digital, promo 2018-2019.
Une approche pédagogique différente ?
Premier constat lorsque j’ai préparé le contenu de mon atelier “HTML / CSS” : l’approche n’est pas du tout la même que celle mobilisée pour enseigner le design web auprès de profils créatifs.
Une diversité que je recherchais professionnellement et qui m’a beaucoup “challengé” intellectuellement.
À mon sens, l’apprentissage du design web réclame de se forger petit à petit une culture esthétique, l’acquisition de bonnes pratiques et un travail de veille régulier. Il paraît presque invraisemblable d’avoir une approche linéaire avec cette discipline car le sujet peut être abordé sous de multiples portes d’entrées (Histoire, esthétique, ergonomique, supports, etc.).
Le code est – à mon humble avis – nettement plus “séquentiel” dans son accession. Il réclame de saisir des concepts de base sans lesquels il est impossible d’atteindre la première marche. Le plus déroutant, d’un point de vue pédagogique, est finalement de devoir décomposer la matière jusqu’à son niveau “atomique” avant de pouvoir rentrer dans le vif du sujet : comment cela marche une page Web ? Qu’est-ce qu’un langage de programmation ? Un serveur ? Un navigateur ? L’anatomie d’une balise HTML / règle CSS ? Des choses auxquelles on ne fait bien sûr plus du tout attention après les années de pratique.
Pourtant, j’ai voulu introduire mon propos en présentant certaines expérimentations spectaculaires qui ont été réalisés en CSS, tel qu’un jeu vidéo dans un environnement 3D. Chacun pouvait ainsi prendre conscience du potentiel du langage.
Du point de vue “apprenant”, j’étais conscient que devoir se plonger dans le développement web pouvait “faire peur”. La science-fiction, les séries et quelques fantasmes cinématographiques étant sans doute passés par là, ils ont pu donner une image de complexité et d’opacité à cette discipline. Vous vous rappelez du gros développeur malhonnête dans le premier Jurassic Park (1993) ?
Force est de constater qu’en 2019, le code intimide toujours les néophytes et que c’est – quelque part – “normal”. Je me suis ainsi rendu compte que près de la moitié du groupe déclarait ressentir une certaine appréhension sur le sujet. En prévision de cela, j’avais sous-titré mon atelier “HTML / CSS : tout va bien se passer”.
Tou(te)s avaient conscience d’une chose en démarrant : avec ou sans peurs, ils auront besoin de maîtriser les bases d’HTML / CSS professionnellement, même sans avoir l’ambition de devenir des développeurs “purs et durs”.
Remonter tranquillement la chaîne des prérequis
Un challenge ambitieux nous attendait : nous avions 15h devant nous pour que les bases soient suffisamment maîtrisées pour triompher d’un exercice final qui servirait d’évaluation : concevoir une première page Web permettant aux étudiant(e)s de se présenter (oui un CV si vous préférez !).
Immédiatement, cette donnée de “15 heures” m’a rappelé une conférence que je reconsulte occasionnellement. Elle traite de l’importance des vingt premières heures pour apprendre quoi que ce soit. Elle est signée Josh Kaufman et je vous la recommande chaleureusement. Que nous apprend ce dernier ? Que bien utilisée, cette vingtaine d’heures peut permettre d’aller assez loin sur un sujet, tant que l’on se réfère à quatre principes :
- déconstruire le sujet pour mieux l’appréhender,
- en apprendre suffisamment pour pouvoir s’auto-corriger,
- se détourner des distractions,
- pratiquer ce sujet pendant vingt heures
Cette quinzaine d’heures étant répartie en cinq séances de trois heures, tantôt consécutives, tantôt séparées de plusieurs semaines, il convenait donc de composer avec les temps “morts” entre les séances dans la progression.
Planter le décor et pratiquer
La première séance “fleuve” de 6 h (2 demi-journées) nous a permis de planter l’essentiel du décor : fonctionnement d’une page Web, à quoi servent HTML et CSS, installation de l’environnement de développement, le minimum vital pour écrire une page web (<head> / <body>).
Mon objectif était simple : à l’issue de la première matinée, chacun aurait tapé ses premières lignes de code en comprenant ce qu’il/elle fait.
L’après-midi qui suivit, nous commencions à effleurer les concepts clés de ces deux langages. Première incursion au sein d’une des nombreuses strates “d’abstraction” qu’exige la programmation : Class et ID.
Profil littéraire pur et dur, j’ai vaguement eu le sentiment de devoir enseigner des mathématiques (et Dieu sait à quel point je suis imposteur dans cet exercice).
Le parallèle n’est pourtant pas anodin : apprendre le code c’est décrire progressivement des concepts qui sont “binaires”, qui marchent ou ne marchent pas parce qu’ils répondent à d’autres lois. Entre les deux, chacun comprend que HTML et CSS ont leurs propres incohérences, leurs mystères et une relative souplesse face à l’erreur. C’est ce qui les rend parfaits pour débuter le développement en douceur.
À ce stade, et sachant que des concepts plus pointus nous attendaient un mois plus tard lors de la séance 3, j’ai préféré miser sur la bonne maîtrise des bases, “l’alphabet”, et nous quitter à ce moment. Il faut parfois savoir reculer pour mieux sauter. La contre-partie était qu’entre-temps, chacun se serait replongé dans les concepts indispensables abordés à ce jour afin de ne plus avoir y revenir constamment.
“Apprendre le code c’est décrire progressivement des concepts qui sont “binaires”, qui marchent ou ne marchent pas parce qu’ils répondent à d’autres lois.”
Un niveau d’abstraction déroutant ?
La séance 3 allait nous faire rentrer dans une strate plus abstraite que la précédente : le positionnement et le comportement “naturel” d’éléments HTML entre eux.
En découpant le programme des séances, je me suis souvenu à quel point cette bonne maîtrise du positionnement avait représenté pour moi un pallier en terme d’autonomie. À partir du moment où cette notion serait acquise, les choses deviendraient nettement plus intuitives (moins abstraites en tout cas) car cela signifierait “ne plus être bloqué” pour réaliser des mises en page basiques. Une fois “ce chapitre” parcouru, le reste serait presque du bonus compte tenu du périmètre de 15 heures allouées.
À partir de ce point, chacun aurait les clés pour aller plus loin seul(e) plus tard si nécessaire. Mais avant ça, il fallait trouver une façon simple de transmettre tous ces concepts. Fort heureusement, le web regorge d’outils permettant de partager des bouts de code, les modifier, les triturer, les améliorer. Parmi eux, Codepen s’est révélé particulièrement pertinent pour faire des démonstrations.
Consolider et devenir autonome
La séance 4 du lendemain allait permettre de consolider ce vaste sujet, et même de le l’approfondir en traitant du responsive grâce aux “Medias Queries”.
Pour cela, nous avons co-construit une démonstration d’un gabarit de page Web “complexe”, comportant un menu et plusieurs sections en guise d’exemple. Ainsi s’achevait l’avant-dernière séance.
L’ultime séance consisterait donc à finaliser l’exercice final que les étudiants allaient réaliser pendant le mois et demi qui nous séparait de la fin de l’atelier, en toute autonomie avec l’aide de ressources pédagogiques (articles, vidéos, formations gratuites) rassemblées par mes soins. Assez logiquement, il s’agissait principalement de ressources qui m’avaient moi-même permis de progresser en autodidacte quelques années auparavant. Preuve s’il en est de leur pertinence. elles n’avaient donc pas pris une ride malgré leur âge parfois ”avancé” (à l’échelle de l’évolution du web).
Une séance durant laquelle j’ai eu la possibilité, du fait d’un effectif restreint (7 étudiants), d’orienter au cas par cas chacun(e) sur son propre exercice. Une configuration idéale d’un point de vue pédagogique, qui a donné des propositions largement satisfaisantes de la part de ces apprenant(e)s très impliqué(e)s.
Conclusion
Les derniers mot de cet article seront donc bien entendu des remerciements à celles et ceux qui ont gravité de près (ou très près) à cette expérience enrichissante :
- Daniel Roch qui m’a généreusement permis d’assurer cet atelier en prenant sa relève.
- Claire Araudeau, directrice pédagogique de l’EMA Vendée pour sa confiance pour cette première et qui m’offre la possibilité de réitérer l’exercice l’année prochaine.
- Enfin, bien entendu, les MSA2 en Communication et Digital, promo 2019-2020 pour leur engagement dans ce sujet et leur curiosité : Cédric M, Marie G, Charlotte A, Laura M, Alice G, Guillaume T et Marine D
Annexe
- Article “Enseigner l’intégration Web” par Rémy Parmentier ( @hteumeuleu)
- Conférence “Faire comprendre le métier d’intégrateur Web” par Rémy Parmentier ( @hteumeuleu)
- Apprenez à créer votre site web avec HTML5 et CSS3, par Mathieu Nebra
Ces articles peuvent vous intéresser
- Actualité du studio