AutoDidactDev
AutoDidactDev
  • 46
  • 423 685
Card personalizada (tarjeta de recetas) || HTML y CSS
En este video aprenderemos a crear una card personalizada de recetas con html y css.
Puedes apoyar al canal uniéndote a: www.patreon.com/autodidactdev
Código fuente: www.patreon.com/posts/card-tarjeta-de-70236233?Link&
Imagen usada: drive.google.com/drive/folders/1XxdSNk3rHwxJVDMOe0eawaMwJJ_5IZIg?usp=sharing
Video de font Awesome: ua-cam.com/video/FQzCD-QmGcY/v-deo.html
Video de fuentes de google: ua-cam.com/video/cdDXOsDPqCo/v-deo.html
video de variables con css: ua-cam.com/video/sLjpA8jiYbc/v-deo.html
CDN font Awesome: cdnjs.com/libraries/font-awesome
Google fonts: fonts.google.com/
Переглядів: 12 642

Відео

Tabla de Datos Simple con HTML y CSS
Переглядів 39 тис.2 роки тому
En este video aprenderemos a crear una tabla simple con html y css. Puedes apoyar al canal uniéndote a: www.patreon.com/autodidactdev Código fuente: www.patreon.com/posts/tabla-de-datos-y-66295082?
Login simple con HTML, CSS y JS
Переглядів 54 тис.2 роки тому
En este video aprenderemos a crear un login con html, css y js. Puedes apoyar al canal uniéndote a: www.patreon.com/autodidactdev Código fuente: www.patreon.com/posts/login-simple-65903297? Video de font Awesome: ua-cam.com/video/FQzCD-QmGcY/v-deo.html CDN font Awesome: cdnjs.com/libraries/font-awesome
Slider con HTML, CSS y JS
Переглядів 3,1 тис.2 роки тому
En este video aprenderemos a crear un slider simple con html, css y js. Patreon: www.patreon.com/autodidactdev Código fuente: www.patreon.com/posts/slider-con-html-65428443? Video de font awesome: ua-cam.com/video/FQzCD-QmGcY/v-deo.html Pagina de CDN Font Awesome: cdnjs.com/libraries/font-awesome Pagina de imágenes: www.pexels.com/es-es/
Imágenes Giratorias con HTML y CSS
Переглядів 1,5 тис.2 роки тому
En este video aprenderemos a crear un contenedor giratorio con imágenes. Descargar imágenes: drive.google.com/drive/folders/1ss5WRUceCZxgUmVps5r8F3P9eNARh_tg?usp=sharing Código fuente: www.patreon.com/posts/imagenes-65358484? Pagina de imágenes usadas: wall.alphacoders.com/ Video de variables con css: ua-cam.com/video/sLjpA8jiYbc/v-deo.html Apoya al canal: www.patreon.com/autodidactdev
Texto Animado | HTML y CSS
Переглядів 8 тис.2 роки тому
En este video aprenderemos a crear un texto animado usando html, css y fuentes de Google. Puedes apoyar al canal: www.patreon.com/autodidactdev Código fuente: www.patreon.com/posts/texto-animado-65358446? Video de fuentes de google: ua-cam.com/video/cdDXOsDPqCo/v-deo.html Pagina google fonts: fonts.google.com/ Pagina hue rotate: www.quackit.com/css/functions/css_hue-rotate_function.cfm
Usar Fuentes Personalizadas de Google en proyecto HTML
Переглядів 3882 роки тому
En este video aprenderemos a usar las fuentes personalizadas de google fonts en nuestros proyectos web. Google fonts: fonts.google.com/
Selector de Imágenes | HTML, CSS y JS
Переглядів 11 тис.2 роки тому
En este video aprenderemos a crear un selector de imágenes con html, css y js. Puedes apoyar al canal: www.patreon.com/autodidactdev Código fuente: www.patreon.com/posts/selector-de-65358386? Imágenes usadas: drive.google.com/drive/folders/1-FELZmbpdnrSOKKjOTVLPTx_7I1XdIzw?usp=sharing Pagina de imágenes: unsplash.com/
Tarjeta de Presentación | HTML, CSS y Font Awesome
Переглядів 6 тис.2 роки тому
En este video crearemos tarjetas de presentación usando html, css e iconos font awesome. Puedes apoyar al canal: www.patreon.com/autodidactdev Código fuente: www.patreon.com/posts/tarjeta-de-65358341? Imágenes usadas: drive.google.com/drive/folders/1nHrXjOwrLdzo2AOwjssE38gntWZsJQW1?usp=sharing Cdn Font Awesome: cdnjs.com/libraries/font-awesome video sobre iconos font awesome: ua-cam.com/video/F...
Como usar Iconos en HTML
Переглядів 24 тис.2 роки тому
En este video aprenderemos a usar iconos personalizados con font awesome en nuestras paginas. Página del cdn: cdnjs.com/libraries/font-awesome
Scroll Container | HTML , CSS y JS
Переглядів 15 тис.2 роки тому
En este video crearemos un contenedor deslizable usando html, css y js. Puedes apoyar al canal: www.patreon.com/autodidactdev Código fuente: www.patreon.com/posts/scroll-container-65358307? Imágenes para descargar: drive.google.com/drive/folders/1sGunjW5sgSYVav0kll0z3Hqt-VoUGHBV?usp=sharing Pagina de imágenes: www.pexels.com/es-es/
Botones con Efecto Hover | HTML y CSS
Переглядів 27 тис.2 роки тому
En este video aprenderemos a crear botones con efecto hover usando html y css. Puedes apoyar al canal: www.patreon.com/autodidactdev Código fuente: www.patreon.com/posts/botones-con-65358281?
Saturno con HTML y CSS | Dibujando con CSS
Переглядів 7022 роки тому
En este video crearemos una representacion del planeta saturno con html y css. Puedes apoyar al canal: www.patreon.com/autodidactdev Código fuente: www.patreon.com/posts/saturno-con-html-65358238? Link de la imagen: drive.google.com/drive/folders/1AV-m-86HhNsbL4JcCNpkd8aCqOVfq-QU?usp=sharing
Nieve con CSS y JS
Переглядів 2,6 тис.2 роки тому
En este video aprenderemos a crear nieve con html, css y JavaScript. Puedes apoyar al canal: www.patreon.com/autodidactdev Código fuente: www.patreon.com/posts/nieve-con-html-y-65358187? Link de la imagen: drive.google.com/drive/folders/1oeU-Trec-wsCQCnRfJIDfAjtt6f8WaGa?usp=sharing Pagina de la imagen: wall.alphacoders.com
Checkbox Personalizado | HTMML y CSS
Переглядів 4142 роки тому
En este video aprenderemos a crear un checkbox personalizado con html y css. Puedes apoyar al canal uniéndote a: www.patreon.com/autodidactdev Código fuente: www.patreon.com/posts/check-box-65358100?
Tarjetas Giratorias (flip card) | HTML y CSS
Переглядів 76 тис.2 роки тому
Tarjetas Giratorias (flip card) | HTML y CSS
Loader animado | HTML y CSS
Переглядів 6882 роки тому
Loader animado | HTML y CSS
Card con CSS | Ejercicios con CSS
Переглядів 4 тис.2 роки тому
Card con CSS | Ejercicios con CSS
Tab con HTML, CSS y JS
Переглядів 4,8 тис.3 роки тому
Tab con HTML, CSS y JS
Planeta Tierra | HTML y CSS
Переглядів 2,2 тис.3 роки тому
Planeta Tierra | HTML y CSS
Navbar Responsivo con HTML, CSS y JS
Переглядів 5 тис.3 роки тому
Navbar Responsivo con HTML, CSS y JS
Tarjetas con Efecto Hover | HTML y CSS
Переглядів 31 тис.3 роки тому
Tarjetas con Efecto Hover | HTML y CSS
Botones con efecto Ondas - Ripple Effect | CSS y JS
Переглядів 1,9 тис.3 роки тому
Botones con efecto Ondas - Ripple Effect | CSS y JS
Tarjeta giratoria - Flip card con HTML y CSS
Переглядів 16 тис.3 роки тому
Tarjeta giratoria - Flip card con HTML y CSS
Cielo Animado | Dibujando con HTML y CSS
Переглядів 3993 роки тому
Cielo Animado | Dibujando con HTML y CSS
Efecto ondas (ripple effect) con HTML CSS y JS | Ejercicio con css y js
Переглядів 1,4 тис.3 роки тому
Efecto ondas (ripple effect) con HTML CSS y JS | Ejercicio con css y js
Loader con HTML y CSS | Ejercicios con CSS
Переглядів 4813 роки тому
Loader con HTML y CSS | Ejercicios con CSS
Fondo Animado con HTML, CSS y JS
Переглядів 3,4 тис.3 роки тому
Fondo Animado con HTML, CSS y JS
Botones con Curioso Efecto Hover | CSS
Переглядів 5343 роки тому
Botones con Curioso Efecto Hover | CSS
Lluvia con HTML, CSS y JS
Переглядів 3,8 тис.3 роки тому
Lluvia con HTML, CSS y JS

