Challenge : 1h pour coder et animer ça avec HTML et CSS

🎁 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...
Retrouver la version longue de la vidéo :
shop.benjaminc...
Télécharger les assets du projet :
www.dropbox.co...
Rejoignez moi sur Twitter :
/ benjamincode
Music by :
paradiseofyest...
Mon décor est un décor 3D réalisé par un artiste 3D recruté sur Fiverr comme vous pouvez le voir dans cette vidéo :
• Des artistes me créent...
Le freelance est Asahakira : fvrr.co/3cuWA4Z
Trouvez un freelance pour n'importe quel tâche sur Fiverr et utilisez mon code promo pour avoir 10% de remise sur votre mission : BCODE10
fvrr.co/3u0knj3
Insta : / benjamincode
Twitch : / benjamincode
Mail : [e-mail]
Merci à Matei Convard qui m'aide avec ma chaîne en réalisant toutes les thumbnails et de nombreux assets graphiques dès que j'ai besoin. Mec en or hyper fiable et rapide en plus d'être un de mes plus vieux amis :
/ wutezluv
Merci à son frère Andrei Convard aka Obsimo de m'avoir envoyé ses musiques sans les voix pour que je puisse les utiliser dans le fond de mes vidéos. Allez checker sa musique et abonnez vous à sa chaîne, il est très bon :
• Obsimo - Club Memories...
Très souvent, la musique de fin de mes vidéos est une musique de Coloré, dont le titre est Desert Sand. Vous la trouverez ici :
• COLORÉ - DESERT SAND
Apprenez à faire des animations d'introduction dans vos pages en css.

[@willtraore]

Vraiment un mec pas drôle ce "William" haha, franchement j'aurais tellement la haine d'être pas drôle comme lui mais heureusement c'est pas moi car mes potes me disent que je suis drôle donc impossible de sentir visé alors que ce "William" lui c'est vraiment une galère 🤣

[@theofernandez611]

ben ca cest drole par exemple moi je dis bravo william

[@jeremyantoine8339]

Pas drole ? Moi ? serieusement ! On ne me l'avait pas sortie celle la depuis longtemps

[@Katermuke]

J'avais pas coder depuis plus ou moins une semaine ca ma grave remotiver 💪
Merci monsieur ! 🤝

[@MayelPelle]

Le format challenge est très bien maîtrisé, c'est toujours un plaisirs à suivre, merci !

[@cd-mar]

super, merci, c'est vrai que des fois, une petite animation css par ci et par là, ça fait le taf !!

[@kamgangwilliam5992]

Encore une pépite !👏
J'adore ces challenges et ta bonne humeur 👌
En plus j'ai trouvé dans cette vidéo comment résoudre un bug tout bête qui m'a pris la soirée 😅

[@quentin443]

Super challenge, j'aime beaucoup le fait de varier ta façon d'expliquer et de commenter ce que tu fais, en passant par exemple de la voix off à la voix lors du challenge.

[@AngusBox]

Cet exemple est un bon exemple pour les développeurs sur la gestion de la dette technique et les problèmes que ça génère lorsqu'on se rapproche de la livraison au client.

[@TheSunGodOris]

Sérieux mec...pourquoi tu fais pas plus de vidéo challenge... c'est super intéressant.

[@alganjah]

Comme d'habitude super vidéo, challenge très cool 👍, hâte de voir celle de la semaine prochaine.

[@surrion]

Cette technique du background red en css que j'utilise depuis mes débuts il y a bientôt 10ans maintenant :D

[@BenjaminCode]

Y’a que ça de vrai… t’as des gens qui te font installer des grosses extensions chrome pour t’aider à t’y retrouver… moi je te fais appliquer le truc à l’ancienne. Le bg red

[@ludivinseunda3967]

Merci SENSEY pour cette video j'en ai beaucoup appris. Comme d'habitude !!!😍😍😍

[@mydriase9539]

Très cool les vidéos de code (je suis là de base pour ça), mais ça me manque un peu les vidéos "blog", balade dans la rue, réflexion sur un thème particulier etc c'était aussi très sympa !

[@amrabdelfattah3620]

Félicitations pour les 110k

[@nohamcatherine7624]

J'adore ce genre de vidéo, vraiment, tu expliques super bien y'a rien à faire.
Vivement la suite ! !

[@Niceware]

