Un homenaje a mi mascota que fallecio hace algunos dias.
****
Introducción
Lo que aprenderás en este curso
Qué es el asincronismo
Event Loop
Iniciando a programar con JavaScript
Callbacks
Configuración
Qué son los Callbacks
Playground: Ejecuta un callback con 2s de demora
XMLHTTPRequest
Fetch data
Callback hell
Promesas
Qué son las promesas
Playground: Crea una función de delay que soporte asincronismo
Fetch
Fetch POST
Async Await
Funciones asíncronas
Try and catch
Playground: Captura el error de una petición
¿Cómo enfrentar los errores?
Generadores
Generators
Proyecto CV
Proyecto del curso
Consumiendo API
Desplegando el proyecto
Playground: Crea una utilidad para hacer peticiones
Nunca pares de crear
Conclusión
¿Qué camino tomar para seguir aprendiendo?
Comparte tu proyecto y certifícate
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Iniciar sesión
Proyecto del curso
20/26Recursos
Aportes 99
Preguntas 9
Ordenar por:
🛠️ 𝗖𝗹𝗮𝘀𝗲 #𝟭𝟳: 𝗣𝗿𝗼𝘆𝗲𝗰𝘁𝗼 𝗱𝗲𝗹 𝗰𝘂𝗿𝘀𝗼 𝟭𝟳/𝟮𝟭 🛠️
.
Antes de continuar con el proyecto es importante repasar los siguientes conceptos:
.
- Una
landing page(página de inicio) es la página web a la que se dirige a un usuario de Internet después de hacer clic en un hipervínculo (puede ser un enlace en un correo electrónico o un botón de llamada a la acción u otros. Fuente: aquí.)
. Gites el sistema de control de versiones que permite llevar un control de todos los cambios a lo largo del tiempo de nuestros proyectos.
.Githubes una plataforma de desarrollo colaborativo que permite subir nuestros repositorios de Git a la nube.
.
🔨 Continuando con el proyecto:
.
- Crear un repositorio para agregar todos los recursos, se manejará plantillas html, css, JS y API de preferencia.
- Entrar a https://github.com/ e iniciar sesión y dar en el botón verde para crear nuevo proyecto.
- En Repository name indicar el nombre del proyecto. En Description (optional) una descripción del proyecto.
- Indicar si queremos que el proyecto esté público o privado. También activar la casilla de Add a README file para que nos agregue ese archivo.
- Seleccionar un template en .gitignore y escoger Node.
- En la licencia colocar MIT. Dar click en el botón verde para crear el repositorio.
- Ahora vamos a clonar el proyecto para trabajarlo desde VSC, para ello al dar click en el botón Code en la pestaña HTTPS copiar el enlace, abrir la terminal con
Ctrl + Alt + Tposicionarnos donde queremos que esté el proyecto y escribir:git clone aqui-va-el-enlace-copiadoy dar ENTER; con ésto descarga de la nube a la máquina el código con las instrucciones que generamos anteriormente. - Entrar con
cd nombre-del-proyectoy vamos a inicializar el proyecto con la estructura por defecto del flag -y con la instrucción:npm init -yy dar ENTER; en la consola arroja el package.json por defecto. - Abrimos el editor VSC con
code . - Dentro, creamos la carpeta src y dentro de src se crea el archivo index.js
- También creamos la carpeta assets (estará todo nuestro código de JS) dentro de la carpeta src, en la ruta
src/assetsse crea el archivo main.js - Vamos al enlace de github del profesor donde tiene una estructura de una landing (con la cabecera <head>, el cuerpo <body>, etc), lo copiamos y vamos a index.html y lo pegamos.
- Por lo general cuando pegamos en un archivo en VSC, queda mal la indentación, para arreglarlo automáticamente, seleccionar todo el código, dar click derecho y seleccionar
Format Selectiono con el shortcut:Ctrl + K Ctrl + F - Podemos correr el index.html con Live Server (click derecho al nombre del archivo y seleccionar Live Server), para ello debemos tener instalado la extensión: para instalarlo →
Ctrl + Py pegar:ext install ritwickdey.LiveServery dar ENTER (Fuente: aquí)
.
🎨 Herramientas que podemos usar para modificar la apariencia de la página:
.
- Buscar imágenes para fondo gratuitas: https://pixabay.com/es/
- Buscar iconos gratuitos: https://icon-icons.com/es/
- Buscar paletas de colores: https://htmlcolorcodes.com/es/
- Agregar efecto de gradiente a los fondos de colores: https://cssgradient.io/
- Cambiar el tipo de fuente: https://fonts.google.com/
- Convertir una imagen a formato svg: https://picsvg.com/es/
en cuanto dijo Landing page de YouTube, no desaproveche la oportunidad de dedicarle un memorial a Programación ATS ❤️ para muchos de aqui, sus inicios en la programación como es mi caso ❤️ un grande, descanse en paz Alejandro Taboada 💖
Consumir api es mi pasion, JAJAJAJA
god Itachi on the way
por ahora asi va mi proyecto
PD: Como le hicieron para tomar la imagen completa?
Decidí crear un pequeño homenaje a Studio Ghibli.
La iré trabajando a lo largo del reto.
Despues de estar renegando con Tailwind, decidi hacerla una Landing con HTML Y CSS, mas adelante cursare Tailwind
Quise hacerlo sobre esta obra de arte que saldrá muy pronto 😄
Yo recomiendo muchísimo aprender Tailwind 💚
Es un framework muy fácil de aprender y de implementar, puedes estilizar sitios web de forma rápida y divertida usando sus clases predefinidas
Este es el primer proyecto que hice en Tailwind para aprender y sí que aprendí y me divertí también 😅
https://saveafox-aloydev.netlify.app
Asi quedo mi proyecto
Justo me agarraron en temporada de lol Worlds 2022 asique lo usé de inspiración jajaja. Asique por aca les dejo como va quedando mi landing:
Falta mejorarlo, pero ahí va!
Así va mi proyecto hasta el momento
chic@s disculpen por la foto es que fue la mejor foto que encontre del man esta es la mas seria
Así va mi landing
Mi proyecto del curso lo voy a realizar para honrar la primera persona que me inspiro a dar los primeros pasos en este maravilloso mundo de la programación y hoy no se encuentra con nosotros. Un abrazo en la eternidad Alejandro.
Me veo los cursos para mantenerme actualizado en js y con Oscar como uno de mis profesores he logrado hacer mi personal page y aquí se las dejo, si quieren echarle un ojo👀
👇🏾👇🏾
https://www.yeyo.dev/
👆🏾👆🏾
Cacharreandole al css de tailwind
Mi proyecto, una landing-page para Taylor Swift usando la API de Spotify.
Yo agregué un video, en lugar de una foto.
Les dejo mi página: https://www.youtube.com/watch?v=QncqtqBTkzc
Probando con la Beidou💜
Realice mi propia template para personalizar
Empezando el proyecto
Así vamos de momento 💪🏽, decidí hacer un landing page de un restaurante de videojuegos con estetica de “Pixel Art”.
Aquí pueden ver el repositorio en GitHub 💚
En el contexto de npm (Node Package Manager), el parámetro “-y” utilizado en el comando “npm init -y” se refiere a “yes” (sí en inglés).
.
Cuando ejecutas “npm init -y”, estás inicializando un nuevo proyecto de npm y le estás diciendo a npm que acepte automáticamente todas las opciones predeterminadas durante el proceso de inicialización, sin pedir ninguna confirmación adicional. En otras palabras, estás aceptando todas las configuraciones predeterminadas sin tener que proporcionar ninguna entrada manual.
.
Usar el parámetro “-y” es útil cuando deseas crear rápidamente un proyecto npm con todas las opciones predeterminadas y no necesitas personalizar ninguna configuración en ese momento. Ahorra tiempo al omitir la interacción manual durante el proceso de inicialización.
Inspirado en el aporte de Maria 😃
si quieren añadir su repositorio remoto a una fuente existente lo pueden hacer con
git remote add origin URL_REPOSITORIO
Ejemplo
git remote add origin [email protected]:kevinmoreno21/async-landing.git
y si obtienen el error “refusing to merge unrelated histories” en un merge, pueden usar
git pull origin main --allow-unrelated-histories
Reto completado:
.
.
.
.
.
.
.
Aunque no manejo todavía tailwind me gustaría hacerle unos cambios al layout general, para que se amolde un poco más al estilo del lo-fi, que es el motivo de mi proyecto.
Bueno asi va, se modificaron los logos de contact y se puso el primero hacia mi paina github, abajo dejo link de mi repo si desean usar alguno de los logos, estan en formato svg.
GITHUB Pages: https://eolunas.github.io/Async-landing/src/index.html
GITHUB Repo: https://github.com/eolunas/ASYNCHRONY-COURSE
Dejo por aquí mi landing 😄 aunque no tengo canal de youtube … Así tendré que empezar a hacer videos XD
No es mucho pero es trabajo honesto 😀
Les dejo el link a la extension Live Server por si alguno aún no la tiene instalada!
Yo he hecho el curso de Git y GitHub y empecé reacio a hacerlo. No creía que fuera interesante y que no hacia falta… que iluso yo.
Saber jugar con la terminal y saber los comandos es como un superpoder. Os recomiendo encarecidamente que lo hagan, una maravilla saber todo lo que puede hacer la terminal, Git y GitHub.
la extensión para que los espacios se vean de colores se llama indent-rainbow
Aqui dejo como me quedo la parte visual de la landing page :>!
Puse a mi perro jajaj
jajaj me asuste … pense que el jd del avatar era por mi nombre
Mi landing page
Yo lo hice de La Casa Azul (una banda) 😄
Waos
No sé Tailwind aún, por lo que me propuse crear el mismo template desde cero usando css puro y este fue mi resultado:
Preguntarán cómo hice el corte en la imagen con puro CSS. Pues aquí la respuesta:
https://www.youtube.com/watch?v=2iqmJ3htzTg
Página de la propiedad clip-path
https://bennettfeely.com/clippy/
Espero que les haya ayudado.
Música 🎶
Me es un placer presentarles el mejor canal sobre análisis deportivo (futbol):
💙💙 Barak Fever 💙💙
Podrían actualizar la sección de recursos? no hay ningún link
- No quise usar tailwind.
- Quise hacerla desde cero
- Y no le quise invertir mucho. 🙃
eu hola queres hacer el comando" npm init -y " en tu terminal y te salta una error de version ? si sos como yo y llegaste hasta aca pero tenes ese problema ok anda a tu terminal de wsl y escribi " node -v" (te salta la version 10 y pico?) bueno hace directamente “nvm install node” y volve a consultar con “node -v” deberia aparecerte la version 19 y pico si te funciono dejamelo saber a mi gpt3 me salvo la salud mental usalo
SImple pero trabajo honesto!
Mi landing por el momento:
Tengo entendio que por lo general se utiliza la carpeta “assets” para media files, y se crea una carpeta llamada “js” y otra llamada “css” para almacenar los archivos correspondientes.
My Version
Hola! por aquí dejo los cambios que hice
Para los que quieran modficar o quitar el borde inclinado, es un poligono creado con un elemento html <polygon/> (línea 16 del archivo html), por medio de coordenadas absolutas.
Mayor explicación en la documentación oficial: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon
Algo así va quedando 😄
npm init -y para crear el package.json y el -y para que agregue los datos automaticamente y luego podemos cambiarlos.
Si se pudo 😂😂😂.
¡hola coders!
Esta es mi página alusiva a la cartografía mi primera carrera, lo realicé con unas interacciones, pero acá no se pueden subir GIF espero terminar el curso y pasar el link para que lo vean saludos coders.
Siempre un honor hablar de Ica:’)
Les comparto mi landing
ya habia creado el template para mi landing page, pero todavia falta bastante lo que mas tiempo me llevo fue pensar el diseño, hacer que sea responsive con hamburguer menu, pero por el curso voy a seguir con el template de github.
Así quedó el mio.
Lo de Full Stack va en camino jaja
Me quedó genial!
asi me va quedando la landing 🥵
no supe como cambiarle el fondo :'v
Asi vamos…
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.