SwebDev
SwebDev
  • Видео 64
  • Просмотров 407 173
Bien débuter avec Canvas - Partie 1
🔥 S'ABONNER À LA CHAÎNE 🔥
►ruclips.net/channel/UC18RbwcHN3cP8Q-K53PF-JQ
🔥 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 RUclipsr ChrisCourses : ruclips.net/video/...
Просмотров: 993

Видео

Apprendre Flexbox en 25 minutes
Просмотров 15 тыс.2 года назад
🔥 L'inscription à mon cours complet sur Flexbox : www.swebdev.fr/cours/apprendre-flexbox 🔥 S'ABONNER À LA CHAÎNE 🔥 ►ruclips.net/channel/UC18RbwcHN3cP8Q-K53PF-JQ 🔥 POUR ME SUIVRE 🔥 ► RatonCodeur Salut ! Apprendre Flexbox en 25 minutes ? C'est possible !
Débuter avec CSS Grid - Partie 5
Просмотров 1,9 тыс.2 года назад
🔥 S'ABONNER À LA CHAÎNE 🔥 ►ruclips.net/channel/UC18RbwcHN3cP8Q-K53PF-JQ 🔥 POUR ME SUIVRE 🔥 ► RatonCodeur 🔥 LA PLAYLIST 🔥 ► ruclips.net/p/PLdlcrLtifCUnPYvGdOqi5-Pl3hG7lIkKn 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 comprendre l...
Débuter avec CSS Grid - Partie 4
Просмотров 1,5 тыс.2 года назад
🔥 S'ABONNER À LA CHAÎNE 🔥 ►ruclips.net/channel/UC18RbwcHN3cP8Q-K53PF-JQ 🔥 POUR ME SUIVRE 🔥 ► RatonCodeur 🔥 LA PLAYLIST 🔥 ► ruclips.net/p/PLdlcrLtifCUnPYvGdOqi5-Pl3hG7lIkKn 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 comprendre l...
Débuter avec CSS Grid - Partie 3
Просмотров 1,8 тыс.2 года назад
🔥 S'ABONNER À LA CHAÎNE 🔥 ►ruclips.net/channel/UC18RbwcHN3cP8Q-K53PF-JQ 🔥 POUR ME SUIVRE 🔥 ► RatonCodeur 🔥 LA PLAYLIST 🔥 ► ruclips.net/p/PLdlcrLtifCUnPYvGdOqi5-Pl3hG7lIkKn 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 comprendre l...
Débuter avec CSS Grid - Partie 2
Просмотров 2,3 тыс.2 года назад
🔥 S'ABONNER À LA CHAÎNE 🔥 ►ruclips.net/channel/UC18RbwcHN3cP8Q-K53PF-JQ 🔥 POUR ME SUIVRE 🔥 ► RatonCodeur 🔥 LA PLAYLIST 🔥 ► ruclips.net/p/PLdlcrLtifCUnPYvGdOqi5-Pl3hG7lIkKn 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 comprendre l...
Débuter avec CSS Grid - Partie 1
Просмотров 8 тыс.2 года назад
🔥 S'ABONNER À LA CHAÎNE 🔥 ►ruclips.net/channel/UC18RbwcHN3cP8Q-K53PF-JQ 🔥 POUR ME SUIVRE 🔥 ► RatonCodeur 🔥 LA PLAYLIST 🔥 ► ruclips.net/p/PLdlcrLtifCUnPYvGdOqi5-Pl3hG7lIkKn 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 comprendre l...
Créer des carrés responsive en CSS
Просмотров 1,9 тыс.2 года назад
🔥 S'ABONNER À LA CHAÎNE 🔥 ►ruclips.net/channel/UC18RbwcHN3cP8Q-K53PF-JQ 🔥 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,4 тыс.2 года назад
🔥 S'ABONNER À LA CHAÎNE 🔥 ►ruclips.net/channel/UC18RbwcHN3cP8Q-K53PF-JQ 🔥 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,6 тыс.3 года назад
🔥 S'ABONNER À LA CHAÎNE 🔥 ►ruclips.net/channel/UC18RbwcHN3cP8Q-K53PF-JQ 🔥 POUR ME SUIVRE 🔥 ► RatonCodeur
Découverte de Bootstrap 5
Просмотров 11 тыс.3 года назад
🔥 S'ABONNER À LA CHAÎNE 🔥 ►ruclips.net/channel/UC18RbwcHN3cP8Q-K53PF-JQ 🔥 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
Просмотров 2 тыс.4 года назад
🔥 S'ABONNER À LA CHAÎNE 🔥 ►ruclips.net/channel/UC18RbwcHN3cP8Q-K53PF-JQ 🔥 POUR ME SUIVRE 🔥 ► RatonCodeur
Bootstrap 4 - Comprendre la grille
Просмотров 9 тыс.4 года назад
🔥 S'ABONNER À LA CHAÎNE 🔥 ►ruclips.net/channel/UC18RbwcHN3cP8Q-K53PF-JQ 🔥 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,4 тыс.4 года назад
🔥 S'ABONNER À LA CHAÎNE 🔥 ►ruclips.net/channel/UC18RbwcHN3cP8Q-K53PF-JQ 🔥 POUR ME SUIVRE 🔥 ► RatonCodeur
Tailwind CSS - Découverte et installation avec Gulp
Просмотров 2,6 тыс.4 года назад
🔥 S'ABONNER À LA CHAÎNE 🔥 ►ruclips.net/channel/UC18RbwcHN3cP8Q-K53PF-JQ 🔥 POUR ME SUIVRE 🔥 ► RatonCodeur
Comprendre la méthode map() en JavaScript
Просмотров 8 тыс.5 лет назад
Comprendre la méthode map() en JavaScript
Snippets personnalisés avec Visual Studio Code
Просмотров 2,5 тыс.5 лет назад
Snippets personnalisés avec Visual Studio Code
Panier d'achat avec Node.JS #5
Просмотров 1,5 тыс.5 лет назад
Panier d'achat avec Node.JS #5
Panier d'achat avec Node.JS #4
Просмотров 1,9 тыс.5 лет назад
Panier d'achat avec Node.JS #4
Panier d'achat avec Node.JS #3
Просмотров 1,6 тыс.5 лет назад
Panier d'achat avec Node.JS #3
Panier d'achat avec Node.JS #2
Просмотров 2,4 тыс.5 лет назад
Panier d'achat avec Node.JS #2
Panier d'achat avec Node.JS #1
Просмотров 11 тыс.5 лет назад
Panier d'achat avec Node.JS #1
Comprendre la méthode filter() en JavaScript
Просмотров 5 тыс.5 лет назад
Comprendre la méthode filter() en JavaScript
Compiler des fichiers Sass avec Node-Sass
Просмотров 1,5 тыс.5 лет назад
Compiler des fichiers Sass avec Node-Sass
Todo App avec Node.JS et MongoDB #4
Просмотров 8795 лет назад
Todo App avec Node.JS et MongoDB #4
Todo App avec Node.JS et MongoDB #1
Просмотров 3,2 тыс.5 лет назад
Todo App avec Node.JS et MongoDB #1
Todo App avec Node.JS et MongoDB #3
Просмотров 8635 лет назад
Todo App avec Node.JS et MongoDB #3
Todo App avec Node.JS et MongoDB #2
Просмотров 1,2 тыс.5 лет назад
Todo App avec Node.JS et MongoDB #2
Exercice JavaScript - Vérifier la fin d'une chaîne de caractères
Просмотров 2,1 тыс.6 лет назад
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,6 тыс.6 лет назад
Créer des effets de hover sur des ghost buttons en CSS

