Тёмный

My Website Step by Step (Three.js, HTML/CSS, Javascript) 

Benjamin Code
Подписаться 134 тыс.
Просмотров 87 тыс.
50% 1

Grâce à Notion, j'ai pu prendre des notes tout le long de mon processus de création. C'est un truc que je ne fais jamais d'habitude car je n'avais pas d'outils adapté. Là c'était ultra intuitif, j'ai pu tout noter au fur et à mesure et de ce fait cette vidéo a pu voir le jour. J'espère qu'elle vous plaira. Faites me le savoir par un like ou un commentaire que je sache si par l'avenir ce genre de vidéo étape par étape vous intéresse.
benjamincode.tv
#threejs #html #css #glsl
Le design du site a été entièrement recopié sur le site de Greta qui a gagné l'une des plus prestigieuse récompense à savoir The Awwwards of the Month. Le but du jeu pour moi ici était de recoder tout ça de 0 juste en regardant le site original. C'était super instructif et passionnant.
theyearofgreta.com/
Le scan 3D a été réalisé par Digitage
www.digitage.fr/
Rejoignez moi sur Twitter :
/ benjamincodeyt
Candidatez pour mon Slack de développeurs freelances pour partager des missions et des bons plans :
bit.ly/33hZCmA
2 mois gratuits pour l'ouverture de votre compte Shine :
www.shine.fr/lp/offre/benjami...
Insta : / benjamincode
Twitch : / benjamincode
Mail : b1jam1code@gmail.com

Опубликовано:

 

