Crea tu Landing #3

Summary

En este video, el creador enseña cómo crear una landing page atractiva utilizando un archivo llamado 'landing page'. Explica cómo buscar y seleccionar una plantilla de landing page en línea, realizar pruebas de seguridad y verificar licencias. Además, se muestra cómo descargar, extraer y modificar el archivo en Visual Studio Code, utilizando Live Server para previsualizar cambios. Finalmente, se explica el proceso de subir la landing page a un hosting y cómo personalizarla con un dominio propio.

Takeaways

• 🌐 Se va a crear una landing page para un portafolio personal utilizando un archivo existente llamado 'landing page'.
• 🔍 Se busca inspiración en Google con términos como 'landing page', 'portafolio online', 'html' y 'css' para encontrar una plantilla adecuada.
• 📝 Se enfatiza la importancia de probar todos los proyectos descargados para asegurar su calidad y funcionamiento.
• 🎯 Se selecciona un proyecto específico por su apariencia y funcionalidades, el cual incluye una presentación y un formulario.
• 📂 Se explica el proceso de descarga del archivo, verificación de la licencia y extracción del contenido.
• 💻 Se detalla cómo abrir y manipular archivos en Visual Studio Code, incluyendo la instalación de extensiones como 'Live Server'.
• 🔄 Se menciona la necesidad de mover archivos a una carpeta específica para mantener la estructura del proyecto y facilitar futuras subidas al repositorio.
• 📁 Se aborda el tema de la subida de proyectos a un hosting, utilizando 'vsel' como ejemplo de plataforma de hosting.
• 🔗 Se destaca la facilidad de vincular un dominio personalizado al proyecto subido para mejorar la presentación del portafolio.
• 🛠️ Se sugiere realizar cambios y personalizaciones en el código HTML y CSS para adaptar la landing page a las necesidades específicas de cada usuario.

Q & A

¿Qué herramienta se utiliza para crear la landing page descrita en el guion?

Se utiliza Visual Studio Code para crear y editar la landing page.

¿Cuál es el nombre del archivo que contiene la landing page?

El nombre del archivo es 'global Master'.

¿Dónde se pueden encontrar plantillas de landing pages para portafolios?

Se pueden encontrar plantillas en Google, buscando 'landing page portafolio online html y css'.

¿Qué tipo de licencia tiene el archivo descargado?

El archivo tiene una licencia MIT, lo que significa que se puede reutilizar.

¿Cómo se verifica si el archivo descargado es seguro?

Se utiliza un antivirus para verificar la seguridad del archivo descargado.

¿Qué significa 'hacer un test' en el contexto del guion?

Hacer un test significa verificar si el archivo cumple con las condiciones de seguridad y funcionamiento adecuado antes de utilizarlo.

¿Qué significa 'Push' en el contexto de la descripción del trabajo con la landing page?

Hacer 'Push' significa subir los cambios realizados en los archivos de la landing page a un repositorio remoto.

¿Qué es VSEL y para qué se utiliza en el guion?

VSEL es un hosting donde se suben proyectos web, se utiliza para alojar y publicar la landing page en internet.

¿Cómo se puede personalizar la landing page según el guion?

Se pueden hacer modificaciones directamente en el código HTML y CSS para personalizar la landing page según las necesidades.

¿Qué es 'Live Server' y cómo se instala en Visual Studio Code?

Live Server es una extensión de Visual Studio Code que inicia un servidor web para la預visualización de proyectos web en vivo. Se instala desde la tienda de extensiones de Visual Studio Code.

¿Cómo se soluciona el error de conexión a un repositorio remoto en el guion?

Se soluciona verificando que las credenciales de conexión sean correctas y que no haya errores en la configuración del repositorio.

Outlines

00:00

🌐 Creación de una Landing Page

El video comienza explicando cómo crear una landing page utilizando un archivo llamado 'landing page'. Se menciona haber trabajado previamente en un video de instalaciones para crear 'portafolio uno'. Se sugiere buscar en Google 'landing page, portafolio online html y css' para encontrar una plantilla adecuada. Se elige una plantilla de free cs, se hace un test de virus y se verifica que cumpla con las condiciones de reutilización y que esté en HTML5. Se procede a descargar el archivo, que incluye una licencia MIT, y se extrae en la carpeta de descargas. Se detalla cómo abrir el archivo en Visual Studio Code y cómo mover los archivos necesarios a una carpeta llamada 'portafolio uno'. Se habla de la necesidad de tener todos los archivos en el repositorio para poder hacer un 'push'. Se menciona la instalación del 'live server' en Visual Studio Code para probar la página web. Finalmente, se habla de la estructura de la landing page y cómo se puede personalizar para mostrar información como una foto y una solicitud.

