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

🎁 15% offerts avec le code BENJAMIN15 sur les offres LegalPlace
Création entreprise : c3po.link/QYV8...
Création micro-entreprise : c3po.link/QSzu...
Domiciliation : c3po.link/QV65...
Comptabilité : c3po.link/QMnH...
Modification de statuts : c3po.link/Qhgr...
Dissolution/Liquidation : c3po.link/QhAA...
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...
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/l...
Insta : / benjamincode
Twitch : / benjamincode
Mail : [e-mail]

[@LouistitiFr]

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 ! 👏

[@swarm9354]

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 ^^

[@yannyver5746]

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. 👏

[@gunkat]

Très beau site, bsahtek benjamin ! Et les projets étapes par étapes sont une super bonne idée

[@tanguybruwaert901]

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 🙏👏

[@manuel-hadriensalard1637]

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é.

[@chokdeesam2365]

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!

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 ! 👏

[@cedricchaffard829]

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 👍🏻👍🏻🤘🏻

[@Maertaugh]

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]

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 !

[@zennadizaki4393]

Il faut dire que le contenu que tu nous présentes et juste excellentissime

[@roadnkite]

C'est trop bien ça de voir comment tu réfléchis, voir le cheminement du début à la fin

[@napoleonkhan7943]

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]

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]

@@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 👌

[@laurentmottet7615]

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.

[@kaporos]

Lundi, mardi, credi 😁 Très chouette vidéo !

[@Personneverrajamais]

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.

[@zaaaaz31]

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]

Comment avec un commentaire pareil , il n'a pas été censuré , j'ai tenté de faire un commentaire positif, il a été censuré

[@BenjaminCode]

Bienvenu chez youtube...

[@gxcl1683]

@@BenjaminCode youtube ???

[@BenjaminCode]

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.

[@47jiro47]

A chaque fois que j'ai une baisse de motiv' tu sors une vidéo. En tt cas beau boulot!

[@Mihawkkun]

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]

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]

@@BenjaminCode oups désolé j'ai pas fais attention j'irai la voir alors merci pour ton contenu en tout cas 🙂

[@ifecojahs8151]

Wait a minute. All the great THREE.js guys are from France. Wow! That's cool!

[@ryan_0337]

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😉

[@thierryguichon]

Je kiff l easter eag à la fin de ton site 😂

[@quentinmengue4685]

Franchement tu es vraiment fort chapeau

[@babali840]

Super vidéo, j'adore ta motivation c'est trop cool ! Longue vie aux shaders

[@sebastiendubourg4797]

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]

Merci beaucoup ! Trop bien d'avoir ce genre de retour sur le la conception de la vidéo avec le rythme et tout !

[@harentzharentz3477]

🤩🤩🤩 COOL, Continuez !!!!!!

[@TomahAwkDJ7]

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

[@taile5345]

Yes Yes Yes, je valide totalement ! J'adore ton approche dans tes vidéos, 👏

[@maxime3969]

9:36 Lundi Mardi Credi 😂😂

[@juleserbin4070]

Très beau site !! Vive le créative development, bravo à toi

[@adminmauvais-oeil5058]

Magnifique

[@voyagesetsurf8869]

C'est super stylé! Tu t'es bien chauffé sur ce projet, bravo.

[@ld2037]

Genial j'adore ta chaîne

[@Leodagan84]

Incroyable ce projet ! Félicitations

[@antoankurti]

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 KZbin m’intéresse fort. Si l’envie te prend d’en faire quelque chose. Bise.

[@Pouetpouets]

Assez incroyable cette vidéo, plus de projet perso comme ça !

[@darkodeur9603]

Enorme la vidéo et le site. La tête lunaire à la fin ;)

[@vinzFDC]

Énorme !!

[@hajarivolarazanakotorasold9167]

J'adore, rien a ajouter de plus.

[@aghileslounis]

30 premières secondes je vois le site en fond je like la video waw c'est fou!

