Crea tu Landing #3
Summary
TLDREn 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
🌐 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.
🚀 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.
Mindmap
Keywords
💡Landing Page
💡Portafolio
💡HTML
💡CSS
💡Descarga
💡Visual Studio Code
💡Live Server
💡Push
💡VS Code
💡Versel
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
Weitere ähnliche Videos ansehen
Flet Curso: 5 Crear un Ambiente Virtual como Proyecto para las Librerías y Recursos del Curso
Pasar de canva a photoshop | canva tutorial
AutoCAD 2D 08 Ventanas y Puertas
PyTest: Pruebas Unitarias en Python 🐍 | Unit Tests | Testing Automatizado con Python ✅
CURSO de CSS 2021 Rapido y Facil # 2 | 💻 PRIMEROS PASOS
Cómo Crear un Meme Educativo
5.0 / 5 (0 votes)