Chapitre 1 : Développement front-end web : Préparation de votre environnement de travail
Intégration individuelle au développement front-end
1-2 Configuration de votre environnement de travail - navigateur, Node.js
1-3 Configuration de l'environnement de travail - IDE
1-4 Configuration de votre environnement de travail - Installation et configuration des extensions VS Code

Chapitre 2 : Apprendre la grammaire HTML
2-1 HTML (Hyper Text Markup Language)
2-2 La balise 〈meta〉 et son fonctionnement dans les navigateurs
2-3 Types d'éléments HTML et débogage HTML
2-4 Apprendre les éléments HTML de base couramment utilisés

Chapitre 3 : Apprendre la grammaire CSS
3-1 Fichiers CSS et paramètres de base
3-2 Utilisation des sélecteurs CSS
Mise en page CSS 3-3
3-4 Utilisation des ressources des pages Web

Chapitre 4 : Ajout d’interfaces utilisateur et d’expérience utilisateur au Web
4-1 Qu'est-ce que le Web interactif ?
4-2 Dévoiler progressivement la disposition
Animation de la liste de cartes 4-3
4-4 Utilisation du SVG
4-5 Site Web Responsive

Chapitre 5 : Apprendre la grammaire JavaScript
5-1 Création d'un fichier JavaScript
5-2 Configuration de JavaScript
5-3 Utilisation du DOM JavaScript
5-4 Événements JavaScript
5-5 Fonctions JavaScript
5-6 Traitement asynchrone

Chapitre 6 : Création d’une interface utilisateur de chargement de carte réactive
6-1 Mise en page réactive des cartes et interface utilisateur de type spinner
6-2 Interface utilisateur de chargement SVG
6-3 Interface utilisateur squelette

Chapitre 7 : Connexion interactive attrayante
7-1 Modèle de formulaire de connexion
7-2 Mise en œuvre d'un œil qui suit le champ de saisie

Chapitre 8 : Tableaux de bord adaptatifs utilisant une mise en page en grille et une interface utilisateur dynamique
8-1 Création d'un tableau de bord à l'aide d'une grille
8-2 Création d'une interface utilisateur de type carte et d'une interface utilisateur de type liste avec un seul fichier HTML
8-3 Création d'un menu mobile (position fixe)
8-4 Mode sombre et mode clair
Mise en œuvre de la fonctionnalité 8-5 Like
8-6 Sauvegarde de l'état lors de la fermeture d'une page web
8-7 Création d'une fonction de recherche

Chapitre 9 : Créer une page de destination qui convertit les pages
9-1 Balisage optimisé pour le référencement naturel
9-2 Animation pleine page utilisant le défilement avec alignement et la chronologie d'animation
9-3 Minimiser le travail lié aux requêtes média pour les environnements réactifs
9-4 Utilisation du mot-clé @supports pour les navigateurs non pris en charge
9-5 Gestion des thèmes avec setProperty en JavaScript
9-6 Gestion d'état à l'aide de proxys et d'observateurs
9-7 Fonction de retour arrière, optimisation du rendu et exposition fluide du contenu

Chapitre 10 : Application météorologique utilisant des API externes
10-1 Qu'est-ce qu'une API REST ?
10-2 Émission de la clé API
10-3 Argumentaire relatif à l'application météorologique
Style d'application météo 10-4
10-5 Apprendre la grammaire JavaScript
10-6 Obtenir et afficher les informations météorologiques
10-7 Changer les unités météorologiques
10-8 Créez un effet de transition vidéo basé sur la météo
10-9 Création d'une fonction de recherche météo

Chapitre 11 Rotation du beignet le long du rouleau (R3F)
11-1 React et Three.js
11-2 Configuration d'un environnement de développement React avec Vite
11-3 Configuration d'un environnement de développement Three.js à l'aide de R3F
11-4 Création d'une boîte qui pivote en fonction du défilement
11-5 Application de la bibliothèque GSAP
11-6 Création d'un donut qui tourne avec le défilement
11-7 Création d'une page de destination en forme de donut défilant

Chapitre 12 : Création de jeux Web avec WebGL
12-1 Création d'un projet de jeu et configuration des paramètres de base
12-2 Chargement de personnages 3D à l'aide de useGLTF
12-3 Création d'un éclairage d'ambiance et directionnel
12-4 Configuration de la position et du mouvement de la caméra
12-5 Création d'un sol à l'aide de TextureLoader
Application de réglage de la taille des caractères et d'animation 12-6
12-7 Mise en œuvre du déplacement du personnage par interaction à la souris
Mise en œuvre des sauts de caractères avec des interactions clavier 12-8
Mise en œuvre de l'exposition au ballon de football à travers l'événement 12-9

Nous vous aiderons à vous préparer minutieusement au développement front-end web.
Nous vous enseignerons la grammaire HTML, CSS et JavaScript que vous devez connaître avant d'apprendre sérieusement le développement front-end.
Ainsi, même ceux qui ne connaissent rien au web peuvent commencer par ce livre.