6 июн 2020

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 198   
@cedricchaffard829
@cedricchaffard829 4 года назад
Absolument merci de nous faire partager tout ça Benjamin. C’est intéressant au plus haut point et tellement motivant de voir toutes ces incroyables possibilités de création web 👍🏻👍🏻🤘🏻
@gunkat
@gunkat 4 года назад
Très beau site, bsahtek benjamin ! Et les projets étapes par étapes sont une super bonne idée
4 года назад
J'ai adoré le parallèle très vrai entre la découpe du site brique par brique et l'algorithmique ! Fabuleuse vidéo et fabuleux site, bravo Benjamin ! 👏
@Maertaugh
@Maertaugh 4 года назад
Just bluffant... je suis émerveillé par ta ténacité et ta motivation... bravo. Le resultat a l air super top comme ca sur youtube
@benoitchrl8480
@benoitchrl8480 4 года назад
Super intéressante ta vidéo ! J'adore découvrir en détail ton travail et ton processus créatif. Ça démystifie pas mal de tout découper en petits morceaux de taf comme tu le fais. Continues comme ça et bravo !
@chokdeesam2365
@chokdeesam2365 4 года назад
Au top ! Voilà pourquoi j’aime le front end : les possibilités de design et d’interactions infinis, qui procurent au final une expérience incroyable, et surtout mémorable:) Je suis débutant, mais vraiment le back end, ça me fait pas rêver du tout... Merci pour cette vidéo géniale!
@LouistitiFr
@LouistitiFr 4 года назад
Je partage complètement ton excitation. Quand tu ressens ces papillons pendant le développement d'un projet, cette flamme qui devrait animer tous les développeurs, c'est juste l'extase ! Bravo pour le travail ! 👏
@yannyver5746
@yannyver5746 4 года назад
Tu gères, j'adore et curieux de voir comment on réalise ce truc. C'est effectivement trop bon, cette excitation quand tu es sur un projet qui te prend et t'emmène si loin que tu as même oublié de manger. Pour cette raison que j'adore ce job. Félicitations pour ton site et tes vidéos. 👏
@zennadizaki4393
@zennadizaki4393 2 года назад
Il faut dire que le contenu que tu nous présentes et juste excellentissime
@47jiro47
@47jiro47 4 года назад
A chaque fois que j'ai une baisse de motiv' tu sors une vidéo. En tt cas beau boulot!
@manuel-hadriensalard1637
@manuel-hadriensalard1637 4 года назад
Merci pour cette vidéo. Je suis en train de songer à devenir developpeur web alors que je n'ai aucune compétence en la matière. Tes vidéos sont très motivantes et donnent envie de faire ton métier. Je suis en train de postuler à l'école le wagon en espèrant être sélectionné.
@tanguybruwaert901
@tanguybruwaert901 4 года назад
Je kiff comment tu communique cette passion😆, je suis actuellement au début de html, ces, tellement d'univers découvrir. Bravo pour ta communication, ton travail, ton enthousiasme 🙏👏
@babali840
@babali840 3 года назад
Super vidéo, j'adore ta motivation c'est trop cool ! Longue vie aux shaders
@taile5345
@taile5345 4 года назад
Yes Yes Yes, je valide totalement ! J'adore ton approche dans tes vidéos, 👏
@Leodagan84
@Leodagan84 3 года назад
Incroyable ce projet ! Félicitations
@kaporos
@kaporos 4 года назад
Lundi, mardi, credi 😁 Très chouette vidéo !
@TomahAwkDJ7
@TomahAwkDJ7 4 года назад
Vraiment classe ! C'est ce qui me motive dans mon apprentissage du web dev et design ce genre de site innovant ! J'ai bien ri à 5:20 :D
@laurentmottet7615
@laurentmottet7615 4 года назад
Hello, super inspirante ta vidéo (et la plupart de celles sur ta chaîne !) pour voir jusqu'où peut nous mener le développement front pour moi qui débute en HTML/CSS. La route est longue mais tout cela est passionnant ! Merci pour le partage.
@roadnkite
@roadnkite 4 года назад
C'est trop bien ça de voir comment tu réfléchis, voir le cheminement du début à la fin
@quentinmengue4685
@quentinmengue4685 2 года назад
Franchement tu es vraiment fort chapeau
@juleserbin4070
@juleserbin4070 4 года назад
Très beau site !! Vive le créative development, bravo à toi
@darkodeur9603
@darkodeur9603 4 года назад
Enorme la vidéo et le site. La tête lunaire à la fin ;)
@Pouetpouets
@Pouetpouets 4 года назад
Assez incroyable cette vidéo, plus de projet perso comme ça !
@voyagesetsurf8869
@voyagesetsurf8869 4 года назад
C'est super stylé! Tu t'es bien chauffé sur ce projet, bravo.
@moustaphakachab6277
@moustaphakachab6277 4 года назад
Super site ça m’a super inspirer 🔥🔥 merci 🙏🏼🙏🏼✨✨
@MrSeb7
@MrSeb7 4 года назад
Super vidéo et super site, bravo à toi. J'adore totalement.
@hajarivolarazanakotorasold9167
@hajarivolarazanakotorasold9167 4 года назад
J'adore, rien a ajouter de plus.
@ld2037
@ld2037 3 года назад
Genial j'adore ta chaîne
@thierryguichon
@thierryguichon 4 года назад
Je kiff l easter eag à la fin de ton site 😂
@sereine27
@sereine27 4 года назад
Tu nous apprends des choses... Merci ;)
@titouanschotte
@titouanschotte 3 года назад
Super site et bravo 👌🏻💪🏻
@thewarmachine9713
@thewarmachine9713 4 года назад
Franchement Chapeau L’artiste 👏
@harentzharentz3477
@harentzharentz3477 2 года назад
🤩🤩🤩 COOL, Continuez !!!!!!
@swarm9354
@swarm9354 4 года назад
C’est vraiment un domaine qui me plait, j’étais en formation à l’AFPA en tant que développeur web et web mobile, c’était très intéressant de jour en jour, je progressais, du CSS Brut aux flexbox - grid /Bootstrap puis semantic et d’autres. Malheureusement, je n’ai pas trouvé de stage malgré le fait d’avoir envoyé énormément de CV. Ça m’a démotivé alors que j’aurais pu être un bon développeur si j’avais pu du coup suivre la seconde partie de la formation sur le back-end. J’aurais pu passé de sans BAC à titre de niveau de 3. Mais bon, je pratique encore et je me suis mis à vuejs, sans diplôme j’ai encore espoir de trouver quelque chose ^^
@LoganSeduction
@LoganSeduction 3 года назад
Wow, respect pour ton niveau !!
@pioupiagaming
@pioupiagaming 4 года назад
Wow C'est incroyable !
@adminmauvais-oeil5058
@adminmauvais-oeil5058 3 года назад
Magnifique
@Watcha93
@Watcha93 2 года назад
Super site. Félicitation
@ryan_0337
@ryan_0337 4 года назад
Salut Benoît félicitations pour ton intégrité. Tu as réussi à faire ce que très peu de monde peu à réussi à faire. Tu apportes beaucoup à la communauté 😊 Si tu fais des formations je serai ton premier client😉
@aghileslounis
@aghileslounis 4 года назад
30 premières secondes je vois le site en fond je like la video waw c'est fou!
@Ta9i
@Ta9i 2 года назад
Incroyable
@vinzFDC
@vinzFDC 2 года назад
Énorme !!
@khalid540000000
@khalid540000000 4 года назад
Salut, Grave cool, chapeau 👏👏👏
@sergioguinaudeau7997
@sergioguinaudeau7997 4 года назад
Très instructif
@Mihawkkun
@Mihawkkun 4 года назад
Woaw c'est ouf ! Un taff incroyable. J'aime beaucoup les étapes d'explication tout le long de la vidéo, j'aurais aimé en savoir plus sur cette technique de 3D que tu as utilisé pour faire ton corps avec cette société, peut-être une prochaine vidéo sur ça pourrait être cool !
@BenjaminCode
@BenjaminCode 4 года назад
La vidéo est déjà sur ma chaîne ! Je suis allé chez eux et jai filmé le processus en plus d'une interview. La vidéo s'appelle : je me fais scanner en 3d par digitage
@Mihawkkun
@Mihawkkun 4 года назад
@@BenjaminCode oups désolé j'ai pas fais attention j'irai la voir alors merci pour ton contenu en tout cas 🙂
@anthonygorski
@anthonygorski 4 года назад
J'aime j'aime x1000 ! Bravo !
@LilZoty
@LilZoty 4 года назад
C'est ouf, bravo, j'aimerais avoir ton niveau pour réaliser ça !
@napoleonkhan7943
@napoleonkhan7943 4 года назад
Whaou. Le résultat est juste dingue. Franchement bravo. Ce serait super cool que tu nous parles plus de webgl et des shaders, même des bases. Car il n'y aucune vidéo sérieuse la dessus en français. Et sur un sujet complexe comme ça, c'est toujours agréable d'avoir des ressources en langue maternelle pour se lancer. En tout cas, bravo encore. Super vidéo !
@BenjaminCode
@BenjaminCode 4 года назад
Je suis d'accord que y'a pas bcp de resources en français. Même en anglais en fait... C'est le désert total et y'a peu de choses bien pédagogique à ce niveau. Moi je ne ferai pas de tutos ou j'en parlerai pas avant de mieux maîtriser le sujet et j'en suis loin hélas... En tout cas je suis confronté à exactement les mêmes problèmes que vous dans mon apprentissage !
@paulbrumder7394
@paulbrumder7394 4 года назад
@@BenjaminCode En effet, pour avoir effectué énormément de recherches dessus, c'est un désert et c'est compréhensible que tu ne veuilles pas t'avancer dans un tuto sans maîtriser le sujet. En revanche si tu as le temps, il peut déjà être intéressant de présenter comment tu as réalisé l'effet présent dans cette vidéo ou du moins quelles sont les sources et ressources utilisées pour aboutir à ce résultat. +1 abonné au passage pour l'excellente qualité de la vidéo 👌
@faridzo1017
@faridzo1017 3 года назад
bravo, c'est super ;)
@fakherhabib7952
@fakherhabib7952 3 года назад
j aimes ton contenu
@BenjaminCode
@BenjaminCode 3 года назад
Bienvenue à toi !
@antoankurti
@antoankurti 3 года назад
Yo. Trop cool la vidéo. Très bien le fait de découper les étapes. Tu ne fais pas de vidéos tuto mais le côté : lire des vidéos à partir d’une playlist RU-vid m’intéresse fort. Si l’envie te prend d’en faire quelque chose. Bise.
@enzosopranos8854
@enzosopranos8854 3 года назад
Top
@Loupechou
@Loupechou 4 года назад
Top, bravo !
@cholakabaso725
@cholakabaso725 4 года назад
Génial le site, il est bien optimiser que l'original, félicitation
@guillaumemmm7370
@guillaumemmm7370 4 года назад
Très chaud!
@ifecojahs8151
@ifecojahs8151 2 года назад
Wait a minute. All the great THREE.js guys are from France. Wow! That's cool!
@enjoywithstuph5438
@enjoywithstuph5438 2 года назад
good job buddy!
@JhnBravo84
@JhnBravo84 4 года назад
Lesson est :MAGNIFIQUE!!! Merci! Tu peux en faire encore sur dév Créatif??? Stp
@baptoufou966
@baptoufou966 4 года назад
Magnifique l'easter egg 😏
@eddyhansandrianambinina5907
@eddyhansandrianambinina5907 4 года назад
T'es un boss 🤩🤩🤩
@sebastiendubourg4797
@sebastiendubourg4797 4 года назад
Salut ! Super vidéo, super fluide, t'es hyper naturel et tu donnes juste le bon niveau d'info / au bon timing qui fait que c'est un plaisir de te suivre. Je suis venu pour three.js, mais je reste curieux de voir le reste. Ah, j'ai failli oublier : tu as l'air vraiment passionné. ça aussi, ça y fait beaucoup. On la sent la flamme dont tu parles. A + dude
@BenjaminCode
@BenjaminCode 3 года назад
Merci beaucoup ! Trop bien d'avoir ce genre de retour sur le la conception de la vidéo avec le rythme et tout !
@Personneverrajamais
@Personneverrajamais 4 года назад
gNeU gNeU dEv FrOnT c pA 1 MéTiEr, les devs back en PLS. Joli taf je suis admiratif ! EDIT : T'as une jolie lune.
@quentin7257
@quentin7257 4 года назад
👍👍
@mougri0695
@mougri0695 4 года назад
Trop bien la lune easter egg
@c_r8256
@c_r8256 4 года назад
Best youtubeur
@messoumalpha6150
@messoumalpha6150 4 года назад
Merci
@maxime3969
@maxime3969 3 года назад
9:36 Lundi Mardi Credi 😂😂
@yannig9365
@yannig9365 4 года назад
Salut Benjamin ! J'ai une question relatives aux performances à l'exécution des animations de ton site. Je n'y connais pas grand chose en développement web. Je crois néanmoins comprendre que ces animations sont codées en javascript et s'exécutent donc côté client, sur le pc (ou autre) de la personne qui visite ton site. Si la carte graphique du visiteur n'est pas top, est-ce que ça ne risque pas de plomber l'exécution des animations et donc de donner un rendu bof, pour le visiteur de ton site ? Sinon, j'ai découvert ta chaîne ce week-end et j'aime beaucoup ! Concernant le développement de ton site, quel plaisir de voir ton enthousiasme, par rapport à ce projet, c'est beau à voir ! :)
@blackmesa2297
@blackmesa2297 4 года назад
Super vidéo, dommage qu'il n'y ai pas plus de travail sur les textures du rocher et les ombres de la statue sur celui-ci. Idem pour le fond du site. Après ça reste une question de goût !
@hiliyehbashir9509
@hiliyehbashir9509 4 года назад
Poulala !
@zaaaaz31
@zaaaaz31 4 года назад
4:00 > "Et là, patatrac. Je me rends compte que ce que j'ai fait la veille c'est de la merde." C'est la base ça. C'est même la quintessence du dev.^^
@gxclseize2945
@gxclseize2945 3 года назад
Comment avec un commentaire pareil , il n'a pas été censuré , j'ai tenté de faire un commentaire positif, il a été censuré
@BenjaminCode
@BenjaminCode 3 года назад
Bienvenu chez youtube...
@gxcl1683
@gxcl1683 3 года назад
@@BenjaminCode youtube ???
@BenjaminCode
@BenjaminCode 3 года назад
Regarde ma réponse à ton autre commentaire tu verras ce qu'il se passe, c'est pas de ma faute, c'est youtube qui fait n'importe quoi et ça me rend fou. C'est un bug qui supprime des tonnes de commentaire en pensant faire de la modération.
@DevTheory
@DevTheory 4 года назад
Vraiment au top ta vidéo !
@arnaudvillani797
@arnaudvillani797 4 года назад
Merci pour cette vidéo! Est-ce que tu as posté le github du projet quelque part?
@dadoucha6946
@dadoucha6946 4 года назад
JUST WAAW !
@demaupeoucorentin
@demaupeoucorentin 4 года назад
J'adore les sites avec un design qui attire vraiment, est-ce que tu connais des tutos sur three.js ? J'en trouve pas mal perso mais juste pour les bases
@eliamlotongaaliasmitou5497
@eliamlotongaaliasmitou5497 4 года назад
1:26 Allez un like juste pour la tête apres la blague sur les fesses ahhahaha :D t'es pas seul dans ta tête mex xd
@avelvetcreation3556
@avelvetcreation3556 3 года назад
Pour un surfer du web comme moi qui parfois peut avoir 400 onglets en moyenne d'ouvert (les navigateur à base de chrome sont très mal optimiser en multi onglets), ton site ne charge plus. Puis une deuxième remarque, il faut penser le chargement d'un site web, si tu as quelque à voir ou à faire pendant le chargement d'un site, tu y gagnes. Alors oui, c'est vraiment pas mal, mais c'est plaisant un temps, ce n'est pas particulièrement efficace niveau communication à moins de s'adresser à des grands fans, je serais assez curieux d'avoir les statistiques sur la fréquentation du site. Ce type de site fonctionne très bien pour des sorties de films, d'annonce d'un évènement qui ne s'étale pas dans le temps. En tant que vitrine de compétence, j'ai un doute (surtout pour ceux qui n'y connaisse rien, ils ne vont pas reconnaitre le travail qu'il y a derrière).
@MrSymbellou
@MrSymbellou 3 года назад
Bon ben l'effet m'a directement fait penser à Tomb Raider ! C'est pareil que le menu de sélection des objets dans les premiers tomb raider !
@bastienv6233
@bastienv6233 2 года назад
thks
@balt0x801
@balt0x801 4 года назад
Yo ! Est-ce que t'a fais une vidéo sur ton parcours scolaire etc ?
@MaskOfficiel
@MaskOfficiel 4 года назад
J'pose ça la pour flatter l'égo de l'algo. Véritablement trop rien à dire sur toi ta fait tes preuves depuis un moment. Continue comme ça ! Mais tu le sais déjà 👏
@Gontran_Courtjoie
@Gontran_Courtjoie 4 года назад
Salut, merci pour tes vidéos que j'apprécie car très peu de blabla et beaucoup de concret. J'ai une petite question : je suis le point d'acheter un mac et j'aurais voulu savoir quelle config tu as choisi pour ton macbook pro 16' et combien d'années tu penses l'utiliser avant d'en changer ? Merci d'avance.
@Learnbynet
@Learnbynet 3 года назад
un defi pour la v2, ajouter des normals avec un éclairage dynamic :) Bravos three.js est une super libs, perso je prefere pixijs et j'utilise de la projections pour mes rendu 3d. Ces plus lowlevel que threejs, mais un bien meilleur contrôle et performance pour webgl. pixijs.io/examples/#/plugin-projection/iso-basic.js
@buuchs
@buuchs 4 года назад
Ah tiens ! Je suis justement sur un truc en webgl ou j’essaye de rajouter une font custom t’as un tips ? Parce que je m’en mords les doigts justement
@yvanmackowiak1227
@yvanmackowiak1227 4 года назад
Ca serait tellement intéressant d'avoir accès au code pour étudier tout ça
@lusab3960
@lusab3960 Год назад
Bonsoir Benjamin je suis en formation de dév (bon ct pas obligé de le noter lol). Je voulais juste savoir où je pouvais retrouver ton site où je peux voir ce rendu ! car en allant sur ton site actuel je ne tombe pas dessus.
@ImSpliiZz
@ImSpliiZz 3 года назад
Salut, Tu as fait comment ton personnage 3D ? Sinon lourd comme d'hab
@misou8303
@misou8303 4 года назад
Salut, Si tu veux chrome a une extension qui s'appelle wappalizer et qui permet de connaître les langages qui ont été utilisé pour créer un site
@Sialbh
@Sialbh 3 года назад
Salut Benjamin, super vidéo, j'avais vu le site sur Awwwards et j'étais bluffé ! Je me pose une question, comment est-ce que tu gères l'importation de ton élément 3D dans ta page ? Est-ce que tu appelles un .obj avec Three.js ou tu utilises un add-on comme Blend4web sur Blender. Je t'avoue que comme beaucoup de personnes, je suis complètement perdu lorsqu'il s'agit de 3D et de web -_- En tout cas continu comme ça ! ;)
@KorbakSC
@KorbakSC 3 года назад
Intéressant sur le fond! Un peu mégalomaniac sur la forme.
@bebebeboop
@bebebeboop 4 года назад
Es ce que tu pourrais expliquer plus précisément comme tu l'as fais ? Ou juste mettre les ressources ? Je pense que tu as utilisé tweenMax avec Magic mouse mais je ne suis pas sur
@marb1329
@marb1329 3 года назад
t ouf Benj
@StEvUgnIn
@StEvUgnIn 3 года назад
Bravo, en français en plus. As-tu tenté de le soumettre aux CSS Design Awards ?
@Anonymous-cs6cl
@Anonymous-cs6cl 3 года назад
Bonjour Benjamin. Je sais pas si tu le répondra un jour, mais je suis curieux de savoir comment est tu devenu aussi fort dans ce domaine. Merci
@asdfkerub
@asdfkerub 3 года назад
Hope there was an English translation. I got the idea of how you created this effect tho, thanks!
@CkyreGaming
@CkyreGaming 4 года назад
Oooh non pas la liaison hélicoïdale 😭😭
@zenwhitezen
@zenwhitezen 3 года назад
Pour toutes ces formes c'est bien un canvas html5 ?
@mklk7377
@mklk7377 3 года назад
Le EasterEgg c'est le move de ta figurine 3D qui fait comme Dr Strange ?
@MobjineYt
@MobjineYt 4 года назад
je veux coder une appli mais je sais pas avec quelle langage e quelle logiciel, je voudrais savoir si tu a créer un discord pour poser mais question
@JohnDoe-rz6jk
@JohnDoe-rz6jk 3 года назад
c'est quel extension pour les personnages 3D ?
Далее
Les 14 effets à connaître en 2023
11:51
Просмотров 121 тыс.
Three.js personal portfolios are amazing...
13:05
Просмотров 441 тыс.
12 jours pour développer un SaaS et gagner 1972€
10:59
J'utilise ces librairies JS dans tous mes projets
10:43
The perfect imperfection of Google's Material You
15:47
La stack ultime pour créer un SaaS en 2024
14:02
Просмотров 70 тыс.