Комментарии

  • @nicolasviennot4241
    @nicolasviennot4241 2 дня назад

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

  • @fabricebeuriot7852
    @fabricebeuriot7852 10 дней назад

    🙂

  • @user-lw3xe4mw1r
    @user-lw3xe4mw1r Месяц назад

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

  • @kouamemathurinyao2904
    @kouamemathurinyao2904 Месяц назад

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

  • @94davesk8er
    @94davesk8er Месяц назад

    top la video

  • @RogerBella
    @RogerBella 2 месяца назад

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

  • @nabillambattan92
    @nabillambattan92 4 месяца назад

    j'adore votre explication simple !

  • @davidkouadio7314
    @davidkouadio7314 4 месяца назад

    merci pour l aide

  • @taj_ninny
    @taj_ninny 4 месяца назад

    bravo pour ta pédagogie

  • @user-rk3pr6jk2n
    @user-rk3pr6jk2n 5 месяцев назад

    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 5 месяцев назад

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

    • @ratoncodeur
      @ratoncodeur 5 месяцев назад

      Tu veux que je te rembourse ?

    • @taj_ninny
      @taj_ninny 4 месяца назад

      @@ratoncodeur remboursé!!!

  • @yassiya2668
    @yassiya2668 5 месяцев назад

    Merci !!

  • @knightofchess6900
    @knightofchess6900 5 месяцев назад

    Super !

  • @knightofchess6900
    @knightofchess6900 5 месяцев назад

    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 5 месяцев назад

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

  • @knightofchess6900
    @knightofchess6900 5 месяцев назад

    Superbe cours sur canvas !

  • @ChristopheEGLINE
    @ChristopheEGLINE 5 месяцев назад

    Bravo..Clair et efficace.Merci !

  • @vanessa-er6kq
    @vanessa-er6kq 5 месяцев назад

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

  • @fredpetroleum7106
    @fredpetroleum7106 6 месяцев назад

    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 6 месяцев назад

    wow belle explication super Merci

  • @hbx380
    @hbx380 6 месяцев назад

    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 7 месяцев назад

    super vidéo bien utile merci

  • @aloascreations4916
    @aloascreations4916 7 месяцев назад

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

  • @Jarod75
    @Jarod75 7 месяцев назад

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

  • @Fred3dDigitalPainting
    @Fred3dDigitalPainting 7 месяцев назад

    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 7 месяцев назад

    wow merci beaucoup

  • @wordpasapas9402
    @wordpasapas9402 8 месяцев назад

    Good

  • @baddj4830
    @baddj4830 8 месяцев назад

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

  • @yassirallouche223
    @yassirallouche223 8 месяцев назад

    { 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 8 месяцев назад

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

  • @janedeveloppeuse
    @janedeveloppeuse 8 месяцев назад

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

  • @user-xx1pd8jb1u
    @user-xx1pd8jb1u 8 месяцев назад

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

  • @morycamara6281
    @morycamara6281 9 месяцев назад

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

  • @FredericPerat
    @FredericPerat 9 месяцев назад

    J'ai adoré !!

  • @mahdibhl4428
    @mahdibhl4428 10 месяцев назад

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

  • @stefanotonella7462
    @stefanotonella7462 11 месяцев назад

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

  • @pascalfauvy7062
    @pascalfauvy7062 11 месяцев назад

    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 11 месяцев назад

    claire nette et précis, j'adore.

  • @bastienmaurieres7120
    @bastienmaurieres7120 11 месяцев назад

    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 ?

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

  • @iben1195
    @iben1195 Год назад

    Such an easy to use library and I knew not. Thanks, gracias, merci 🙏

  • @LadyGolem
    @LadyGolem Год назад

    Enfin une video claire, je peux enfin dire que je comprends beaucoup mieux le flexbox !! Merciiiii

  • @WoodLifeTrading
    @WoodLifeTrading Год назад

    Je vous remercie énormément mon frère ! Vous m'aviez aidé à bien réaliser ma barre de navigation. Bon boulot à vous !

  • @orignalmusic162
    @orignalmusic162 Год назад

    j'ai jamais suivis auparavant un cours pareille c'est trop top

  • @mehdib8612
    @mehdib8612 Год назад

    Pourquoi tu ne realises plus de vidéos ?😊