05:01

🚀 Proceso de Subida de la Landing Page

El segundo párrafo trata sobre cómo subir la landing page a un hosting. Se menciona que el código es HTML puro y se procede a subirlo directamente a 'vsel', un hosting que permite subir proyectos desde un repositorio. Se explica que primero se debe hacer un 'commit' y luego un 'push' para subir el proyecto a un repositorio personal. Se detalla cómo solucionar errores comunes, como problemas con la autenticación o la falta de 'push'. Se menciona la importancia de mantener el proyecto privado y cómo vincular un dominio personalizado. Se habla de la facilidad de hacer 'deploy' de un proyecto HTML y cómo se puede ver el proyecto en línea. Se sugiere que cada semana se seleccionará una persona al azar para personalizar la landing page según sus necesidades. Se concluye con la idea de hacer cambios y subir la landing page para que otros puedan verla y se invita a explorar los cambios y a aprender cómo editar cada parte de la página.

Keywords

💡Landing Page

Una 'Landing Page' es una página web que se utiliza generalmente como punto de entrada para visitantes desde un enlace de otro sitio web, un anuncio de redes sociales o un correo electrónico. En el vídeo, se menciona la creación de una landing page para presentar un portafolio, lo que indica que su función es mostrar información relevante y atraer a los visitantes hacia un objetivo específico, como solicitar más información o contactar al propietario del portafolio.

💡Portafolio

Un 'Portafolio' es una colección de proyectos o trabajos que muestra las habilidades y el historial de alguien en un área específica, como diseño gráfico, desarrollo de software o fotografía. En el guion, el portafolio se menciona como el contenido principal de la landing page, lo que sugiere que el objetivo de la página es demostrar las capacidades y el trabajo anterior del creador.

💡HTML

HTML, o lenguaje de marcado de hipertexto, es el código básico que se utiliza para estructurar y diseñar páginas web. En el vídeo, se menciona que la landing page está hecha en HTML, lo que indica que es un documento que define el contenido y la estructura de la página, como texto, imágenes y enlaces.

💡CSS

CSS, o hojas de estilo en cascada, es un lenguaje utilizado para describir la presentación de un documentoWritten en HTML. Aunque en el guion no se menciona directamente, se entiende que CSS se utiliza para dar estilo y formato a la landing page, haciéndola más atractiva y funcional.

💡Google

Google es un motor de búsqueda en línea y también se refiere a la empresa que lo desarrolló. En el vídeo, el presentador utiliza Google para buscar plantillas de landing page y portafolio, lo que muestra cómo Google es una herramienta esencial para encontrar recursos y materiales para proyectos web.

💡Descarga

Descargar implica obtener una copia de un archivo de internet para su uso local. En el guion, se menciona la descarga de un archivo de landing page, lo cual es un paso crucial para comenzar a trabajar con el proyecto y personalizarlo según las necesidades del creador.

💡Visual Studio Code

Visual Studio Code es un editor de código fuente desarrollado por Microsoft. Se menciona en el vídeo como el programa que se utilizará para abrir y editar los archivos de la landing page, lo que indica que es una herramienta popular para desarrolladores web y programadores.

💡Live Server

Live Server es una extensión para Visual Studio Code que permite previsualizar un sitio web en vivo mientras se edita el código. En el vídeo, se sugiere instalar Live Server para probar la landing page, lo que demuestra su utilidad para ver cambios en tiempo real y asegurarse de que la página funcione correctamente.

💡Push

En el contexto de control de versiones de software, 'Push' es una acción que se realiza para enviar los cambios locales做的代码更改到 un repositorio remoto. En el vídeo, el presentador menciona hacer 'Push' de los cambios en el proyecto, lo que indica que está compartiendo su trabajo en un repositorio en línea para su almacenamiento y posiblemente colaboración.

💡VS Code

VS Code es una abreviatura de Visual Studio Code. Se menciona en el guion como el lugar donde se realizará la subida del proyecto a través de un hosting. Esto indica que VS Code no solo se utiliza para editar código, sino también como una plataforma para la implementación de proyectos web.

💡Versel

Versel parece ser un servicio de hosting web mencionado en el vídeo. Se describe como un lugar donde se pueden subir proyectos y se puede vincular un dominio personalizado. Esto sugiere que Versel es una herramienta para publicar sitios web y hacer que estén disponibles en internet.

