- 17
- 1 411
Alexandre Beaugrand
France
เข้าร่วมเมื่อ 9 พ.ย. 2008
Améliorez vos compétences en html / css / javascript avec des projets-tutoriels amusants !
Concepts clés de VueJs : réactivité et composants
Dans cette vidéo, j'aimerais introduire les concepts de réactivité et de composants utilisés par VueJS, en comparant les développements d'une mini-application de conversion de devises en javascript et en VueJS
มุมมอง: 61
วีดีโอ
Créer un flipbook avec StPageFlip.js
มุมมอง 813 หลายเดือนก่อน
Créons ensemble un Flipbook pour une carte de restaurant ! Il sera réalisé en HTML, CSS, et Javascript, et utilisera la bibliothèque StPageFlip.js. Dans la première version, les contenus affichés seront du HTML, et dans la seconde, ce seront des images. La librairie StPageFlip.js est disponible ici : github.com/Nodlik/StPageFlip et le CDN à inclure (seulement le JS) est disponible ici : www.jsd...
Créer une modale en javascript
มุมมอง 744 หลายเดือนก่อน
Dans cette vidéo, nous allons apprendre à créer une fenêtre modale (ou pop-up) en HTML, CSS, et JavaScript de A à Z. Ce tutoriel vous guidera à travers chaque étape du processus. Les boutons d'ouverture de pop-up seront réalisés en 2 versions. Le 1er comprendra des écouteurs d'évènements, le second des data-attributes. À la fin de cette vidéo, vous serez capable de créer des pop-ups interactive...
Fonds dégradés aléatoires en javascript
มุมมอง 425 หลายเดือนก่อน
Voyons comment générer des couleurs et dégradés aléatoires et changeant en javascript. Vous pourrez par exemple les utiliser pour vos fonds de pages ou de conteneurs. Plusieurs versions vous sont proposées, de plus en plus avancé, et aux rendus de plus en plus améliorés. Le code est disponible ici : tech-me-up.com/tutoriels/fonds-degrades-aleatoires CHAPITRES 00:00 - intro 01:16 - version 1, av...
Enquête stateofjs 2023 - comment sélectionner votre framework ?
มุมมอง 955 หลายเดือนก่อน
Les résultats de state of js 2023 sont finalement arrivés, et c'est l'occasion de voir quels sont les frameworks JS front-end (React, Vue, Angular, Svelte ?), les meta frameworks js (Next, Nuxt, Astro), et les build tools (Webpack, ViteJS), les plus utilisés. C'est aussi l'occasion de réfléchir aux critères à prendre en compte lorsque vous choisissez vos outils de dev, librairies ou frameworks....
Créer une page de redirection après 5s (HTML/CSS/JS)
มุมมอง 1065 หลายเดือนก่อน
Dans ce tutoriel, nous allons créer une page de redirection, avec un compte à rebours de 5 à 0, puis une redirection vers l'URL que vous souhaitez, qu'il s'agisse d'un autre page de votre site ou bien vers un autre site. Le code (un brin amélioré) se trouve ici : tech-me-up.com/tutoriels/redirections-automatiques CHAPITRES : 00:00 Intro 00:45 Code 11:27 Outro
Comment Créer une Horloge avec Date !
มุมมอง 1375 หลายเดือนก่อน
Dans ce tutoriel nous verrons comment utiliser l'objet Date de Javascript pour créer une horloge numérique. Nous utiliserons HTML / CSS / et Javascript. L'horloge aura ici un style LCD mais vous pourrez la personnaliser selon vos goûts. Le code est disponible ici : tech-me-up.com/tutoriels/horloge-custom-style-lcd Chapitres : 00:00 - Intro 01:30 - Code 25:52 - Outro
Comment faire une image survolable en javascript ?
มุมมอง 2765 หลายเดือนก่อน
Dans ce tutoriel nous allons créer des images qui changent au survol, autrement appelées "hover images". Elles seront réalisées en HTML / CSS / Javascript. Je vous présente ici 3 versions. Le code est disponible à cette adresse : tech-me-up.com/tutoriels/image-survolable CHAPITRES 00:00 - Intro 00:28 - VERSION 1 15:39 - VERSION 2 17:39 - VERSION 3 36:14 - Outro
Créer des animations CSS avec Animate.css
มุมมอง 746 หลายเดือนก่อน
Animate.css est une librairie capable d'animer n'importe quel élément HTML simplement en lui appliquant des classes. Très simple d'utilisation, il vous suffit d'importer les styles CSS d'animate.css, et d'appliquer sur la balise HTML la classe animate animated celle de l'animation souhaitée. Fini les longs paramétrages d'animations CSS écrits à la mano ! Lien vers la vidéo ou j'utilise animate....
Choisir ses couleurs avec Coolors.co
มุมมอง 326 หลายเดือนก่อน
Choisissez les couleurs de vos applications avec Coolors.co. L'outil est simple et gratuit : appuyez sur espace pour générer une palette de couleurs aléatoires, ou bien partez d'une photo pour en extraire les couleurs clé. Vous pouvez aussi faire une recherche de palettes par mot-clé. Ajouter ou supprimez des couleurs. Ré-organisez-les. Modifiez leurs teintes. Et contrôlez leur contraste avec d...
Générer un dégradé avec cssgradient.io
มุมมอง 316 หลายเดือนก่อน
Générez de jolis fonds dégradés avec l'outil CSSgradient.io, qui vous fera gagner du temps lorsque vous ferez des fonds en CSS. L'outil est simple et gratuit : vous paramétrez votre dégradé, l'outil vous génère le code, et vous n'avez plus qu'à le copier-coller dans votre CSS ! Abonnez-vous ici : www.youtube.com/@alexandrebeaugrand
Indiquer la force d'un mot de passe en javascript
มุมมอง 846 หลายเดือนก่อน
Dans cette vidéo, je vais vous montrer comment indiquer la force d'un mot de passe en utilisant JavaScript, HTML et CSS. Apprenez à créer une icône colorée avec la librairie Bootstrap Icons pour indiquer la force de vos mots de passe en temps réel ! Le code source est disponible ici : tech-me-up.com/tutoriels/mot-de-passe-avance/ Si certaines questions subsistent, n'hésitez pas à les poser en c...
C est la priorité des fichiers CSS dont je parlais
Excuses moi alors. Ils sont charges dans l'ordre d'appel dans le html
@@alexandrebeaugrand super merci de ton retour super tes videos autre question: tu t y connais en closure en JS?
@@marielauredebeaune1780 pas plus que ca il sagit du mecanisme de fermeture des fonctions. Il faut surtout savoir qu'une fonction B appelée dans le contexte dune autre fonction A continue d'avoir acces aux variables créée dans la fonction A même si celle si a deja ete terminee. Cest tres theorique comme reponse mais je ne sais pas si tu as un cas pratique en tete ?
@@alexandrebeaugrand salut oui j'ai un cas très pratique je te le soumets: Function(multiplyBy(number){ const closedVariable = number; return Function(another number){ return closedVariable= anotherNumber} } const multiplyByFive= multiplyBy(5), const multiplyByThree=multiplyBy(3), console.log(multiplyByFive((2)), console.log(multiplyByThree(2)), pour toi que vaut cela? Car dans la vidéo qua j'ai suivi; le formateur dit que const multiplyByThree est une autre instance de la fonction et donc que ce n'est pas 3 qui est gardé dans closedVariable, et moi je ne comprends pas pourquoi. Peux tu m'éclairer merci?
Voici le lien je sais pas si tu arrivera a l ouvrir au cas ou
bjr merci bcp pour ce tuto peux tu me rappeler quand tu mets plusieurs liens de css lequel est prioitaire? cdt
Bonjour, avec plaisir ! La priorité des css est plus compliquée que l'ordre de leur inclusions. Il faut imaginer que les differents liens css se cumulent et se reunissent dans lordre comme dans un unique fichier css. Les priorite d'une regle css (paragraphe css) par rapport a une autre se fait dabord en fonction de la precision du selecteur (la partie avant {) qui permet de cobler le ou les elements a styliser. Plus le selectzur est precise plus la regle prendra la priorité. Si 2 regles css ont une meme precision de sélecteur, alors en cas de proprietes contradictoires (par exemple une regle dit couleur bleu et lautre dit couleur verte) alors la derniere regle déclarée lemporte. Dis moi si ce nest pas assez clair :)
C est la priorité des fichiers dont je parlais
merci bcp pour ce tuto. a 10.19 comment fais tu pour passer de 2 élément à 1 élément dans le DOM? merci encore
Avec plaisir, ravi que tu l'aies suivi ! Au debut dans le dom tu trouves 2 titres, un h2 et un h1. Pour qu'il n'y ai plus qu'un element dans body, ce que l'on souhaite pour le centrer facilement, il suffit de les mettre dans un conteneur, ici le div d'id horloge. C'est lui qui sera l'unique element de body. N'hésites pas si ce n'est pas clair.
Comment avoir ça
Rien de plus simple, il suffit d'aller sur le site coolors.co ;)
Trop cool un tuto avec du JS 🔥
comme t'es fort Alex; et comme dirait l'autre: " la pomme ne tombe pas loin de l'arbre" c'est sur. biz 😎
Merci pour cette vidéo Alex !
merci a toi de l'avoir regardée Nico :)
Pour se faire une idée sur la syntaxe des frameworks, je recommande le site Component Party
Trop cool cette vidéo pour comprendre le marché et essayer de prévoir ce qui marchera prochainement !
Merci bcp pour ton commentaire, je referais la même l'année prochaine pour le prochain sondage donc :)
Merci pour le point sur le state-of-js 2023 Alex 😊 Angular, complexe ? Noooooon Cela dit je trouve qu'il bouge dans le bon sens, beaucoup plus agréable en version 17-18 qu'il ne l'était en 14 par exemple.
Alors je n'en ai pas fait mais c'est ce que j'ai cru comprendre, y'a eu un gros lifting dernièrement, tant mieux ça va dans le bon sens effectivement !
Angular n'est pas si complexe que cela, et devrait plus souvent être comparé à Next / Nuxt plutôt qu'à React et Vue, car en soi forcément si on compare des frameworks qui n'ont pas le même périmètre fonctionnel on va trouver que celui qui propose le plus de fonctionnalités est plus complexe :) Angular fait par exemple du SSR ou du SSG alors que React n'en fait pas et c'est pour ça qu'on fait du Next. Angular est plus structuré de base et contient plus de choses que ses compétiteurs directs. Mais Angular paie sa mauvaise image liée à Angular.JS et sa migration très difficile vers Angular 2+. Depuis, c'est un bonheur d'utiliser ce framework.
C'est vraiment interressant ton point de vue, c'est vrai que ça aurait plus de sens de le comparer à Nuxt ou Next en définitive... c'est pas comme ça qu'il est mentionné dans stateofjs car il est "à cheval" entre les 2 catégories... mais a bcp de sens :)
Merci pour cette vidéo , contenu très clair malgré les difficultés d'apprentissage dues à mon âge !
Avec plaisir 🙂 Greg !
Super vidéo ! Très explicite malgré mon age avancé !🧔
Merci pour ce retour Greg !