[@avelvetcreation3556]

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).

[@Ta9i]

Incroyable

[@mougri0695]

Trop bien la lune easter egg

[@yannig9365]

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 ! :)

[@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.

[@titouanschotte]

Super site et bravo 👌🏻💪🏻

[@LoganSeduction]

Wow, respect pour ton niveau !!

[@Watcha93]

Super site. Félicitation

[@enzosopranos8854]

Top

[@MrSeb7]

Super vidéo et super site, bravo à toi. J'adore totalement.

[@moustaphakachab6277]

Super site ça m’a super inspirer 🔥🔥 merci 🙏🏼🙏🏼✨✨

[@Sialbh]

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 ! ;)

[@JhnBravo84]

Lesson est :MAGNIFIQUE!!! Merci! Tu peux en faire encore sur dév Créatif??? Stp

[@thewarmachine9713]

Franchement Chapeau L’artiste 👏

[@MaskOfficiel]

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à 👏

[@fakherhabib7952]

j aimes ton contenu

[@BenjaminCode]

Bienvenue à toi !

[@Gontran_Courtjoie]

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.

[@eliamlotongaaliasmitou5497]

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

[@sereine27]

Tu nous apprends des choses... Merci ;)

[@pioupiagaming]

Wow C'est incroyable !

[@arnaudvillani797]

Merci pour cette vidéo! Est-ce que tu as posté le github du projet quelque part?

[@LilZoty]

C'est ouf, bravo, j'aimerais avoir ton niveau pour réaliser ça !

[@KorbakSC]

Intéressant sur le fond! Un peu mégalomaniac sur la forme.

[@misterpoof3197]

Salut j'ai découvert ta chaîne hier et depuis j'enchaîne tes vidéo à quel point c'est trop bien 😍 j'aimerais poser une question, sa fait combien d'années que ta commencer l'informatique et quel âge avait tu, car jai commencer y a même pas un an merci et bonne continuation !

[@BenjaminCode]

Salut Prof ! Merci pour les compliments ! J'ai commencé à trifouiller du code quand j'étais au collège. Je me faisais des petits sites ou je racontais ma life. Après j'ai tout arrêté et j'ai repris après la prépa, à mon école d'ingé en gros ! à 20 ans en gros et aujourd'hui j'en ai 29 donc ça fait un paquet de temps que je code mais je faisais déjà des trucs super cool à 21 - 22 ! J'espère que ça répond à ta question :)

[@c_r8256]

Best youtubeur

[@enjoywithstuph5438]

good job buddy!

[@blackmesa2297]

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 !

[@sergioguinaudeau7997]

Très instructif

[@Learnbynet]

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

[@MrSymbellou]

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 !

[@anthonygorski]

J'aime j'aime x1000 ! Bravo !

[@eddyhansandrianambinina5907]

T'es un boss 🤩🤩🤩

[@guillaumemmm7370]

Très chaud!

[@ImSpliiZz]

Salut, Tu as fait comment ton personnage 3D ? Sinon lourd comme d'hab

[@khalid540000000]

Salut, Grave cool, chapeau 👏👏👏

[@cholakabaso725]

Génial le site, il est bien optimiser que l'original, félicitation

[@baptoufou966]

Magnifique l'easter egg 😏

[@messoumalpha6150]

Merci

[@Loupechou]

Top, bravo !

[@FazioNico]

Bravo pour ta vidéo et surtout pour le defis! Maintenant il faudait à mon avis normaliser et donc intégrer tous cela dans un framework... Angular? Vue? React?? Tu choisirai lequel pour l'intégration?

[@BenjaminCode]

Salut et merci ! Pourquoi l'intégrer à un framework ? Ici j'ai tout fait en javascript natif avec des classes bien propres, le projet est super bien architecturé. Je ne vois pas du tout ce qu'apporterait un des 3 framework JS à part un peu de poids au fichier js final. Par contre, c'est tout à fait possible de le faire et sur un autre projet sur lequel je suis en train de bosser j'ai mixé vue.js et three.js sans soucis ! Tu trouveras ça ici : dmap-visualizer.herokuapp.com