C foux comme on sent bien quand on regarde t vidéo t trop cool 😊🥰

[@deprothemindset3687]

Cool comme toujours

[@brico_4511]

Gegnial la vidéo trop hâte de voir la prochaine avec les autres dev !

[@nicolasfrancoise9735]

The best bruitage d'animation ever 😂

[@TchikTchakBoum]

toujours aussi fantastique tes vidéos , un jour je serai codeur pro, suis sure.

[@Jeireme]

C'était vraiment sympa à suivre, j'ai même appris une nouvelle astuce pour animer mes textes !

[@sylvainpeter7333]

merci pour cette super vidéo, j'adore le format ! :) juste une petite question, j'ai vu que tu as mis 2 balises l'une à la suite de l'autre... on peux faire ça ? je pensais qu'il devait y avoir un seul par page ? (désolé si ma question est conne, je débute !)... en tous cas bonne continuation pour la suite, tu déchires camarade !

[@dosso_adams]

Non non bien évidemment tu peux mettre autant de balise h1 ou autre que tu souhaites sur une page ça pose aucun problème à ce niveau.
MAIS, là ou ça va être embêtant c’est lors du design avec CSS
Un exemple :
mon titre
mon sous titre
Admettons que tu veuilles que le titre de ta page ait une couleur rouge et ton sous titre, une couleur bleu. Au moment de procédure, vu qu’y a 2 balises h1 identique CSS ne fera pas la différence et donc tu ne pourras pas cibler chaque balises pour le matérialiser a ta convenance et c’est là qu’intervient les CLASS.
Avec les class tu peux ajouter plusieurs balises du même type sur la même page mais en leur attribuant une class tu pourras cibler chacune d’elle et en fait ce que tu veux comme rendre ton titre rouge et ton sous titre bleu (ou n’importe quelle couleur que tu auras choisi)
Du coup voilà ce qu’il faut faire dans notre cas :
Mon titre
Mon sous-titre
Et ça marche avec toutes les autres balises !
(Je tiens aussi à préciser que le nom des class de tes balises, c’est toi qui les choisis)

[@julienlacr0ix]

Vraiment inspirant ! J'adore check tes vidéos tous les lundis. C'est un peu ma madeleine de proust 😊

[@loh3763]

Vraiment intéressant ce format challenge ! 😁 👍
Merci

[@menbas]

Benjamin c'est cool ce que tu fais ^^

[@yanntrad2304]

Encore une vid cool avec la petite touche d'humour qui va bien.

[@oupsoups4813]

étant un anus de porc farcis en css je me pourlèche les raisins de table à l'idée de suivre ton cours mon Benji adoré ! :)

[@quentin443]

J'ai 2 petites questions, comment as-tu fix le logo centré sur la navbar finalement ? Et comment se passe la mise en "prod" ou comment doit-on remettre le rendu final au client ?

[@mathislambert1726]

Il l’a simplement mis en position: absolute; left 50% avec un translateX -50%

[@Pinou10001]

@@mathislambert1726 Merci pour cette réponse. Par curiosité est-ce qu’on aurait pu mettre left auto et right auto ?

[@KawaMood]

@@Pinou10001 Je ne pense pas, mais margin-left:auto et margin-right:auto fonctionnent dans les parents flex. Cela aurait pu aisément régler son soucis. Réajuster en absolute ou relative, ça semble assez dangereux.

[@mathislambert1726]

@@KawaMood nan je suis pas d'accord, pourquoi dangereux ???, si tes parents sont bien gérés et bien positionnés y'a aucun probleme

[@mathislambert1726]

@@Pinou10001 je pense pas que ca fonctionne et dans tous les cas c'est moins explicite

[@StephaneTmg]

J’aime grave tes challenges,
Si tu peux aussi lancer des challenges pratiques en react js pour nous permettre de mieux le prendre en main serai chouette

[@sebastienbruyere2137]

Je l'ai fais en 59 minutes, mais c'est pas une compétition hein ^^.
Très bonne vidéo en tout cas, continues comme ça !

[@BenjaminCode]

Si t’enlève m’a tentative de faire une version alternative avec clip path pour un effet plus intéressant je suis aussi pas mal en dessous d’une heure !

[@nicolasdiot7007]

Encore un régal ! Merci ☺

[@poilsdecactus7302]

