SwebDev
SwebDev
  • 64
  • 416 040
Bien débuter avec Canvas - Partie 1
🔥 S'ABONNER À LA CHAÎNE 🔥
►th-cam.com/channels/18RbwcHN3cP8Q-K53PF-JQ.html
🔥 POUR ME SUIVRE 🔥
RatonCodeur
Salut !
Dans cette première vidéo de la série "Bien débuter avec Canvas", je te propose d'apprendre à créer ce qui pourrait être le début d'un jeu en 2D.
Pour cela, nous allons créer une forme carré, et l'animer pour la faire tomber vers le bas du canvas.
Dans cette vidéo, tu apprendras à :
- sélectionner le canvas et lui donner la largeur et la hauteur du viewport
- dessiner une forme carré dans canvas
- l'animer pour la faire "tomber" en simulant la gravité
- détecter lorsque le carré arrive en bas du canvas pour stopper sa chute
La vidéo du TH-camr ChrisCourses : th-cam.com/video/4q2vvZn5aoo/w-d-xo.html
มุมมอง: 1 037

วีดีโอ

Apprendre Flexbox en 25 minutes
มุมมอง 16K2 ปีที่แล้ว
🔥 L'inscription à mon cours complet sur Flexbox : www.swebdev.fr/cours/apprendre-flexbox 🔥 S'ABONNER À LA CHAÎNE 🔥 ►th-cam.com/channels/18RbwcHN3cP8Q-K53PF-JQ.html 🔥 POUR ME SUIVRE 🔥 ► RatonCodeur Salut ! Apprendre Flexbox en 25 minutes ? C'est possible !
Débuter avec CSS Grid - Partie 5
มุมมอง 2K2 ปีที่แล้ว
🔥 S'ABONNER À LA CHAÎNE 🔥 ►th-cam.com/channels/18RbwcHN3cP8Q-K53PF-JQ.html 🔥 POUR ME SUIVRE 🔥 ► RatonCodeur 🔥 LA PLAYLIST 🔥 ► th-cam.com/play/PLdlcrLtifCUnPYvGdOqi5-Pl3hG7lIkKn.html Salut ! Cette vidéo fait partie de la série "Débuter avec CSS Grid". Un guide pour les débutants qui souhaitent s'initier à CSS Grid en ma compagnie. Le but est d'explorer CSS Grid pas à pas pour bien co...
Débuter avec CSS Grid - Partie 4
มุมมอง 1.5K2 ปีที่แล้ว
🔥 S'ABONNER À LA CHAÎNE 🔥 ►th-cam.com/channels/18RbwcHN3cP8Q-K53PF-JQ.html 🔥 POUR ME SUIVRE 🔥 ► RatonCodeur 🔥 LA PLAYLIST 🔥 ► th-cam.com/play/PLdlcrLtifCUnPYvGdOqi5-Pl3hG7lIkKn.html Salut ! Cette vidéo fait partie de la série "Débuter avec CSS Grid". Un guide pour les débutants qui souhaitent s'initier à CSS Grid en ma compagnie. Le but est d'explorer CSS Grid pas à pas pour bien co...
Débuter avec CSS Grid - Partie 3
มุมมอง 1.9K2 ปีที่แล้ว
🔥 S'ABONNER À LA CHAÎNE 🔥 ►th-cam.com/channels/18RbwcHN3cP8Q-K53PF-JQ.html 🔥 POUR ME SUIVRE 🔥 ► RatonCodeur 🔥 LA PLAYLIST 🔥 ► th-cam.com/play/PLdlcrLtifCUnPYvGdOqi5-Pl3hG7lIkKn.html Salut ! Cette vidéo fait partie de la série "Débuter avec CSS Grid". Un guide pour les débutants qui souhaitent s'initier à CSS Grid en ma compagnie. Le but est d'explorer CSS Grid pas à pas pour bien co...
Débuter avec CSS Grid - Partie 2
มุมมอง 2.4K2 ปีที่แล้ว
🔥 S'ABONNER À LA CHAÎNE 🔥 ►th-cam.com/channels/18RbwcHN3cP8Q-K53PF-JQ.html 🔥 POUR ME SUIVRE 🔥 ► RatonCodeur 🔥 LA PLAYLIST 🔥 ► th-cam.com/play/PLdlcrLtifCUnPYvGdOqi5-Pl3hG7lIkKn.html Salut ! Cette vidéo fait partie de la série "Débuter avec CSS Grid". Un guide pour les débutants qui souhaitent s'initier à CSS Grid en ma compagnie. Le but est d'explorer CSS Grid pas à pas pour bien co...
Débuter avec CSS Grid - Partie 1
มุมมอง 8K2 ปีที่แล้ว
🔥 S'ABONNER À LA CHAÎNE 🔥 ►th-cam.com/channels/18RbwcHN3cP8Q-K53PF-JQ.html 🔥 POUR ME SUIVRE 🔥 ► RatonCodeur 🔥 LA PLAYLIST 🔥 ► th-cam.com/play/PLdlcrLtifCUnPYvGdOqi5-Pl3hG7lIkKn.html Salut ! Cette vidéo fait partie de la série "Débuter avec CSS Grid". Un guide pour les débutants qui souhaitent s'initier à CSS Grid en ma compagnie. Le but est d'explorer CSS Grid pas à pas pour bien co...
Créer des carrés responsive en CSS
มุมมอง 2K3 ปีที่แล้ว
🔥 S'ABONNER À LA CHAÎNE 🔥 ►th-cam.com/channels/18RbwcHN3cP8Q-K53PF-JQ.html 🔥 POUR ME SUIVRE 🔥 ► RatonCodeur Dans cette vidéo, je te montre comment créer des carrés responsive en CSS !
5 manières de centrer en CSS
มุมมอง 3.5K3 ปีที่แล้ว
🔥 S'ABONNER À LA CHAÎNE 🔥 ►th-cam.com/channels/18RbwcHN3cP8Q-K53PF-JQ.html 🔥 POUR ME SUIVRE 🔥 ► RatonCodeur Dans cette vidéo, je te montre 5 manières de centrer un élément en CSS que j'utilise tous les jours !
Smooth scrolling avec Jump.js
มุมมอง 1.7K4 ปีที่แล้ว
🔥 S'ABONNER À LA CHAÎNE 🔥 ►th-cam.com/channels/18RbwcHN3cP8Q-K53PF-JQ.html 🔥 POUR ME SUIVRE 🔥 ► RatonCodeur
Découverte de Bootstrap 5
มุมมอง 11K4 ปีที่แล้ว
🔥 S'ABONNER À LA CHAÎNE 🔥 ►th-cam.com/channels/18RbwcHN3cP8Q-K53PF-JQ.html 🔥 POUR ME SUIVRE 🔥 ► RatonCodeur Le nouveau site de Bootstrap: v5.getbootstrap.com/ L'article qui annonce la sortie de Bootstrap 5: blog.getbootstrap.com/2020/06/16/bootstrap-5-alpha/
Bootstrap 4 - Installation et personnalisation
มุมมอง 2K4 ปีที่แล้ว
🔥 S'ABONNER À LA CHAÎNE 🔥 ►th-cam.com/channels/18RbwcHN3cP8Q-K53PF-JQ.html 🔥 POUR ME SUIVRE 🔥 ► RatonCodeur
Bootstrap 4 - Comprendre la grille
มุมมอง 9K4 ปีที่แล้ว
🔥 S'ABONNER À LA CHAÎNE 🔥 ►th-cam.com/channels/18RbwcHN3cP8Q-K53PF-JQ.html 🔥 POUR ME SUIVRE 🔥 ► RatonCodeur Dans cette vidéo, je te montre comment fonctionne la grille de Bootstrap 4.
Tailwind CSS - Intégration responsive mobile-first
มุมมอง 1.4K5 ปีที่แล้ว
🔥 S'ABONNER À LA CHAÎNE 🔥 ►th-cam.com/channels/18RbwcHN3cP8Q-K53PF-JQ.html 🔥 POUR ME SUIVRE 🔥 ► RatonCodeur
Tailwind CSS - Découverte et installation avec Gulp
มุมมอง 2.6K5 ปีที่แล้ว
🔥 S'ABONNER À LA CHAÎNE 🔥 ►th-cam.com/channels/18RbwcHN3cP8Q-K53PF-JQ.html 🔥 POUR ME SUIVRE 🔥 ► RatonCodeur
Comprendre la méthode map() en JavaScript
มุมมอง 8K5 ปีที่แล้ว
Comprendre la méthode map() en JavaScript
Snippets personnalisés avec Visual Studio Code
มุมมอง 2.5K5 ปีที่แล้ว
Snippets personnalisés avec Visual Studio Code
Panier d'achat avec Node.JS #5
มุมมอง 1.5K5 ปีที่แล้ว
Panier d'achat avec Node.JS #5
Panier d'achat avec Node.JS #4
มุมมอง 2K5 ปีที่แล้ว
Panier d'achat avec Node.JS #4
Panier d'achat avec Node.JS #3
มุมมอง 1.6K5 ปีที่แล้ว
Panier d'achat avec Node.JS #3
Panier d'achat avec Node.JS #2
มุมมอง 2.5K5 ปีที่แล้ว
Panier d'achat avec Node.JS #2
Panier d'achat avec Node.JS #1
มุมมอง 11K5 ปีที่แล้ว
Panier d'achat avec Node.JS #1
Comprendre la méthode filter() en JavaScript
มุมมอง 5K5 ปีที่แล้ว
Comprendre la méthode filter() en JavaScript
Compiler des fichiers Sass avec Node-Sass
มุมมอง 1.5K5 ปีที่แล้ว
Compiler des fichiers Sass avec Node-Sass
Todo App avec Node.JS et MongoDB #4
มุมมอง 8855 ปีที่แล้ว
Todo App avec Node.JS et MongoDB #4
Todo App avec Node.JS et MongoDB #1
มุมมอง 3.2K5 ปีที่แล้ว
Todo App avec Node.JS et MongoDB #1
Todo App avec Node.JS et MongoDB #3
มุมมอง 8705 ปีที่แล้ว
Todo App avec Node.JS et MongoDB #3
Todo App avec Node.JS et MongoDB #2
มุมมอง 1.2K5 ปีที่แล้ว
Todo App avec Node.JS et MongoDB #2
Exercice JavaScript - Vérifier la fin d'une chaîne de caractères
มุมมอง 2.1K6 ปีที่แล้ว
Exercice JavaScript - Vérifier la fin d'une chaîne de caractères
Créer des effets de hover sur des ghost buttons en CSS
มุมมอง 2.6K6 ปีที่แล้ว
Créer des effets de hover sur des ghost buttons en CSS

