- Видео 16
- Просмотров 1 242
Alexandre Beaugrand
Франция
Добавлен 9 ноя 2008
Améliorez vos compétences en html / css / javascript avec des projets-tutoriels amusants !
Créer un flipbook avec StPageFlip.js
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.jsdelivr.com/package/npm/page-flip
Le code est disponible ici : tech-me-up.com/tutoriels/flipbook
CHAPITRES
00:00 - intro
00:40 - interface et popup
13:29 - flipbook v1 - contenu html
36:00 - flipbook v2 - contenu images
42:07 - outro
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.jsdelivr.com/package/npm/page-flip
Le code est disponible ici : tech-me-up.com/tutoriels/flipbook
CHAPITRES
00:00 - intro
00:40 - interface et popup
13:29 - flipbook v1 - contenu html
36:00 - flipbook v2 - contenu images
42:07 - outro
Просмотров: 54
Видео
Créer une modale en javascript
Просмотров 612 месяца назад
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
Просмотров 382 месяца назад
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 ?
Просмотров 883 месяца назад
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)
Просмотров 1063 месяца назад
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 !
Просмотров 1343 месяца назад
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 ?
Просмотров 2713 месяца назад
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
Просмотров 713 месяца назад
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
Просмотров 254 месяца назад
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
Просмотров 304 месяца назад
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
Просмотров 834 месяца назад
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...
Comment faire un slider en js ?
Просмотров 754 месяца назад
Voici un tutoriel pour créer un slider (carrousel, diaporama) en HTML, CSS, et Javascript, et en 1h ! Le slider comprend des boutons précédent et suivant, un bouton play/pause pour une lecture automatique, ainsi que des légendes. Le fond change de couleur aléatoirement à chaque changement image. Les images du tutoriel, ainsi que le code source, sont disponibles ici : tech-me-up.com/tutoriels/sl...