SwebDev
SwebDev
  • 64
  • 419 766
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 061

วีดีโอ

Apprendre Flexbox en 25 minutes
มุมมอง 17K3 ปีที่แล้ว
🔥 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
มุมมอง 2K3 ปีที่แล้ว
🔥 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.5K3 ปีที่แล้ว
🔥 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.9K3 ปีที่แล้ว
🔥 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.4K3 ปีที่แล้ว
🔥 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
มุมมอง 9K3 ปีที่แล้ว
🔥 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
มุมมอง 2K5 ปีที่แล้ว
🔥 S'ABONNER À LA CHAÎNE 🔥 ►th-cam.com/channels/18RbwcHN3cP8Q-K53PF-JQ.html 🔥 POUR ME SUIVRE 🔥 ► RatonCodeur
Bootstrap 4 - Comprendre la grille
มุมมอง 9K5 ปีที่แล้ว
🔥 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.6K5 ปีที่แล้ว
Panier d'achat avec Node.JS #5
Panier d'achat avec Node.JS #4
มุมมอง 2K6 ปีที่แล้ว
Panier d'achat avec Node.JS #4
Panier d'achat avec Node.JS #3
มุมมอง 1.6K6 ปีที่แล้ว
Panier d'achat avec Node.JS #3
Panier d'achat avec Node.JS #2
มุมมอง 2.5K6 ปีที่แล้ว
Panier d'achat avec Node.JS #2
Panier d'achat avec Node.JS #1
มุมมอง 11K6 ปีที่แล้ว
Panier d'achat avec Node.JS #1
Comprendre la méthode filter() en JavaScript
มุมมอง 5K6 ปีที่แล้ว
Comprendre la méthode filter() en JavaScript
Compiler des fichiers Sass avec Node-Sass
มุมมอง 1.5K6 ปีที่แล้ว
Compiler des fichiers Sass avec Node-Sass
Todo App avec Node.JS et MongoDB #4
มุมมอง 8876 ปีที่แล้ว
Todo App avec Node.JS et MongoDB #4
Todo App avec Node.JS et MongoDB #1
มุมมอง 3.2K6 ปีที่แล้ว
Todo App avec Node.JS et MongoDB #1
Todo App avec Node.JS et MongoDB #3
มุมมอง 8726 ปีที่แล้ว
Todo App avec Node.JS et MongoDB #3
Todo App avec Node.JS et MongoDB #2
มุมมอง 1.2K6 ปีที่แล้ว
Todo App avec Node.JS et MongoDB #2
Exercice JavaScript - Vérifier la fin d'une chaîne de caractères
มุมมอง 2.2K6 ปีที่แล้ว
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

ความคิดเห็น

  • @AbdoulayeDiagne-e9z
    @AbdoulayeDiagne-e9z 27 วันที่ผ่านมา

    Grace a toi j'ai fait mon premier bouton fonctionnel❤❤❤❤❤❤❤❤❤

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

    il est cool ce tuto. Par contre il faut bien penser à mettre une hauteur de container renvoyant une valeur en pixel quel soit fixe ou basé sur le viewport (ex: 100vh) car pour répartir les DIV enfant sur le main-axis en mode "column" on répartie les DIV sur une valeur sinon la hauteur sera égal à la somme des hauteurs des DIV.

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

    merci enormement

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

    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 3 หลายเดือนก่อน

    Juste,MERCI

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

    Grid à ne pas confondre avec Greed. Je sors ➡

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

    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 6 หลายเดือนก่อน

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

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

    🙂

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

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

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

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

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

    top la video

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

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

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

    j'adore votre explication simple !

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

    merci pour l aide

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

    bravo pour ta pédagogie

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

    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 11 หลายเดือนก่อน

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

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

      Tu veux que je te rembourse ?

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

      @@ratoncodeur remboursé!!!

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

    Merci !!

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

    Super !

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

    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 11 หลายเดือนก่อน

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

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

    Superbe cours sur canvas !

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

    Bravo..Clair et efficace.Merci !

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

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

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

    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 ปีที่แล้ว

    wow belle explication super Merci

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

    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 ปีที่แล้ว

    super vidéo bien utile merci

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

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

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

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

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

    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 ปีที่แล้ว

    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 3 หลายเดือนก่อน

      à 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