Highlights

Se comienza la creación de una landing page con un archivo llamado landing page.

Se busca en Google un diseño de landing page y portafolio en HTML y CSS.

Es destacado que se debe probar cada landing page descargada por temas de seguridad.

Se selecciona un diseño de landing page por su apariencia y características.

Se detalla que el diseño seleccionado incluye una licencia MIT, lo que permite su reutilización.

Se menciona que el diseño está hecho en HTML5 y probablemente incluye CSS.

Se explica el proceso de extraer el archivo descargado y su ubicación en la carpeta de descargas.

Se detalla cómo abrir el archivo en Visual Studio Code y cómo ubicar los archivos necesarios.

Se indica la necesidad de mover los archivos dentro de una carpeta específica para el proyecto.

Se describe cómo estructurarse la carpeta del proyecto en Visual Studio Code.

Se menciona la instalación y utilización de Live Server en Visual Studio Code para probar la página web.

Se destaca la facilidad de modificar elementos HTML directamente en el archivo para adaptar el contenido.

Se explica el proceso de subir la landing page a un hosting utilizando VSEL.

Se detalla cómo hacer el primer commit y push del proyecto a un repositorio para su publicación.

Se menciona la importancia de mantener la rama del proyecto en privado para seguridad.

Se indica cómo solucionar errores comunes al subir el proyecto al hosting.

Se explica cómo importar el proyecto a VSEL y configurar el dominio personalizado.

Se menciona la posibilidad de ver los cambios en tiempo real y hacer push para actualizar la página web.

Se concluye con la idea de personalizar y adaptar la landing page según las necesidades de cada proyecto.

Transcripts

Okay ahora vamos a crear nuestra hermosa

landing page ya tenemos un archivo que

se llama landing page y dentro de él

tenemos portafolio uno Eso lo hicimos en

el video de las instalaciones Vamos a

Google y escribimos landing page

portafolio online html y ccs para que

esté dentro de la categoría que sea una

landing page y que sea un portafolio

mayormente yo voy a free cs puedes deir

a otra pero siempre le vamos a hacer un

test a todos los proyectos o landing

page que descarguemos porque hay un test

que hay que hacerle vamos a esta si

quieres ver el proyecto le das a like

demo y aquí puedes ver qué increíble

seleccioné esta porque me gustó bastante

y para jugar con ella y hacer

modificaciones está super cool tiene

tanto la presentación tiene un

formulario y está muy bien aquí le das a

descargar y se descarga el archivo tiene

una licencia Meet esto quiere dar dicho

que la puedes reutilizar es responsi y

está hecha en html 5 Así que no funciona

probablemente tenga css Pero eso lo

vamos a ver más a fondo cuando estemos

trabajando a profundidad con el proyecto

vamos a ver si este proyecto pasa el

test el test es el siguiente virus

total seleccionamos el archivo y aparece

Clean excelente ya este cumple las

condiciones Pero Total no falla Así que

vamos a buscar el archivo ahora que debe

de estar en descargas en mi mi descargas

vamos a buscarlo si no lo veo Déjame ver

dónde está si está en reciente no está

ahí Bueno voy directamente a descarga la

lupa estaba aquí abajo le doy doble

click clic derecho no clic derecho no

Cristo porque mayormente no estamos en

Windows estamos en Mac doble clic y ya

automáticamente ya se extrae aquí me

hizo el saltic es quiere Dear dicho que

ya se ex trajo el documento y se llama

glal Master Aquí está ah míralo Aquí

está seleccionado aquí Tenemos aquí un

archivo Index un Access con todos los

complementos imágenes javascript y css

dec html 5 pero tiene css porque tiene

que tenerlo Entonces qué voy a hacer

abrir visual Studio code y con nuestro

visual Studio cod aquí tengo un proyecto

duro increíble un proyecto increíble

entonces déjame ver lo primero que voy

voy hacer es mover esto porque necesito

tener estos archivo dentro de mi folder

el folder que creamos landing portafolio

ahí porque cuando haga el Push que estén

en todos los archivos dentro de del

archivo que quiero en este caso

portafolio uno cierro esto y voy

directamente a portafolio uno y lo pego

aquí directamente y aquí tenemos global

Master veo que todos los archivos se

hayan migrado correctamente en este caso

se migraron todos vamos a abrir visual

Studio aquí lo que voy a ampliar para

que ustedes lo vean mucho mejor Claro

está voy aquí a Open folder voy a abrir

un folder en este caso no lo que está en

git Porque aquí tengo unos cuantos sio

