front-end
front-end
  • 73
  • 664 958

Відео

5 Balises HTML méconnues qui vont révolutionner votre code
Переглядів 8 тис.7 місяців тому
On va voir 5 balises HTML très utile surtout quand on veut éviter de surcharger notre code avec du Javascript (bon moi j'aime le JS hun mais je parle pour les allergiques XD) Lien pour s'inscrire à ma newsletter : front-end.fr
La meilleure animation de texte au scroll (à mettre sur tout vos sites) #gsap #scrolltrigger
Переглядів 3,4 тис.9 місяців тому
Création d'un effet d'apparition de texte au scroll. On utilisera pour ça GSAP avec son plugin ScrollTrigger. On n'utilisera pas les plugins SplitText et ScrollSmoother de GSAP car ils sont payant. Mais rassurez vous on a mieux ! On va utiliser Splitting à la place la bibliothèque Lenis. Cette dernière vous le verrez est très facile à utiliser et vous risquez de vouloir l'utiliser partout XD. L...
Maîtriser les animations au SCROLL avec SCROLLTRIGGER de GSAP #js #scroll #gsap #scrolltrigger
Переглядів 7 тис.11 місяців тому
Maîtriser les animations au SCROLL avec ce tutoriel sur SCROLLTRIGGER de GSAP. Ce tuto scrolltrigger est là pour vous donner les bases avec ce plugin en vue d'autres vidéos plus complexe ;-) Je vous ai mi le code sur CodePen si vous voulez : codepen.io/front-end-fr/pen/poYGvaP #js #scroll #gsap #scrolltrigger
L'effet qui va vous faire passer de débutant à génie sur Figma (cursor tracking) #figma #design
Переглядів 1,7 тис.Рік тому
On va créer un effet de suivi de curseur (cursor tracking) dans Figma, on le limitera au texte dans notre exemple mais la technique marche aussi pour un simple effet de cursor tracking. 🎥 Le lien vers ma formation Figma : www.udemy.com/course/figma-cours-complet/?couponCode=FRONTEND-0125 🌟 Le coupon est attribué automatiquement en suivant le lien mais au cas ou le voici : FRONTEND-0125 #figma #...
Créer un rendu en 3D isométrique avec Figma #figma #design #tuto
Переглядів 1,2 тис.Рік тому
La 3D isométrique dans Figma est tout à fait possible avec un peu d'imagination :). Dans ce tuto on verra donc comment mettre en valeur vos créations en donnant cette effet de 3D isométrique #figma #design #tuto 🎥 Le lien vers ma formation Figma : www.udemy.com/course/figma-cours-complet/?couponCode=FRONTEND-0125 🌟 Le coupon est attribué automatiquement en suivant le lien mais au cas ou le voic...
L'effet impossible à réaliser avec Figma !!!
Переглядів 770Рік тому
#figma #design #tuto Création d'un effet abstrait avec Figma. 🎥 Le lien vers ma formation Figma : www.udemy.com/course/figma-cours-complet/?couponCode=FRONTEND-0125 🌟 Le coupon est attribué automatiquement en suivant le lien mais au cas ou le voici : FRONTEND-0125
Dégradé animé avec Figma #figma #design #tuto
Переглядів 858Рік тому
Tuto Figma : Découvrez comment réaliser de beaux effets de dégradés (mesh gradient) dans Figma. Avec un peu d'astuce on verra que l'on peut arriver au même résultat que sur Illustrator. Et en prime on animera le dégradé grâce au prototypage de Figma. 🎥 Le lien vers ma formation Figma : www.udemy.com/course/figma-cours-complet/?couponCode=FRONTEND-0125 🌟 Le coupon est attribué automatiquement en...
Animation d'un liquide avec Figma (water effect)
Переглядів 1,8 тис.Рік тому
Dans ce tuto issu de ma formation Figma je vous montre comment créer un loader animé avec un effet de liquide. (water effect) 🎥 Le lien vers ma formation Figma : www.udemy.com/course/figma-cours-complet/?couponCode=FRONTEND-0125 🌟 Le coupon est attribué automatiquement en suivant le lien mais au cas ou le voici : FRONTEND-0125
Nouvelle propriété CSS pour des effet de scroll puissant sans JS (animation-timeline)
Переглядів 17 тис.Рік тому
animation-timeline peut désormais prendre 2 nouvelles propriétés : scroll() et view(). On va voir ensemble comment exploité cette propriété pour faire des effets au scroll sans une ligne de Javascript. Ce qui était impossible avant ;) Voici les liens utiles pour cette vidéo : scroll-driven-animations.style codepen.io/front-end-fr/pen/poGxQmo #css #scroll #cssonly #purecss
Apprendre CSS GRID - Le tuto pour enfin comprendre les grilles CSS
Переглядів 40 тис.Рік тому
Apprendre CSS GRID. Dans ce tutos on passera en revu les principales propriétés CSS pour mettre en page vos grilles facilement. Le lien vers l'outils de génération de grilles CSS : grid.layoutit.com/ 00:00 Introduction 00:46 Principe de base 01:24 display : grid 02:03 grid-template-columns & rows 03:04 fonction repeat() 03:34 unité fr (1fr) 04:45 grid-column & grid-row 06:51 astuce : valeur nég...
Le Dev Mode dans Figma est arrivé ! (config 2023) #devmode #figma #config2023
Переглядів 7 тис.Рік тому
Le dev mode dans figma est arrivé, il a donc droit à un petit tuto pour voir comment fonctionne ce dev mode ! #devmode #figma #config2023 Si tu aimes mon contenu et que veux me soutenir tu as un lien vers ma formation complète sur Figma. Et même si tu aimes mon contenu mais que tu ne veux pas t'inquiète pas je t'aimerais toujours ! Enfin si tu es abonné, je n'aime que mes abonnés 😋 🎥 Le lien ve...
Container Queries : La nouvelle feature CSS qui va tout changer.
Переглядів 7 тис.Рік тому
Les Container Queries : dans cette vidéo on va voir comment utiliser une container query en CSS et ce qu'elle peut apporter au niveau du responsive. Lien vers la MDN : developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries developer.mozilla.org/fr/docs/Web/CSS/CSS_logical_properties_and_values/Basic_concepts_of_logical_properties_and_values
Tuto Figma débutant 2024 : apprendre les bases en créant une landing page (mini formation gratuite)
Переглядів 70 тис.Рік тому
#tuto #figma #débutant #design #formation Dans cette formation Figma 2024 pour débutant vous allez apprendre les bases de Figma et créer une landing page. On y verra de nombreux outils comme les auto layout, les composants, le prototypage, les plugins, etc. Dans cette mini formation gratuite de plus d'1h de contenu vous allez apprendre les bases de Figma qui est un condensé de ma formation pers...
GitHub Copilot X - The Revolution Begins with GPT-4 - Chatbox in the IDE, CLI, Voice Command
Переглядів 7 тис.Рік тому
GitHub Copilot X - The Revolution Begins with GPT-4 - Chatbox in the IDE, CLI, Voice Command
FlexBox Tutorial - CSS Tutorial to Learn and Understand Flexbox in 12 Minutes
Переглядів 45 тис.Рік тому
FlexBox Tutorial - CSS Tutorial to Learn and Understand Flexbox in 12 Minutes
Astuce CSS - aspect-ratio #css #csstricks #aspectratio #astucecss #frontend #Shorts
Переглядів 660Рік тому
Astuce CSS - aspect-ratio #css #csstricks #aspectratio #astucecss #frontend #Shorts
🔍 Formulaire de recherche React avec auto-complétion - Tuto
Переглядів 2,3 тис.Рік тому
🔍 Formulaire de recherche React avec auto-complétion - Tuto
🕵 Découvrez les fonctionnalités cachées de la console JavaScript qu'on ne vous enseigne jamais.
Переглядів 2,8 тис.2 роки тому
🕵 Découvrez les fonctionnalités cachées de la console JavaScript qu'on ne vous enseigne jamais.
🚀 Tuto React débutant - Apprendre les bases de REACT en 2024 🔥 : Réaliser une application facilement
Переглядів 7 тис.2 роки тому
🚀 Tuto React débutant - Apprendre les bases de REACT en 2024 🔥 : Réaliser une application facilement
Savoir coder. Encore utile ?
Переглядів 3,9 тис.2 роки тому
Savoir coder. Encore utile ?
Chat GPT de OpenAI, le début de la FIN des développeurs ?
Переглядів 162 тис.2 роки тому
Chat GPT de OpenAI, le début de la FIN des développeurs ?
Reproduire le Logo React en CSS avec une seule div !
Переглядів 2,6 тис.2 роки тому
Reproduire le Logo React en CSS avec une seule div !
Tuto JS & CSS | Animer facilement une card en 3D au survol de la souris
Переглядів 8 тис.2 роки тому
Tuto JS & CSS | Animer facilement une card en 3D au survol de la souris
N'utilisez plus margin pour espacer vos éléments avec Flexbox | Astuce CSS
Переглядів 18 тис.2 роки тому
N'utilisez plus margin pour espacer vos éléments avec Flexbox | Astuce CSS
Tuto CSS | Bien comprendre ::before et ::after
Переглядів 13 тис.2 роки тому
Tuto CSS | Bien comprendre ::before et ::after
Tuto CSS | Les bases de l'animations + bonus
Переглядів 34 тис.2 роки тому
Tuto CSS | Les bases de l'animations bonus
Tuto Javascript | Animer un Loader avec GSAP
Переглядів 2,1 тис.2 роки тому
Tuto Javascript | Animer un Loader avec GSAP
Tuto | Les bases de l'animation avec GSAP en 10 minutes
Переглядів 16 тис.2 роки тому
Tuto | Les bases de l'animation avec GSAP en 10 minutes
Tuto - Contrôler un Arduino avec Javascript et la librairie Johnny Five
Переглядів 1,8 тис.2 роки тому
Tuto - Contrôler un Arduino avec Javascript et la librairie Johnny Five

