front-end
front-end
  • Видео 73
  • Просмотров 581 026

Видео

5 Balises HTML méconnues qui vont révolutionner votre code
Просмотров 7 тыс.3 месяца назад
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
Просмотров 2,1 тыс.5 месяцев назад
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
Просмотров 4,8 тыс.7 месяцев назад
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,1 тыс.8 месяцев назад
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-0924 🌟 Le coupon est attribué automatiquement en suivant le lien mais au cas ou le voici : FRONTEND-0924 #figma #...
Créer un rendu en 3D isométrique avec Figma #figma #design #tuto
Просмотров 8568 месяцев назад
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-0924 🌟 Le coupon est attribué automatiquement en suivant le lien mais au cas ou le voic...
L'effet impossible à réaliser avec Figma !!!
Просмотров 6358 месяцев назад
#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-0924 🌟 Le coupon est attribué automatiquement en suivant le lien mais au cas ou le voici : FRONTEND-0924
Dégradé animé avec Figma #figma #design #tuto
Просмотров 5378 месяцев назад
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-0924 🌟 Le coupon est attribué automatiquement en...
Animation d'un liquide avec Figma (water effect)
Просмотров 1,3 тыс.9 месяцев назад
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-0924 🌟 Le coupon est attribué automatiquement en suivant le lien mais au cas ou le voici : FRONTEND-0924
Nouvelle propriété CSS pour des effet de scroll puissant sans JS (animation-timeline)
Просмотров 12 тыс.9 месяцев назад
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
Просмотров 29 тыс.Год назад
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
Просмотров 5 тыс.Год назад
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.
Просмотров 6 тыс.Год назад
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)
Просмотров 52 тыс.Год назад
#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
Просмотров 34 тыс.Год назад
FlexBox Tutorial - CSS Tutorial to Learn and Understand Flexbox in 12 Minutes
Astuce CSS - aspect-ratio #css #csstricks #aspectratio #astucecss #frontend #Shorts
Просмотров 611Год назад
Astuce CSS - aspect-ratio #css #csstricks #aspectratio #astucecss #frontend #Shorts
🔍 Formulaire de recherche React avec auto-complétion - Tuto
Просмотров 2 тыс.Год назад
🔍 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,7 тыс.Год назад
🕵 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
Просмотров 5 тыс.Год назад
🚀 Tuto React débutant - Apprendre les bases de REACT en 2024 🔥 : Réaliser une application facilement
Savoir coder. Encore utile ?
Просмотров 3,9 тыс.Год назад
Savoir coder. Encore utile ?
Chat GPT de OpenAI, le début de la FIN des développeurs ?
Просмотров 162 тыс.Год назад
Chat GPT de OpenAI, le début de la FIN des développeurs ?
Reproduire le Logo React en CSS avec une seule div !
Просмотров 2,1 тыс.Год назад
Reproduire le Logo React en CSS avec une seule div !
Tuto JS & CSS | Animer facilement une card en 3D au survol de la souris
Просмотров 7 тыс.Год назад
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
Просмотров 16 тыс.Год назад
N'utilisez plus margin pour espacer vos éléments avec Flexbox | Astuce CSS
Tuto CSS | Bien comprendre ::before et ::after
Просмотров 12 тыс.Год назад
Tuto CSS | Bien comprendre ::before et ::after
Tuto CSS | Les bases de l'animations + bonus
Просмотров 25 тыс.Год назад
Tuto CSS | Les bases de l'animations bonus
Tuto Javascript | Animer un Loader avec GSAP
Просмотров 1,8 тыс.Год назад
Tuto Javascript | Animer un Loader avec GSAP
Tuto | Les bases de l'animation avec GSAP en 10 minutes
Просмотров 15 тыс.Год назад
Tuto | Les bases de l'animation avec GSAP en 10 minutes
Tuto - Contrôler un Arduino avec Javascript et la librairie Johnny Five
Просмотров 1,6 тыс.Год назад
Tuto - Contrôler un Arduino avec Javascript et la librairie Johnny Five