landing portafolio Open Ah excelente em

global y aquí tengo el archivo completo

mayormente este tipo de landing están

directa ente en html como ya enseñamos a

Instalar live server en la parte de

visual Studio code si no te pasaste o

llegaste aquí directamente instálalo

para que tengas inicializado la página

web a cuestiones de hacer simplemente un

click entonces amplío aquí aquí no me lo

abrió entonces lo que voy a hacer es voy

a acomodar todo esto para que todo esté

en línea esto aquí y esto aquí

nuevamente le voy a dar porque al

parecer no me lo abrió ahora sí me abrió

el proyecto y como podemos ver está

estructurado de la forma que nosotros

queremos aquí tenemos lo que es todo el

proceso Donde está ubicado

directamente y cómo puedes hacer por

ejemplo una request de lo que quieres

Está muy cool esta landing page me gustó

bastante por eso dije Bueno vamos a

utilizarla en el modelo porque llevar a

cabo una landing así presentarla por

ejemplo aquí pones tu foto y todo eso

aquí no voy a abundar tanto porque

quiero abundar en los proyectos que vaya

seleccionando de forma Random cada

semana voy a seleccionar como lo

mencioné a una persona y esa persona la

voy adaptando conforme a esa persona

Entonces qué modificaciones se pueden

hacer por ejemplo

inicio se puede hacer la parte de

trabajos si lo quieres poner al español

directamente va a ir haciendo los

cambios porque esto es html directo aquí

tienes algunas descripciones y todo eso

pero lo más importante que voy a enseñar

ahora es la subida Cómo es la subida

como el proceso de subirlo porque esto

es html puro y

duro más adelante la la adaptaré

completa para que así vean un modelo

completo

adaptado Así que voy a ahora a probar

subirla subirla directamente a muestro

esto también lo voy a poner aquí y voy a

ir directamente a vsel vsel es un como

había explicado anteriormente es un

Hosting donde directamente subimos

nuestro proyecto si tienes un dominio lo

vinculas y directamente está aquí pero

vers por sí solo no va a hacer nada lo

que tienes que hacer es Añadir un nuevo

proyecto ese nuevo proyecto te lo va a

tomar en base a tu repositorio en este

caso criso develop no detecta el

proyecto porque yo no le hce un Push

First

commit o primer commit hago el primer

commit y hago un

Push Proyecto Uno sí efectivamente Hazme

un Push y automáticamente hag el Push lo

que va a hacer es subirlo al repositorio

mío personal Aunque aquí así lo puse kit

this project private o Pon ese proyecto

privado en este caso me gustaría tenerlo

siempre siempre privado para que nadie

y publico esta esta Branch esta rama la

publico F hago un f para refrescar del

origen ya está subido aquí te puede

pasar a ver si tiene otra cuenta Pon el

correo para que no te de este error y

listo así se soluciona solucionando

errores desde

1998 Entonces vamos directamente ahora a

verel y aparece el proyecto que es

portafolio excelente le doy a importar

y directamente aquí tenemos el nombre

del proyecto aquí el framework que

estamos utilizando como no estamos

utilizando ningún framework aquí puede

sub el proyecto santo de reat no

dejs php y hacer varias integraciones

bastante cool con Aquí vamos a darle

editar voy a seleccionar global Master

vo a continuar aquí hay algunas

especificaciones Pero esto sí trabajamos

con nojs Y si tenemos variables de

desarrollo en este caso tenemos algún

deploy y hacer el

deploy automáticamente lo va a hacer

rápido porque esto es simplemente un

código html y si no dio ningún error va

a aparecer la página excelente aquí no

dio ningún error como yo veo la página

tú puedes Añadir un dominio Aquí dándole

aquí y decirle un domain por ejemplo

ponerle el nombre criso tal lo añades y

aquí le pones los es del dominio

entonces voy a proyectos y si quiero ver

mi proyecto voy aquí esta URL la que nos

da versel lo cierro y aquí tienes ya tu

página we a cualquier persona que le vi

este link podrá ver tu proyecto pero es

más cool cuando le ponemos El dominio

Entonces eso lo vamos a hacer con cada

persona que vaya ganando el sorteo

Random Entonces ya estaría suba

ahí podrías ir viendo los cambios

automáticamente le hagas un Push ahora

tocará reformar todo y enseñar Cómo ir

editando cada parte mayormente esto se

repite html css y vamos a ir haciendo

una demostración con este completa yo

soy Cristo de velo y ya ahí tenemos como

quien dice subimos nuestra landing ahora

vamos a jugar con ella