Mise en œuvre d'une interface utilisateur de site web
Ce livre ne se contente pas d'apprendre la grammaire ; il vous enseigne les concepts de l'animation en mettant en œuvre des composants d'interface utilisateur fréquemment utilisés, tels que les écrans de chargement, les listes de cartes et les mises en page réactives, qui sont réellement appliqués aux sites web.

Créez des expériences web interactives qui réagissent au comportement des utilisateurs.
Vous apprendrez diverses techniques pour créer des pages web dynamiques qui captivent les utilisateurs, comme l'affichage naturel du contenu en fonction de la position de défilement et des animations qui se déclenchent lorsque certains éléments apparaissent à l'écran.

Mise en œuvre de fonctionnalités d'animation liées aux données
Nous créons des applications web qui relient des données en temps réel, telles que des API météorologiques et des API sur les particules fines, et dont l'interface utilisateur change en fonction des informations météorologiques ou environnementales actuelles.
Vous pouvez vous exercer à la conception d'interfaces utilisateur qui prend en compte à la fois le traitement fonctionnel des données et les réponses visuelles, développant ainsi un sens de la planification des services.

Assistance pédagogique via les cours de l'auteur sur YouTube, GitHub, etc.
Veuillez vous entraîner minutieusement avec le livre en suivant les cours magistraux de l'auteur sur la chaîne YouTube de Youngjin.com dédiée aux cours d'informatique.
Chaîne YouTube Youngjin.com IT : https://www.youtube.com/@IT-Youngjin
Adresse GitHub : https://github.com/Youngjin-com/interactive_web

Apprenez les fondamentaux et la structure des interfaces web, créez des interfaces utilisateur web complètes et mettez en œuvre des expériences web interactives et centrées sur l'utilisateur.

【 Public cible 】

- Les développeurs débutants et juniors qui ne sont pas familiarisés avec la mise en œuvre d'animations d'interface utilisateur
- Les concepteurs et planificateurs web qui souhaitent approfondir leurs connaissances en matière d'interface utilisateur et d'expérience utilisateur (UI/UX).
- Les candidats qui souhaitent ajouter un projet de qualité à leur portfolio

Note de l'auteur

Nous sommes désormais entrés dans l'ère de l'IA.
Nous nous trouvons à un tournant décisif, où l'intelligence artificielle remplace rapidement les métiers humains et où nous nous dirigeons vers un avenir inédit.
À l'heure actuelle, on peut se demander s'il est encore nécessaire d'apprendre les fondamentaux du développement front-end. L'IA peut écrire du code, suggérer des conceptions et même contribuer à la mise en œuvre de services entiers.

Cependant, j'ose affirmer dans cet ouvrage que certaines valeurs fondamentales du développement front-end demeureront inchangées, voire deviendront encore plus importantes à l'ère de l'IA. L'IA n'est qu'un outil, et il nous incombe, en tant que développeurs humains, de l'utiliser pour offrir la meilleure expérience possible aux utilisateurs.
La capacité à comprendre avec précision l'intention d'un planificateur, à traduire la vision d'un concepteur en code, et à identifier et à améliorer même les inconvénients subtils pour l'utilisateur est un domaine que l'IA ne peut pas facilement surpasser.

Ce livre va bien au-delà du simple assemblage de code et vise à vous faire découvrir le côté ludique et créatif inhérent au développement front-end web.
Plutôt que des théories complexes, nous l'avons structuré de manière conviviale et intuitive afin que vous puissiez acquérir une expérience pratique et des connaissances approfondies tout en créant un véritable site web.

Dans le chapitre 1, vous construirez un environnement de travail solide pour le développement, et dans les chapitres 2 et 3, vous apprendrez la grammaire du HTML, la base du web, et du CSS, qui l'embellit.
Au chapitre 4, vous apprendrez à intégrer des éléments d'interface utilisateur/d'expérience utilisateur qui améliorent l'expérience utilisateur sur le Web, et au chapitre 5, vous explorerez la syntaxe JavaScript qui rend le Web dynamique.

Et sur la base de toutes ces connaissances, nous allons créer un projet concret en commençant par le chapitre 6.
Vous découvrirez le plaisir du développement front-end en implémentant divers composants web que vous retrouverez dans des services réels, notamment des mises en page de cartes réactives, des connexions interactives, des tableaux de bord dynamiques et des pages d'accueil de transition de page.
Au-delà de cela, une multitude de projets n'attendent que de stimuler votre imagination, allant des applications météorologiques utilisant des API externes, aux interactions de défilement, en passant même par les jeux Web utilisant WebGL.

J’espère sincèrement que grâce à ce livre, vous irez au-delà de la simple acquisition de compétences et deviendrez un développeur front-end capable de mettre en œuvre librement vos propres idées sur le web et d’apporter de la valeur aux utilisateurs.