Explorer les "roadmaps" afin de mieux comprendre les technologies et langages de programmation à maîtriser en fonction du métier visé.

Modifier le code HTML proposé en ajoutant des éléments de base tels que :

• des paragraphes <p>Paragraphe</p>

• des images <img src="lien-image" />

• des liens <a href="mon-lien">Titre du lien</a>

L'objectif est de comprendre que le HTML constitue la structure de base du web.

Supprimer la ligne `<link rel="stylesheet" href="muffin-style.css">` afin d'observer comment la page perd son style visuel, cela illustre la distinction entre la structure (HTML) et l'apparence (CSS).

Les développeurs front-end utilisent souvent ce type de maquettes pour créer un site web en respectant le design et la charte graphique. Explorer la maquette et à observer la structure des pages.

Modifier les styles (couleur de fond et du texte, disposition) d'une page HTML et voir instantanément les changements, pour comprendre le rôle du CSS dans l'aspect visuelle d'un site web.

Bootstrap permet de créer rapidement des interfaces sans écrire du CSS à partir de zéro. Le composant "card" issus de la documentation de Bootstrap peut être un bon point de départ pour montrer cette facilité de création.

Scratch offre un éditeur visuel qui permet de découvrir comment la logique sous-tend toute programmation. À travers l'élaboration de mini-programmes, des éléments essentiels de la programmations tels que les conditions, les boucles et les variables deviennent tangibles.

Avec cet outil on abandonne les blocs visuels pour taper du code, on se rapproche ainsi de la réalité du quotidien d'un développeur. Quelques puzzles simples permettent de voir comment la logique peut s'appliquer à un langage réel comme Python.

Ici on retourne dans l'univers du web pour montrer comment JavaScript permet d'ajouter du dynamisme à une page web. JavaScript permet notamment d'ajouter dynamiquement du contenu ou de modifier des éléments après que la page web soit chargée. Dans cet exemple JavaScript est utilisé pour l'affichage du texte Hello world.

React simplifie la gestion des interfaces complexes avec des composants réutilisables, facilitant ainsi le développement front-end. De la même manière que Bootstrap simplifiait l'utilisation de CSS, le rôle de React est de simplifier l’utilisation de JavaScript dans les navigateurs.

Maintenant que nous avons bien présenté l'aspect "front", c'est à dire ce qui concerne l'affichage dans le navigateur, on va aborder l'aspect "back".

Il faut bien avoir conscience que lorsque l'on consulte un site, il y a deux ordinateurs en jeu : celui que l'on utilise pour se rendre sur le site internet avec son navigateur et celui de l'autre côté qui contient les données du site que l'on appelle un serveur.

Les APIs sont accessibles via des liens qui semblent classiques, mais qui sont destinés aux application car ils contiennent des données au format JSON. C'est le rôle du "front-end" de traiter ces données pour les présenter de manière lisible à l'utilisateur.

Par exemple l'url https://pokeapi.co/api/v2/pokemon/pikachu fournis toutes les informations à propos du Pokémon Pikachu

Il existe de très nombreuses API publiques qu'il est intéressant d'explorer.

Une base de données est l'endroit où l'on stocke toutes les informations, il est possible de mettre au point des relations entre ces informations et de s'en servir pour récupérer précisément le contenu que l'on souhaite rendre disponible aux utilisateurs.

Ici, il est intéressant de tester de remplacer le code présenter par :

SELECT * FROM Customers WHERE City = "México D.F.";

pour expliciter la notion de filtre de requête puis par

SELECT * FROM Customers WHERE City = "México D.F." OR City = "Berlin";

pour mettre en avant que la notion de logique vue précédemment s'applique également ici