No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Proyecto del curso

20/26
Recursos

Aportes 99

Preguntas 9

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Un homenaje a mi mascota que fallecio hace algunos dias.
****

馃洜锔 饾棖饾椆饾棶饾榾饾棽 #饾煭饾煶: 饾棧饾椏饾椉饾槅饾棽饾棸饾榿饾椉 饾棻饾棽饾椆 饾棸饾槀饾椏饾榾饾椉 饾煭饾煶/饾煯饾煭 馃洜锔
.
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铆.)
    .
  • Git es el sistema de control de versiones que permite llevar un control de todos los cambios a lo largo del tiempo de nuestros proyectos.
    .
  • Github es una plataforma de desarrollo colaborativo que permite subir nuestros repositorios de Git a la nube.
    .

馃敤 Continuando con el proyecto:
.

  1. Crear un repositorio para agregar todos los recursos, se manejar谩 plantillas html, css, JS y API de preferencia.
  2. Entrar a https://github.com/ e iniciar sesi贸n y dar en el bot贸n verde para crear nuevo proyecto.
  3. En Repository name indicar el nombre del proyecto. En Description (optional) una descripci贸n del proyecto.
  4. 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.
  5. Seleccionar un template en .gitignore y escoger Node.
  6. En la licencia colocar MIT. Dar click en el bot贸n verde para crear el repositorio.
  7. 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 + T posicionarnos donde queremos que est茅 el proyecto y escribir: git clone aqui-va-el-enlace-copiado y dar ENTER; con 茅sto descarga de la nube a la m谩quina el c贸digo con las instrucciones que generamos anteriormente.
  8. Entrar con cd nombre-del-proyecto y vamos a inicializar el proyecto con la estructura por defecto del flag -y con la instrucci贸n: npm init -y y dar ENTER; en la consola arroja el package.json por defecto.
  9. Abrimos el editor VSC con code .
  10. Dentro, creamos la carpeta src y dentro de src se crea el archivo index.js
  11. Tambi茅n creamos la carpeta assets (estar谩 todo nuestro c贸digo de JS) dentro de la carpeta src, en la ruta src/assets se crea el archivo main.js
  12. 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.
  13. 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 Selection o con el shortcut: Ctrl + K Ctrl + F
  14. 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 + P y pegar: ext install ritwickdey.LiveServer y dar ENTER (Fuente: aqu铆)
    .

馃帹 Herramientas que podemos usar para modificar la apariencia de la p谩gina:
.

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

xD

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

Realic茅 un Hall Of Fame con la Pok茅API

https://edwinsacrecinos.github.io/hall_of_fame_js-demo/

馃槃

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

.

Mi repositorio: Click aqui

Mi landing publicada en Github pages: Click aqui

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/
馃憜馃従馃憜馃従

Si quieren hacer algo un poco diferente les recomiendo por ejemplo la API de Rick y Morty, es muy f谩cil de usar.
La pueden encontrar aqu铆:

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 鈥淧ixel Art鈥.

Aqu铆 pueden ver el repositorio en GitHub 馃挌

En el contexto de npm (Node Package Manager), el par谩metro 鈥-y鈥 utilizado en el comando 鈥渘pm init -y鈥 se refiere a 鈥測es鈥 (s铆 en ingl茅s).
.
Cuando ejecutas 鈥渘pm 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 鈥渞efusing 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 鈥渘vm install node鈥 y volve a consultar con 鈥渘ode -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 鈥渁ssets鈥 para media files, y se crea una carpeta llamada 鈥渏s鈥 y otra llamada 鈥渃ss鈥 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.

CAMPERO DE WARZONE DETECTED

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鈥