- 150
- 263 825
JuanDavid_Dev
Colombia
เข้าร่วมเมื่อ 23 พ.ย. 2021
Hola! Soy Juan David, Software Developer & IT Systems Analyst de profesión.
En este canal encontrarás tutoriales completos y fáciles de seguir sobre conceptos básicos e intermedios de desarrollo de software. Mi objetivo es ayudar a otros desarrolladores a aprender y crecer en su carrera.
¡Si estás interesado en aprender sobre desarrollo de software, suscríbete a mi canal! 🤗
Bienvenid@!
En este canal encontrarás tutoriales completos y fáciles de seguir sobre conceptos básicos e intermedios de desarrollo de software. Mi objetivo es ayudar a otros desarrolladores a aprender y crecer en su carrera.
¡Si estás interesado en aprender sobre desarrollo de software, suscríbete a mi canal! 🤗
Bienvenid@!
Cómo Crear un Reproductor de Música con HTML, CSS y JavaScript - Guía Paso a Paso
En este video, te mostraré cómo crear un reproductor de música utilizando HTML, CSS y JavaScript. Aprende a implementar controles de reproducción, barra de progreso y mucho más. ¡Perfecto para desarrolladores web y asi poner en práctica el control y manipulación de interfaces!
Preview del ejercicio: jdocdev.github.io/Reproductor-MP3-JS/
Conviértete en miembro del canal recibe beneficios y apoya la creación de nuevo contenido:
th-cam.com/channels/tvW6edonCGLQK9Y0wtVP6g.htmljoin
Complementos del video:
Aprende Manejo del DOM JS:
th-cam.com/play/PLSCzMZKEz1xTYSayvy_L8eFWZ68Awrwb7.html
Aprende Flexbox y posicionamiento de elementos en pantalla:
th-cam.com/video/Wx8TpECmYHk/w-d-xo.html
Aprende JS:
th-cam.com/play/PLSCzMZKEz1xQWma_PktjXQBEC-fAmOa86.html
Redes Sociales:
www.tiktok.com/@juandavid_dev
JuanDavid_Dev
juandavid_dev
jdoc.dev.page
Preview del ejercicio: jdocdev.github.io/Reproductor-MP3-JS/
Conviértete en miembro del canal recibe beneficios y apoya la creación de nuevo contenido:
th-cam.com/channels/tvW6edonCGLQK9Y0wtVP6g.htmljoin
Complementos del video:
Aprende Manejo del DOM JS:
th-cam.com/play/PLSCzMZKEz1xTYSayvy_L8eFWZ68Awrwb7.html
Aprende Flexbox y posicionamiento de elementos en pantalla:
th-cam.com/video/Wx8TpECmYHk/w-d-xo.html
Aprende JS:
th-cam.com/play/PLSCzMZKEz1xQWma_PktjXQBEC-fAmOa86.html
Redes Sociales:
www.tiktok.com/@juandavid_dev
JuanDavid_Dev
juandavid_dev
jdoc.dev.page
มุมมอง: 1 240
วีดีโอ
Cómo instalar un Chat GPT (gratis Open Source) en tu PC usando tu CPU | Ollama + IBM Granite Code
มุมมอง 1403 หลายเดือนก่อน
Bienvenidos a este tutorial sobre cómo instalar Ollama IBM Granite Code, una plataforma de inteligencia artificial. En este video, les mostraré paso a paso cómo descargar e instalar para que puedan comenzar a utilizar esta poderosa herramienta de IA en sus proyectos. Conviértete en miembro del canal recibe beneficios y apoya la creación de nuevo contenido: th-cam.com/channels/tvW6edonCGLQK9Y0wt...
Aprende a hacer 8 diferentes botones animados con HTML/CSS en este tutorial
มุมมอง 3993 หลายเดือนก่อน
En este tutorial te enseñaremos cómo crear botones con efecto hover utilizando HTML y CSS. Este efecto es muy utilizado en el diseño web y permite resaltar los botones cuando el cursor se coloca sobre ellos. Aprenderás a agregar animaciones, transiciones y estilos personalizados para crear botones llamativos y atractivos para tu sitio web.#css #hover #uidesign #html #animation #DiseñoWeb Convié...
Cómo crear una tabla responsive con HTML y CSS
มุมมอง 1544 หลายเดือนก่อน
Aprende a crear una tabla responsive utilizando HTML y CSS con esta guía paso a paso. Las tablas son una parte fundamental de muchas páginas web, pero pueden ser difíciles de visualizar en dispositivos más pequeños. Con este tutorial, aprenderás a diseñar una tabla que se adapte a diferentes tamaños de pantalla, garantizando una experiencia de usuario óptima en dispositivos móviles y de escrito...
Crea tu sitio web de repostería con Google Sites - Guía paso a paso - No Code
มุมมอง 2105 หลายเดือนก่อน
¿Eres un apasionado de la repostería y quieres compartir tus creaciones con el mundo? En este video te enseñaré cómo crear un sitio web profesional y atractivo para tu negocio de repostería usando Google Sites, ¡sin necesidad de conocimientos en programación! Sitio web que desarrollaremos: sites.google.com/view/deliciasencantadas/inicio Aprenderás: - Introducción a Google Sites: Qué es. - Elegi...
¡CRUD VUE 3 JavaScript, VUE Router y Composition API!
มุมมอง 2135 หลายเดือนก่อน
En este tutorial aprenderás a crear una completa aplicación web de inventario de libros utilizando las últimas tecnologías frontend: Vue 3, Vite y Composition API. Te guiaré paso a paso desde la instalación de todas las herramientas necesarias, como Node, Postman, JSON Server y Axios, hasta la creación de la API con JSON Server, la cual probaremos con Postman utilizando métodos GET, POST, PUT y...
Introducción a FETCH API ASYNC AWAIT - Nivel Básico
มุมมอง 996 หลายเดือนก่อน
En este video tutorial aprenderás los conceptos básicos de FETCH API y ASYNC AWAIT para realizar peticiones HTTP desde tu navegador web. Este tutorial está dirigido a principiantes que quieren empezar a trabajar con APIs web. Conviértete en miembro del canal recibe beneficios y apoya la creación de nuevo contenido: th-cam.com/channels/tvW6edonCGLQK9Y0wtVP6g.htmljoin Complementos del video: Apre...
Introducción a FETCH API PROMISES - Nivel Básico
มุมมอง 926 หลายเดือนก่อน
En este video tutorial aprenderás los conceptos básicos de FETCH API y PROMISES para realizar peticiones HTTP desde tu navegador web. Este tutorial está dirigido a principiantes que quieren empezar a trabajar con APIs web. Conviértete en miembro del canal recibe beneficios y apoya la creación de nuevo contenido: th-cam.com/channels/tvW6edonCGLQK9Y0wtVP6g.htmljoin Complementos del video: Aprende...
Qué es una API REST y cómo se usa GET - POST - PUT - DELETE
มุมมอง 1177 หลายเดือนก่อน
Descubre qué es una API REST y aprende cómo utilizarla para conectar y comunicar aplicaciones de manera eficiente y flexible. Explora sus conceptos básicos y obtén una visión general de cómo se integra en el desarrollo de software moderno. Un especial agradecimiento al mecenas @CarlosValderrama-bg5jk por su apoyo en el mes de enero. Conviértete en miembro del canal recibe beneficios y apoya la ...
Cómo crear botones flotantes o stycky buttons responsive con HTML y CSS
มุมมอง 5348 หลายเดือนก่อน
En este video aprenderás cómo crear botones flotantes (Sticky Social Bar) responsive y con un diseño atractivo utilizando HTML y CSS. Te enseñaré paso a paso cómo estructurar y estilizar tu Sticky Social Bar, así como también cómo hacerlo responsive para que se adapte a diferentes tamaños de pantalla. ¡No te lo pierdas! #flexbox #stickybuttons #css #html #socialbuttons Conviértete en miembro de...
Cómo crear una sección de servicios responsive con HTML y CSS Flexbox
มุมมอง 5508 หลายเดือนก่อน
En este video aprenderás cómo crear una sección de servicios responsive y con un diseño atractivo utilizando HTML y CSS Flexbox. Te enseñaré paso a paso cómo estructurar y estilizar tu sección de servicios, así como también cómo hacerla responsive para que se adapte a diferentes tamaños de pantalla. ¡No te lo pierdas! #flexbox #services #css #html Conviértete en miembro del canal recibe benefic...
Cómo crear un Carrusel responsive con HTML, CSS Flexbox y JavaScript
มุมมอง 9369 หลายเดือนก่อน
En este video aprenderás cómo crear un Carrusel (Galería de imágenes) responsive y con un diseño atractivo utilizando HTML, CSS Flexbox y JavaScript. Te enseñaré paso a paso cómo estructurar y estilizar tu carrusel, así como también cómo hacerlo responsive para que se adapte a diferentes tamaños de pantalla. ¡No te lo pierdas! #flexbox #carousel #css #html #carrusel #galeria Conviértete en miem...
Cómo crear un footer responsive con HTML, CSS Flexbox y JavaScript
มุมมอง 6289 หลายเดือนก่อน
En este video aprenderás cómo crear un footer (pie de página) responsive y con un diseño atractivo utilizando HTML, CSS Flexbox y JavaScript. Te enseñaré paso a paso cómo estructurar y estilizar tu footer, así como también cómo hacerlo responsive para que se adapte a diferentes tamaños de pantalla. ¡No te lo pierdas! #flexbox #footer #css #html #piedepagina Conviértete en miembro del canal reci...
Cómo crear una navbar responsive con HTML, CSS Flexbox y JavaScript
มุมมอง 2.7K9 หลายเดือนก่อน
En este video aprenderás cómo crear una navbar (barra de navegación) responsive y con un diseño atractivo utilizando HTML, CSS Flexbox y JavaScript. Te enseñaré paso a paso cómo estructurar y estilizar tu navbar, así como también cómo hacerla responsive para que se adapte a diferentes tamaños de pantalla. ¡No te lo pierdas! #flexbox #navbar #css #html #navigationbar Conviértete en miembro del c...
Almacenamiento de datos en local storage | To do List
มุมมอง 30010 หลายเดือนก่อน
Almacenamiento de datos en local storage | To do List
Como crear un Login de usuarios Guía paso a paso
มุมมอง 76811 หลายเดือนก่อน
Como crear un Login de usuarios Guía paso a paso
CRUD de usuarios con guardado en Local Storage | HTML | CSS | JS | Guía paso a paso
มุมมอง 4.3Kปีที่แล้ว
CRUD de usuarios con guardado en Local Storage | HTML | CSS | JS | Guía paso a paso
Como programar una calculadora con JavaScript
มุมมอง 185ปีที่แล้ว
Como programar una calculadora con JavaScript
XAMPP Guía de instalación y primeros pasos
มุมมอง 240ปีที่แล้ว
XAMPP Guía de instalación y primeros pasos
Acelera tus proyectos un 1000% con la metodología Atomic Design
มุมมอง 2.6Kปีที่แล้ว
Acelera tus proyectos un 1000% con la metodología Atomic Design
Mejora tu CSS en un 100% con el enfoque BEM | metodología BEM
มุมมอง 3.3Kปีที่แล้ว
Mejora tu CSS en un 100% con el enfoque BEM | metodología BEM
Cómo crear un sitio web completo y responsivo con HTML y CSS desde cero
มุมมอง 583ปีที่แล้ว
Cómo crear un sitio web completo y responsivo con HTML y CSS desde cero
#1 Como mejorar en el desarrollo de software front end
มุมมอง 236ปีที่แล้ว
#1 Como mejorar en el desarrollo de software front end
Como crear un scroll infinito con HTML y CSS
มุมมอง 856ปีที่แล้ว
Como crear un scroll infinito con HTML y CSS
cómo instalar GPT4 All basado en GPT-J y LLaMa | ChatGPT4 en local con tu CPU
มุมมอง 4.7Kปีที่แล้ว
cómo instalar GPT4 All basado en GPT-J y LLaMa | ChatGPT4 en local con tu CPU
Cómo crear una navbar simple con HTML y CSS Flexbox
มุมมอง 424ปีที่แล้ว
Cómo crear una navbar simple con HTML y CSS Flexbox
como crear una calificación con estrellas usando HTML, CSS y JavaScript en minutos
มุมมอง 4.9Kปีที่แล้ว
como crear una calificación con estrellas usando HTML, CSS y JavaScript en minutos
Aprende a crear un formulario y almacenar datos ¡sin complicaciones! Usando html, css, js y php
มุมมอง 1.5Kปีที่แล้ว
Aprende a crear un formulario y almacenar datos ¡sin complicaciones! Usando html, css, js y php
genial, mil gracias
Excelentes videos, gracias por tus conocimientos, todo lo entendi muy bien. Saludos desde Bogota - Colombia.
Hola, gracias por ver y me alegra mucho que los videos y el conocimiento te sean de utilidad, un saludo.
amigo tienes el repositorio o codigo del proyecto necesito tomarlo de ejemplo crack me harias un favorazo gracias!!
Hubiera estado padre agregar por ejemplo un boton para abrir el directorio y seleccionar canciones, que cuando se termine cada cancion se reproduzca la siguiente , que se agregara la caratula de la cancion bueno esta es opcional ya que no siempre tienen, y un boton como para cambiar la imagen de fondo
Igual muchas gracias por tu video ya lo termine y me gusto como explicas
excelente explicación y buen contenido gracias 👩💻
🤩🤩🤩
Muchas gracias, Juan. Recién ando aprendiendo esta tecnología.
Me alegra mucho que te sea de utilidad el contenido, muchos éxitos en tu proceso de aprendizaje, saludos.
Que navegador usa disculpe?
Hola, ¿qué tal? Uso Firefox Developer Edition www.mozilla.org/es-ES/firefox/developer/ es un firefox con características extendidas que recibe actualices antes que el normal. Saludos.
Muchas gracias, me ayudo la rápida explciación. 🤝
Hola vengo de udemy, queria decir que el ultimo paso de la metadata si es importante, ya que si no se hace la barra de progreso no dura el mismo tiempo que el de la cancion. pd muy buen curso😸
Hola que tal? Que buen aporte muchas gracias por dejar la aclaración para las demás personas que vean el video. Saludos.
Excelente muchas gracias.
Buenas estoy siguiendo el paso por paso, para practicar y a la hora de colocar el (botonReproducirPausar.addEventListener("click", reproducirPausar); ) se me elimina el nombre de la canción y sigo haciendo los pasos que indicas en el video, la canción no se reproduce
Hola, te aseguró que son errores de tipeo, valida el nombre de las variables y IDs, mayúsculas y minúsculas, se que no es de mucha ayuda, pero es algo muy común que a todos nos pasa en el desarrollo. Saludos.
Hola Juan , podrías indicarme como hago para que los menús de arriba al pulsar abran un submenú y este a su vez muestre las opciones
Hola, ¿qué tal? si quisieras agregar submenús podrías hacerlo de la siguiente forma, y anidar cuantos menús sean necesarios, siempre sin exagerar para no entorpecer la experiencia de usuario, saludos. <nav> <ul class="nav-links"> <li> <a href="#">Services</a> <ul class="sub-menu"> <li><a href="#">Web Development</a></li> <li><a href="#">Graphic Design</a></li> <li><a href="#">Marketing</a></li> </ul> </li> <li><a href="#">Projects</a></li> </ul> </nav>
Gracias por el contenido del canal !!
Muy buen video, excelente explicación!!
Ecxelente fondo
Pero para que no ocupe toda la pestaña?
Hola, ¿qué tal? Para integrar el reproductor de música en un proyecto existente sin que ocupe toda la pantalla, simplemente colócalo dentro de un contenedor específico, agrégale una clase y ajusta los estilos CSS para que afecten solo a ese contenedor en lugar de al body. Saludos.
Osea grid es col y row por defecto?
En bootstrap para tener una columna siempre debes tener un contendor row, y su ordenamiento por default es ocupar las 12 columnas hasta llenar la row.
Profe varias consultas?? tengo entendido que cuando se usa el vh , el width no es necesario... Lo otro. No se si con Bootstrap se puede, colocar variaos H1 ó debe ir un h1 por documento y para finalizar cunando coloque el height y el width de 700px me tomo todo el tamaño de la pantalla y no podía ver los textos, luego lo deje en un tamaño de height: 500px. Gracias por el apoyo.
Hola, ¿qué tal? - es cierto que cuando se usa vh el width puede no ser necesario si el contenedor o el contexto de tu diseño ya gestiona el ancho adecuadamente; sin embargo, si quieres definir específicamente el ancho del elemento tampoco está mal y todo dependerá de los gustos del desarrollador. - en cuanto a los títulos h1 por SEO se recomienda solo 1 por documento, disculpa los errores cometidos en el video. - en cuanto los px siempre va a variar dependiendo de los tamaños de pantalla, te felicito por buscar formas de solucionar tu inconveniente. Saludos.
Gracias a usted por su atención💫
Excelente, felicitaciones por como explica profe,
Explica muy bien, Gracias!!!
Gracias!!
Gracias!!!😎
Demasiado bueno, gracias!!!!
Excelente!!!!🙂
hola, buenas tardes. oye una pregunta como hago para que los iconos que utilizaste me aparezcan? es que ya los descargue de Github y me a parecen en svg y no me aparecen,ayudaa
En svg se pueden usar, estas validando en tu html que la extensión que estés escribiendo concuerde con la del archivo? También puedes abrir la consola con f12 y te dirá si falta algún archivo y así corregirlo con mayor facilidad
Gracias por estos videos, estoy aprendiendo front y no se me ha hecho tan fácil, pero.... Están super sus tutoriales, los entiendo y sabe explicar muy bien, Gracias profesor!!!
Vi otro comentario tuyo en uno de mis videos, si estás interesada en el Front, te recomiendo mucho este curso del DOM que estás haciendo. PD: no sé qué tal estés con la puesta en práctica de tus conocimientos, pero si quisieras realizar algún ejercicio te recomendaría los que hicimos de la frutería ahí usamos tanto html, css y js, son los que tienen miniatura de color rosa y chocolate este sería uno de ellos th-cam.com/video/_NIA1jccWWs/w-d-xo.html. Sé que pueden ser bastante largos, pero al final si combinas todos los videos puedes llegar a este resultado jdocdev.github.io/sitio-tienda-frutas/. Espero sean de tu agrado y muchos éxitos.
@@juandavid_dev Mil gracias, perfecto ya voy por el video 11 del DOM, luego hago este ejercicio que me estas pasando, la verdad no estoy muy bien por lo que esta pasando mi País, pues soy de Venezuela y desde el domingo no he estudiado mucho, pero me contenta mucho que un país hermano me apoye con esto de los estudios, Gracias Juan!
Excelente explicación, gracias!!!😀
Me alegra mucho que sirva de ayuda en proceso de aprendizaje. Un saludo.
No entiendo sobre ponerlo antes y despues
Hola, ¿qué tal? La diferencia es muy sutil y a veces podría pasar desapercibida, pero básicamente sería lo siguiente: variable++: El valor se utiliza primero y luego se incrementa. ++variable: El valor se incrementa primero y luego se utiliza. Espero esto solucioné tu duda, saludos.
codigo porfavor
Hola, ¿qué tal? Es importante realizarlo dependiendo de tus necesidades, ya que si solo lo copias y pegas en tu proyecto seguramente funcione mal, por eso te recomendaría ver el video primero. github.com/jdocdev/StickySocial-PureFruit-HTML-CSS-JS
Sos un genio 😭
¿Dónde instalo la extensión HTML?
Hola. La plantilla de html viene incorporada en el editor de código Visual Studio Code, no sería necesario que realices una descarga adicional; sin embargo, en las extensiones de VSC puedes buscar algunas enfocadas a html y probar cual te puede ser útil según tus necesidades. Saludos.
@@juandavid_dev Hola. Estoy realizando el ejemplo del index / css pero al momento de colocar todos los comandos no me sale alguna opción llamada Go live, ¿qué necesito hacer si en caso no me sale ello?
puedes instalar la extensión live server para visual marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
@@juandavid_dev Muchas gracias.
Bien explicado 😃 Duda… En los «navbar__link», si le agregamos un modificador, la clase quedaría así ¿No? «navbar__link--select», con lo cual, al final, ese ítem quedaría con dos clases, «navbar__link navbar__link--select». Es lo mismo que haces con el «navbar» y el «navbar--secondary».
Hola, ¿qué tal? Si, es correcto, aunque es un tema de gustos, ya que CSS permite agregar múltiples clases simplemente dejando un espacio, ósea que podrías agregar una segunda clase llamada active (navbar__link active) la cual puede ser agregada o quitada según la necesidad usando JavaScript. Saludos.
el mejor video explicando parámetros que eh visto
Wow genial me encanto. Eres muy didactico. Te felicito
Muchas gracias, muy bien explicado!
+sub Muy buena explicacion de desarrollo, sos un gran profe, muchas gracias.
Excelente opción, muchas gracias. Serviría para test y pruebas, además quisiera saber: ¿Se puede actualizar constantemente, esa base de conocimiento?
Hola, ¿qué tal? Me alegra que te guste el video, ahora si quisieras actualizar te recomendaría estar al tanto del sitio web del entrenador y si hay noticias de actualización solo removerías el que tienes actualmente y lo volverías a descargar, eso lo arias con el comando ollama rm "nombre modelo" y luego lo instalas con ollama run "nombre modelo". Saludos.
Uf padrino! Que buen video. Me ayudaste a sacar una pagina para mi servicio social
¡Hola! ¡Me alegra que el material sea de ayuda, es la motivación de este canal, éxitos!, un saludo.
Me sale todo bien pero a la hora de agregar datos en la lista no me muestra lo que agregué. Solo me muestra la fila vacía con los botones de borrar y editar
Hola, ¿qué tal? Debería que ver tu código para entender qué sucede, te invitó a que lo compares con el código que realizamos en el video, aquí te dejo el link github.com/jdocdev/CRUD-JS-LOCALSTORAGE. Saludos
sigue así bro, me gusta ver personas que comparten sus conocimientos independientemente que yo sé, me gusta ver este.
Gracias por el apoyo, un saludo 🖐
Gracias profe
Me encanta como explicas, el mejor!!
Hola, gracias por tu comentario, un saludo 🖐
amigo, excelente muchas gracias no hay forma de que muestre cuantas personas han votado y el promedio de las votaciones? algo como amazon?
Hola, claro puedes hacerlo, pero debes realizar toda la lógica, tanto para el front como el back, un saludo.
wow! Ecxelente trabajp
Gracias, espero que te haya sido de utilidad, en el canal hay otros videitos de la misma temática, saludos.
Gracias !!!
Con gustooo! :3
Aprendi montones
¡Hola! Me alegra mucho que el material te sea de ayuda.
Excelente explicación.
Gracias. Saludos!
buenisimo tu proyecto, estaba necesitando como hacer responsive mi navbar :)
Me alegra que sea de utilidad, saludos.
no entiendo porque no me funciona esta exactamente igual
Hola! Si quieres puedes darle una miradita a este código y así poder comparar github.com/jdocdev/NavbarsFlexbox