Lors d’un job interview, c’est souvent la réponse, un rien péremptoire, de votre interlocuteur lorsque vous lui proposez votre liste de certifications OpenClassrooms, freeCodeCamp ou autre site de formation en ligne.
Il est évident, que les modalités d’évaluation en ligne des MOOC n’ont pas toujours été un modèle de sélectivité, surtout celles sous forme de quiz qui permettent de repasser les tests presque sans aucune contrainte.
Un coup de chatGPT et paf, la certif est dans la poche !!
Pour vérifier celà, je vais aujourd’hui me mettre dans la peau d’un « Escroc numérique » et vérifier que l’usage des IA générative permet de s’affranchir de la tache chronophage qu’est l’apprentissage.
Exemple : certifications HTML /CSS de freeCodeCamp
freeCodeCamp est une organisation à but non lucratif qui se compose d’une plate-forme Web d’apprentissage interactive. Gratuite mais avec Inscription requise.
La première certification
Il s’agit de créer une page simple comme celle-ci. C’est vraiment la certification de base et chatGPT ne devrait pas à avoir trop de problèmes à me faire économiser la demi-heure nécessaire pour ce genre de tache. (Pour un développeur débutant) .
Bon, on ne vas pas lésiner, je copie l’intégralité du sujet et le colle dans chatGPPT ! (J’utilise la version 4, mais j’ai aussi testé avec la 3.5 gratuite et je n’ai pas de différences majeures), sans lui préciser aucun contexte, je suis vraiment une grosse faignasse.
PromptObjective: Build an app that is functionally similar to https://tribute-page.freecodecamp.rocks. Do not copy this demo project.
User Stories:
1. Your tribute page should have a `main` element with a corresponding `id` of `main`, which contains all other elements
2. You should see an element with an `id` of `title`, which contains a string (i.e. text), that describes the subject of the tribute page (e.g. « Dr. Norman Borlaug »)
3. You should see either a `figure` or a `div` element with an `id` of `img-div`
4. Within the `#img-div` element, you should see an `img` element with a corresponding `id= »image »`
5. Within the `#img-div` element, you should see an element with a corresponding `id= »img-caption »` that contains textual content describing the image shown in `#img-div`
6. You should see an element with a corresponding `id= »tribute-info »`, which contains textual content describing the subject of the tribute page
7. You should see an `a` element with a corresponding `id= »tribute-link »`, which links to an outside site, that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of `target` and set it to `_blank` in order for your link to open in a new tab
8. Your `#image` should use `max-width` and `height` properties to resize responsively, relative to the width of its parent element, without exceeding its original size
9. Your `img` element should be centered within its parent element
Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!
Note: Be sure to add `<link rel= »stylesheet » href= »styles.css »>` in your HTML to link your stylesheet and apply your CSS
Réponse
To build a tribute page that meets the specified user stories, follow these guidelines:
- Main Element: Include a
<main>element with the idmainwhich will encompass all other page elements.- Title Element: Include an element with the id
title, containing text that describes your tribute subject (like « Dr. Norman Borlaug »).- Image Container: Have either a
<figure>or<div>element with the idimg-div.- Image Element: Inside
#img-div, place an<img>element with the idimage.- Image Caption: Also within
#img-div, include an element with the idimg-caption, describing the image.- Tribute Information: Add an element with the id
tribute-info, containing text about the subject of your tribute page.- External Link: Create an
<a>element with the idtribute-link, linking to an external site for more information. Set itstargetattribute to_blankto open the link in a new tab.- Responsive Image: Ensure the
#imageuses max-width and height properties for responsive resizing, without exceeding its original size.- Centered Image: Make sure the image is centered within its parent element.
Attends, il m’a pris pour qui le chaton !? Je suis pas là pour suivre une guideline, je veux du code, du vrais, du copiable.
A noter Les sources qu’il me propose pour approfondir le sujet ( comme si je n’avais que ça à faire, je veux juste une certif moi) sont presque toutes liées à freecodecamp
- forum.freecodecamp.org – Tribute Page – Image centering – HTML-CSS
- gist.github.com – A tribute page – gists · GitHub
- stackoverflow.com – I can’t seem to get the #image centered within it’s parent
- github.com – JuniorUbarana/tribute-page: freeCodeCamp challenge – GitHub
- cherylhartman.wordpress.com – Build a Tribute Page – cherylhartman – WordPress.com
- codepen.io – Tribute Page – Free Code Camp – CodePen
Allez un petit prompt
Dans le même contexte que précédemment, donne moi le code html et le code css qui correspond aux consignes données et à la guideline proposée.
Il s’exécute et me donne le code des deux fichiers.
Je copie les réponses et les colle dans lDE du freeCode Camp. Je lance les tests et …
Deux erreurs :
Une id de div et manquante et le fichier css mal nommé malgré la consigne Be sure to add<link rel= »stylesheet » href= »styles.css »>in your HTML to link your stylesheet and apply your CSS.
Je pourrais les corriger en deux secondes, mais je vais laisser chatGPT s’en charger.
J’en profite aussi pour lui demander de changer de docteur.
Nouveau prompt
Redonnes le même code en apportant les modifications suivantes :
– You should have a figcaption or div element with an id of img-caption.
– Remplace les mentions au docteur Dr. Norman Borlaug par des mentions au docteur Marcel Petiot, suivant ke lien suivant : https://fr.wikipedia.org/wiki/Marcel_Petiot
– modifie le lien avec le fichier css en liant « styles.css » au lieu de « style.css »
Vous noterez qu’on peut mélanger le français et l’anglais dans les prompts .You should have a figcaption or div element with an id of img-caption est le résultat du test qui a échoué
<!DOCTYPE html>
<html>
<head>
<title>Tribute Page - Marcel Petiot</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<main id="main">
<h1 id="title">Dr. Marcel Petiot</h1>
<figure id="img-div">
<img id="image" src="image-url.jpg" alt="Dr. Marcel Petiot">
<figcaption id="img-caption">Dr. Marcel Petiot, célèbre médecin français.</figcaption>
</figure>
<p id="tribute-info">
Dr. Marcel Petiot était un médecin français connu pour ses actes controversés durant la Seconde Guerre mondiale.
</p>
<a id="tribute-link" href="https://fr.wikipedia.org/wiki/Marcel_Petiot" target="_blank">
En savoir plus sur le Dr. Marcel Petiot
</a>
</main>
</body>
</html>
body {
text-align: center;
font-family: Arial, sans-serif;
}
#img-div {
background-color: #f8f8f8;
padding: 10px;
margin: 20px auto;
}
#image {
max-width: 100%;
height: auto;
margin: 0 auto;
display: block;
}
/* Additional styles */
#title, #img-caption, #tribute-info, #tribute-link {
margin: 10px;
}
Pas de vague
Vous noterez aussi le coté politiquement correct de IA, qui qualifie le docteur Petiot de « médecin français connu pour ses actes controversés durant la Seconde Guerre mondiale. » Doux euphémisme pour quelqu’un qui a été guillotiné en 1946 après la découverte à son domicile des restes de vingt-sept personnes.
Je lance à nouveau les tests et tatatahh ! :
Les autres étapes de la certification
Je colle cette fois l’intégralité des consigne plus le code le code HTML complet dans chat GPT en lui précisant bien cette fois de me fournir le code et pas de guideline. Pas erreur cette fois ci et les tests se passent sans encombres
Conclusion sur les certifications
Voilà, deux trois minutes, pas plus, par étapes, deux tests qui ne passaient pas et qui ont été facilement corrigés et c’est terminé. J’ai bouclé l’ensemble des étapes de ma certification.
En étudiant les sources, je constate que beaucoup de ces étapes ont fait l’objet de repository sur gitHub et que beaucoup d’étudiants qui étaient bloqués ont demandé de l’aide sur les blogs de freeCodeCamp ou de stackOverFlow. Ce qui pourrait expliquer que chatGPT puisse aussi facilement me fournir le code idoine. Relevons aussi que le couple HTML /CSS n’est pas aussi « pointu » que d’autres technos web.
Je testerais d’autres certifs sur d’autres plateformes et dans d’autres langages, mais je pense déjà avoir la réponse quant à l’utilité réelle des certifications dispensées.
Bilan
Je n’ai évidemment rien appris en html/CSS, mais j’en sais un peu plus sur chatGPT et j’ai un badge c’est le plus important non ?
Laisser un commentaire