J'adore tes vidéos elle sont toujours très agréables et ça motive vraiment à rien lâcher.
Cependant on écrit Carambar, et pas Carembar...et cette faute a bouleversée durant toute la vidéo T_T
C'est surement à cause de ton si bel accent, à très vite ;)

[@BenjaminCode]

Personne me l'avait signalé avant. Merci beaucoup.

[@Wisigoth31]

trop hâte de découvrir le futur Mon Black 😂😂😂😍😍😍

[@BenjaminCode]

J’ai la réf !!

[@Wisigoth31]

@@BenjaminCode D'ailleurs, rien à voir avec la vidéo mais, pour répondre à ta réflexion sur l'utilité (ou pas) de passer sur clavier qwerry pour coder, la réponse est différente si l'on utilise un mac ou pas ; le clavier mac français est tellement pas pratique pour ça ({}, |, `, []...) c'est la chasse au trésor avec un clavier (mac) azerty... (pourquoi ??? 🤔🤔🤷‍♂️🤷‍♂️🤷‍♂️)
En ça, un clavier US est plus confort (même si on doit galérer après pour écrire é ou è...) !

[@slideur72]

Bonjour, Tes vidéos sont toujours aussi bien. Je les regarde régulièrement, j'aime beaucoup. Je profite de celle-ci pour te demander un petit conseil (un seul, je n'abuserai pas, je t'assure 🙂). Quand tu crées un site, tu commences par faire toute la structure HTML du site ? Et ensuite tu passes au CSS ? Ou tu fais partie par partie ? Si tu ne peux pas répondre, je comprendrai, je sais que tu as pas mal de travail, que tu n'as pas forcément le temps de répondre à tous les commentaires. Dans tous les cas, bravo pour tout ce que tu fais ! Alban

[@quatre-quatre-quatre]

C’était émouvant.

[@zalmoxes3696]

Super Vidéo Ben ! Dit moi à quand les prochains live twitch ?

[@mohamedlabarre166]

Bonjour Ben
VOila le type de video qui me redonne la peche...

[@mycode-developpement]

Ca donne envie de faire le challenge de notre coté !!!

[@thibautfourneaux2583]

pour ton probleme de flash au load avec vite, tu as deux options:
la premiere est de build un fichier css en sass (classique) et d'utiliser le css dans ta page
la deuxiemme option est de lancer vite en production et non en dev mode donc tu build puis tu serve
ps: merci pour tes video :D

[@BenjaminCode]

Tu as trouvé comment faire la solution 1 avec vite ? J'ai cherché après la vidéo, j'ai rien trouvé de si trivial !

[@thibautfourneaux2583]

@@BenjaminCode apres j'ai toujours utiliser vite avec vuejs, ca compte peut etre mais normalement si tu build le scss tu et que tu le lie à l'index en .css tu n'aurais aucun probleme au chargement

[@heyJim]

"En pensant naïvement que c'est le navigateur le problème" 😁

[@lemojodumojo5036]

Je vais être franche, je suis partante pour la partie crotte de nez 🤣🤣🤣🤣

[@freezematis]

Merci pour l'astuce du sandwich à la merde 🤣

[@BenjaminCode]

Ca marche tout le temps !

[@freezematis]

@@BenjaminCode merci grand sage

[@antoinebouchy1891]

Benjamin merci infiniment pour tes vidéo , étant développeur junior orienté back, mon futur patron m’a demandé de me former au front et les base du design ( je t’ai connu par l’intermédiaire de basti UI )
T’es vidéo sont si apaisante et bienveillante …
Concernant ta plateforme, j’imagine qu’il y aura plus de contenu et dans ce cas, compte tu fais un système d’abonnement qui permet d’accéder à toute les vidéos ou ce sera juste un achat vidéo par vidéo ?
En tout cas change rien et merci !

[@gasp_71]

Du coup, je me demandais, comment il a centré le titre/logo ? avec un position absolute ?

[@Shilloz]

J'ai une question, je débute en HTML/CSS et j'aimerai bien pouvoir recréer des maquettes de sites simples , pouvez-vous me dire où je peux trouver ça ?

[@monsieurm2904]

Hey c'est vraiment cool ta vidéo ! Super storytelling. Par contre, je regarde toujours CZcams avec Ad-Block, désolé pour ta montétisation

[@UltraTV777]