КОМЕНТАРІ

  • @KELENTISGROUP
    @KELENTISGROUP 6 годин тому

    Super cours. Merci beaucoup

  • @maicom-graphiste
    @maicom-graphiste 20 годин тому

    Super tuto très clair et intéressant, bravo ! J'ai cru voir qu'on pouvait transférer un site fait sur figma directement sur wordpress, est ce fiable ? qu'en penses tu ? utilises tu ainsi figma ou comment fais tu sinon pour mettre ton site en ligne ?

  • @mamadoutips
    @mamadoutips День тому

    MERCI !

  • @HamidAmmiSaïd
    @HamidAmmiSaïd 2 дні тому

    fantastiques

  • @HamidAmmiSaïd
    @HamidAmmiSaïd 2 дні тому

    Merci beaucoup

  • @Eloomusik
    @Eloomusik 4 дні тому

    Merci pour ce tuto, il était giga clair. Même dans ma formation ce n'était pas aussi clair les lives :) Tout le mérite est pour toi

  • @DEVWEB1AlexandreBLAIZOT
    @DEVWEB1AlexandreBLAIZOT 4 дні тому

    Salut ! Merci beaucoup pour toutes tes video ! :D Cependant, petite question, lorsque tu utilise la valeur negative -1 dans ton exemple, pourquoi ne pas mettre la valeur 5 ? JE n'ai pas bien compris ce point :/ Merci d'avance pour ta réponse ! :D

  • @josephtibe9141
    @josephtibe9141 9 днів тому

    Merci vraiment😊

  • @AbdoulayDiagn
    @AbdoulayDiagn 11 днів тому

    Malheureusement je ne peux pas s'abonner deux fois 😅

  • @MegaKami78
    @MegaKami78 11 днів тому

    BONJOUR....animation-timeline NE FONCTIONNE PAS SUR FIREFOX !!!!!

  • @malilmonkk2082
    @malilmonkk2082 17 днів тому

    Super pédagogique, un grand merci!

  • @Ramouss-j1j
    @Ramouss-j1j 19 днів тому

    c est tres lourd ........

  • @MarckPivi
    @MarckPivi 20 днів тому

    merci beaucoup j'ai passe des heures a visionner vos vidéos, elles sont juste magnifiques. je recommande a tout le monde il y a vraiment du bon contenu

  • @youneskaddi7907
    @youneskaddi7907 20 днів тому

    excellent

  • @elcondorito8823
    @elcondorito8823 20 днів тому

    Le tuto parfait ! Je m'abonne !

  • @AlainMomo-q3u
    @AlainMomo-q3u 21 день тому

    🤝🤝🙏

  • @nathanbayoro2376
    @nathanbayoro2376 24 дні тому

    Ce que tu as fait est super vraiment merci beaucoup, et aussi merci pour le tuto

  • @nathanbayoro2376
    @nathanbayoro2376 24 дні тому

    C'est super bien expliqué bro merci Mais si tu pourrais y ajouter un peu de blague parcequ'un cour continu sans petit break , c'est fatiguant

  • @fredericbignon9831
    @fredericbignon9831 27 днів тому

    merci pour ce contenu interessant

  • @HSchrooellINSTITUT-h5h
    @HSchrooellINSTITUT-h5h 28 днів тому

    Super pratique belle vidéo merci reuf 🙏

  • @stabilobilo9176
    @stabilobilo9176 29 днів тому

    Très bon tuto, merci! Par contre à 28:29 mon bouton s'étire comme la frame, j'ai réessayé mais même résultat! Si quelqu'un à la solution, je le remercie par avance!

    • @audricc22
      @audricc22 28 днів тому

      Hello, j'ai eu le même probleme, il faut juste dire a ton bouton de ne pas s'étirer a ta forme

    • @stabilobilo9176
      @stabilobilo9176 28 днів тому

      Ok, je vais aller voir ça ! Merci 👍

  • @MarieC-recoTest
    @MarieC-recoTest 29 днів тому

    Merci pour ce tuto au top ! En reconversion je viens de finir mon projet JS et j'attaque REACT. Tous les tutos que j'avais trouvé était dans un premier temps beaucoup trop complexe, j'avais besoin de quelque chose de plus simple pour commencer à aborder la notion ! Poursuit 😉

  • @jackpierre-marie7293
    @jackpierre-marie7293 Місяць тому

    La barre des outils est placée en bas. comment peut-on la mettre en haut comme vous indiquez dans le tuto. (Je suis sur Windows)

  • @jackpierre-marie7293
    @jackpierre-marie7293 Місяць тому

    Peux-t-on configurer le menu figma en Français ? si oui : Comment ? Merci de votre retour

  • @jackpierre-marie7293
    @jackpierre-marie7293 Місяць тому

    Bjr, Je viens d'acheter votre cours sur Udemy. Il y a une note concernant la mise à jour de l'interface de gigma et la nécessité de poursuivre le cours sur l'ancienne interface de figma. Est-ce que cela est tjs d'actualité. Merci de votre retour. Jack

  • @Jarod75
    @Jarod75 Місяць тому

    Je suis que au début et c'est déjà magique bravo.

  • @teamtmc7384
    @teamtmc7384 Місяць тому

    bonjour et bonne annee a tous , pendant les premiere secondes de la video vous avez montrer une animation du texte avec des imgs , comment je peux le faire?

  • @Zakidiop-s9j
    @Zakidiop-s9j Місяць тому

    salut dis moi on peut ravoir le même tuto avec la nouvelle interface car impossible de reproduire cette maquette avec la nouvelle interface

    • @tutos-front-end
      @tutos-front-end Місяць тому

      C'est prévu 😉

    • @ZakiDiop-n6z
      @ZakiDiop-n6z 21 день тому

      @@tutos-front-end tant qu'a faire la passer en responsive

  • @gadonzen444
    @gadonzen444 Місяць тому

    Ça mérite plus qu'1 like

  • @velontsoarandriamanga9467
    @velontsoarandriamanga9467 Місяць тому

    Merci pour le tuto. Par contre j'ai un souci sur l'étape Top bar : quand je l'étire après avoir mis l'auto layout, le bouton s'étire aussi avec. Comment faire ? Merci

  • @leadermushioataulwa8492
    @leadermushioataulwa8492 Місяць тому

    yo man tu es trop fort congrats

  • @KayrtilMarci
    @KayrtilMarci Місяць тому

    C'est juste moi ou tu explique excessivement bien😎. Continue comme ca tes vidéos m'aident beaucoup !

  • @humainnormal1650
    @humainnormal1650 Місяць тому

    Est-ce qu'il y aurait une vidéo pour le responsive design ?

  • @eugenelocohjr.4118
    @eugenelocohjr.4118 Місяць тому

    TOP TOP TOP

  • @maee5138
    @maee5138 Місяць тому

    Tuto de qualité franchement !

  • @TedomTafotsiDimitriWilfried
    @TedomTafotsiDimitriWilfried Місяць тому

    Merci beaucoup

  • @spadafleuriane
    @spadafleuriane 2 місяці тому

    merci pour cette vidéo qui m'a sauvé la vie pour un test d'embauche alors que je n'avais jamais touché à Figma ! très pédagogue, je vais de ce pas tester ta formation

  • @MalcolmLomacx1111
    @MalcolmLomacx1111 2 місяці тому

    Merci 👍👍🙏

  • @proxypaysen3240
    @proxypaysen3240 2 місяці тому

    Je veux le jeu

  • @MrJayDuff
    @MrJayDuff 2 місяці тому

    Merci beaucoup pour ce tuto ! J'ai fais une formation Chef de projet dans laquelle on a eu des cours Figma complètement éclatés ! Le prof nous a fait faire des animations complexes sans même nous montrer les bases. Dans ta vidéo, tout est bien expliqué. Je détestais Figma. Grâce à toi, je suis maintenant comme un gosse qui découvre un nouveau jouet. ;)

  • @mimozasolalisis73
    @mimozasolalisis73 3 місяці тому

    Vraiment très bien, merci.

  • @ralmax2761
    @ralmax2761 3 місяці тому

    merci je commence mes études en développement et j'ai vraiment compris le tuto MERCI

  • @rahimsoumah256
    @rahimsoumah256 3 місяці тому

    Merci vraiment pour le cours , et en plus on est aussi intéréssé par la manière dont vous générerez les images et designs par IA .

  • @lorenzolamas534
    @lorenzolamas534 3 місяці тому

    Concis et genial ! Bien mieux que ce qui m'est expliqué dans ma formation du cpf !!! Tu devrais deja etre formateur dans une de ces ecoles ou leur pedagogie est nulle !!

  • @gregoryly45
    @gregoryly45 3 місяці тому

    Je suis en haute école en développement et si mon prof avait expliqué aussi bien que cette vidéo, je n’aurais eu aucun soucis de compréhension. Merci pour cette vidéo 😊

  • @ganial_chet
    @ganial_chet 3 місяці тому

    Suis débutant et compte environ 7*24h pour comprendre et enregistrer tous les details aussi intéressant les uns que les autres surtout l'astuce avec la propriété grid-template-areas. Coup de chapeau pour les explications vraisemblablement claires 🫡

  • @fredevellin8897
    @fredevellin8897 3 місяці тому

    Merci pour vos vidéos si claires. J'avais un question générale : vaut il mieux utiliser une grid ou des éléments flex pour construire une page web responsive?

  • @leonnidaasyoutube9430
    @leonnidaasyoutube9430 3 місяці тому

    Bonjour, Comment faire pour que la page web change en direct svp ?

  • @mongizribi8894
    @mongizribi8894 3 місяці тому

    Mais pourquoi tu n'as pas coloris les items ! 😂 On n'a rien constaté !

  • @LesjumauxBalukuna
    @LesjumauxBalukuna 3 місяці тому

    😊😊😊