- Видео 62
- Просмотров 238 241
Code Facile
Добавлен 11 янв 2020
Tutoriels de programmation web pour débutants.
HTML, CSS, Javascript, et bien plus encore.
HTML, CSS, Javascript, et bien plus encore.
Maitrisez les variables CSS en 4 minutes !
CSS EN BREF : Les variables CSS - Wikodemedias - Abonne-toi ;)
--------------------
Me retrouver ailleurs :
CodePen : codepen.io/wikode
Github : github.com/wikode
--------------------
Musique :
► Music by: Dj Quads - "Cruise Around" / "Best Time" / "Chilled"
• SUBSCRIBE to the Official DJ QUads RUclips channel HERE: ruclips.net/channel/UCusF...
• Follow Dj Quads on SoundCloud HERE: soundcloud.com/aka-dj-quads
• Follow Dj Quads on Twitter HERE: DjQuads
• Follow Dj Quads on Spotify HERE: open.spotify.com/artist/2VZrd...
• Follow Dj Quads on Instagram HERE: djquads
• Support Dj Quads on Patreon HERE: www.patreon.com/DjQuads
• Music released by: Chill Out Records goo.gl/fh3rEJ
• ...
--------------------
Me retrouver ailleurs :
CodePen : codepen.io/wikode
Github : github.com/wikode
--------------------
Musique :
► Music by: Dj Quads - "Cruise Around" / "Best Time" / "Chilled"
• SUBSCRIBE to the Official DJ QUads RUclips channel HERE: ruclips.net/channel/UCusF...
• Follow Dj Quads on SoundCloud HERE: soundcloud.com/aka-dj-quads
• Follow Dj Quads on Twitter HERE: DjQuads
• Follow Dj Quads on Spotify HERE: open.spotify.com/artist/2VZrd...
• Follow Dj Quads on Instagram HERE: djquads
• Support Dj Quads on Patreon HERE: www.patreon.com/DjQuads
• Music released by: Chill Out Records goo.gl/fh3rEJ
• ...
Просмотров: 379
Видео
Comment inclure correctement et facilement une image en HTML & CSS
Просмотров 362Год назад
CSS EN BREF : Image dans une div en conservant ses proportions initiales - Wikodemedias - Abonne-toi ;) Me retrouver ailleurs : CodePen : codepen.io/wikode Github : github.com/wikode Musique : ► Music by: Dj Quads - "Cruise Around" / "Best Time" / "Chilled" • SUBSCRIBE to the Official DJ QUads RUclips channel HERE: ruclips.net/channel/UCusF... • Follow Dj Quads on SoundCloud HERE: soundcloud.co...
Comprendre les ombres CSS en 4 minutes !
Просмотров 351Год назад
CSS EN BREF : Les ombres de texte et de bloc - Wikodemedias - Abonne-toi ;) Me retrouver ailleurs : CodePen : codepen.io/wikode Github : github.com/wikode Musique : ► Music by: Dj Quads - "Cruise Around" / "Best Time" / "Chilled" • SUBSCRIBE to the Official DJ QUads RUclips channel HERE: ruclips.net/channel/UCusF... • Follow Dj Quads on SoundCloud HERE: soundcloud.com/aka-dj-quads • Follow Dj Q...
Comment créer une grille CSS responsive en 2 minutes !
Просмотров 311Год назад
CSS EN BREF : Grille responsive automatique - Wikodemedias - Abonne-toi ;) Me retrouver ailleurs : CodePen : codepen.io/wikode Github : github.com/wikode Musique : ► Music by: Dj Quads - "Cruise Around" / "Best Time" / "Chilled" • SUBSCRIBE to the Official DJ QUads RUclips channel HERE: ruclips.net/channel/UCusF... • Follow Dj Quads on SoundCloud HERE: soundcloud.com/aka-dj-quads • Follow Dj Qu...
Animation CSS au survol expliqué en 2 minutes !
Просмотров 947Год назад
CSS EN BREF : Style au survol d'un élément - Wikodemedias - Abonne-toi ;) Me retrouver ailleurs : CodePen : codepen.io/wikode Github : github.com/wikode Musique : ► Music by: Dj Quads - "Cruise Around" / "Best Time" / "Chilled" • SUBSCRIBE to the Official DJ QUads RUclips channel HERE: ruclips.net/channel/UCusF... • Follow Dj Quads on SoundCloud HERE: soundcloud.com/aka-dj-quads • Follow Dj Qua...
Le modèle de boite en CSS expliqué en 2 minutes !
Просмотров 518Год назад
CSS EN BREF : Le modèle de boite - Wikodemedias - Abonne-toi ;) Me retrouver ailleurs : CodePen : codepen.io/wikode Github : github.com/wikode Musique : ► Music by: Dj Quads - "Cruise Around" / "Best Time" / "Chilled" • SUBSCRIBE to the Official DJ QUads RUclips channel HERE: ruclips.net/channel/UCusF... • Follow Dj Quads on SoundCloud HERE: soundcloud.com/aka-dj-quads • Follow Dj Quads on Twit...
Centrer un élément avec Flexbox - expliqué en 2 minutes !
Просмотров 382Год назад
CSS EN BREF : Comment centrer un élément avec Flexbox - Wikodemedias - Abonne-toi ;) Me retrouver ailleurs : CodePen : codepen.io/wikode Github : github.com/wikode Musique : ► Music by: Dj Quads - "Cruise Around" / "Best Time" / "Chilled" • SUBSCRIBE to the Official DJ QUads RUclips channel HERE: ruclips.net/channel/UCusF... • Follow Dj Quads on SoundCloud HERE: soundcloud.com/aka-dj-quads • Fo...
TOP 10 EXTENSIONS VS CODE BOOSTER VOTRE PRODUCTIVITE
Просмотров 5342 года назад
TOP 10 EXTENSIONS VSCODE POUR BOOSTER SA PRODUCTIVITE - Wikodemedias - Abonne-toi ;) 00:16 : Live Server 01:31 : Prettier 04:05 : Git Lens & Git History 06:31 : CodeTour 09:12 : Community Material Theme & Material Icon Theme 10:38 : Color Highlight 11:12 : Error Lens 11:57 : Turbo Console Log 13:02 : TODO Tree 14:16 : Project Manager Live Server : marketplace.visualstudio.com/items?itemName=rit...
Application Météo React Tailwind API Responsive
Просмотров 1,1 тыс.2 года назад
TUTORIEL : APPLICATION METEO - React & Tailwind & API - Wikodemedias - Abonne-toi ;) Navigation 00:00 Présentation Projet 00:54 Initialisation 05:13 API Open-Meteo 08:04 Logique centrale 39:45 Components Today & Daily 01:04:00 Tailwind CSS Ressources Le code source sur Github : github.com/witzkvn/20221106_tailwind_react_weather_app Projet Live : 20221106-tailwind-react-weather-app.vercel.app/ C...
ANIMATION CHARGEMENT CSS
Просмотров 1,8 тыс.2 года назад
TUTORIEL : ANIMATION CHARGEMENT - HTML & CSS - Wikodemedias - Abonne-toi ;) Le code source sur Github : github.com/wikode/20220415_loader_css Ou sur CodePen : codepen.io/wikode/pen/bGamJqB . Webgradients : webgradients.com/ Me retrouver ailleurs : Instagram : wikodemedias CodePen : codepen.io/wikode Github : github.com/wikode Musique : ► Music by: Dj Quads - "Cruise Around" / "Be...
DESSINER EN CSS : LE COEUR
Просмотров 1,1 тыс.2 года назад
TUTORIEL : DESSINER UN COEUR - HTML & CSS - Wikodemedias - Abonne-toi ;) Le code source sur Github : github.com/wikode/20220409_heart_css . Clippy formes complexes en CSS : bennettfeely.com/clippy/ Training smileys : codepen.io/wikode/pen/ExVbQYx Me retrouver ailleurs : Instagram : wikodemedias CodePen : codepen.io/wikode Github : github.com/wikode Musique : ► Music by: Dj Quads ...
FOOTER RESPONSIVE
Просмотров 1,8 тыс.2 года назад
TUTORIEL : CREER UN FOOTER RESPONSIVE - HTML & CSS - Wikodemedias - Abonne-toi ;) Le code source sur Github : github.com/wikode/20220402_footer_responsive Ou sur CodePen : codepen.io/wikode/pen/LYeObYY Me retrouver ailleurs : Instagram : wikodemedias CodePen : codepen.io/wikode Github : github.com/wikode Musique : ► Music by: Dj Quads - "Cruise Around" / "Best Time" / "Chilled" •...
JEU JAVASCRIPT - PIERRE FEUILLE CISEAUX
Просмотров 5 тыс.2 года назад
TUTORIEL : JEU PIERRE FEUILLE CISEAUX - HTML, CSS & Javascript - Wikodemedias - Abonne-toi ;) Le code source sur Github : github.com/wikode/20220316_pierre-feuille-ciseaux Ou sur CodePen : codepen.io/wikode/pen/xxpwyEg . Images : icons8.com/icon/xvKQQjh3GenR/hand-scissors icons8.com/icon/jOnqoxqYslwM/clenched-fist icons8.com/icon/Mn4k8JJ9VT6X/hand Me retrouver ailleurs : Instagram : instagram.c...
MENU DROPDOWN HTML CSS
Просмотров 9342 года назад
TUTORIEL : CREER UN DROPDOWN - HTML & CSS - Wikodemedias - Abonne-toi ;) 0:00 HTML 4:28 CSS Le code source sur Github : github.com/wikode/20220310_dropdown Ou sur CodePen : codepen.io/wikode/pen/xxPvpbP . Ionicons : ionic.io/ionicons Me retrouver ailleurs : Instagram : wikodemedias CodePen : codepen.io/wikode Github : github.com/wikode Musique : ► Music by: Dj Quads - "Cruise Aro...
JEU JAVASCRIPT QUIZ COULEUR
Просмотров 3,4 тыс.2 года назад
TUTORIEL : CREER UN QUIZ COULEUR JAVASCRIPT - HTML, CSS & JS - Wikodemedias - Abonne-toi ;) 0:00 HTML 4:50 CSS 11:20 Javascript Le code source sur Github : github.com/wikode/20220304_jeu_js_quiz_couleur Ou sur CodePen : codepen.io/wikode/pen/abVXEWO . SVG backgrounds : www.svgbackgrounds.com/ Police google fonts : fonts.google.com/specimen/Courgette?category=Handwriting#standard-styles Page Wik...
CARTE GEOGRAPHIQUE JAVASCRIPT AVEC API LEAFLET
Просмотров 9 тыс.2 года назад
CARTE GEOGRAPHIQUE JAVASCRIPT AVEC API LEAFLET
GERER DES THEMES EN HTML, CSS et JAVASCRIPT
Просмотров 2,3 тыс.2 года назад
GERER DES THEMES EN HTML, CSS et JAVASCRIPT
C'EST QUOI UNE API ? Explication simple et exemple pratique !
Просмотров 38 тыс.2 года назад
C'EST QUOI UNE API ? Explication simple et exemple pratique !
BOUTON TOGGLE avec animation - HTML, CSS et Javascript
Просмотров 3,5 тыс.2 года назад
BOUTON TOGGLE avec animation - HTML, CSS et Javascript
CSS GRID GALERIE D'IMAGES avec popup au clic
Просмотров 6 тыс.2 года назад
CSS GRID GALERIE D'IMAGES avec popup au clic
ASTUCES VISUAL STUDIO CODE pour débutants - codez plus vite !
Просмотров 10 тыс.3 года назад
ASTUCES VISUAL STUDIO CODE pour débutants - codez plus vite !
BARRE DE NAVIGATION LATTERALE MOBILE - HTML, CSS et JAVASCRIPT
Просмотров 2,1 тыс.3 года назад
BARRE DE NAVIGATION LATTERALE MOBILE - HTML, CSS et JAVASCRIPT
TUTO : COMPTE À REBOURS EN JAVASCRIPT
Просмотров 2,8 тыс.3 года назад
TUTO : COMPTE À REBOURS EN JAVASCRIPT
TUTO : CONVERTISSEUR DE DISTANCES HTML, CSS et Javascript - Projet pour débutant
Просмотров 2,5 тыс.3 года назад
TUTO : CONVERTISSEUR DE DISTANCES HTML, CSS et Javascript - Projet pour débutant
WEBDESIGN : CREER UNE CARTE DE PROFIL en HTML et CSS
Просмотров 4,7 тыс.3 года назад
WEBDESIGN : CREER UNE CARTE DE PROFIL en HTML et CSS
TIC TAC TOE en HTML, CSS et Javascript ! Projet débutant - étape par étape
Просмотров 9 тыс.3 года назад
TIC TAC TOE en HTML, CSS et Javascript ! Projet débutant - étape par étape
TODO App pour DÉBUTANTS expliqué en détail ! HTML, CSS & JAVASCRIPT (+ Bonus CSS)
Просмотров 1,2 тыс.3 года назад
TODO App pour DÉBUTANTS expliqué en détail ! HTML, CSS & JAVASCRIPT ( Bonus CSS)
Bonjour. Super! Merci pour tes vidéos. C'est vraiment bien de pouvoir se lancer dans des petits projets et avoir un guide fiable. En plus tu explique vraiment très bien et les videos sont super bien monté par rapport à tes explications. Enfin bref Chapeau Monsieur.
Bonjour, super Video. Merci. je suis débutant et je n'ai pas réussi à remplacer keyCode par keyboardEvent.code. Du coup je l'ai remplacé par key et remplacé tout les data-key de la page html par la valeur "key" de chaque touche (en plus c'est plus explicite car c'est exactement la valeur inscrit sur la touche: pour 1 c'est "1", pour = c'est "="). Bon ça fonctionne mais je ne sais pas du tout si ça se fait ... enfin si c'est une bonne pratique.?? Merci pour vos réponse si vous avez le courage d'aller jusqu'au bout de mon texte.😅
Bonjour. Trois points qui me semblent discutables dans le code CSS. 1) Il est contre-productif de mettre les padding et margin à 0 dans le sélecteur universel (*), ce qui a un impact sur toutes les balises HTML. En effet, cela oblige ensuite à remettre un padding ou un margin sur des balises qui en auraient (les balises titres et paragraphes par exemple), alors que les valeurs par défaut appliquées par le navigateur peuvent être suffisantes. Donc, ce n'est pas une bonne pratique que de s'ajouter du travail pour rien. 2) Il n'est absolument pas nécessaire d'appliquer une transition sur un objet HTML qui reçoit une animation CSS. En effet, une animation CSS intègre nativement les effets de transition entre les propriétés qui sont animées. 3) Plutôt que d'agir sur le height du balise pour la faire disparaître, ce qui implique l'usage du overflow:hidden;, il est plus simple d'utiliser display:none; pour faire disparaître la balise et son contenu, puis de faire un display:block; (si c'est une balise de type bock), ou display:inline; (si c'est une balise de type inline).
merci. la video est juste complète comme jamais
salut
Chouette! Merci beaucoup
Merci,cela m'a beaucoup aider
merci énormément pour ta vidéo parfait💯👌
Bonjour, "" const listekeycode = touches.map(touche => touche.dataset.key); """ Des que j'enregistre il me met absoluement des () autour de touche : const listekeycode = touches.map((touche) => touche.dataset.key); Ce qui me fais planter le code :/
@codefacileWK J'essaye d'integrer le grid dans mon code mais le souci est qu'en modifiant le "body" dans mon css ça fout en l'air mes autres pages ,j'ai essayé de contourner cela en créant un second css mais ça ne fait aucun effet. Commentintegrerr le grid sans que cela ne modifie les autres pages?
Je pense qu'il faut mettre un id sur la grid comme "myGrid" par exemple, et ensuite prefixer tous les selecteurs css pour la grille par #myGrid dans votre fichier css, pour ne selectionner que les éléments enfants de myGrid
@@codefacileWK de cette façon je colle le contenu du css "body" dans my "mygrid" sans impacter le "body" des autres pages. mais dans le tuto la div porte déjà l'id "grid" où j'ai raté un truc?
Je n'ai plus le code en tête mais dans tous les cas si d'autres éléments sont impactés c'est qu'il faut utiliser des selecteurs CSS plus précis pour ne cibler que les éléments souhaités
@@codefacileWK Merci pour votre aide et réactivité!!
Mon score est 100% , trop coule la vidéo merci 😍
Pouvez-vous m'envoyer les code svpl ou liens
Bonjour, le code est dispo en cliquant sur le lien Github en description de la vidéo
bonjour est-ce que vous pourriez m'aider à comprendre dans quel genre d'application est-ce que je pourrais utiliser cet API ou plus exactement d'autres API de logiciel SEO ou aussi de retouche de photos
Merci cette vidéo m'a bien aidé aujourd'hui...
J’ai tout bien fait, mais lorsque j’appuie sur un bouton, le nombre n’apparaît pas
bonjour je voudrais utiliser l'api de canva , est-ce que je pourrais te poser quelques questions à ce sujet
Bonjour j'aime beaucoup cette vidéo tu as oublié quand tu clique sur icone burger le texte et trop coller avec la Navbar. Merci d'avance de corriger ce petit problème.
super, est ce que tu pourrais encore m'expliquer des trucs en ce qui concerne les api
C'est nul.. Votre vidéo 😢ce qui est énervant ici c'est que c'est trop flou je parviens pas à voir bien vos code.. Vous êtes méchants 😠😠😠😡😡😡😡😡😡
Bonjour, la vidéo est disponible en HD. Je pense qu'il faut régler la qualité de la vidéo de votre côté dans les paramètres du lecteur de youtube et vous assurer d'avoir une bonne connexion internet pour lire ce contenu en HD
cool merci 🙃
merci beaucoup tooop!!
Merci beaucoup pour ces informations ! J'ai appris quelque chose de génial ici aujourd'hui (en plus de la PokéAPI) :)
C’était vraiment super merci beaucoup
Vraiment clair et precis dans les explications alors que c'est rare dans le milieu. Avec un exemple vraiment fun et facile a prendre en main. Merci beaucoup!
salut et merci pour ce tuto! est ce que tu sais s'il existe une api ou autre pour generer automatiquement les données d'une carte pokemon à partir d'une photo ?
Salut et merci ! Pas à ma connaissance... mais peut-être que l'api de OpenAI basée sur une IA peut faire l'affaire ! Je ne connais pas, jamais utilisé, mais à explorer !
bonjour
merci
Cool, merci !
salut ça fait plusieurs tuto que tu fais et que je suit, il y a toujours un soucis dans le html, j'ai beau reproduire moi meme ton html ça ne fonctionne jamais, le css et le js oui mais pas le html. par contre si je copie colle ton html tout fonctionne serais tu pourquoi ?
ps: merci pour t'es tuto
Hey ! C'est bizarre... ça vaut le coup de regarder dans la console (sur ton navigateur, clic droit puis inspecter, et cliquer sur l'onglet console) pour voir s'il y a des erreurs qui pourraient te débloquer... sinon, essaye de voir un comparateur de texte (ou de code si ça existe) en ligne pour comparer ton fichier et mon fichier et voir les différences qu'il pourrait y avoir !
@@codefacileWK salut, d'abord merci de t'as réponse, alors oui j'avais demandé à chatgpt de comparer nos deux html et il n'a rien trouver de significatif, donc bon je copie colle ton code html et puis voilàa XD, encore merci pour t'es tuto !!
bonjour je tiens à signaler que dans mon cas le css ne fonctionne pas correctement, toutes les icone font une colonne et ne sont pas l'une en face de l'autre
Bonjour, souvent cela peut être un problème de structure dans le html ou une typo dans le nom des classes / id qui ne correspondent pas entre le html et le css. J'espère que ça pourra vous aider !
@@codefacileWK bonjour, je vais aller regarder je te remercie pour la réponse !
Très bon exercice !
cest la meilleure video en francais. merci beaucoup...
Bonjour, je ne me souvenais plus de ce commentaire. Je voulais me lancer dans Visual studio code mais c'est trop compliqué. Je préfère en rester à Excel et VBA. Bonne continuation.
perefct !
Mais aucune erreur ne s affiche sur la console du js c est dû à quoi
Bjr j ai essayé votre code mais le compteur ne défile pas
Pas assez de pédagogie, vous ne vous mettez pas au niveau des débutants. Vous allez trop vite. Merci quand même.
Bonjour. Merci pour votre retour ! Je suis surpris de votre commentaire. Pourriez-vous m'en dire plus et me donner des exemples de ce que je pourrais améliorer ? Cela m'aiderait beaucoup ! Merci !
Est un spam jvois pas d'autres chose 💀💀@@codefacileWK
❤ j'ai aimé
j'ai rien compris mais bon ça marche, merci beaucoup😅
Merci beaucoup pour cette vidéo, elle ma beaucoup aider 👍
Merci pour ce tutoriel ! Grâce à toi, j'ai réussi à faire une belle galerie d'images !
merci mon reuf ca mas beaucuop aider
bonjour super tuto j'ai juste un soucis, le body prend toute la largeur de la page web et l'écran aussi, les touches sont bien placé mais j'ai une grosse bande à droite des touches
Bonjour, N'hésitez pas à aller voir le code source en description pour le comparer au votre et trouver les différences qui cause ce rendu
Grand merci !
j'ai refais identiquement comme tu as fait mais ca ne marche pas
Mais comment faire pour le rendre en application
je n'arrive pas à dézoomer. Que faire ?
Sur VS code, vous pouvez controler le niveau de zoom sur windows avec Ctrl+ touche + ou - du pavé numérique ! Sinon menu affichage je crois qu'il y a une option pour gérer le zoom
sa ma degouter du code 🤣 C'est hyper compliquer, je me dit que je serais jammais capable de le refaire tout seul
On a tous commencé quelque part ! Faut y aller à ton rythme, mais surtout pas te laisser impressionner 😉 avec de la patience et de la pratique tu y arriveras les yeux fermés !
@@codefacileWKoui c’est sur je pense que il faudrais que je commence par des projet plus facile merci en tout cas
@@Wwxyzz Pour te familiariser avec le javascript natif, je te conseille de faire soit une todolist soit un pierre-feuille-ciseaux ; les deux projets sont trouvables sur cette chaine. Mais ne recopie pas bètement la vidéo, regarde la entièrement pour comprendre ce qu'il fait, comment il décortique son code, et essaie de refaire la même chose chez toi mais tout seul, sans la vidéo qui tourne derrière. Beaucoup de débutants négligent la partie réflexion avant même de coder, c'est pourtant l'étape la plus importante.
@@varenberg5043merci beaucoup pour ton commentaire je vais essayer de faire ce que tu ma dit 👍👍👍
Wow Merci infiniment, j'ai beaucoup appris. LIKÉ et ABONNÉ direct ! 👍
Super merci pour tes explications ça m’a beaucoup aidé !
Merci!