Les Démos codés et expliqués de A à Z

100 jours pour coder

Jour 01 : Présentation du projetVous avez toujours eu envie de créer un site web mais vous ne savez pas par où commencer ? 100 jours pour apprendre !
Jour 02 : Ciblage des utilisateursPour construire un site web de manière cohérente, il faut d’abord bien connaître les futurs utilisateurs de ce site.
Jour 03 : Étude de la concurrenceUne étude de la concurrence, c’est analyser les autres acteurs afin de déterminer leurs forces et faiblesses.
Jour 04 : Objectifs et fonctionnalitésAprès avoir étudié les concurrents, définissons les objectifs et fonctionnalités de notre projet.
Jour 05 : Structure et arborescenceObtenez une vision claire de la navigation, des modules et de la hiérarchisation du contenu.
Jour 06 : Choix des technologiesSélectionnons les technologies et les outils que nous utiliseront pour notre développement web.
Jour 07 : UX & Identité visuelleBases de l’identité visuelles, UX, un logo, une identité graphique cohérente et un styleguide clair.
Jour 08 : Rôles et permissionsDéfinir les rôles utilisateurs est essentiel, avec une table MySQL complète, claire et sécurisée.
Jour 09 : XP, niveau, avatar & badgeDécouvrez comment avatars, XP, niveaux et badges transforment l’apprentissage du code sur Créa-code.
Jour 10 : Architecture base de donnéesDécouvrez comment créer l’architecture d’une base de données relationnelle pour un site web.
Jour 11 : Conception de la maquetteDécouvrez comment concevoir une maquette de site web facilement, avec des outils simples et des conseils clairs.
Jour 12 : Architecture MVCDécouvrez comment mettre en place une architecture MVC claire et pédagogique pour votre site web.
Jour 13 : Routeur et LayoutApprenez à structurer votre code avec sécurité, clarté et évolutivité.
Jour 14 : Connexion à la BDDConnexion sécurisée à une base de données MySQL avec PHP et PDO pour une architecture MVC.
Jour 15 : Formulaire d’inscription PHP et JSFormulaire d’inscription sécurisé en PHP et JS pour une architecture MVC.
Jour 16 : Formulaire de connexion PHP et JSFormulaire de connexion sécurisé en JS et en PHP dans une architecture MVC.
Jour 17 : Réinitialisez un mot de passeCoder un système sécurisé en PHP pour réinitialisez un mot de passe avec un token et PHPMailer.
Jour 18 : Valider l’adresse mailValidez un compte utilisateur via un lien email sécurisé en PHP pour activer les profils avec un token temporaire.
Jour 19 : Header et FooterCoder un header et un footer responsive et efficaces afin d’améliorer la navigation de votre site web.
Jour 20 : Newsletter et MailchimpConnectez un formulaire newsletter à Mailchimp avec PHP et JS en Ajax, sans rechargement.
Jour 21 : Mode dark ou Mode sombreActivez le dark mode ou mode Sombre mémorisé le choix dans votre site en HTML, CSS, JavaScript et PHP.
Jour 22 : Mise en page des formulairesMise en page CSS et responsive des formulaires de connexion et inscription, avec explications détaillées.
Jour 23 : Template du DashboardDécouvrez la conception du Dashboard de Créa-code pour apprendre à coder de façon motivante et structurée.
Jour 24 : Mise en page du DashboardDécouvrez comment créer un Dashboard HTML/CSS responsive pour vos utilisateurs avant de le rendre dynamique avec PHP.
Jour 25 : Routes, contrôleurs et vuesConceptions des routes, vues et contrôleurs pour le page web notre projet Créa-code en MVC.
Jour 26 : Les dialogues d’EchoCréation d’un système intelligent de messages contextuels pour notre mascotte Echo avec JSON, EchoService et fallback.
Jour 27 : Sauvegarder avec GitApprenez à utiliser Git pas à pas avec des explications simples pour notre projet Créa-code.
Jour 28 : Mentions légales et CGUApprenez à rédiger des CGU et mentions légales complètes, légales et simples pour protéger votre site web.

HTML5 et CSS3

Coder un CV ResponsiveTutoriel complet pour réaliser un CV responsive et de qualité en utilisant HTML et CSS.
Coder un portfolio responsiveUn portfolio est un site web servant à présenter les réalisations, les compétences et les expériences.
Template CSS GridNous allons coder, étape par étape, la conception d’un template HTML responsive pour un site web avec CSS Grid.
Template CSS FlexboxNous allons coder, étape par étape, un template HTML simple avec CSS Flexbox.
Coder un diagramme en courbeUn diagramme en courbe uniquement en HTML et CSS pour représenter les tendances de données sur une période donnée.
Un histogramme en SVGTutoriel complet pour apprendre à réaliser un histogramme en SVG, HTML et CSS avec une légende.
Un diagramme circulaire en HTML et JSTutoriel complet pour apprendre à réaliser un diagramme circulaire dynamique en HTML et JS avec une légende.
La Géolocalisation en HTML5La géolocalisation en HTML5 offre une méthode pour obtenir les coordonnées géographiques d’un visiteur depuis son navigateur.
Signature en HTML pour MailCréer une signature HTML dans l’application Mail de votre Mac est un excellent moyen d’améliorer votre image.

