Publiée par Marc Gavanier

Publiée le 21.09.2024

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·

Très recommandée

1 avis

1. 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/

Developer Roadmaps - 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

W3Schools online HTML editor

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.

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

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.

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

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

PokéAPI

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

SWAPI

SWAPI - The Star Wars API

https://swapi.dev/

Une API publique dédiée à l'univers Star Wars.

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 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

1 Avis sur la ressource

Très recommandée

Informations sur la ressource

Inviter des contributeurs

Les contributeurs peuvent voir, éditer, inviter d’autres contributeurs et supprimer la ressource.

Signaler la ressource

Veuillez indiquez le motif de signalement et le préciser dans votre message. Nous prendrons en compte votre signalement au plus vite.

Les champs avec * sont obligatoires.

Je donne mon avis

Les champs avec * sont obligatoires.

Dans quelle mesure êtes-vous satisfait de la qualité globale de la plateforme ? *
Avez-vous rencontré des difficultés ? *