Contenido del curso
Operaciones básicas
Workshop 1: Fetch
Eventos
Workshop 2: Lazy loading
Workshop 3
Librerías relacionadas
Conclusiones
Nuestro propio plugin Lazy Loading
Alejandro Dotor
Estudiante
Sebastián Buitrago
EstudianteContenido del curso
Nuestro propio plugin Lazy Loading
Alejandro Dotor
EstudianteSebastián Buitrago
Estudiante
Carlos Eduardo Gomez García
Profesor
José Pablo Jiménez Cucanán
Estudiante
Juan Cruz
Estudiante
Andrés Felipe García Rendón
Estudiante
Luciano Marchese
Estudiante
Gabriel Andrés Rondón Barragán
Estudiante
Sebastian Heredia
Estudiante
Seba Cardoso
EstudianteSebastian Heredia
Estudiante
George Báez Beltré
Estudiante
Ines Valeria Foglino
Estudiante
Juan Diego Loaiza Martinez
Estudiante
Andres Felipe Pinchao Ramirez
Estudiante
Juan David Moreno Rodriguez
Estudiante
Oscar Leandro Camacho Vasquez
Estudiante
Edgar Lopez Arroyo
Estudiante
Maria Tohabanda Duchi
Estudiante
Jacobo Burbano
Estudiante
Sergio Martinez
Estudiante
Miguel Angel Reyes Moreno
Estudiante
Melba Indhira Tejada Leonardo
Estudiante
Jonathan 🦑 Alvarez
Profesor
Johel Jesus Hoces Saenz
Estudiante
Isaac Yael Ruiz
Estudiante
Daniel Adolfo Ordoñez Rubio
EstudianteIsaac Yael Ruiz
EstudianteHe visto que el profe es muy rápido cuando escribe código, esto es porque usa los shortcuts que nos da el software, en este caso VS Code.
Les dejo los link para que vean todo lo que se puede hacer solo con el teclado: MAC 🟦 WIN Espero mejoren su productividad a la hora de escribir código 💪
con oprimir ctrl+k y ctrl+s aparecen todos los atajos segun tu SO, en mac obviamente seria con comand, y ademas desde alli los pueden editar
Foxes are the bests:3!
API sumamente útil xD
Este link tiene muchas apis para poder trabajar este taller y practicar.
gracias por el dato colega!
Muy bueno!
Tengo la sensación de que Jonathan explica muy bien, este curso ha sido bastante enriquecedor.
Después de seguir por la ruta de desarrollo web, es impresionante como uno puede entender y hacer todo tan fluido donde vamos aprendiendo cosas gradualmente. 😃
Después de seguir por la ruta de desarrollo web, es impresionante como puede entender y hacer todo tan fluido donde vamos aprendiendo cosas gradualmente. :)
<div id="imagenes" class="pt-10"> <div class="p-4"> <img class="mx-auto" width="320" height="120" src="https://randomfox.ca/images/2.jpg" alt=""> </div>
Para copiar y pegar
Jaja...gracias!!!
Continuamos :)
Emmet Abrevation
Esto sirve para crear etiquetas en html mucho mas rápido, te dejo un ejemplo con los div y imágenes con las clases ya agregadas .
div.p-4*9>img.mx-auto```
La forma en la que explica Jonathan es increíble 🤩
El enlace de la imagen
Usando <figure> para manejar imagenes
<div id="root"> <figure class="p-4"> <img class="mx-auto" src="https://randomfox.ca/images/1.jpg" width="200" alt="Zorro Image" /> </figure> <figure class="p-4"> <img class="mx-auto" src="https://randomfox.ca/images/2.jpg" width="200" alt="Zorro Image" /> </figure> </div>
Happy to learn new things. :)
Use javascript para la implementación desde las imágenes, mas automatizado y manejando la optimización de este lo mejor posible
const divImages = document.getElementById('images') let foxes = [] for(let i = 1; i < 8; i++){ const imagenes = document.createElement('img') imagenes.setAttribute('src' , `https://randomfox.ca/images/${i}.jpg`) imagenes.setAttribute('class', 'mx-auto p-8') foxes.push(imagenes) //Manejo de lotes } divImages.append(...foxes)
En el caso de que quieran probar otras imagenes y variaciones de estas yo utilice esta API: 👌
Workshop 2: Lazy loading
Presentación del proyecto
Repositorio del proyecto
Link de las imágenes de los zorros(primera foto)
Mi código. [](<img width="320" src="https://randomfox.ca/?i=9/images/2.jpg" alt="imagen de un cachorro"></div>)
Hola Indhira, muchas gracias por el código, crees que podrías enviarnos tu repositorio de GitHub para ver todo el demás código y poder ayudarte mejor? :)
Me sale ese error, alguien me ayuda por favor :(
Me sale que el port 8080 no está disponible pero no entiendo cómo cambiarlo, ya puse --port pero no pasa nada, también si le pongo --port 5000 ¿Cómo cambio de port? obviamente lo estoy haciendo mal pero es que no encuentro cómo se hace
Hola, Isaac :)
Si se trata de un proyecto de Snowpack, revisa si existe el archivo snowpack.config.mjs o puedes crearlo en el directorio raíz del proyecto.
Debería exportar un objeto JSON así
export default { devOptions: { port: el puerto que quieres usar }, };
Gracias!