ECOLE DES NOUVELLES SCIENCES & INGÉNIERIE
MODULE: DÉVELOPPEMENT WEB FRONT-END
INTRODUCTION
Dr. ADDARRAZI ILHAM
2024-2025
Introduction
Le développement web est le processus de création, de conception et de
construction de sites web et d'applications web, impliquant une combinaison
de compétences techniques et créatives pour produire des expériences
interactives et fonctionnelles sur Internet.
Ce que cela comprend :
Développement technique : écriture du code source (HTML, CSS,
JavaScript, etc.).
Conception graphique : création de l’aspect visuel (UI/UX).
Expérience utilisateur (UX) : rendre l’utilisation intuitive
et agréable.
Fonctionnalités web : formulaires, galeries, paniers,
animations, etc.
ENSI| Ecole des Nouvelles Sciences & Ingénierie
Deux Facettes du Développement
Web : Frontend vs Backend
Front-End Back-End
Développement côté client Développement côté serveur
Ce que l'utilisateur voit Ce qui se passe derrière
ENSI| Ecole des Nouvelles Sciences & Ingénierie
Deux Facettes du Développement
Web : Frontend vs Backend
Créer la partie visible et interactive d'une application
web avec laquelle les utilisateurs interagissent
directement.
Le frontend désigne tout ce que l’utilisateur voit et
Front-End avec quoi il interagit sur un site web ou une
application.
Développement côté client Il est développé avec des langages du web qui
s’exécutent dans le navigateur.
Ce que l'utilisateur voit
ENSI| Ecole des Nouvelles Sciences & Ingénierie
Deux Facettes du Développement
Web : Frontend vs Backend
Technologies principales :
HTML CSS JAVASCRIPT
Front-End
Développement côté client
Ce que l'utilisateur voit
ENSI| Ecole des Nouvelles Sciences & Ingénierie
Deux Facettes du Développement
Web : Frontend vs Backend
Les frameworks et bibliothèques populaire
CSS
Front-End
Développement côté client
Ce que l'utilisateur voit
ENSI| Ecole des Nouvelles Sciences & Ingénierie
Deux Facettes du Développement
Web : Frontend vs Backend
Les frameworks et bibliothèques populaire
JAVASCRIPT
Front-End
Développement côté client
Ce que l'utilisateur voit
ENSI| Ecole des Nouvelles Sciences & Ingénierie
Deux Facettes du Développement
Web : Frontend vs Backend
Créer de la logique métier, de la gestion des données et
de la communication avec le front-end d'une
application
Le backend désigne la partie invisible du site. C’est là
Back-End que sont traitées les données, la logique métier et les
interactions avec la base de données.
Développement côté serveur
Il fonctionne sur un serveur distant.
Ce qui se passe derrière
ENSI| Ecole des Nouvelles Sciences & Ingénierie
Deux Facettes du Développement
Web : Frontend vs Backend
Technologies principales
Back-End
Développement côté serveur
Ce qui se passe derrière
ENSI| Ecole des Nouvelles Sciences & Ingénierie
Facettes du Développement Web :
Frontend vs Backend
Les frameworks et bibliothèques populaire
PHP
Back-End
Développement côté serveur
Ce qui se passe derrière
ENSI| Ecole des Nouvelles Sciences & Ingénierie
Deux Facettes du Développement
Web : Frontend vs Backend
Les frameworks et bibliothèques populaire
JAVA/JEE
Back-End
Développement côté serveur
Ce qui se passe derrière
ENSI| Ecole des Nouvelles Sciences & Ingénierie
Deux Facettes du Développement
Web : Frontend vs Backend
Les frameworks et bibliothèques populaire
C#/.NET
Back-End
Développement côté serveur
Ce qui se passe derrière
ENSI| Ecole des Nouvelles Sciences & Ingénierie
Deux Facettes du Développement
Web : Frontend vs Backend
Les frameworks et bibliothèques populaire
PYTHON
Back-End
Développement côté serveur
Ce qui se passe derrière
ENSI| Ecole des Nouvelles Sciences & Ingénierie
Qu’est-ce que JavaScript ?
JavaScript est un langage de programmation principalement
utilisé pour rendre les pages web dynamiques et interactives.
Rôle dans une page web:
HTML : structure la page
CSS : stylise la page
JavaScript : rend la page vivante (animations,
interactions, événements...
ENSI| Ecole des Nouvelles Sciences & Ingénierie
Qu’est-ce que JavaScript ?
Ce que permet JavaScript:
Fonctionnalité Exemples
🎯 Interaction clics, survols, formulaires dynamiques
🕹 Animation sliders, menus déroulants, carrousels
🔄 Mise à jour contenu sans recharger la page (AJAX)
🛠Validation contrôle des champs de formulaire
📱 Responsive adaptation au comportement utilisateur
JavaScript est indispensable pour créer des expériences utilisateur riches, interactives et
modernes sur le web.
ENSI| Ecole des Nouvelles Sciences & Ingénierie
Qu’est-ce que [Link] ?
[Link] est un framework JavaScript progressif pour construire des
interfaces utilisateur interactives.
Simple à apprendre
Léger et rapide
Utilisé pour des applications dynamiques et SPA (Single
Page Applications)
Principales caractéristiques:
Basé sur les composants
Réactivité automatique des données
Intégration facile dans des projets existants
Courbe d’apprentissage douce
ENSI| Ecole des Nouvelles Sciences & Ingénierie
Qu’est-ce que [Link] ?
Pourquoi utiliser [Link] ?
Avantage Description
🧽 Simplicité Très facile à prendre en main
🔄 Réactivité DOM mis à jour automatiquement
🧱 Composants Réutilisables et modulaires
⚡ Performance Framework très léger
ENSI| Ecole des Nouvelles Sciences & Ingénierie
Qu’est-ce que Bootstrap ?
Bootstrap est un framework CSS open-source développé par Twitter, qui permet de
créer des sites web responsives, modernes et compatibles multi-navigateurs
rapidement.
Ce que propose Bootstrap :
Composants visuels prêts à l’emploi : boutons, cartes, formulaires, etc.
Design responsive basé sur un système de grille (Grid System)
Classes CSS utilitaires pour styliser rapidement
Intégration facile de JavaScript avec ses plugins intégrés (modales,
carrousels...)
ENSI| Ecole des Nouvelles Sciences & Ingénierie
Qu’est-ce que Bootstrap ?
Pourquoi apprendre Bootstrap ?
Avantage Description
⚡ Rapidité Gain de temps énorme pour le design
🧩 Complet Composants prêts à l’emploi
📱 Responsive Design mobile-first par défaut
Fonctionne sur tous les navigateurs
🔄 Compatibilité
modernes
ENSI| Ecole des Nouvelles Sciences & Ingénierie