ความคิดเห็น

  • @adjahouwilliams7287
    @adjahouwilliams7287 หลายเดือนก่อน

    merci enormement

  • @granturismo-handicapoupasc4174
    @granturismo-handicapoupasc4174 หลายเดือนก่อน

    23:00 je crois que tu as oublié de préciser que la dimension est augmentée et que c'est visible sur la div quand on survole le code : il y a un rectangle hachuré pour la div avec à sa droite une flèche qui indique le changement de largeur (sur la div verte) et le sens de la flèche indique si la largeur a été augmentée ou diminuée, sinon c'est vraiment très bien

  • @124mathis
    @124mathis หลายเดือนก่อน

    Juste,MERCI

  • @ggousier
    @ggousier หลายเดือนก่อน

    Grid à ne pas confondre avec Greed. Je sors ➡

  • @aeieoaou6935
    @aeieoaou6935 3 หลายเดือนก่อน

    Merci beaucoup pour cette vidéo, je débute et avait du al à bien comprendre comme agencer mes éléments avec flexion et ta vidéo m'aide beaucoup. Merci beaucoup

  • @nicolasviennot4241
    @nicolasviennot4241 4 หลายเดือนก่อน

    Super tuto, merci à toi. En plus en français!

  • @fabricebeuriot7852
    @fabricebeuriot7852 4 หลายเดือนก่อน

    🙂

  • @LudwigDubus
    @LudwigDubus 5 หลายเดือนก่อน

    Top ta vidéo! Claire et précise 🤗

  • @kouamemathurinyao2904
    @kouamemathurinyao2904 5 หลายเดือนก่อน

    Je te keff, car les séries d’exercices et les explications des méthodes jusqu’à l’utilisation, m’ont bcp aider ❤

  • @94davesk8er
    @94davesk8er 6 หลายเดือนก่อน

    top la video

  • @RogerBella
    @RogerBella 7 หลายเดือนก่อน

    Bon sang ! j'ai ENFIN pigé les notions d'absolute et relative ! Champagne !

  • @nabillambattan92
    @nabillambattan92 8 หลายเดือนก่อน

    j'adore votre explication simple !

  • @davidkouadio7314
    @davidkouadio7314 8 หลายเดือนก่อน

    merci pour l aide

  • @taj_ninny
    @taj_ninny 8 หลายเดือนก่อน

    bravo pour ta pédagogie

  • @M.KOFFISALOMONKOFFI
    @M.KOFFISALOMONKOFFI 9 หลายเดือนก่อน

    votre vidéo est vraiment très claire et avec une voie confortable douce vraiment votre vidéo est fluides simple et précis. je voudrais savoir si tu pourrais faire une autre vidéo baser sur la aperçu d'un montant œil croiser et ferme pour affiché le sole comment ce la se faire mes a la prochaine Jai pris mon tabouret j'attent votre vidé sympas qui arrive encore Merci

  • @tsy-marley2540
    @tsy-marley2540 9 หลายเดือนก่อน

    Le titre dit « 25min » et la vidéo sur « 27min »

    • @ratoncodeur
      @ratoncodeur 9 หลายเดือนก่อน

      Tu veux que je te rembourse ?

    • @taj_ninny
      @taj_ninny 8 หลายเดือนก่อน

      @@ratoncodeur remboursé!!!

  • @yassiya2668
    @yassiya2668 9 หลายเดือนก่อน

    Merci !!

  • @knightofchess6900
    @knightofchess6900 9 หลายเดือนก่อน

    Super !

  • @knightofchess6900
    @knightofchess6900 9 หลายเดือนก่อน

    Chapeau ! Tu es vraiment doué pour expliquer des trucs. J'aime regarder ce genre de vidéos fluides et compréhensibles pour à peu près tous les niveaux.

  • @knightofchess6900
    @knightofchess6900 9 หลายเดือนก่อน

    Merci ! On espère le retour des vidéos. Tu es un excellent pédagogue.

  • @knightofchess6900
    @knightofchess6900 9 หลายเดือนก่อน

    Superbe cours sur canvas !

  • @ChristopheEGLINE
    @ChristopheEGLINE 9 หลายเดือนก่อน

    Bravo..Clair et efficace.Merci !

  • @vanessa-er6kq
    @vanessa-er6kq 9 หลายเดือนก่อน

    ça parait tellement simple 😭 Je galère tellement avec l'algo...

  • @fredpetroleum7106
    @fredpetroleum7106 10 หลายเดือนก่อน

    bonjour , je rencontre un soucis lors du lancement de la tache gulp sass a la 9eme minute. J' ai suivi a la lettre tes explications tout s'est passé correctement sauf cette derniere commande qui me donne en erreur " gulp : Le terme «gulp» n'est pas reconnu comme nom d'applet de commande, fonction, fichier de script ou programme exécutable. Vérifiez l'orthographe du nom, ou si un chemin d'accès existe, vérifiez que le chemin d'accès est correct et réessayez. Au caractère Ligne:1 : 1 + gulp sass + ~~~~ + CategoryInfo : ObjectNotFound: (gulp:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException " aurais tu une solution a me proposer ? Merci. Sinon je trouve tes videos tres clair et pour apprendre c'est que du bon

  • @Mohamed-uf5jh
    @Mohamed-uf5jh 10 หลายเดือนก่อน

    wow belle explication super Merci

  • @hbx380
    @hbx380 10 หลายเดือนก่อน

    Merci pour votre cours, mais pourquoi est-on obligé de mettre de suite un élément parent en position relative pour utiliser la position absolute ?

  • @ludovicvasseur9278
    @ludovicvasseur9278 11 หลายเดือนก่อน

    super vidéo bien utile merci

  • @aloascreations4916
    @aloascreations4916 11 หลายเดือนก่อน

    Juste parfait, comme d'habitude tellement clair & simplement expliqué 🎉 Merci pour ton partage de connaissances 👍

  • @Jarod75
    @Jarod75 11 หลายเดือนก่อน

    Un pouce rien que pour la définition comme a l'école.

  • @Fred3dDigitalPainting
    @Fred3dDigitalPainting 11 หลายเดือนก่อน

    Bonjour. En gros, align-items permet l'alignement sur x lorsqu'on est en colonne et sur y lorsqu'on est en row. C'est un peu l'inverse de justify-content. Autre question, "display: grid" faut-il encore l'utiliser pour du responsive ? Comment peut-on faire pour centrer un container (et tous ses enfants) sur un body au dimension définie ? Les marges et padding s’additionnent dans les calculs ? J'ai vu une astuce pour éviter les dépassements en utilisant un overflow:hidden je ne me souviens plus bien de la marche à suivre... Peux-tu nous la rappeler ? Et pour les éléments qui suivent le container (en dehors du div du flex) ils se mettent à-côté ou à la ligne ? Pour les dimensions des containers, est-ce mieux d'utiliser du rem, du px, du % ? Un container flex peut-il contenir un autre container flex ? Ce truc, ça me fait penser à du tetris... 😵‍💫 PS: Désolé pour toutes les questions mais je profite de votre expérience. 😄

  • @marina.v.6486
    @marina.v.6486 11 หลายเดือนก่อน

    wow merci beaucoup

  • @wordpasapas9402
    @wordpasapas9402 ปีที่แล้ว

    Good

  • @baddj4830
    @baddj4830 ปีที่แล้ว

    est ce que je peut avoir les photos (images) svp et merci .

  • @yassirallouche223
    @yassirallouche223 ปีที่แล้ว

    { splitStr=str.split(' '); array=[] let lWord; let max=[]; for(let i=0;i<splitStr.length;i++) { array.push(splitStr[i].length) } lWord=Math.max(...array) for(let i=0;i<splitStr.length;i++) { if(lWord===splitStr[i].length) max.push(splitStr[i]) } return max } console.log(longestWord(`with consistanty (is so important) i will be one of the best devloper`)) console.log(longestWord(`I woke up early today `))

  • @morycamara6281
    @morycamara6281 ปีที่แล้ว

    Merci beaucoup ! Grâce à vous, Flexbox et Grid css ne sont plus un secret pour moi.

  • @janedeveloppeuse
    @janedeveloppeuse ปีที่แล้ว

    Merci pour les astuces :) reste a les appliqués

  • @David-u6l7j
    @David-u6l7j ปีที่แล้ว

    Un cours très clair, démonstratif et donc très efficace ! Merci !

  • @morycamara6281
    @morycamara6281 ปีที่แล้ว

    Grâce à vous , j'ai appris Flexbox , Grid Css et Box-sizing. Merci beaucoup !

  • @FredericPerat
    @FredericPerat ปีที่แล้ว

    J'ai adoré !!

  • @mahdibhl4428
    @mahdibhl4428 ปีที่แล้ว

    function go(str,l){ var p = str.split('').reverse(); if(p[0]==l.toLowerCase()){ document.write("true") }else{document.write("false")} }

  • @stefanotonella7462
    @stefanotonella7462 ปีที่แล้ว

    Vraiment très clair, très détaillé et bien expliqué. Bravo, bon travail! (..et merci 😄)

  • @pascalfauvy7062
    @pascalfauvy7062 ปีที่แล้ว

    Bon ben j'suis vraiment à la bourre de ... 5 ans. Ceci dit excellente approche en vanilla. Du coup je vais voir si tu as poursuivi sur le sujet. Ciao et merci !

  • @regisrobart998
    @regisrobart998 ปีที่แล้ว

    claire nette et précis, j'adore.

  • @bastienmaurieres7120
    @bastienmaurieres7120 ปีที่แล้ว

    Salut, je commence le dev web et tu fais partie de mon top 3 vidéo tuto ☺️. Vraiment pédagogique tes vidéos. Bon je sais que la vidéo à plus de 1 an mais je tente qd même ma question. Pourquoi ne pas rajouter 2 x 100px à grid-temple-rows (pour avoir nos 3 lignes explicites) plutôt que d'ajouter 2 x 100px à une nouvelle ligne comme grid-auto-rows ?? J'espère que je me fais bien comprendre 😅

  • @flom.2233
    @flom.2233 ปีที่แล้ว

    je dois être la seule à ne pas comprendre un des premiers points (en même temps je débute ^^), pourtant ta vidéo a l'air hyper claire ! J'ai l'impression que le display : flex apparait dans le html, pourtant dans la formation que je suis on ne l'applique que dans le CSS... si tu peux m'éclairer ce serait top :)

  • @soblim
    @soblim ปีที่แล้ว

    Bon exercice, mais à quoi cela sert il concrètement de savoir faire ça ?

    • @__h_il__9651
      @__h_il__9651 หลายเดือนก่อน

      à connaitre en pratiquant les différentes méthodes de javascript qui sont pas forcement assimilable juste en un coup d'oeil

  • @dufresneali
    @dufresneali ปีที่แล้ว

    bon je ne pratique plus depuis un moment. Et la refonte prochaine d'une applis m'oblige à me ressourcer. J'ai arrêter vers l'installation de manière durable de FlexBox. Ton explication est très didactique et ramené à ton expérience, tes incompris du moment est un plus. je ne voyais pas ce qui clochais maintenant c'est plus claire pour moi. Merci du partage.

  • @otaku2.092
    @otaku2.092 ปีที่แล้ว

    Salut moi j'aimerais savoir ou trouver les images pour faire du parallaxe surtout les illustrations

  • @jeanpierreragequit1726
    @jeanpierreragequit1726 ปีที่แล้ว

    Super tuto ! J'ai enfin compris la notion de block et ses conséquences en terme de positionnement.

  • @shootthemoon2773
    @shootthemoon2773 ปีที่แล้ว

    pendant l'exercice j'ai aussi pris en compte les phrase en retirant les espaces avec .replaceAll(), comme ça une phrase comme "Karine alla en Irak" est compris dans les palindromes