[@guillaumemmm7370]

Hello, pour info un truc très prometteur aussi c'est React three fiber (github.com/react-spring/react-three-fiber ) pour intégrer facilement et assez naturellement three.js dans React :) Et du coup si tu cherches un moyen d'intégration à un framework, je pense que c'est ce qu'il y a de plus avancé (avec les custom shaders et glslify ça devient un peu plus complexe, mais le jeu en vaut la chandelle).

[@FazioNico]

@@BenjaminCode Oui je pense bien que tu l'as bien architecturé ton projet ^^ Le seul avantage que je verrai à passé tous cela sur un framework c'est démontrer la possibilité à intégrer ce code dans un environnement applicatif professionnel. En entreprise on code jamais sans framework.. et trop peu de dev savent passer du PoC vanillaJS au veritable Composent réutilisable et configurable... sans parler de la testabilité. Si tu cherche un nouveau job avec du chalenge, c'est un truc que les recruteurs regardent ;-)

[@Pinou10001]

Pourquoi avoir choisi Three.js et pas autre chose ? Et comment récupère-tu les miniatures KZbin si ton site est fait uniquement en HTML pour le back ? (Je dis ça car tu n'as pas mis PHP ou un autre langage de back dans le titre) En tout cas magnifique ! Très intéressant et franchement super beau !!

[@BenjaminCode]

Eh bien j'appelle l'API de KZbin en javascript et ensuite j'utilise le json renvoyé par KZbin pour générer les différentes thumbnails avec three.js. Pas besoin de back, on va dire que mon back ici c'est KZbin en gros ! Ensuite pourquoi j'ai choisi three ? C'est le framework le plus en vogue dans ce qui te permet de gérer de la 3D dans le navigateur, voila tout ! :)

[@Pinou10001]

@@BenjaminCode Ahhh d'accord, je n'avais pas pensé au JavaScript ;) Ça fait beaucoup de demandes côté client tout ça mais en tout cas je te remercie pour tes explications et encore bravo pour ton travail qui est super propre !! 😄

[@quentin7257]

👍👍

[@buuchs]

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

[@hiliyehbashir9509]

Poulala !

[@bebebeboop]

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

[@faridzo1017]

bravo, c'est super ;)

[@StEvUgnIn]

Bravo, en français en plus. As-tu tenté de le soumettre aux CSS Design Awards ?

[@Anonymous-cs6cl]

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

[@matnard]

Trop bien le scan 3d! Ca t'as coute combien?

[@BenjaminCode]

Moi ça m'a rien coûté car on était content de faire une vidéo ensemble. Et par contre dans la vidéo y'a le prix annoncé un moment :p kzbin.info/www/bejne/fajYiIODr7Csfrs

[@demaupeoucorentin]

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

[@samsky9045]

J'ai commencé à apprendre le html/CSS cette vidéo m'a mis une bonne tarte moi qui pensait avoir bien avancé, alors que je suis comme un bébé qui a fait ses premiers pas ptdrrr

[@elyseebleu3974]

Moi j’aimerais savoir si la réalisation de ce genre de projets nécessite une bonne connaissance en Mathématiques ?

[@rjfranco5871]

Je sais c'est totalement hors de propos mais j'aimerais juste savoir quelle police tu utilise là pour coder? 😅😅

[@zenwhitezen]

Pour toutes ces formes c'est bien un canvas html5 ?

[@marb1329]

t ouf Benj

[@JohnDoe-rz6jk]

c'est quel extension pour les personnages 3D ?

[@DevTheory]

Vraiment au top ta vidéo !

[@dadoucha6946]

JUST WAAW !

[@CkyreGaming]

Oooh non pas la liaison hélicoïdale 😭😭