J'aimerais savoir comment cliquer sur les images et afficher une galerie. Que ça ai une fonction plutôt que ça fasse juste touw touw touw !

[@simonchevance8233]

Salut Benjamin, j'adore ce concept de vidéo, et encore une fois, c'est une masterclass.
Je me demandais, pourquoi tu continues d'utiliser Brave alors que tu disais que Arc était une pépite et que tu souhaitais l'utiliser par défaut ?

[@BenjaminCode]

Dans ce context de split screen avec l'ide a gauche et arc a gauche, chaque fois que je passais du site vers mon IDE, j'avais la sidebar de Arc qui se dépliait, ça m'a rendu fou donc j'ai switché sur Bravo pour pas avoir de sidebar. Je retenterai l'expérience en lançant Arc en mode minifié, quand t'as juste la preview de ton site sans sidebar !

[@Powerm1nt.]

Tu es un bon, tu utilises Arc !

[@BenjaminCode]

Ouais bah Arc, autant que je l'aime, pour ce projet en particulier il m'a rendu fou ! Car quand je suis en split screen avec l'IDE a gauche et Arc a droite, chaque fois que je passe sur IntelliJ, y'a la sidebar qui s'ouvre ! Mais en écrivant ça, je réalise que j'aurais pu ouvrir ça dans un Mini Arc Browser qui lui n'a pas la navbar ! Je checkerai cette strat la prochaine fois !

[@pending6577]

Et pourtant object-fit est bien meilleur que background. Ça permet notamment de lazy loader les images (bon inutile ici car fcp) et d'ajouter un tag alt, utile à la fois pour le référencement et l'accessibilité. Je pense même que background-image est une mauvaise pratique, sauf pour certains cas très précis.

[@Carbn0]

Un petit détail que t'as oublié, (je sais pas si t'avais remarqué) mais les fonts de la navbar et du logo devraient être au moins en Serif, je crois que t'avais mit du Helvetica...

[@MrNykus98]

En théorie le h1 ne devrait pas être unique ? Pour une meilleure indexation des pages non ?

[@Cyrol9347]

Salut Benjamin Code Je voulais te demander s' y dans le futur tu feras des tuto CSS html .

[@TrixoSoloProducrion]

C’est quoi le logiciel de chronomètre

[@mike_92520]

Mais Benjamin... pour le stroke c'est si facile.
Tu vas sur Figma tu fais ton texte en stroke, tu vas dans la section code et tu copies, c'est direct écrit 😂
Pareil pour tout le reste, tu peux copier les éléments CSS x)

[@BenjaminCode]

Sauf que là j'ai taffé depuis un jpg !

[@georgescreates]

Attend 🤔. Je viens d'apprendre un truc là. 08:05 Donc, depuis tout ce temps, je n'avais qu'à faire charger mon JS avant mon CSS ?

[@marcmathy1031]

J'aurai aimé voir ton codage et le faire en même temps que toi💔😢

[@gtaz9619]

salut j 'ai une question a posé. Pourquoi tu n'utilise pas react

[@CoIdestMoments]

combien d'xp en css t'as l'air calé de ouf quand même

[@CitationetEducation-zc1cc]

Salut Benjamin comment vous allez ? Je veux suivre correctement dans tous vos projets de challenges ; mais votre écran de code est presque invisible pour moi 😂🤣, je ne sais pas si je suis la seule personne ou si j'ai des problèmes de visions (avant que je ne trouve des verres correcteurs😎🥸🤣)

[@nouuxs93]

Excuse moi, tu utilise quelle logiciels ?

[@florentgironde7279]

Bonjour Benjamin, tes ancien projets sont-ils également visionnable en vidéo explicative ou seulement celle-ci?

[@BenjaminCode]

Pour le moment seulement celle ci car j’ai perdu les rush des autres mais je les ai dans un disque dur que je retrouve dans deux mois

[@florentgironde7279]

@@BenjaminCode ☀ ‎❤

[@torusx8564]

1 Heure pour faire ça ?? XD C'est long. Sinon le résultat c'est propre

[@tiktoktrends5423]

Salut Benjamin,
J'adore tes challenges, mais où trouves-tu toutes ces maquettes ?

[@BenjaminCode]

Dribbble !

[@Elvigasm]

Toujours très cool comme vidéo !
Dis moi petite question, comment fais-tu sur Arc pour avoir l'url de la page en haut stp ? Ça m'intéresse énormément c'est LE truc qui me manque sur Arc ! Merci d'avance :)

