# JavaScript & Frontend > Tutoriels JavaScript, TypeScript, React et CSS pour construire des interfaces web performantes, accessibles et maintenables côté navigateur. Cette catégorie est dédiée au développement frontend, depuis les fondamentaux du navigateur jusqu’aux interfaces construites avec des bibliothèques modernes. Les tutoriels privilégient des fonctionnalités visibles et reproductibles : manipuler le DOM, mettre en place un glisser-déposer, charger les ressources au bon moment, gérer un état ou connecter une interface à un service distant. Tu y trouveras du JavaScript natif, du TypeScript, du CSS ainsi que des exemples autour de React et des outils qui structurent une application côté client. L’enjeu dépasse le simple rendu graphique : une bonne interface doit rester rapide, accessible au clavier, compréhensible sur mobile et suffisamment claire pour évoluer sans accumuler les correctifs. Les contenus abordent donc aussi la performance, l’organisation du code et l’expérience utilisateur. Les sections permettent de distinguer les bases du langage, la construction de composants et les sujets liés à la qualité d’affichage. Commence par les articles récents ou parcours l’ensemble selon la compétence que tu veux renforcer. 21 articles dans cette rubrique. ## Articles - [UX SweetAlert : Notifications ultra propres sans effort (SweetAlert2 sans JavaScript)](https://pentiminax.fr/blog/ux-sweetalert-notifications-ultra-propres-sans-effort-sweetalert2-sans-javascript.md) — Intégrez des notifications SweetAlert2 élégantes dans vos projets sans écrire de JavaScript grâce à une approche CSS-first. · [vidéo](https://youtu.be/o-P0JvdoHdM) - [Créer une application web FULL-STACK moderne avec React et Symfony](https://pentiminax.fr/blog/creer-une-application-web-full-stack-moderne-avec-react-et-symfony.md) — Deux approches documentées pour associer React et Symfony : des îlots React avec AssetMapper et Twig, ou Symfony en API pure derrière un front React. Ce que Symfony recommande aujourd'hui. · [vidéo](https://youtu.be/qT48XMZLS5w) - [HTMX : charger un fragment HTML avec hx-get](https://pentiminax.fr/blog/apprendre-htmx-1-introduction-a-htmx-hx-get.md) — Crée un exemple local avec hx-get, hx-target et hx-swap : un bouton appelle un serveur Python et remplace une zone de la page par du HTML. · [vidéo](https://youtu.be/u8M8y8GRUZA) - [Adieu React, bonjour Symfony UX Twig Components](https://pentiminax.fr/blog/adieu-react-bonjour-symfony-ux-twig-components.md) — Créer des composants Twig réutilisables avec Symfony UX, sans React ni Vue. Installation, configuration et démonstration en live avec PHP et PhpStorm. · [vidéo](https://youtu.be/p2AP3_PhrJg) - [Créer des composants avec Tailwind CSS n’a jamais été aussi simple](https://pentiminax.fr/blog/creer-des-composants-avec-tailwind-css-na-jamais-ete-aussi-simple.md) — Dans cette vidéo, je vous montre comment créer des composants réutilisables avec TAILWINDCSS et l'outil Tailwind Generator. · [vidéo](https://youtu.be/hAMVFvMB5Jo) - [Les 5 meilleurs langages de programmation à apprendre en 2024](https://pentiminax.fr/blog/les-5-meilleure-langages-de-programmation-a-apprendre-en-2024.md) — Grâce à sa simplicité et sa lisibilité, Python est un un choix idéal pour les débutants comme pour les développeurs expérimentés. · [vidéo](https://www.youtube.com/shorts/4dP2fstMkZc) - [Patterns TypeScript avances pour des applications robustes](https://pentiminax.fr/blog/typescript-patterns-avances.md) — Explorez des patterns TypeScript avances comme les types conditionnels, les types mappes et les type guards pour ecrire du code plus sur. - [jQuery v4.0 est disponible (adieu IE ou presque)](https://pentiminax.fr/blog/jquery-v4-0-est-disponible-adieu-ie-ou-presque.md) — jQuery 4.0 beta : fin du support d'IE 10, suppression de 1430 lignes de code legacy et 867 bytes économisés. Analyse du changelog et migration vers JS natif. · [vidéo](https://youtu.be/kLYb1DFl4S4) - [Comment le Lazy Loading révolutionne le chargement des sites web](https://pentiminax.fr/blog/comment-le-lazy-loading-revolutionne-le-chargement-des-sites-web.md) — Le lazy loading, est une technique en développement web qui consiste à retarder le chargement de certaines ressources, telles que des images ou des scripts,... · [vidéo](https://youtu.be/9VSRl-jmDnc) - [Comment prévisualiser une image avant de l’upload en JavaScript](https://pentiminax.fr/blog/comment-previsualiser-une-image-avant-de-lupload-en-javascript.md) — La prévisualisation d'images avant de les uploader est une fonctionnalité essentielle lors du développement web. Cette pratique améliore considérablement... · [vidéo](https://youtu.be/AlOYLkTEv1Q) - [Apprendre HTML, CSS et JavaScript par la pratique](https://pentiminax.fr/blog/apprendre-html-css-et-javascript-par-la-pratique.md) — Apprendre HTML, CSS et JavaScript en construisant deux projets pratiques : un générateur de palettes de couleurs et l'algorithme de chiffrement de César en JS. · [vidéo](https://youtu.be/B2W_NHDax5w) - [Créer une application de chat avec Firebase et React Native](https://pentiminax.fr/blog/creer-une-application-de-chat-avec-firebase-et-react-native.md) — Créer une application de chat en temps réel avec React Native, Firebase Auth et react-native-gifted-chat : inscription, connexion et messagerie avec Expo. · [vidéo](https://youtu.be/26EjdKKnnp0) - [Comment mettre en place un système de Drag And Drop avec JavaScript](https://pentiminax.fr/blog/comment-mettre-en-place-un-systeme-de-drag-and-drop-avec-javascript.md) — Je t'explique comment mettre en place un système de Drag And Drop avec JavaScript. · [vidéo](https://youtu.be/eqXSzcyA1mM) - [Créer une application web avec ChatGPT, Symfony et React](https://pentiminax.fr/blog/creer-une-application-web-avec-chatgpt-symfony-et-react.md) — Dans cette vidéo je vous montre comment créer une application web ChatGPT, Symfony et React. · [vidéo](https://www.youtube.com/watch?v=TZOqV4AzjNk) - [Introduction à la création d'une application mobile avec React Native et Visual Studio Code](https://pentiminax.fr/blog/introduction-a-la-creation-dune-application-mobile-avec-react-native-et-visual-studio-code.md) — Dans cette vidéo je vous explique ce qu'est React Native et comment l'utiliser pour créer votre première application mobile Android avec l'éditeur de code... · [vidéo](https://youtu.be/gXrBpt9MLzE) - [Créer un système de transfert de fichiers avec React et Firebase](https://pentiminax.fr/blog/creer-un-systeme-de-transfert-de-fichiers-avec-react-et-firebase.md) — Je vous montre comment créer un système de transfert de fichiers avec React, Firebase et le langage TypeScript. · [vidéo](https://youtu.be/OUgTdqqnndk) - [Créer un bot Discord avec discord.js v14 et TypeScript](https://pentiminax.fr/blog/creer-un-bot-discord-avec-discord-js-v14-et-typescript.md) — Créer un bot Discord avec discord.js v14 et TypeScript : structure du projet, commandes slash, gestion des événements et déploiement du bot. · [vidéo](https://www.youtube.com/watch?v=jUYjNlOz5vQ) - [Authentification OAuth 2 avec Discord et Symfony](https://pentiminax.fr/blog/authentification-oauth-2-avec-discord-et-symfony.md) — Authentification OAuth 2 avec Discord dans Symfony : configuration du portail développeur, scopes identify/email, URL de callback et récupération du jeton. · [vidéo](https://youtu.be/g0_hcRxomNU) - [Un jolie système de notifications avec SweetAlert2](https://pentiminax.fr/blog/un-jolie-systeme-de-notifications-avec-sweetalert2.md) — Je vous montre comment intégrer la librarie SweetAlert2 dans un projet Symfony 6 à travers plusieurs exemples concrets. · [vidéo](https://www.youtube.com/watch?v=DGijAEVgW0Q) - [Ajouter des rôles avec des réactions avec Discord.JS](https://pentiminax.fr/blog/discordjs-ajouter-des-roles-avec-des-reactions.md) — Dans cet article je vous explique comment ajouter des rôles avec des réactions grâce à la librairie Discord.JS V13. · [vidéo](https://youtu.be/sa0FS7o0MeE) - [Créer un bot Discord facilement avec Discord.JS](https://pentiminax.fr/blog/creer-un-bot-discord-avec-node-js.md) — Dans cet article / tutoriel, je vais vous montrer comment créer un bot Discord avec JavaScript et Node.JS de A à Z. · [vidéo](https://youtu.be/7gWsGFJKCGc) ## Rubriques du blog - [Intelligence artificielle](https://pentiminax.fr/blog/tag/intelligence-artificielle.md) — Comprendre, choisir et intégrer les outils IA utiles aux développeurs. - [PHP & Symfony](https://pentiminax.fr/blog/tag/php-symfony.md) — Développer des applications PHP modernes, maintenables et prêtes pour la production. - [JavaScript & Frontend](https://pentiminax.fr/blog/tag/javascript-frontend.md) — Créer des interfaces rapides, accessibles et agréables avec le Web moderne. - [.NET & C#](https://pentiminax.fr/blog/tag/dotnet-csharp.md) — Apprendre C# et bâtir des applications robustes avec la plateforme .NET. - [DevOps & Cloud](https://pentiminax.fr/blog/tag/devops-cloud.md) — Déployer, automatiser et exploiter des applications sur une infrastructure maîtrisée. - [WordPress & CMS](https://pentiminax.fr/blog/tag/wordpress-cms.md) — Concevoir, personnaliser et exploiter des sites éditoriaux avec les CMS. - [API & Données](https://pentiminax.fr/blog/tag/api-donnees.md) — Concevoir des API claires et faire circuler les données de façon fiable. - [Outils de développement](https://pentiminax.fr/blog/tag/outils-developpement.md) — Choisir et maîtriser les outils qui rendent le développement plus fluide. ## Catégories liées - [Outils de développement](https://pentiminax.fr/blog/tag/outils-developpement.md) — Choisir et maîtriser les outils qui rendent le développement plus fluide. - [API & Données](https://pentiminax.fr/blog/tag/api-donnees.md) — Concevoir des API claires et faire circuler les données de façon fiable. - [WordPress & CMS](https://pentiminax.fr/blog/tag/wordpress-cms.md) — Concevoir, personnaliser et exploiter des sites éditoriaux avec les CMS. ## Naviguer aussi - [Index du blog](https://pentiminax.fr/blog.md) — tous les articles, rubrique par rubrique - [Sitemap Markdown](https://pentiminax.fr/sitemap.md) — toutes les URL du blog - [llms.txt](https://pentiminax.fr/llms.txt) — point d'entrée pour les agents - [Flux RSS](https://pentiminax.fr/rss.xml)