Vidéos sur le développement Web

Cette page recense tous les thèmes abordés et tous les projets réalisés.

Programmation Web

Front-end

• Créer une page HTML
  Développer une page HTML, connaître la structure d'une page et les balises d'en-tête obligatoires, choisir les bonnes balises HTML.
• Quelles icônes de favoris ajouter à ses pages Web
  Comprendre pourquoi les icônes de favoris sont utilisées et les créer facilement.
• Réinitialiser le style CSS des navigateurs
  Quelles sont les règles CSS appliquées par les navigateurs, comment les trouver et pourquoi les retirer.
• Utiliser les polices de caractères natives des appareils
  Choix de la police de caractères, avantages et inconvénients des polices natives face aux polices personnalisées.
• Ajouter un thème sombre avec des variables CSS
  Pourquoi et comment ajouter un dark mode à son site Internet.
• Tester facilement le thème sombre d'un site Web
  Comment basculer d'un thème clair à un thème sombre en un clic grâce aux outils de développement de Firefox.
• Développer un menu déroulant en HTML, CSS et JavaScript
  Créer un menu déroulant performant et personnalisable pour votre site Web

Back-end

• Créer un back-end sous Node.js
  Générer les pages sur le serveur à partir d'une application Node.js et du framework Express.
• Créer un modèle de page sous Node.js
  Développer un modèle de page pour faciliter la création de pages en utilisant Node.js et Express.
• Créer une API sous Node.js
  Proposer une API aux utilisateurs et traiter leurs requêtes à l'aide d'une application Node.js et du framework Express.

Langages

• Améliorer le CSS avec le langage SASS
  Découvrir les fonctionnalités de SASS, installer le compilateur, et l'intégrer à son projet.
• Faciliter la saisie avec le langage Markdown
  Saisir facilement du texte formaté et riche sans connaissances techniques en HTML.

Programmation

• Programmation asynchrone en JavaScript : Événements, Callbacks, Promises, async-await
  Vidéo - Code source

API

• Utiliser l'API de Twitter pour récupérer les followers
  Fonctionnement de l'API de Twitter et réalisation d'une application sous JavaScript/Node.js qui récupère les données depuis l'API.

Projets

Développer un dé virtuel

• Partie 1 : Générer la logique dans un environnement Node.js exécutable à partir de la ligne de commande.
  Vidéo - Code source
• Partie 2 : Création de la page Web et intégration de la logique.
  Vidéo - Code source
• Partie 3 : Ajout du style.
  Vidéo - Code source

Développer un mini-jeu : Deviner un nombre

Jeu consistant à trouver le nombre qui a été choisi par la machine. Si le nombre est correct, c'est gagné ! Sinon, une indication est donnée selon que le nombre proposé est plus grand ou plus petit que le nombre recherché.
Vidéo - Code source

Développer un SUDOKU

• Partie 1 : Réalisation de la grille en HTML et du style responsive. Création de la logique pour trouver les erreurs contenues dans la grille.
  Vidéo - Code source - Démo
• Partie 2 : Chargement d'une grille aléatoire au démarrage du jeu. Amélioration de l'affichage
  Vidéo - Code source - Démo
• Partie 3 : Développement d'un algorithme pour résoudre automatiquement le SUDOKU.
  Vidéo - Code source - Démo

Développer un convertisseur de devises

• Partie 1 : Conversion d'un seul couple de devises avec un taux de conversion fixe.
  Vidéo - Code source
• Partie 2 : Ajout d'un parseur XML pour importer les taux de change de la page BCE (Banque Centrale Européenne) au format XML.
  Vidéo - Code source
• Partie 3 : Ajout de toutes les devises en générant la page HTML côté client (Client Side Rendering) et en utilisant les taux importés de la BCE.
  Vidéo - Code source
• Partie 4 : Réalisation d'un proxy pour importer les taux automatiquement et contourner la politique de sécurité CORS.
  Vidéo - Code source

Développer une calculatrice

• Partie 1 : Développement de la logique d'une calculatrice permettant à l'utilisateur de saisir des opérations mathématiques au clavier.
  Vidéo - Code source - Démo
• Partie 2 : Développement de l'interface graphique de la calculatrice en utilisant la technologie CSS GRID.
  Vidéo - Code source - Démo

Bonus

• Le matériel et les logiciels utilisés pour réaliser mes vidéos
  Tout ce que j'utilise pour filmer, enregistrer et monter les vidéos que je publie.