Challenge : 1h pour coder et animer ça avec HTML et CSS
VloĆŸit
- Äas pĆidĂĄn 26. 08. 2024
- đ 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 : b1jam1code@gmail.com
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.
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 đ€Ł
ben ca cest drole par exemple moi je dis bravo william
Pas drole ? Moi ? serieusement ! On ne me l'avait pas sortie celle la depuis longtemps
J'avais pas coder depuis plus ou moins une semaine ca ma grave remotiver đȘ
Merci monsieur ! đ€
Le format challenge est trÚs bien maßtrisé, c'est toujours un plaisirs à suivre, merci !
super, merci, c'est vrai que des fois, une petite animation css par ci et par là , ça fait le taf !!
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 đ
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.
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.
Sérieux mec...pourquoi tu fais pas plus de vidéo challenge... c'est super intéressant.
Comme d'habitude super vidĂ©o, challenge trĂšs cool đ, hĂąte de voir celle de la semaine prochaine.
Cette technique du background red en css que j'utilise depuis mes débuts il y a bientÎt 10ans maintenant :D
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
Merci SENSEY pour cette video j'en ai beaucoup appris. Comme d'habitude !!!đđđ
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 !
FĂ©licitations pour les 110k
J'adore ce genre de vidéo, vraiment, tu expliques super bien y'a rien à faire.
Vivement la suite ! !
C foux comme on sent bien quand on regarde t vidĂ©o t trop cool đđ„°
Cool comme toujours
Gegnial la vidéo trop hùte de voir la prochaine avec les autres dev !
The best bruitage d'animation ever đ
toujours aussi fantastique tes vidéos , un jour je serai codeur pro, suis sure.
C'Ă©tait vraiment sympa Ă suivre, j'ai mĂȘme appris une nouvelle astuce pour animer mes textes !
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 !
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)
Vraiment inspirant ! J'adore check tes vidĂ©os tous les lundis. C'est un peu ma madeleine de proust đ
Vraiment intĂ©ressant ce format challenge ! đ đ
Merci
Benjamin c'est cool ce que tu fais ^^
Encore une vid cool avec la petite touche d'humour qui va bien.
é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é ! :)
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 ?
Il lâa simplement mis en position: absolute; left 50% avec un translateX -50%
@@mathislambert1726 Merci pour cette rĂ©ponse. Par curiositĂ© est-ce quâon aurait pu mettre left auto et right auto ?
@@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.
@@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
@@Pinou10001 je pense pas que ca fonctionne et dans tous les cas c'est moins explicite
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
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 !
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 !
Encore un rĂ©gal ! Merci âș
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 ;)
Personne me l'avait signalé avant. Merci beaucoup.
trop hĂąte de dĂ©couvrir le futur Mon Black đđđđđđ
Jâai la rĂ©f !!
@@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 Ăš...) !
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
CâĂ©tait Ă©mouvant.
Super Vidéo Ben ! Dit moi à quand les prochains live twitch ?
Bonjour Ben
VOila le type de video qui me redonne la peche...
Ca donne envie de faire le challenge de notre coté !!!
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
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 !
@@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
"En pensant naĂŻvement que c'est le navigateur le problĂšme" đ
Je vais ĂȘtre franche, je suis partante pour la partie crotte de nez đ€Łđ€Łđ€Łđ€Ł
Merci pour l'astuce du sandwich Ă la merde đ€Ł
Ca marche tout le temps !
@@BenjaminCode merci grand sage
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 !
Du coup, je me demandais, comment il a centré le titre/logo ? avec un position absolute ?
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 ?
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
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 !
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 ?
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 !
Tu es un bon, tu utilises Arc !
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 !
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.
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...
En thĂ©orie le h1 ne devrait pas ĂȘtre unique ? Pour une meilleure indexation des pages non ?
Salut Benjamin Code Je voulais te demander s' y dans le futur tu feras des tuto CSS html .
Câest quoi le logiciel de chronomĂštre
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)
Sauf que là j'ai taffé depuis un jpg !
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 ?
J'aurai aimĂ© voir ton codage et le faire en mĂȘme temps que toiđđą
salut j 'ai une question a posé. Pourquoi tu n'utilise pas react
combien d'xp en css t'as l'air calĂ© de ouf quand mĂȘme
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đđ„žđ€Ł)
Excuse moi, tu utilise quelle logiciels ?
Bonjour Benjamin, tes ancien projets sont-ils également visionnable en vidéo explicative ou seulement celle-ci?
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
@@BenjaminCode â ââ€
1 Heure pour faire ça ?? XD C'est long. Sinon le résultat c'est propre
Salut Benjamin,
J'adore tes challenges, mais oĂč trouves-tu toutes ces maquettes ?
Dribbble !
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 :)
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 :)
TrĂšs intĂ©ressant comme dâhab !
Par contre quelle est la différence entre image et background image stp ?
La rĂ©ponse est dans l'intitulĂ©... img est une image et background-image et bien... c une image de fond ! đ đ€
@@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 ?
Du coup tâas fait quoi pour centrer le titre dans la nav, qui Ă©tait pas bien au milieu avec les flexbox ? 3:57
Jâai mis en position absolute avec la navbar en relative
Comment tu fait pour afficher l'erreur directement sur le navigateur ?
Câest vitejs qui se charge de ça
Hello, tu travailles avec quel IDE? Il a l'air sympa
Je crois que c'est intelliJ
J'ai cru que tu Ă©tais sponso par William a force d'en parler mdr
Ăa lui a coutĂ© trĂšs cher !
salut la familya je voulais vous demander c'est quoi comme Ă©diteur de texte
je pense savoir c'est le quelle aprÚs avoir fini la vidéo
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
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).
Perso je prefere iconesjs plutot que Remix icon
? 1h, c'est bien.
1:45 as-tu songĂ
comment ça bootstraper le projet ? Bootstrap c'est de la magie noire non ?
nan bootstrapper dans le sens lancer un projet avec tout les outils necessaires Ă son developpement. Check la definition de bootstrapper (autostrapper)
moi j'aime bien sans la voix off juste comme entre 8 min 30 et 11 min je penses qu'il en faudrait plus
Est ce que l'expérience Amazon c'est un sandwich à la merde inversé parfois finalement ?
Benjamin code ou Benjamin clash đ€Ł
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.
Tes commentaires voix off me fume
WTF đ, benjamin t'abuses pas un peu la un create vite pour ça ? C'est abusĂ©.
Bah ça me gĂšre la compile du sass lol sans ça câest chiant mais jâavoue je pourrais trouver encore plus light
@@BenjaminCode Tu utilises plus ton repo commun Ă tout tes projets de type "sandbox" via ton Git clone du coup ? C'est grĂące Ă Vite ?
@@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 ;)