Atelier pratique : Premiers pas dans le développement web
Cet atelier interactif propose une initiation aux différents métiers du web, accessible à tous, même sans connaissance préalable en développement. À travers une série de liens pratiques, accessibles en ligne sans inscription, les participants exploreront les bases du développement web. De la structure HTML/CSS au dynamisme du JavaScript, en passant par la logique de programmation et l'utilisation des API, chaque aspect essentiel à la création d'un site web sera abordé.
197 VuesVues·3 EnregistrementsEnregistrements·1 avis1. Vue d'ensemble des métiers du web
roadmap.sh
Developer Roadmaps - roadmap.sh
Community driven roadmaps, articles and guides for developers to grow in their career.
https://roadmap.sh/
Ce site présente des cartes interactives qui montrent les compétences et les connaissances nécessaires pour les différents métiers du web (développeur frontend, backend, fullstack, etc.).
Explorer les "roadmaps" afin de mieux comprendre les technologies et langages de programmation à maîtriser en fonction du métier visé.
2. Introduction au HTML
W3Schools - HTML
W3Schools online HTML editor
The W3Schools online code editor allows you to edit code and view the result in your browser
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
Un éditeur interactif permettant de tester le code HTML et de voir les résultats immédiatement après avoir cliqué sur le bouton "Run"
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.
PlayCode - HTML
HTML Playground
Try this online HTML Playground with instant live preview and console. Easy & Fast. Experiment yourself.
https://playcode.io/html
Un éditeur en ligne un peu plus avancé, qui inclut également du CSS pour styliser les pages.
HTML Academy
Interactive online courses HTML Academy
Together we’ll learn how to work with real code, solve true-to-life problems, use cutting edge technologies. Minimum of boring theory and lots of practical tasks.
https://htmlacademy.org/courses/intro-to-web-development/html-and-css/html
Démonstration complète d'une page web avec HTML et CSS
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).
3. Création et intégration de design
Figma - Portfolio UI
Une maquette interactive sur Figma qui montre le design d'un site web, version desktop et mobile.
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.
4. Introduction au CSS
PlayCode - CSS
CSS Playground
Try this online CSS Playground with instant live preview and console. Easy & Fast. Experiment yourself.
https://playcode.io/css
Un éditeur en ligne pour tester des styles CSS basiques.
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.
PlayCode - Bootstrap
Bootstrap Playground
Try this online Bootstrap Playground with instant live preview and console. Easy & Fast. Experiment yourself.
https://playcode.io/bootstrap
Exemple de l'utilisation de Bootstrap : une bibliothèque de styles CSS préconstruits
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.
5. Introduction à la logique en programmation
Scratch
https://scratch.mit.edu/projects/editor/?tutorial=getStarted
Une plateforme ludique pour apprendre la logique de programmation via des blocs de code.
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.
Jouer avec Python
Codage pour Enfants - Apprenez Python en Jouant
Apprenez Python en ligne de manière interactive en jouant à un jeu, directement depuis votre navigateur. Idéal pour les enfants de 7 à 15 ans. Commencez à coder dès aujourd'hui!
https://codingforkids.io/fr/
Puzzles de programmation en Python.
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.
6. Introduction au JavaScript et à React
PlayCode - JavaScript
JavaScript Playground
Try this online JavaScript Playground with instant live preview and console. Easy & Fast. Experiment yourself.
https://playcode.io/javascript
Un éditeur en ligne pour tester des scripts JavaScript.
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.
PlayCode - React
React Playground
Try this online React Playground with instant live preview and console. Easy & Fast. Experiment yourself.
https://playcode.io/react
Un exemple de composant React pour illustrer l'organisation et la modularité que cela apporte à JavaScript.
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.
7. Introduction aux API et au backend
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.
PokéAPI
PokéAPI
https://pokeapi.co
Une API publique qui permet de récupérer des informations sur les Pokémon.
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.
8. Introduction aux bases de données et SQL
W3Schools - SQL
SQL Tryit Editor v1.6
https://www.w3schools.com/sql/trysql.asp?filename=trysql_select_all
Un éditeur SQL permettant d'exécuter des requêtes sur une base de données.
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 parSELECT * 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