Комментарии

  • @bimiox
    @bimiox 8 часов назад

    Super vidéo !

  • @StephanelleMyG
    @StephanelleMyG День назад

    Je suis débutante sur figma, et bien j'ai pu faire le tuto sans soucis ! C'est super bien expliqué merci pour cette vidéo !

  • @carolinemicheline
    @carolinemicheline 3 дня назад

    Vraiment, félicitation pour cette mini formation. Elle est super bien réalisée. Et merci, je découvre Figma, c’est un outil génial . J’ai hâte d’en apprendre plus.

  • @neophusgamedesign
    @neophusgamedesign 6 дней назад

    Excellent tuto ! je vais de ce pas prendre la formation meric beaucoup !

  • @julienp4163
    @julienp4163 8 дней назад

    Super vidéo merci pour le travail ! Dommage qu'ils n'aient pas pensé à intégrer le responsive avec une taille minimum sur les colonnes et le passage d'un nombre de colonne à un autre en fonction.

  • @piratestuart2917
    @piratestuart2917 10 дней назад

    Merci bro

  • @eikichioni2650
    @eikichioni2650 10 дней назад

    C'est fort

  • @brucewayne-v6k
    @brucewayne-v6k 11 дней назад

    Vous êtes l'une des rares personnes qui explique en détails sans rien sauter franchement c'est super. On peut pas faire mieux que ça Le tuto sur la génération d'images est très attendu

  • @BenjaminCode
    @BenjaminCode 12 дней назад

    Merci frérot ! C’était hyper clair !

    • @tutos-front-end
      @tutos-front-end 12 дней назад

      Oh merci Benjamin, ca fait plaisir que tu passes ici 😊

  • @damiendelaporte6765
    @damiendelaporte6765 14 дней назад

    Du coup les columns sont horizontales? Et les rows verticales? Moi rien comprendre

  • @damiendelaporte6765
    @damiendelaporte6765 14 дней назад

    Très bien

  • @PhilippeIdlas
    @PhilippeIdlas 16 дней назад

    Je suis un développeur web amateur et autodidacte. Autant dire que je passe beaucoup de temps sur le net aussi bien sur les forums, les sites de formation et les chaînes d'information. J'ai découvert les nouveaux display (flex et grid) et je les ai donc utilisé sur le site en construction de ma fille qui possède une compagnie de théâtre. Mon questionnement concerne en ce moment le 'responsive'. Je ne sais pas trop comment y répondre au mieux en utilisant les nouveaux display, les media queries, les variables, etc.

  • @PhilippeIdlas
    @PhilippeIdlas 16 дней назад

    Merci pour l'astuce. Et une barre de menu en display:flex en responsive. Vous avez ça en magasin.

  • @FamilyChossettes
    @FamilyChossettes 18 дней назад

    merci vraiment: bonne pédagogie

  • @ancewalton9457
    @ancewalton9457 18 дней назад

    Salut chef ! Très bonne vidéo , j'ai adoré .... Je voudrais savoir si tu peux aussi nous montrer comment générer des designs de sites web ou des images avec Midjourney et compagnie ...

  • @fabbufr
    @fabbufr 24 дня назад

    Merci pour tes explications, c'est top qu'ils aient rajouté cette fonctionnalité, dommage qu'elle soit toujours expérimentale à l'heure actuelle. En attendant, GSAP fait bien l'affaire

  • @E-Karatu
    @E-Karatu 27 дней назад

    Merci beaucoup, si vous pouvez faire quelques astuces aussi pour javascript, sa serai vraiment cool Merci

  • @ludwiggolinski555
    @ludwiggolinski555 28 дней назад

    à 8min34 pour palier à ce problème vous avez la solution : grid-template-rows: minmax(auto, 300px) minmax(auto,300px) minmax(auto,300px); Qui fonctionne également avec les pourcentages ;)

  • @DINODEPISCI
    @DINODEPISCI Месяц назад

    Suite la suite reuf

  • @DINODEPISCI
    @DINODEPISCI Месяц назад

    la suite

  • @sylvielemaitre7510
    @sylvielemaitre7510 Месяц назад

    Fantastique! Tout est limpide et surtout, concret: chaque étape est gratifiée d'un résultat. Dans le cadre d'une réorientation professionnelle, je dois suivre un cours "officiel" qui se montre essentiellement théorique et donc peu clair. Grâce à ce tuto, la lumière a jaillit et j'ai pu comprendre ce que le cours officiel tentait vainement d'expliquer. D'ailleurs pour comprendre la partie pluggins et protypage, je vais acquérir la version payante (vraiment pas chère) du tuto ;-) Merciiii !

  • @ggousier
    @ggousier Месяц назад

    Le CSS pour moi a toujours rimé avec enfer ! 🤣

  • @berlenskyy
    @berlenskyy Месяц назад

    🔥

  • @natairsoft7484
    @natairsoft7484 Месяц назад

    Petite questions exemple je veut mettre ses led sur des model de voiture comment je fait esque je met le ardino a l'intérieure ?

  • @RokhayaGueye-cl7vf
    @RokhayaGueye-cl7vf Месяц назад

    ay trop cool par contre je vois pas les foprtmations

    • @tutos-front-end
      @tutos-front-end Месяц назад

      Merci 😊 Le lien est dans la description ou en commentaire épinglé 😉

  • @vladgtamovie1661
    @vladgtamovie1661 Месяц назад

    Commentaire pour le référencement

  • @lalampedetk78
    @lalampedetk78 Месяц назад

    ya même des versions Naruto coloré etc 😂

  • @franckngoubounkou9930
    @franckngoubounkou9930 Месяц назад

    Très bien

  • @jonathanthomas7231
    @jonathanthomas7231 Месяц назад

    Excellent tuto !!!

  • @conquerant-rf7xc
    @conquerant-rf7xc Месяц назад

    Merci l'ami

  • @regisrobart998
    @regisrobart998 Месяц назад

    20/20 vivement la suite

  • @raissabomboko
    @raissabomboko Месяц назад

    coucou j'ai un petit problem avec le auto layout. Je ne trouve pas les 3 petit point du advanced setting pour mettre l'espace entre les elelments. Si quelqu'un pouvais me répondre ce serais super

    • @tutos-front-end
      @tutos-front-end Месяц назад

      Il faut mettre l'espacement à Auto, les 3 ptits point n'existe plus ils ont un peu changé l'interface. Je prévois de refaire un tuto complet du même genre d'ici peu ;)

  • @duprilinuwa
    @duprilinuwa Месяц назад

    j'en ai les larmes aux yeux tellement c'est bien expliqué, même sur la page officielle de figma ils n'expliquent pas aussi bien comment se servir de la large palette de fonctionnalités à disposition. vraiment merci ❤️ Dupril depuis le Cameroun 🇨🇲

    • @tutos-front-end
      @tutos-front-end Месяц назад

      Oh je ne pensais pas donner tant d'émotion. Ca fait super plaisir 🙂 Un grand merci à toi pour tes encouragements😉 Je suis content de voir qu'on me suit jusqu'au Cameroun 😊

  • @yoyo_mlrd2006
    @yoyo_mlrd2006 Месяц назад

    J'ai un probléme au moment de regrouper les éléments a 32:35, j'aimerais peut étre une explication merci bcp

  • @jspt56
    @jspt56 Месяц назад

    J'ai pris ta formation avant meme de finir le tuto....merci infiniment pour cette approche je suis en formation développeur front et cela m'est trop utile. pour le tuto j'ai ajouté un flow 2 a l'overlay pour le faire disparaitre si la souris sors...je viendrai ensuite essayer de créer le bouton qui renverra des card vers le haut de page...👌

    • @tutos-front-end
      @tutos-front-end Месяц назад

      Bienvenue dans le développement front-end collègue 😉 Un grand merci pour ton soutient 😊

  • @camilledumoulin4392
    @camilledumoulin4392 Месяц назад

    Exemple et tuto très complets : Merci !!

  • @marcusdelavoux6568
    @marcusdelavoux6568 Месяц назад

    C’est mieux le menu qui défile avec html ou alors js ?

  • @marcusdelavoux6568
    @marcusdelavoux6568 Месяц назад

    Problème c que c bien expliqué mais t’oublie tt les petit détaille selon l’ordi des autres etc

    • @tutos-front-end
      @tutos-front-end Месяц назад

      Je voulais faire une mini formation d'une heure, le but était de rester simple et "captivant" tout le long, donc pas possible de donner trop de détails, je le fais dans ma formation complète déjà 😉

  • @chrismen83240
    @chrismen83240 Месяц назад

    c'est domage que ça ne fonctionne pas ensemble j'ai une nav qui permet d'aller à la carte que je veux + le mandatory sur les cartes et le smooth scroll ne fonctionne pas dans ce cas peux importe ou je le met

  • @TeloxisJosephRAZAFIMANANTS-f8c
    @TeloxisJosephRAZAFIMANANTS-f8c 2 месяца назад

    Votre tuto est vraiment bien, j'ai déjà visionné et appris avec d'autre tuto, les méthodes sont différentes et c'est ça qui j'ai adoré dans votre tuto. Ce sera encore trop bien si vous nous montrez d'autre technique pour ne pas perdre trop de temps et avec de norme en tant que design web ou application.

    • @tutos-front-end
      @tutos-front-end Месяц назад

      Merci c'est encourageant, il y aura surement d'autres tutos Figma qui arriveront bientôt. (Enfin bientôt par rapport à ma fréquence de publication 😅)

  • @cool-coding_by_True-face
    @cool-coding_by_True-face 2 месяца назад

    Peut tu faire plus d'astuces JavaScript du même, ce serait superbe 🤩🤩🤩

  • @fmive56
    @fmive56 2 месяца назад

    Trop génial 👍

  • @serge_amon
    @serge_amon 2 месяца назад

    Salut. Je veux m'ameliorer en HTML et CSS. Aller a petit pas. Ou dois je te payer ?

    • @tutos-front-end
      @tutos-front-end 2 месяца назад

      Pour l'instant ce n'est malheureusement pas possible mais je prépare quelques trucs pour proposer des cours dans un avenir plus ou moins proche 😉

  • @megretmicha4670
    @megretmicha4670 2 месяца назад

    Merci pour les astuces. J'adore ce format j'espère que tu en fera plein

    • @tutos-front-end
      @tutos-front-end 2 месяца назад

      Je ne sais pas si je pourrais faire des vidéos sur plein d'astuces à chaque fois, à un moment le stock va s'épuiser vite et ca deviendra plutôt un cours tout simplement ^^ Cela dit je pense que je vois ce qui est apprécié dans ce genre de vidéo et je compte en faire davantage dans le genre 😉

    • @megretmicha4670
      @megretmicha4670 2 месяца назад

      @@tutos-front-end De toute façon pour le moment toutes tes vidéos que j'ai regarder son super intéressantes alors je me fais pas de soucis pour les suivantes. Merci pour ton travail

  • @joannybernardeau8691
    @joannybernardeau8691 2 месяца назад

    Merci énormément.C'est vrai que astuces comme celles-ci, je me suis vu confronté sans avoir été plus loin. Parfois je dirais oui on va chercher des solutions avec des librairies comme GSAP par exemple.

    • @tutos-front-end
      @tutos-front-end 2 месяца назад

      Merci à toi 😉

    • @joannybernardeau8691
      @joannybernardeau8691 2 месяца назад

      @@tutos-front-end Je suis preneur de toutes informations. Donc je suis ravi et vous encourage a partager votre savoir.

  • @ilhanlaman3395
    @ilhanlaman3395 2 месяца назад

    Salut, superbe vidéo ! Tu pourrais faire plus de vidéos sur GSAP, s'il te plaît ? Si possible, des astuces sur ScrollTrigger ou des effets parallax. En tout cas, superbe vidéo !!!

    • @tutos-front-end
      @tutos-front-end 2 месяца назад

      C'est prévu oui, j'ai juste beaucoup de travail en ce moment les vidéos sortent au compte goute 😅 Merci en tout cas pour tes encouragements 😉

  • @DanielDarreau
    @DanielDarreau 2 месяца назад

    Moi j'aime bien la première et la dernière, les autres je connaissais un peu. Perso. je trouve ce format astuce très pratique merci

    • @tutos-front-end
      @tutos-front-end 2 месяца назад

      Merci pour le retour, moi aussi la première je l'ai découvert il y a peu 😅

  • @stevenansi2010
    @stevenansi2010 2 месяца назад

    pour moi c'est la 2eme méthode que je préfère , c'est plus simple

  • @Thomasyao11
    @Thomasyao11 2 месяца назад

    très bonne vidéo Merci a vous :)

  • @astucespartiques3125
    @astucespartiques3125 2 месяца назад