- 73
- 664 958
front-end
France
Приєднався 24 сер 2017
Site web (en cours de création) : www.front-end.fr
TikTok : @frontend.fr
Instagram : @front_end.fr
TikTok : @frontend.fr
Instagram : @front_end.fr
6 astuces CSS méconnues qui vont révolutionner votre code #css
On va voir 6 astuces CSS très utile mais qui sont malheureusement peu connus.
Lien pour s'inscrire à ma newsletter : front-end.fr
Lien pour s'inscrire à ma newsletter : front-end.fr
Переглядів: 3 683
Відео
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
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
Super cours. Merci beaucoup
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 ?
MERCI !
fantastiques
Merci beaucoup
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
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
Merci vraiment😊
Malheureusement je ne peux pas s'abonner deux fois 😅
BONJOUR....animation-timeline NE FONCTIONNE PAS SUR FIREFOX !!!!!
Super pédagogique, un grand merci!
c est tres lourd ........
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
excellent
Le tuto parfait ! Je m'abonne !
🤝🤝🙏
Ce que tu as fait est super vraiment merci beaucoup, et aussi merci pour le tuto
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
merci pour ce contenu interessant
Super pratique belle vidéo merci reuf 🙏
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!
Hello, j'ai eu le même probleme, il faut juste dire a ton bouton de ne pas s'étirer a ta forme
Ok, je vais aller voir ça ! Merci 👍
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 😉
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)
Peux-t-on configurer le menu figma en Français ? si oui : Comment ? Merci de votre retour
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
Je suis que au début et c'est déjà magique bravo.
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?
salut dis moi on peut ravoir le même tuto avec la nouvelle interface car impossible de reproduire cette maquette avec la nouvelle interface
C'est prévu 😉
@@tutos-front-end tant qu'a faire la passer en responsive
Ça mérite plus qu'1 like
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
yo man tu es trop fort congrats
C'est juste moi ou tu explique excessivement bien😎. Continue comme ca tes vidéos m'aident beaucoup !
Est-ce qu'il y aurait une vidéo pour le responsive design ?
TOP TOP TOP
Tuto de qualité franchement !
Merci beaucoup
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
Merci 👍👍🙏
Je veux le jeu
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. ;)
Vraiment très bien, merci.
merci je commence mes études en développement et j'ai vraiment compris le tuto MERCI
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 .
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 !!
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 😊
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 🫡
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?
Bonjour, Comment faire pour que la page web change en direct svp ?
Mais pourquoi tu n'as pas coloris les items ! 😂 On n'a rien constaté !
😊😊😊