[@Elvigasm]

J'ai finalement trouvé seul, si jamais d'autres comme moi cherchent, cliquez sur le cadenas à gauche de l'URL et activez le Developer mode :)

[@Pinou10001]

Très intéressant comme d’hab !
Par contre quelle est la différence entre image et background image stp ?

[@ambreblanc8815]

La réponse est dans l'intitulé... img est une image et background-image et bien... c une image de fond ! 😉 🤗

[@ipote1354]

@@ambreblanc8815 mais si on met la background-image dans un div par exemple, ça revient au même de modifier la taille du div que de modifier l'image normale non ?

[@Maxxamande]

Du coup t’as fait quoi pour centrer le titre dans la nav, qui était pas bien au milieu avec les flexbox ? 3:57

[@BenjaminCode]

J’ai mis en position absolute avec la navbar en relative

[@berwillem7416]

Comment tu fait pour afficher l'erreur directement sur le navigateur ?

[@BenjaminCode]

C’est vitejs qui se charge de ça

[@Niz__]

Hello, tu travailles avec quel IDE? Il a l'air sympa

[@jeremyantoine8339]

Je crois que c'est intelliJ

[@D4rknessMG]

J'ai cru que tu étais sponso par William a force d'en parler mdr

[@BenjaminCode]

Ça lui a couté très cher !

[@MobjineYt]

salut la familya je voulais vous demander c'est quoi comme éditeur de texte

[@MobjineYt]

je pense savoir c'est le quelle après avoir fini la vidéo

[@maxenceguillot8783]

Salut Benjamin, salut tout le monde, j'ai une petite question, je suis debutant et n'y connait pas grand chose, comment t'y prendrais tu pour créer une appli web de qualité , quel logiciel et language je veut dire, car j'aimerais apprendre avec des cours en ligne comme sur udemy mais je ne sais pas vers quel cours m'orienter.
Merci

[@pefington]

Salut, si tu gères l'anglais, sur Udemy je te conseille "The Web Developer Bootcamp 2023" de Colt Steele.
Pour commencer sinon HTML, CSS, JavaScript, et comme logiciel VSCode (gratuit).

[@mohamedel-moustafa3667]

Perso je prefere iconesjs plutot que Remix icon

[@CHSpirou]

? 1h, c'est bien.

[@manelfb_]

1:45 as-tu songÉ

[@Toupetit2_]

comment ça bootstraper le projet ? Bootstrap c'est de la magie noire non ?

[@Darktreize]

nan bootstrapper dans le sens lancer un projet avec tout les outils necessaires à son developpement. Check la definition de bootstrapper (autostrapper)

[@PepelamalaenYZ]

moi j'aime bien sans la voix off juste comme entre 8 min 30 et 11 min je penses qu'il en faudrait plus

[@sachaaaj]

Est ce que l'expérience Amazon c'est un sandwich à la merde inversé parfois finalement ?

[@cotulewin269]

Benjamin code ou Benjamin clash 🤣

[@antoinecoignac]

Travailler avec des background-image c'est pas une bonne solution, car ici tes images ont vraiment du sens (c'est un contenu à part entière). Elles montrent la "nouvelle collection" et ce n'est pas juste pour faire jolie. En plus pour des utilisateurs malvoyants, leur lecteur de page ne va pas comprendre que c'est une image. Vis à vis de google aussi ce n'est pas détecter comme une image. Enfin bref, il y a pas mal de raisons pour dire que ce n'est pas une bonne pratique dans ce cas là et qu'il faut plutôt utiliser des balises img.

[@seydinand18]

Tes commentaires voix off me fume

[@drduck667]

WTF 😒, benjamin t'abuses pas un peu la un create vite pour ça ? C'est abusé.

[@BenjaminCode]

Bah ça me gère la compile du sass lol sans ça c’est chiant mais j’avoue je pourrais trouver encore plus light

[@ctrl_fj]

@@BenjaminCode Tu utilises plus ton repo commun à tout tes projets de type "sandbox" via ton Git clone du coup ? C'est grâce à Vite ?

[@darkone2449]

@@BenjaminCode un petit "sass -w" dans un terminal et le tour est joué non ? comme ca tu compile à chaque fois que tu save ton .scss ;)