КОМЕНТАРІ

  • @johanmachado6633
    @johanmachado6633 9 годин тому

  • @MarvinCv_ly
    @MarvinCv_ly 11 днів тому

    gracias me sirvió de mucho

  • @djcadaniel-frontend
    @djcadaniel-frontend 21 день тому

    gracias por tu aporte

  • @zetacentaurium8251
    @zetacentaurium8251 24 дні тому

    me acabas de salvar la vida hermano, el link principal que va en el header que te da la pagina fontaweazone no funciona, pero esta si esta bien.. te ganaste un laik!

  • @yubeladonis7798
    @yubeladonis7798 Місяць тому

    10 de 10 el video

  • @informaticahidrocentro6312
    @informaticahidrocentro6312 Місяць тому

    Gracias. pero tengo un problema en cuanto cuando jira y la imagen detras va hacia abajo en el momento que le a punto gira hacia abajo y no al mismo sitio donde se ubican la imagen..

  • @rincondeautos4418
    @rincondeautos4418 Місяць тому

    Subí otro vídeo broo

  • @gustavoangelavilacardenas1854
    @gustavoangelavilacardenas1854 2 місяці тому

    tendras alguna forma de hacerlo con taildwind?

  • @kelimango
    @kelimango 2 місяці тому

    Hola no pude mostrar las imagenes de ese modo con variables: ((

  • @abbelgamer
    @abbelgamer 2 місяці тому

    Una consulta y como puedo hacer que el login de javascript se redireccione en un enlace externo?

  • @antonioc3767
    @antonioc3767 2 місяці тому

    Muy bien explicado bro, gracias

  • @spaziodispazzatura1059
    @spaziodispazzatura1059 3 місяці тому

    muchas gracias, me ayudo a tener la base que necesitaba para poder hacerlo por mi cuenta

  • @rosibelbriceno4129
    @rosibelbriceno4129 3 місяці тому

    Excelente explicación 😊 luego de investigar, leer y ver otros vídeos, este tiene la explicación perfecta.

  • @leoprone1
    @leoprone1 3 місяці тому

    Excelente, muchas gracias!

  • @isaaccorona7581
    @isaaccorona7581 3 місяці тому

    pasen codigo

  • @isaaccorona7581
    @isaaccorona7581 3 місяці тому

    pasen codigo

  • @noraberro
    @noraberro 3 місяці тому

    Muy buena explicación!!! Gracias!!

  • @AuxTI
    @AuxTI 3 місяці тому

    Como puedo cambiar el tamaño del icono?

  • @rubentorres5659
    @rubentorres5659 4 місяці тому

    Gracias crack

  • @EdisonRivas2011
    @EdisonRivas2011 4 місяці тому

    Estoy siguiendo un curso de CSS y aunque ya algo entendia el tema del uso de la propiedad position, tu explicación me ayuda a tener mas claro su funcionalidad. Muy buena explicación.

  • @henderwolf2453
    @henderwolf2453 5 місяців тому

    Bastante útil la verdad, me ayudo mucho, merece que mas personas lo vean buen video con esto voy a chingarme al contreras en el proyecto

  • @marley880
    @marley880 5 місяців тому

    dsp de ver el tema en un curso de paga, leer la documentación de MDN y luego de varios otros tutoriales... por fin le he comprendido con esta explicación. Gracias!!

  • @helenagutierrez30
    @helenagutierrez30 5 місяців тому

    Excelente explicación

  • @ManuelMendozaGaymer
    @ManuelMendozaGaymer 5 місяців тому

    En mi caso gira, pero no con esa animacion, si no de manera mas estatica ¿que podria hacer?

  • @martinn1465
    @martinn1465 5 місяців тому

    graciaasss

  • @hannalu1733
    @hannalu1733 6 місяців тому

    Gracias!! Super claro el ejemplo!! 🙌🩷✨

  • @rerreina
    @rerreina 6 місяців тому

    Ese mismo procedimiento se puede integrar con sitepad website builder interesa saber sobre ese tema o como se puede hacer en sitepad website builder gracias

  • @John-0265
    @John-0265 6 місяців тому

    Hola dame tu correo y te contacto

  • @carlavallejos3470
    @carlavallejos3470 6 місяців тому

    excelente!

  • @Bien_Argentino
    @Bien_Argentino 6 місяців тому

    Excelente explicación!

  • @TrollYourASS
    @TrollYourASS 6 місяців тому

    Great vid

  • @MichellValenzuela-lt7cf
    @MichellValenzuela-lt7cf 6 місяців тому

    Excelente muchas gracias!!

  • @fridayanez1906
    @fridayanez1906 6 місяців тому

    Muchas gracias Men!! :D

  • @saulantoniosanchezserna9173
    @saulantoniosanchezserna9173 6 місяців тому

    Gracias por el tutorial, espero me sea de utilidad, bendiciones!

  • @jesusre8495
    @jesusre8495 7 місяців тому

    Gracias genio!

  • @camiloguerra6488
    @camiloguerra6488 7 місяців тому

    Buenas! Ya teniendo todo al iniciar la tarjeta me muestra el H3 no esta oculto, funciona todo pero el texto en h3 sigue mostrandose encima de la tarjeta. Que podria ser?

    • @camiloguerra6488
      @camiloguerra6488 7 місяців тому

      Ya lo soluciones, z-index: 2; y 1 en front y back. Me gusto el efecto, tome su buen like hombre

  • @osw2050
    @osw2050 8 місяців тому

    muy bueno

  • @rafaelmartinez8472
    @rafaelmartinez8472 8 місяців тому

    Te agradezco mucho por la explicación, me ha servido mucho para un proyecto escolar :)

  • @NicolasMoraes2232
    @NicolasMoraes2232 8 місяців тому

    no puedo hacer que hover me afecte a todos los elementos a la vez... es decir , si posiciono sobre el texto, afecta solo texto, o sobre la imagen, solo a la imagen...

  • @obesguan
    @obesguan 8 місяців тому

    buenísimo video!! muchísimas gracias!!!

  • @brayanmflores
    @brayanmflores 9 місяців тому

    repo?

  • @geyser831
    @geyser831 9 місяців тому

    Buen video bro

  • @dannivalero4427
    @dannivalero4427 9 місяців тому

    easy, gracias bro!

  • @manuellopeztoribio2843
    @manuellopeztoribio2843 9 місяців тому

    bro tengo una duda por que una parte aparece la imagen y en la otra en blanco y seguí tus pasos uno por uno

  • @twelve1720
    @twelve1720 10 місяців тому

    Gracias, muy buen video 👍

  • @Momentos_con_dios_07
    @Momentos_con_dios_07 10 місяців тому

    Excelente video 🥲encontré lo que buscaba ❤

  • @jonathanpuente2255
    @jonathanpuente2255 10 місяців тому

    Grande!<3

  • @AlonsoLayena
    @AlonsoLayena 10 місяців тому

    Muchas gracias por la explicación!! Enseñas muy bien, deberias hacer mas videos como este!!!!

  • @alejandraarguero9474
    @alejandraarguero9474 10 місяців тому

    Profe, quería saber si quiero que sólo caiga nieve de un globo que hay en el background, cómo debo hacer?

  • @rosario1613
    @rosario1613 10 місяців тому

    amigo eres un tigre explicando porfin lo entendi, muchas gracias