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

Поділитися
Вставка
  • Опубліковано 29 гру 2024

КОМЕНТАРІ • 122

  • @MayelPelle
    @MayelPelle Рік тому +3

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

  • @Katermuke
    @Katermuke Рік тому +4

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

  • @kamgangwilliam5992
    @kamgangwilliam5992 Рік тому +3

    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 😅

  • @cd-mar
    @cd-mar Рік тому +1

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

  • @willtraore
    @willtraore Рік тому +41

    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
      @theofernandez611 Рік тому +2

      ben ca cest drole par exemple moi je dis bravo william

    • @jeremyantoine8339
      @jeremyantoine8339 Рік тому +4

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

  • @alganjah
    @alganjah Рік тому +1

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

  • @quentin443
    @quentin443 Рік тому +1

    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.

  • @TheSunGodOris
    @TheSunGodOris Рік тому +4

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

  • @ludivinseunda3967
    @ludivinseunda3967 Рік тому +1

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

  • @sylvainpeter7333
    @sylvainpeter7333 Рік тому +2

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

  • @quentin443
    @quentin443 Рік тому +12

    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
      @mathislambert1726 Рік тому +1

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

    • @Pinou10001
      @Pinou10001 Рік тому

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

    • @KawaMood
      @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
      @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
      @mathislambert1726 Рік тому

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

  • @brico_4511
    @brico_4511 Рік тому

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

  • @Niceware
    @Niceware Рік тому

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

  • @TchikTchakBoum
    @TchikTchakBoum Рік тому

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

  • @nicolasfrancoise9735
    @nicolasfrancoise9735 Рік тому +1

    The best bruitage d'animation ever 😂

  • @mydriase9539
    @mydriase9539 Рік тому +1

    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 !

  • @Jeireme
    @Jeireme Рік тому

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

  • @AngusBox
    @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.

  • @georgescreates
    @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 ?

  • @menbas
    @menbas Рік тому

    Benjamin c'est cool ce que tu fais ^^

  • @loh3763
    @loh3763 Рік тому

    Vraiment intéressant ce format challenge ! 😁 👍
    Merci

  • @amrabdelfattah3620
    @amrabdelfattah3620 Рік тому

    Félicitations pour les 110k

  • @yanntrad2304
    @yanntrad2304 Рік тому

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

  • @tiktoktrends5423
    @tiktoktrends5423 Рік тому

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

  • @julienlacr0ix
    @julienlacr0ix Рік тому

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

  • @Carbn0
    @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...

  • @nohamcatherine7624
    @nohamcatherine7624 Рік тому +1

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

  • @deprothemindset3687
    @deprothemindset3687 Рік тому

    Cool comme toujours

  • @Shilloz
    @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 ?

  • @Maxxamande
    @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
      @BenjaminCode  Рік тому +1

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

  • @surrion
    @surrion Рік тому +3

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

    • @BenjaminCode
      @BenjaminCode  Рік тому +2

      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

  • @florentgironde7279
    @florentgironde7279 Рік тому

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

    • @BenjaminCode
      @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
      @florentgironde7279 Рік тому

      @@BenjaminCode ☀ ‎❤

  • @gasp_71
    @gasp_71 Рік тому

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

  • @oupsoups4813
    @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é ! :)

  • @Cyrol9347
    @Cyrol9347 Рік тому

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

  • @nicolasdiot7007
    @nicolasdiot7007 Рік тому

    Encore un régal ! Merci ☺

  • @zalmoxes3696
    @zalmoxes3696 Рік тому

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

  • @MrNykus98
    @MrNykus98 Рік тому

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

  • @simonchevance8233
    @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
      @BenjaminCode  Рік тому +1

      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 !

  • @gtaz9619
    @gtaz9619 Рік тому

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

  • @nouuxs93
    @nouuxs93 Рік тому

    Excuse moi, tu utilise quelle logiciels ?

  • @Quelquun-j7z
    @Quelquun-j7z Рік тому

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

  • @TrixoSoloProducrion
    @TrixoSoloProducrion 6 місяців тому

    C’est quoi le logiciel de chronomètre

  • @Pinou10001
    @Pinou10001 Рік тому

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

    • @ambreblanc8815
      @ambreblanc8815 Рік тому

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

    • @ipote1354
      @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 ?

  • @berwillem7416
    @berwillem7416 Рік тому

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

  • @sebastienbruyere2137
    @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
      @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 !

  • @slideur72
    @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

  • @StephaneTmg
    @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

  • @antoinebouchy1891
    @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 !

  • @freezematis
    @freezematis Рік тому +1

    Merci pour l'astuce du sandwich à la merde 🤣

  • @MobjineYt
    @MobjineYt Рік тому

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

    • @MobjineYt
      @MobjineYt Рік тому

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

  • @Wisigoth31
    @Wisigoth31 Рік тому

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

    • @BenjaminCode
      @BenjaminCode  Рік тому +1

      J’ai la réf !!

    • @Wisigoth31
      @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 è...) !

  • @quatre-quatre-quatre
    @quatre-quatre-quatre Рік тому

    C’était émouvant.

  • @poilsdecactus7302
    @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
      @BenjaminCode  Рік тому

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

  • @CitationetEducation-zc1cc
    @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😎🥸🤣)

  • @pending6577
    @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.

  • @mycode-developpement
    @mycode-developpement Рік тому

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

  • @heyJim
    @heyJim Рік тому

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

  • @maxenceguillot8783
    @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
      @pefington Рік тому +1

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

  • @mohamedlabarre166
    @mohamedlabarre166 Рік тому

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

  • @thibautfourneaux2583
    @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
      @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
      @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

  • @manelfb_
    @manelfb_ Рік тому

    1:45 as-tu songÉ

  • @monsieurm2904
    @monsieurm2904 Рік тому

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

  • @lemojodumojo5036
    @lemojodumojo5036 Рік тому

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

  • @marcmathy1031
    @marcmathy1031 Рік тому

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

  • @CoIdestMoments
    @CoIdestMoments Рік тому

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

  • @mike_92520
    @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
      @BenjaminCode  Рік тому

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

  • @Powerm1nt.
    @Powerm1nt. Рік тому

    Tu es un bon, tu utilises Arc !

    • @BenjaminCode
      @BenjaminCode  Рік тому +1

      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 !

  • @Toupetit2_
    @Toupetit2_ Рік тому +1

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

    • @Darktreize
      @Darktreize Рік тому

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

  • @D4rknessMG
    @D4rknessMG Рік тому

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

  • @torusx8564
    @torusx8564 Рік тому

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

  • @PepelamalaenYZ
    @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

  • @mohamedel-moustafa3667
    @mohamedel-moustafa3667 Рік тому

    Perso je prefere iconesjs plutot que Remix icon

  • @sachaaaj
    @sachaaaj Рік тому

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

  • @cotulewin269
    @cotulewin269 Рік тому

    Benjamin code ou Benjamin clash 🤣

  • @antoinecoignac
    @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.

  • @CHSpirou
    @CHSpirou Рік тому

    ? 1h, c'est bien.

  • @drduck667
    @drduck667 Рік тому

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

    • @BenjaminCode
      @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
      @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
      @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 ;)

  • @seydinand18
    @seydinand18 Рік тому

    Tes commentaires voix off me fume

  • @UltraTV777
    @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 !