Javascript

Coder un dictaphoneDécouvrez le processus d’enregistrement et de visualisation d’audio en utilisant les API Web Audio et MediaRecorder.
Vidéo image dans l’imageApprenez à placer du contenu web, tel qu’une vidéo ou un élément HTML personnalisé, dans une fenêtre flottante.
Lecture audio de contenuL’API Web Speech, en Javascript, offre un ensemble d’outils pour intégrer la reconnaissance vocale et la synthèse vocale.
Bouton de partage natifL’API Web Share permet aux développeurs web de partager du contenu de manière native à partir du navigateur.
Coder un gestionnaire de tâchesDécouvrez IndexedDB en JS, une API web permettant de stocker des données de manière persistante dans le navigateur.
La mise en cache de fichiersLes service workers srendent les sites web disponibles hors-ligne et améliorer les performances via la mise en cache.
Trier les colonnes d’un tableauDans ce tutoriel, découvrez comment trier et organiser les colonnes d’un tableau en JS.
Valider et sécuriser un formulaireDécouvrez comment tester et valider un formulaire en javascript. C’est une étape importante dans le développement web.
Tracer une courbe de fonctionApprenez à coder votre propre application pour tracer la courbe d’une fonction mathématique en JS.
Coder une application de dessinDans ce tutoriel, nous allons découvrir ensemble comment créer une application de dessin en ligne simple mais complète en JS.
Coder une SPA avec SvelteLe développement web a beaucoup évolué au cours des vingt dernières années avec l’arrivée des premiers framework dynamiques.

PHP8 et MySQL

Coder un formulaire de Login sécuriséCoder un formulaire de connexion ou login sécurisé en PHP pour vos projets web.
Insérer une voix artificielle dans un projetL’intelligence artificielle ne cesse de progresser, notamment la synthèse vocale produisant une voix artificielle.
Créer un site rapidement avec EasyFrameChoisissez le bon outil pour votre projet : le framework PHP EasyFrame. Simple et rapide !
Script IndexNow : booster l’indexationL’indexation devient plus rapide e avec IndexNow pour les moteurs de recherches et assurer la visibilité de vos pages web.
Créer un token sécurisédécouvrez comment créer un token sécurisé en PHP, comprendre son utilité, et l’utiliser.
L’algorithme de LuhnL’algorithme de Luhn permet de vérifier la validité des numéros d’identification (CB, …).
Reconnaissance d’image par l’IAApprenez à reconnaitre une image en PHP grâce à l’intelligence artificielle.
Convertir une image en Base64Apprenez à coder un script PHP pour la conversion d’une image en Base64, très pratique en développement web.
Coder un chatbot en PHPUn chatbot coder en PHP et relier à l’API de ChatGPT pour votre site web.
Coder une pagination en PHPUn système complet de pagination en PHP / MySQL pour afficher de nombreux résultats sans surcharge.
Coder une API REST en PHPVous êtes sur le point de découvrir comment créer une API REST fonctionnelle, en utilisant le micro-framework PHP Slim.

WordPress et CMS

Coder un thème enfant pour WordPressApprenez à coder un thème enfant pour WordPress étape par étape.
Coder une extension WordPressApprenez à coder une extensions WordPress étape par étape avec un cas concret.
Coder un plugin WordPress stats d’articlesApprenez à coder un plugin WordPress étape par étape pour les stats des vues des articles.
Coder un plugin WordPress comme RedditApprenez à coder un plugin WordPress étape par étape avec un cas concret + BDD.
Installer et configurer Prestashop 9Vous souhaitez créer votre boutique en ligne et profiter d’une solution professionnelle tout en restant simple à utiliser ?
Installer un CMS avec SoftaculousSoftaculous s’impose comme un outil incontournable pour installer rapidement un CMS (WordPress, Prestahsop…) sur votre hébergement ou serveur web.

Autres démos

Coder un keylogger en PythonJ’insiste sur le fait que cet outil doit uniquement être utilisé sur votre propre machine, dans un but d’apprentissage
Détecter et exploiter une faille XSSUne faille XSS est une vulnérabilité de sécurité très répandue qui permet à un attaquant d’injecter du code malveillant
Installer et utiliser Claude codeClaude Code est un outil récent qui place un assistant virtuel directement dans votre terminal pour vous aider.
Ollama, installer l’IA en localOllama, un assistant de développement basé sur l’intelligence artificielle que vous contrôlez depuis votre propre machine.
Connexion serveur en SSHLorsque l’on débute avec l’hébergement web, on a tendance à utiliser uniquement l’interface fournie par son hébergeur.
Créer des Cron JobSi vous gérez un site web, une application ou même un simple serveur, coder certaines tâches pouvant se faire toutes seules.
Installer un certificat SSLAujourd’hui, sécuriser un site web est devenu indispensable. Chaque internaute cherche à naviguer sur des sites fiables et protégés.

Formation web et informatique - Alban Guillier - Formateur

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Créa-blog