Transcripciones
1. 00 Introducción al curso: Si alguna vez quisiste
salir de tu archivo de
diseño y ver cómo tu creación cobra vida en
la web, esto es para ti. Durante este curso, te
mostraré cómo convertir un diseño simple de Figma en
un sitio web en vivo con
la ayuda de Cursor, un asistente de
codificación gratuito con IA Lo mejor de
Cursor es que
básicamente estás teniendo una conversación
con tu editor de código. Puedes preguntar cualquier cosa,
y el cursor no solo te
ayudará sino que también
te explicará cómo construirlo. Es como tener un desarrollador
súper paciente sentado a tu lado. Construiremos nuestro
primer sitio web usando CSS
HGML y un
poco de JavaScript,
aprendiendo los fundamentos, editando tu diseño y finalmente publicando un sitio web
real Llevaremos tu
diseño de un archivo a un sitio en vivo en
menos de una hora. Este curso es para ti
si eres diseñador de UI, buscando romper la
barrera de la codificación
y comenzar a construir
tus propias ideas. No necesita experiencia en codificación, solo una disposición para
probar algo nuevo. Este es un curso de
moonlearning dot IO.
2. 01 Qué es el cursor: Cursor es un asistente de
codificación impulsado por IA que te ayuda a
construir rápidamente proyectos increíbles, casi como tener una conversación
con tu editor de código. Tanto si eres
principiante como si tienes experiencia, el cursor hace que la codificación sea más rápida
e intuitiva, lo que te permite crear cosas
increíbles en poco tiempo. Entonces, ¿por qué el cursor es tan genial para que ustedes
los diseñadores comiencen? Te permite ir
más allá de solo diseñar y construir productos completos.
¿Cómo funciona? Puedes describir lo que
quieres en el lenguaje cotidiano, y la maldición voy a
crear el código para ti y sugerir
dónde colocarlo. Puedes preguntarle cualquier cosa literalmente, desde cómo
puedo comenzar a construir un sitio web hasta agreguemos una sección de letreros y formularios o simplemente ajustando el diseño
durante el proyecto. Al igual que, ajustemos
el color
del botón del azul a nuestro negro variable. Pero Cursor también va
más allá del editor de código. Entonces puedes preguntarlo, por ejemplo, ¿cómo puedo
convertir esto en base de datos? ¿O cómo puedo empezar
con las bases de datos? ¿Qué hay? ¿Qué tengo que buscar? ¿Y cómo puedo conectar estas cosas? Te guiará paso a paso. Como Cursor más bien explica
que tomar el control, permaneces en control y la
curva de aprendizaje es increíble. Una vez que estés listo para
escribir tu propio código, Cursor AI puede
ayudarte a encontrar y corregir errores o a ordenar tus
archivos usando las mejores prácticas. Cursor no es solo
otra herramienta de IA. Es una de las herramientas más útiles y empoderadoras
del mercado en este momento, lo que le permite
ir más allá de los archivos de diseño y construir realmente sus
productos como diseñador.
3. 02 Qué construiremos: Durante este curso,
vamos a configurar un sitio web de
un buscapersonas totalmente receptivo desde cero con código Como base, estoy usando un diseño Figma que
configuré anteriormente Pero tenga en cuenta que para
poder usar Kersey, no
necesita ningún conocimiento de
Figma. No necesitas un archivo Figma. También podrías simplemente trabajar a partir de un boceto o de una
idea en tu cabeza. Personalmente, me
gusta mucho configurar mi diseño en un
software de diseño de interfaz de usuario de antemano. Puedo mover las cosas libremente. Puedo pensar a través de
componentes y jerarquía, y luego saltar a la codificación. Sin embargo, esto depende
completamente de usted.
4. 03 Material de trabajo: Salta a descargas y aquí
encontrarás archivos para cada uno de
los cursos de aprendizaje de Mu, y también encontrarás una
descarga para este curso. Asegúrate de descargar
el material del curso. En el interior, vas a encontrar diferentes archivos de cursor para los diferentes pasos en los que
vamos a estar trabajando. Durante el curso, quiero
mostrarte cómo abrirlos, y también encuentras
el diseño aquí. Si haces clic en el diseño, vas a obtener una
visión general en PDF de nuestro diseño, y esto solo te da una idea del código hexadecimal de los colores. Puedes copiar
el texto y simplemente seguirlo y ver qué
vamos a construir. Si no tienes
Figma, entonces esto está absolutamente bien
como referencia Si tienes una cuenta de
Figma y prefieres tener el archivo FGma
original, entonces solo tienes que copiar este enlace y pegarlo en tu
navegador y
va a crear una copia del archivo
Figma original Por favor, no haga clic en él
realmente copiar y pegar.
5. 04 html y css básicos: Una guía súper rápida y fácil para principiantes
totales sobre los conceptos básicos de HTML y CSS y cómo trabajan juntos
para construir un sitio web. Un sitio web se
compone principalmente de HTML. Si haces clic derecho en una página web en tu navegador, por ejemplo, en Chrome y seleccionas Inspeccionar, abrirás las herramientas del
desarrollador. Esto te permite ver
la estructura HTML de la página que estás viendo
actualmente, e incluso puedes cambiarla
temporalmente para experimentar. No te preocupes. Estos cambios solo están en tu navegador y
desaparecerán una vez que te refresques. El código HTML consiste en caracteres encerrados
con corchetes angulares, conocidos como los elementos HTML. La mayoría de los elementos se
componen de dos etiquetas, una etiqueta de apertura
y una etiqueta de cierre. La etiqueta de cierre es similar
a la etiqueta de apertura, pero incluye una diagonal
adicional antes del nombre del elemento La etiqueta define un
tipo de contenido. Por ejemplo, la etiqueta P le dice al navegador que muestre el contenido incluido
como un párrafo. Las etiquetas en sí no
se muestran. La
etiqueta H uno a H seis, por ejemplo, ofrecen diferentes rubros
en diferentes niveles de importancia
siendo la edad uno la más alta y
H seis la más baja También podemos agregar atributos
a una tecnología que proporcionan información
adicional,
como usar un atributo de clase
para aplicar estilos. Te contaré más
sobre eso en un minuto. También hay
elementos de cierre automático como la etiqueta de imagen, que extrae el
contenido, en nuestro caso, la imagen a través del
atributo llamado source. Pero, ¿cómo podemos configurar una
página completa con estos elementos? Bueno, la estructura más
básica de una página HMR
consiste en un elemento HML, que contiene la sección de cabeza
y cuerpo El encabezado contiene
información para el navegador, que no son visibles,
como el título de la página. Entonces ese es el pequeño nombre que ves en la pestaña de
tu navegador, alguna meta descripción
para los motores de búsqueda, y también puedes vincular
hojas de estilo y fuentes y así sucesivamente. La sección del cuerpo contiene todo lo que
aparece en la página. Entonces tu texto, tus imágenes,
botones, todo lo que diseñas. Aquí tienes una lista de las etiquetas
más comunes que te pueden resultar útiles. Puedes tomar una captura de pantalla. Por lo general, la página de inicio de un sitio web se llama Index HTML por convención. También puedes crear subpáginas como una página Acerca de o proyectos. Para enlazar a esas subpáginas, puedes usar la etiqueta ancla, A. Esto crea un enlace en el que se puede hacer clic que puedes colocar en
cualquier parte de tu página También puedes enlazar a sitios web
externos fuera de tu página. Sin embargo, si abres
una página HTML pura, notarás que mientras
el contenido está ahí, no
se ve muy bien. Ahí es donde entra CSS. Mientras HGML controla el
contenido de tu página, CSS controla la apariencia de tus elementos HTML como colores,
fuentes, espaciado y diseño Para conectar tu
archivo CSS a tu archivo HTML, agregas un enlace a él
en la sección head. Ahora, imagina tus
elementos HTML como cajas invisibles. CSS permite crear
reglas que controlan cómo se ve y se comporta cada caja y su
contenido. Una regla CSS consta de dos partes
principales, un selector, que apunta a uno o
más elementos en HML, y una declaración que define cómo se
deben diseñar estos elementos. La declaración en sí está
compuesta por una propiedad
como color y un valor
correspondiente como un código hx para el color Puede agregar múltiples
declaraciones dentro de los corchetes, y también puede combinar varios selectores para aplicar el mismo estilo a
varios elementos En CSS, los selectores pueden
apuntar a etiquetas simples, pero a menudo verás
clases usadas en su lugar Las clases se asignan dentro de
la etiqueta HTML y luego se hace referencia en CSS simplemente
agregando un punto antes del nombre. Las clases son más flexibles
y reutilizables ya que
se pueden aplicar a diferentes elementos
para lograr un estilo consistente. Hay más formas de
usar lets in CSS. pena conocer el selector
universal, que es un signo de estrella y
apunta a toda la página. También tenemos IDs, y se les asigna
prácticamente como clases en HML, y luego se les llama en CSS
poniendo una etiqueta hash
antes del nombre Sin embargo, los ID
solo deben usarse para diseñar un
elemento específico, no múltiples. Si bien puedes usarlos en CSS, normalmente se usan en JavaScript para un comportamiento dinámico. También puede ver
selectores que apuntan elementos anidados dentro de
otros Por ejemplo, este
solo apunta un elemento de párrafo dentro de
la clase llamado sale. Una cosa importante
que hay que saber sobre CSS es que está en cascada Esto significa que si aplicas varios estilos al mismo elemento, el último tendrá prioridad. Por ejemplo, si estableces el color en azul y
luego en rojo, el texto mostrará rojo porque la última
regla tiene prioridad. Aquí hay una lista de los selectores CSS más
comunes. Es posible que desee capturarlo.
6. 05 Configuración de una estructura de archivos: Para comenzar, simplemente vaya a cursor.com y luego inicie sesión para una cuenta gratuita y
asegúrese de
descargar la
versión de escritorio de Cuando abres Cursor
por primera vez, probablemente
vas a
ver algo como esto, o te van a preguntar si quieres usar una terminal. Vamos a mantenernos
alejados de la terminal. Vamos a mantenerlo súper,
súper simple para principiantes
absolutos, y solo vamos
a trabajar con carpetas. Así que solo abre una carpeta
como siempre lo harías. En mi caso,
voy a crear uno, y lo voy a
llamar cliché Café Haga clic en Crear, y
ahora simplemente haga clic en Abrir. Luego verás el espacio de trabajo, y aquí es donde luego vivirá todo nuestro
código. Entonces en el lado izquierdo, ve la carpeta que
acabamos de crear. En caso de que veas algo más, simplemente da click
un poco aquí. También puedes intentar abrir
una carpeta desde el menú. Puedes alternar este menú por Comando y B en caso de
que no lo veas. Y también queremos otro
menú muy importante porque queremos nuestro chatbot
aquí en el lado derecho Entonces voy a hacer
esto con el menú. Voy a ver. Y luego aquí arriba,
puedo ver apariencia, y aquí ves esta es
tu barra lateral primaria, la de la izquierda, y luego
quiero la de la derecha, entonces la secundaria,
también podemos usar el atajo
que aquí nos dan. Entonces también puedes alternar esto
con Option Command y B, en mi caso, en un Mac. Si quieres
atajos a cuatro Windows, simplemente haz clic en aquí y te
va a mostrar. Simplemente puedes ponerte en
marcha ahora y podrías decirle a la IA lo que quieres construir y lo
configurará para ti. Pero prefiero configurar mi
propia estructura de archivos primero, y luego voy
a hablar con la IA y agregar todo mi contenido
y todo mi diseño. Entonces voy a dar click en mi
carpeta y luego aquí
puedes ver que puedo agregar un archivo
o puedo agregar una nueva carpeta. Voy a agregar tres expedientes. El primero se
llama índice HTML, y eso es muy
importante que lo nombras exactamente así. Después al segundo
voy a llamar Styles CSS, y luego voy a tener un
tercero para después tal vez, que voy a
llamar script JS. Para su comprensión,
el archivo HTML, aquí
es donde va el contenido de la
página, y proporciona
estructura y significado. Además, un archivo HTML
respondería a una página que
ves cuando abres una ventana del navegador. El archivo CSS,
aquí es donde
se controla el diseño de la página. CSS maneja todo el
estilo y arreglo. En el archivo JavaScript, aquí
es donde se establece el comportamiento de la
página, haciéndola responder a
lo que hagan los usuarios. Entonces cosas como un
clic o una entrada. Lo cual va a
mantenerlo muy sencillo. Tener un HTML, un CSS y otro JavaScript, pero
obviamente puedes tener múltiples
de estos archivos. Lo único que
debes considerar es que el HGML siempre debes
comenzar con un índice HTML, y luego puedes tener
subpáginas nombradas Lo bueno es que, si no
sabes nada, solo
vas a
preguntarle a tu amiguito aquí, nuestro chatbot de IA Entonces, por ejemplo, digamos, ¿qué hace el índice HTML? Y así que realmente ve esto como tu asistente con el que estás
constantemente hablando. Es como un desarrollador súper
amigable que se va a sentar a tu lado, y cualquier duda
que tengas, puedes hacerla. Y por cierto, si no
entiendes nada, solo hazlo saber. Entonces, por ejemplo,
no entiendo. Soy un principiante total,
y luego te
dará una
versión adecuada para que la entiendas. Y es lo mismo
si las cosas se rompen o hay un error o
algo no funciona. Háblale, como hablarías con una persona, como si
hubiera un error. No sabía por qué sucedió. Voy a añadir una última cosa. Entonces en mi carpeta principal, voy a agregar
otra subcarpeta, así que no queremos archivar Queremos una nueva carpeta y voy a llamar a
esta imagenes. Y esto actualmente está vacío.
7. 06 Usar carpetas y temas existentes: Puedes o simplemente trabajar
a mi lado y simplemente
configurar toda tu propia estructura
y todo tu propio código, o también puedes, especialmente
si alguna vez te pierdes, abrir algunas
carpetas preestablecidas que hice para ti. Así que asegúrate de
descargar el material del curso, y luego en el material del curso, vas a encontrar
algunas carpetas listas para usar. Por cierto, el nombre y la cantidad de carpetas
aquí podrían cambiar. Pero digamos
que quieres
saltar a la
estructura de archivos que hice, luego toma el
primero aquí, ábrelo. Y entonces verán aquí
mi trabajo anterior. Una vez que vamos a empezar a
agregar código en un minuto, verás que el mío se ve
más o menos así. Así que puedes ver que aquí está pasando un
color muy bonito . Es posible que inicialmente
veas una configuración diferente, y este es el
tema de color de tu editor. Si quieres cambiar eso, simplemente haz clic en el cursor
aquí arriba en el menú, luego haz clic en configuración
y busca tema. Y justo aquí en tema, puedes elegir cualquier tema. Estoy usando Monochai que es una forma
bastante popular de
ver esto, pero cualquier otra que también puedas usar, realmente solo
cambia el color Entonces déjame
darte un ejemplo cómo se
vería de otra manera. Así que haz clic en la configuración del cursor, tema y solo elige el
tema y solo elige el que te sientas
cómodo con. Una pequeña nota al margen
antes de saltar. Estamos trabajando con IA,
así que estamos hablando con ella, e incluso si decimos cosas
iguales o similares, probablemente no vamos a obtener exactamente el mismo código y
exactamente la misma redacción. Eso está absolutamente bien. La parte importante es que
empieces a entender cómo trabajar con cursor y cómo
construir tus propios productos. No se trata de imitar al 100% lo que estoy haciendo
en la pantalla Y muy importante, las cosas
se van a romper, las cosas van a salir mal. Confía en mí. No se trata
de hacerlo perfecto. Se trata de entender
cómo solucionarlo y también cómo usar el cursor
para ayudarte a arreglarlo.
8. 07 Configuración de nuestro contenido con HTML y cursor: Entonces agreguemos algo de contenido. Primero asegurémonos de que
tenemos nuestra charla por aquí. Así que recuerda, vamos
a ver la apariencia, y luego a la barra lateral secundaria
o usamos un atajo. Ahora lo que
queremos construir es una página de café de un buscapersonas Así que he creado un diseño muy
rápido aquí, bastante rudo con Figma. Y muy importante,
no necesitas usar Figma. Podrías hablar con Cursor y construir esto
de tu cabeza. Podrías tener un pequeño
garabato en un papel, básicamente, o usar
cualquier otro software Así que en realidad solo estoy usando
esto como ejemplo. No necesitas
configurarlo así en absoluto. Echemos un vistazo porque
vamos a ir paso a paso. Entonces aquí tenemos diferentes
secciones como un héroe, un menú, aquí abajo, la Futa Y se puede ver
que lo que hice es, tengo un poco de
jerarquía aquí. Otra vez, realmente no lo necesitas. Apenas ya lo edité. Para que veas que en el
héroe, tenemos uno H. Esta es una etiqueta HGML. Si no estás familiarizado
con él, no te preocupes. En la vida real, esto probablemente también
estaría usando
nombres más semánticos como este, pero queremos que
sea realmente simple Y luego tengo diferente
jerarquía, g uno, g cuatro, y algún texto copiado para el héroe y una
imagen y el menú. Empecemos con esto. Lo que básicamente vamos
a hacer es decirle a Cursor exactamente lo que
queremos construir y
la forma en que lo vemos. Por cierto, a veces
es posible que encuentres un pequeño archivo adjunto
aquí por defecto. Por ahora quítate esto porque lo que queremos que haga
el cursor es que
queremos que use la
estructura que ya
configuramos y
voy a contársela. Voy a decir usar mi estructura de archivos dentro de
Next HGML y estilo CSS Quiero construir un sitio web de
una página para un café llamado cliché Cafe Entonces sólo voy a darte
un ejemplo de lo que escribí. Voy a
acelerar esto y leértelo,
así que no esperes que
puedas escribir a lo largo. Lo que puedes hacer es simplemente
detener el video y luego escribir lo mismo o simplemente
hacer tu propio texto. No significa que el
mío sea mejor, y no vamos a obtener la misma salida
probablemente de todos modos Te voy a leer el texto, y por cierto, no
le importa si
tienes erráticos fantásticos Así que haz una primera
sección llamada héroe. Esto es medio texto a la izquierda y mitad
imagen a la derecha. El texto es como H uno, cliché Café, luego
debajo del nombre de la calle La ciudad en los cuatro años y
por debajo de eso en texto copiado, usa P. Esa es una etiqueta para
texto de copia, los horarios de apertura. Hacer una segunda
sección llamada menú, y aquí quiero agregar el menú, que es cuatro bebidas y
cuatro opciones de comida todas
conteniendo un nombre, que es copiar texto en negrita, luego abajo descripción
de la comida en copia, y simplemente P normal, y
por debajo de eso el precio. Al final, agrega un pie de página
con los datos de contacto. Vamos a golpear Enter. Bien, genial, echemos un vistazo a lo que tenemos. De nuevo, esto probablemente
será muy diferente para tu generación a la
que tengo aquí. Para que puedas ver, aquí tienes una estructura simple
de tu buscapersonas calientes Y antes que nada,
tenemos el índice HTML, y luego más abajo aquí nos
está dando algo de CSS. Entonces, si quieres
agregar el índice HTML, asegúrate de estar
en el archivo HML de índice Y luego si pasas el cursor sobre él, ves un pequeño botón de aplicar, da clic en Continuar, y ahora
va a generar todo
este código para ti Por ahora, sólo
vamos a hacer clic en Aceptar. Se puede ver aquí
hay una cabeza. Esto no se va a mostrar. Esta es solo una información general
sobre esta página y ya está aquí tirando
de nuestro estilo CSS. Es hacer referencia a este archivo
CSS por aquí. Aquí está el cuerpo, todo lo
que hay en el body tech, se
puede ver esto es lo que
más tarde vamos a ver mostrado. Ahora asegúrate de
guardar esto. Si ves esta pequeña burbuja
aquí y no está guardada, solo presiona Comando y S, y en cuanto veas de nuevo la
cruz, se guarda. Ahora saltemos a los estilos, y agreguemos también nuestros estilos. Entonces aplica, continúa, y ahora va a agregar
los estilos aquí para nosotros. Aceptemos esto. Y
puedes ver aquí tenemos algunos estilos para el héroe para las diferentes secciones
y para el Putter Bien, entonces ahora queremos
ver cómo se ve eso. Entonces, la forma de ver esto es que necesitas encontrar
tu archivo HTML índice. Puede usarlo
directamente desde el cursor, o puede saltar a su
archivo real donde lo guardó, y luego simplemente
abrirlo con el navegador. La forma más fácil es simplemente
soltarlo en su navegador. Icono o simplemente haga clic derecho para
abrirlo. Y aquí vamos. Aquí está nuestro pequeño sitio web, obviamente no
parece demasiado bonito todavía, pero tenemos todo el contenido del que le dijimos cursor sobre él. Bien, vamos a
refinarlo un poco. Y antes que nada,
comencemos con la imagen. Entonces queremos usar
esta imagen aquí. Entonces, o tienes esta
imagen en tu archivo Figma, entonces puedes simplemente
exportarla y
guardarla en tus archivos de cursor Entonces, recordemos
dónde queremos esto. Tenemos nuestro archivo configurado
aquí y recuerda que hicimos una pequeña carpeta
llamada images. Entonces queremos que
esté justo aquí. Si no usas Figma, solo usa cualquier imagen y
arrástrala a ese archivo Nuevamente, recuerde que este
es el mismo archivo en su computadora entonces
verá espejado en el cursor Lo que voy a hacer en mi caso, lo
voy a exportar aquí, y luego se puede
ver en mi máquina, veo esos archivos, y ahora
aquí voy a simplemente
llamarlo héroe Imagen y guardarlo. Ahora vamos a saltar por encima y ya
puedes ver si abro la carpeta de imágenes,
está justo aquí. Lo que voy a
hacer ahora es que voy a volver a hablar con cursor y voy a decir cursor
para la imagen de héroe, en el archivo su imagen punto
JPEG en la carpeta Imágenes. Presiona Enter para generar código
adicional. Ahora vamos a echar un
vistazo a lo que hace. Nos dice que saltemos
al archivo índice. Ya estamos aquí y fíjate lo bonito que te explica
todo. Si ahora hacemos clic en
Aplicar y continuar, nos
va a mostrar exactamente dónde
va a agregar esto. Esta es una manera realmente genial de que también aprendas y
comprendas esto. Se puede ver aquí antes de que dijera imagen y la imagen era solo una imagen de café, y ahora está diciendo
imágenes hacia adelante barra diagonal Eso significa entrar en esa carpeta
y obtener la imagen del héroe. Después simplemente damos clic en Aceptar. Asegúrate de no
olvidarte de guardarlo. Y ahora echemos un
vistazo a nuestro sitio web. Tenemos que refrescarnos. hacerlo aquí mismo
en el navegador o simplemente presionar Comando
y ya puedes ver que ahora
tenemos nuestra imagen por aquí. Bien, así que vamos a añadir
algunos últimos pequeños detalles. Entonces voy a copiar
la dirección aquí. Y ahora sólo voy a
saltar de nuevo a mi archivo cursor, y podemos añadir esto a mano. Yo podría simplemente agregar
esto aquí también, o puedo decir cursor
así puedo decir, para la dirección, usa esto. Y luego solo copio
el texto que
copié de mi
archivo de diseño y presioné Enter. Yo solo también le voy a decir
que lo coloque uno debajo otro y luego simplemente presione Enter y
ya puede ver el código. Entonces aplica, continúa. Fantástico. De nuevo, te lo
explica amablemente. Solo consigamos nuestros horarios de
apertura también. Así que sólo voy
a copiar esos encima, vamos a pegarlos aquí y
decirle al cursor que los agregue. Y nuevamente, vayamos a Index, aplique, y podemos ver
muy bien donde editó. Y ahora también tiene dos líneas. Vamos a guardarlo, y
vamos a saltar por aquí y refrescarnos. Eso
se ve muy bien. Y de nuevo, esto probablemente aquí, voy a ordenar después
cuando trabaje con mi diseño. Ahora, echemos un vistazo
al menú y al
menú, lo que hice aquí. Esto es como componentes
para trabajar. Pero aquí abajo,
solo tengo textos sueltos. Le voy a decir que use
este texto para el menú. Además, solo podría usar
lo que generó aquí. Entonces solo le voy a decir que
use esto para el menú, y luego voy a agregar el texto que acabo de
copiar de mi diseño. Entonces apliquemos esto, continúe. Y eso se ve un poco raro. Es como, como,
un gran grupo ahora, pero sigamos adelante y solo veamos cómo se vería eso. Entonces perdió lo audaz y no
es tan estructurado. Pero lo que podemos hacer es simplemente saltar hacia atrás y decirle a
Cursor sobre eso. Entonces lo que voy
a hacer es que lo voy a contar en el menú. Cada bebida y comida
es un artículo con el nombre en negrita y luego debajo de la descripción
y el precio. Y solo le voy a preguntar
si puede configurar esto con buena semántica para mí porque no
sé qué
etiquetas usaría Ahora hagamos clic en Aplicar sobre esa ya
se ve mucho mejor. Está usando un artículo aquí. Apliquemos esto. Continuar.
Fantástico excepto. Vamos a saltar y refrescar nuestra página y luego
eso se ve mejor. Las distancias son correctas, pero la configuración general está bien. Sólo voy a hacer
una última cosita. Le voy a decir
que limpie. Sólo voy a
decirle ordenar
el HTML y todo lo que siga para el archivo CSS para una configuración semántica súper agradable
y perfecta, y luego me va a
dar esos cambios
9. 08 Agregar estilos con cursor y CSS: Entonces este es un diseño
que tenemos ahora, y luego puedes ver
aquí en nuestro archivo Figma, queremos cambiar
tu tipografía, agregar algo de color,
espaciado, Así que vamos poco a poco. Y por cierto, este es realmente el momento en el
que tienes que empezar a jugar con esto porque
vas a obtener resultados
muy diferentes.
Las cosas van a equivocarse. Hay que arreglar
esto, realmente
tomarlo como un patio de recreo para
explorar esta herramienta. Voy a empezar
agarrando este color. Esta es una variable en Figma. sólo voy a
agarrar el código hexadecimal Por ahora sólo voy a
agarrar el código hexadecimal. Eso
va a funcionar bien. Entonces para la tipografía
para todo el texto, estoy usando ferrocarril y
esa es una fuente de Google Vamos a recortar y vamos a decirle a
Cursor sobre todo eso. Entonces echemos un vistazo. Entonces aquí tenemos nuestro encabezado con el que
estamos empezando. Para que puedas ver esto
encabeza una clase de héroe, texto de
clase, imagen de clase. Y así si saltamos a este CSS, podrás encontrar la clase de héroe. Punto siempre significa
clase y luego héroe. Y así aquí
puedes ver aquí texto, imagen de
héroe, todas las cosas
diferentes. Y realmente también puedes simplemente saltar ahí y
jugar con eso. Entonces lo que queremos hacer,
voy a hacer esto a mano. Sólo voy a copiar el código hexadecimal con
el color de fondo porque esto es bastante obvio. Entonces echemos un
vistazo a eso recogido. Refrescar. Perfecto. Y ahora lo que queremos hacer es que
quiero añadir el texto. Entonces para el texto, voy a hablar con Cursor, y
voy a contarlo. Entonces digo, quiero usar la fuente
Google Railway para todo el texto en toda la página. Primero me está diciendo
que entre en el HTML, aplique, continúe, y
luego vea lo que hace. Entonces se va a
sumar a la cabeza. Entonces otra vez, la cabeza es
lo que no ves. Va a agregar un
enlace a esa fuente, así que va a sacar
esa fuente de Google para mí. Eso suena genial. Aceptemos
esto y guardemos este archivo. Y ahora en estilos Aplicar, continuar, y está generando, y está usando ferrocarriles Así que también guardemos esto, y saltemos hacia atrás y vamos a refrescarnos y veamos
si eso está recogiendo. Fantástico. Todo eso se ve bien. Ahora tampoco me gusta
este acolchado de aquí. Vamos a saltar hacia atrás,
así que todo este acolchado. Por cierto, muy útil
si estás en Chrome, haz clic
derecho, haz clic en Inspeccionar, y luego obtienes algo
llamado modo de inspección. Para que puedas ver el
HML aquí y luego
podrás ver todo el estilo aplicado Y puedes jugar
con él aquí mismo. Y así esto no
influye en tu código. Esto realmente solo está sucediendo
aquí mismo en el navegador. Esto es muy útil para conocer y
entender la estructura. Entonces puedes ver que
hay un relleno general en nuestro héroe de clase, pero luego hay más relleno. Si saltamos a la imagen, también
tenemos en realidad
algún margen que tenemos aquí. Entonces queremos quitarnos todo eso
, así que echemos un vistazo. O puedes hablar con el cursor o simplemente nos podemos quitar esto. Así que solo podemos quitarnos todo
el relleno, u otra forma de hacerlo
es quitando el acolchado superior, derecho e inferior. Entonces hablemos de ello, en realidad. Te digo,
quítate el acolchado superior, derecho e inferior de
50 de la clase héroe. Entonces otra cosa que
queremos hacer así imagen de héroe, también
había algún
tipo de margen alrededor de la imagen,
pero no la encuentro. Entonces solo le voy a decir
a Kursa que no
queremos relleno ni
margen alrededor de la imagen Generemos esto,
y vamos a aplicarlo, aceptarlo, y luego
simplemente saltemos atrás y echemos
un vistazo a lo que hizo. Y podemos ver que esto
sigue en el héroe, así que todavía están acolchando 20. Entonces esto es de izquierda y derecha. Entonces Cursor no nos entendió. Vamos a saltar hacia atrás. Entonces si
tienes esto es arriba, entonces es superior e inferior
e izquierda y derecha. Entonces lo que queremos hacer es
arriba es cero, derecho es cero. El fondo es cero, y luego solo lo queremos en el
último pedacito. Entonces vamos a hacer sí. Si no entiendes esto, entonces también puedes hablar con Cursor y simplemente decirle
lo que quieres que haga. Así que saltemos atrás, actualicemos esto, y eso se ve exactamente
como lo que buscamos. Genial. Ahora vamos a darle estilo a
este texto un poco. En realidad configuré esto
ya en Figma. Nuevamente, puedes simplemente hacer esto a
mano a medida que avanzas, pero según lo
tengo, voy a usarlo. Lo que voy a hacer es que sólo
voy a copiar todo esto. Déjame copiar esto de nuevo y
luego voy a contarlo. De hecho entro en el CSS. Sé que va a estar en CSS. Yo le digo donde lo
quiero. En mi caso, H uno, y sólo
voy a pegarlo. Déjame ver qué pasa. También podría simplemente pegar eso en mí mismo. Eso suena genial. Por cierto, no
creo que ni siquiera necesite la familia de fuentes
porque ya
puse esto solo lo voy a
dejar así por ahora, siempre
puedo ordenar esto. Bien, excepto. Y voy a hacer lo mismo
por los demás. Entonces mi edad dos. Y así lo hago por
toda mi escala tipo aquí. Acabo de copiarlo del modo profundo de
Figma donde
obtienes todos los ajustes No tienes que hacer
eso. También puedes simplemente pedirle al cursor que
lo compense por ti. Simplemente puedes escribir en
los valores que quieras o usar algunos ajustes
predeterminados. Entonces, si trabajas con Figma, sin embargo, esto es bastante útil Vamos a guardar esto, y luego vamos a ver si
conseguimos una diferencia. Entonces eso se ve
ya bastante bien. En realidad hace que
esto sea un poco más grande. Entonces eso se ve genial. Y ahora sólo le voy
a decir que limpie. Le digo que limpie el CSS,
saque la repetición
y haga variables para color y la familia de fuentes.
Apliquemos esto. Entonces esto es súper agradable.
Realmente
arregla todo tu archivo
con un solo clic Guárdala, y eso ya
se ve mucho más limpio. Puedes ver aquí, esto
está todo arreglado, y luego las variables
de aquí, fantásticas Entonces echemos un vistazo.
Vamos a asegurarnos de que no haya errores, y eso
se ve igual. Pero echemos un
vistazo porque está pasando
este extraño relleno. Vayamos a inspeccionar y echar un vistazo de dónde viene
eso. Tenemos estos este margen
de 16 y luego aquí tenemos un margen y
realmente no puedo verlo aquí de
donde viene. Saltemos hacia atrás y
preguntemos a Cursor. Estoy preguntando en modo inspección, hay un margen aplicado
al héroe H uno, H cuatro, y P, pero no puedo verlo.
¿De dónde viene? Muéstrame en CSS. Entonces aquí nos está diciendo
que el margen
viene de la configuración predeterminada
del navegador. Entonces una explicación
aquí, obtenemos esto. Entonces agrega margen cero
a todo esto. Bien. Sólo voy a pedirlo, ¿
puedes hacer esto por mí? Vamos a hacer clic en Aplicar y
luego ves aquí margen cero excepto vamos a guardarlo, y vamos a recortar y
ver si eso hizo el truco. Perfecto. Bien, ahora solo podemos sumar los márgenes que realmente
queremos. Entonces lo digo, Bien, genial. Ahora solo agrega algo de espacio
entre el nombre H one y la dirección de
los horarios de apertura. Dame una actualización de CSS. Bien, entonces es agregar
algunas clases en el HTML primero. Hagámoslo. Es lapicera. Añadiendo algunas clases. Sí, no estoy seguro de que eso sea
lo que quiero, en realidad. Y luego está agregando algunos aquí. Rechazemos esto y hablemos de nuevo con
él. Entonces se lo
voy a contar. Entonces el H uno es una unidad. Entonces la calle y la ciudad
deben ser una unidad, H cuatro. Pero uno debajo del otro con una distancia de alrededor de 32
píxeles a la siguiente unidad, que es el horario de apertura. ¿Puedes agregar los dips o sea lo harías diseñar
esto de la mejor manera Bien, eso se ve bien. Echemos un vistazo a lo que hace. Eso se ve genial. Así que crea
un pequeño clúster aquí, pequeño clúster aquí.
Eso se ve muy bonito. Siempre pídele
que presente esto de la mejor manera, y luego
te va a dar una configuración bastante agradable. Después salta a CSS. A No lo puedo ver del todo. Lo edito aquí abajo. Mañana, más tarde podemos
pedirle que limpie. Vamos a saltar hacia atrás. Eso
se ve bastante bien. Ahora, vamos a ordenar nuestro menú aquí, así que
vamos a saltar hacia atrás. Entonces, si echamos un vistazo aquí, entonces podemos ver que
el menú que
en realidad se estropeó un
poco cuando arreglamos Entonces lo que voy a hacer
es que a veces es más fácil. Simplemente quitamos eso y luego le vamos a decir
que agregue uno nuevo. Así que saltemos
a nuestro archivo Figma. Y aquí realmente
recuerdo que esta es la configuración. Entonces todo esto está en componente, pero aquí solo tengo
un texto suelto para copiar, así que solo voy a agarrar eso, saltar por encima, vamos a
decirle qué hacer. Entonces voy a contarlo
debajo del héroe de cabecera, agregar una nueva sección
llamada menú de bebidas. Este es el contenido
y luego solo copio en todo mi contenido. El
titular de bebidas y comida tiene tres años, y el resto es
solo copiar texto P, donde el
nombre de la comida es negrita y luego debajo de la descripción,
y luego el precio. Edita y actualiza
el HTML y CSS. Eso vuelve a parecer un
poquito lo que me dio, así que vamos a decirle que tenga
eso un poco más ordenado. Digamos, se ve bien, pero
asegúrate de que cada artículo de comida y bebida sea como un artículo propio y la mejor configuración
semántica en HTML Eso suele hacer siempre el truco si no
sabes qué decir. Eso se ve mucho mejor. Está usando una H cuatro, sin embargo, así que sólo
voy a contarlo. Eso se ve genial. Simplemente
no use un H four. Simplemente pon la P en
fuerte para el nombre. Entonces mira si ahora
conseguimos el correcto. Bien, eso se ve
finalmente mucho mejor. Entonces digamos aplicar. Continuar. Y
en realidad no lo está agregando. Así que vamos a copiarlo. Y entonces sólo vamos a
pegarlo aquí abajo. Genial. Veamos la sección. Se llama menú de bebidas. Eso suena bien.
Nos dio una identificación. De nuevo, prefiero tener
esto como clase, pero siéntete libre de hacer
esto como quieras. Y también necesito el CSS. Yo le digo también
necesito el CSS y tenga en cuenta que cambié
el ID a una clase. Si esto vuelve a estar demasiado avanzado,
solo pregúntale qué hacer. Échale un vistazo y
luego dile qué
funciona o no, y
te va a ayudar. Así que vamos a saltar al CSS. Aplicar, continuar y aceptar. Bien, vamos a ver
si eso hizo el truco. Eso se ve fantástico.
Yo solo quiero centrarlo ahora y
tener algo de espacio aquí. Pero yo se lo digo. Se ve genial. Simplemente centrar todos los textos y tener ortografía incorrecta no
importa. Entonces espacio por encima de la H tres
titular en esta sección. Y por cierto,
ahora sabe que me refiero a lo
último que actualicé. A veces hay que decirle
a qué clase te refieres. Bien, vamos a aplicar esto. Continuar. Se puede ver
centrado todo el texto, y agregó un poco de
margen. Aceptemos esto. Salta por aquí, refréscate. Y eso ya parece un sitio web bastante
bonito. Sólo le voy a decir que
ordene todo. Entonces digo ordenar HML y CSS
usando las mejores prácticas. Entonces eso podría llevar un momento. Luego puede aplicar esto
al HGML primero que nada, y luego puede aplicar el
otro al archivo CSS Y hay una cosita que personalmente no quiero colorear de
fondo aquí, así que sólo voy a
sacar eso a mano. Bien, genial. Echemos un
vistazo. Eso sigue funcionando. Fantástico. Entonces como
ya mencioné, no tomes esto como un tutorial con el Paso uno, dos y tres. Realmente es solo mostrarte cómo me fue en este escenario. Si escribes lo
mismo, es posible que obtengas un resultado diferente.
Tienes un proyecto diferente. Entonces, en realidad se trata
solo de jugar con esto y comprender
y encontrar soluciones. Una pequeña nota al margen
después de grabar, me di cuenta de que este
titular aquí es en
realidad mucho
más audaz que el de mi salida. Entonces si le echo un vistazo
aquí, entonces este es un peso de fuente de 900. Si le echo un vistazo a mi CSS, entonces eso también está establecido en 900. No obstante, le pido cursor mientras
esto sucede y señaló que cuando estoy
jalando en la fuente de Google, se
puede ver aquí
que todo está jalando por defecto es de 407 cien. Yo solo voy a
seleccionar esto aquí, y luego solo puedo
decirle que tire del resto también. A medida que nos refrescamos, se puede ver que ahora tengo aplicado el
peso correcto.
10. 09 Hacer que nuestro sitio web sea receptivo con cursor: Entonces esta es nuestra página ahora, y pueden ver que
tenemos nuestra intro, tenemos nuestro menú, y
agregué otra sección sobre curso
Brisa y
limpié la puta. Entonces lo que queremos
hacer, sin embargo, ahora, es que si redimensionamos eso, queremos que esto se comporte correctamente Entonces queremos, por ejemplo, que esta
imagen se apile justo debajo. Entonces echemos un vistazo a
cómo podemos hacer eso. Solo preguntemos cursor. Cuando le dices cómo quieres que se comporten
todas las secciones, es una buena idea echar un vistazo
a cómo se llaman las
secciones. Uno se llama menú de bebidas héroe, y aquí abajo, nuestra sección, por lo que la clase para ello se
llama Curso Barista También recogerá mayor parte del tiempo
si solo lo describes, pero a veces hay un poco de confusión con la
redacción a medida que
profundizas, es una buena idea hacerlo. Vamos a contarle cómo queremos que se comporten
todos ellos. Nuevamente, estoy acelerando
esto un poco, así que quizás quieras ir
hasta el final, detenerlo, y escribir lo que escribí o simplemente escribir tu propio texto. Así que haz que la página sea receptiva. Por lo que se ve bien del
móvil al escritorio. Héroe en pantallas grandes, mantén IA. En pantallas pequeñas, apile
la imagen debajo del texto. Asegúrate de agregar espacio entre texto e imagen en pantallas pequeñas. Después el menú de bebidas.
Mantengámoslo como está. Curso Brisa y nota como
uso el nombre de la clase. Apilar o no, en pantallas grandes, mantener AIS en pantallas pequeñas, apilar el texto debajo de la imagen. Asegúrate de agregar algo de
espacio debajo de la imagen en las pantallas pequeñas y
también debajo de los botones. Golpea a Enser. Entonces echemos un vistazo. Nos está diciendo que
usemos media queries. Entonces, para la capacidad de respuesta,
usamos media queries, y eso significa que nos
va a decir desde un ancho de ese ancho en
adelante, usar estas reglas Y aquí, por ejemplo,
debajo de este ancho, usa las reglas que
los ID juegan aquí. Entonces usamos Flexbox,
la rejilla SS. Entonces, si sabes de esto y simplemente salta y juega con él, si no lo haces, asegúrate de
avisarle a Cursor. Entonces, solo apliquemos esto
y veamos qué pasa. Y se puede ver que acaba agregar las
consultas mediáticas para el héroe, para el texto héroe, para
los Barris de course, Bars de course image En realidad, no estoy seguro de
que todo se llame así. Echemos un vistazo.
Barras a curso imagen, texto, registro, botón. Entonces a veces se
confunde un poco con los nombres de las clases. Entonces tal vez solo quieras, como, limpiar esto más adelante. Vamos a ver qué pasa, y entonces todavía podemos retocar
esto. Entonces eso es refrescar. Y eso se apila muy bien.
Necesito ese espacio. Aquí quería eso
no está recogiendo y
podríamos necesitar algo de espacio
por encima del H uno, y luego aquí abajo
que también se apila muy bien el espaciado no
está recogiendo probablemente por
lo que vimos que
el naming se
confunde un poco con eso Entonces tal vez solo preguntemos a Cursor. Así que realmente tengan una
conversación como lo harían con sus
compañeros. Se lo estoy preguntando. El espaciado debajo del texto del héroe y el botón Britta no está recogiendo ¿podrías estar usando nombres de clase
que no existen Bien, entonces ahora entré ahí y está echando un vistazo de nuevo. Entonces ahora, ¿qué nos dice? Aquí están los cambios actualizados. A ver si realmente los
descubrió por sí mismo. No tengo idea si
es así de inteligente. Vamos a refrescarnos y cambiemos el tamaño. Y eso se ve mucho mejor. Genial. Entonces
lo único que queremos ahora es que queramos un poco
de relleno en la edad de uno. Sólo vamos a contarlo.
Entonces en el héroe, agrega un poco de relleno
por encima de la edad uno en pantallas
pequeñas y también quita el relleno
alrededor de la imagen. Suministremos esto excepto, guardemos, refresquemos, y por cierto, una buena manera de hacerlo
también es saltar sobre inspeccionar, porque lo que obtienes en inspeccionar, tienes este
pequeño botón aquí, y luego puedes saltar a
diferentes tamaños de móvil. Así que ahora tenemos un bonito espacio
aquí arriba que se ve todo muy
bien. Todavía tenemos este. Entonces podríamos echar un vistazo de
donde viene esto. Creo que viene de un acolchado de un acolchado
aquí y el héroe. Entonces tenemos que quitarnos esta. Y luego aquí tenemos nuestro menú, y luego aquí tenemos este,
que todo está funcionando
muy bien. Así que vamos a encontrar este relleno y de hecho podemos
tratar de hacerlo a mano. Entonces esto es realmente hasta
aquí el relleno de héroe. Y lo
que podemos hacer
es simplemente copiarlo porque ahora
empezamos a entender CSS, y luego pongámoslo aquí y podemos poner
todo esto a cero. Y veamos qué pasa. Tal vez solo tengamos que
darle
ahora un poco más de relleno a este texto . Entonces echemos un vistazo, y agreguemos el relleno aquí. Y luego recuerda que esto es arriba, derecha, abajo e izquierda. Entonces echemos un vistazo si
ya entendemos suficiente CSS para hacer esto. Perfecto. Y así es como
realmente puedes meterte en el aprendizaje. Y por cierto, pequeño consejo aquí. Si haces clic aquí, entonces
tienes el más pequeño, que es de 320 píxeles. El móvil más pequeño del mercado para que
puedas asegurarte de que todo siga siendo
legible en este. Y así, tienes
un sitio web receptivo encantador. Entonces a medida que sigas trabajando, vas a aprender
pedacitos y bobs sobre CSS Es muy importante
que intentes entender. Si no entiendes, entonces siempre puedes preguntar cursor. Entonces pregúntelo. Entonces, por ejemplo, pregúntale, ¿Qué es flex? Al igual que, ¿para qué lo usas? Y te va a decir
cómo funcionan estas cosas. Entonces esto es realmente,
realmente fantástico, y realmente puedes
tomarlo a partir de ahí. Cualquier cosa que salga mal, lo
mismo. Pídele. Lo único de lo que hay que estar un poco consciente
es el naming porque a veces simplemente no
capta la convención de
nomenclatura correcta Entonces esto es algo que solo
puedes echar un vistazo como se llaman todas estas
cosas diferentes. Ahora lo único que
queremos hacer es que obviamente queremos que esto
sea todo agradable y ordenado. Sólo le voy a decir que ponga
orden usando las mejores prácticas.
11. 10 Inicia tu página en línea con Netlify: Entonces la forma de
ver localmente nuestro diseño es que tomamos el índice y
solo lo abrimos en nuestro navegador. Y esto nos da
una idea realista de cómo será nuestra página, pero solo es visible para
nosotros en nuestra máquina local. Entonces, ¿cómo conseguimos esto en línea? ¿Cómo desplegamos esta página? Y una gran cosa, solo
puedes preguntar cursor. Entonces, ¿cuál es la
forma más fácil de implementar mi página? Entonces puedes ver aquí que nos está
dando varias opciones. Puedes usar Github, Netlify,
y hay algunos más. El que voy a
ir con el que
más me gusta para principiantes es Netlify Y solo puedes ir más allá justo aquí en cursor y solo pedirle que te dé
instrucciones claras sobre cómo hacerlo. Pero sólo te voy a mostrar porque es bastante
sencillo. Vaya a netlify.com e
inscríbase para obtener una cuenta gratuita. Vas a ver algo
como esto y luego asegurarte de que
estás en sitios. Y aquí vas
a ver cómo agregar
tus sitios a Netlify.
Entonces tenemos a Github. Puedes navegar por las plantillas
y construirlas aquí. Pero la parte más fácil que
vamos a usar por ahora es desplegarla manualmente.
Entonces esto es aquí abajo. Ahora puedes simplemente navegar para subir y luego encontrar tu archivo. Entonces el archivo en el que
estás trabajando
en el cursor puedes ver que necesita
contener todas las cosas, tus imágenes, tu índice, tu CSS, todo ello. Seleccione todo el
archivo y luego haga clic en Cargar. Y eso es
prácticamente todo. Entonces lo que ves aquí,
esta es tu URL por ahora. Si hacemos clic en producción abierta, así que vamos a hacer esto un poco más pequeño para que
podamos verla mejor. Y ahora obtenemos nuestra
página que está en vivo. Y se puede ver que es exactamente lo
mismo que vimos antes. Entonces esta es nuestra URL. Queremos
limpiar esto un poco. Entonces haga clic en la configuración del sitio, y luego aquí abajo
verá cambiar el nombre del sitio, y ahora simplemente podemos
quitarle esto y llamarlo cliché Café.
Vamos a guardarlo. Y ya puedes ver nuestra URL es cliché cafe dot
netlify dot Entonces, si volvemos a abrir eso, puedes compartirlo, y aquí
es donde
encontrarás tu página. Si quieres actualizar tu página, entonces simplemente salta de nuevo
a Deploy y simplemente
puedes navegar por una nueva versión. También te guardará
todas las versiones antiguas para que
siempre puedas ir y venir. Ahora probablemente quieras
usar tu propia URL. En ese caso, basta con
hacer clic en el sitio Descripción general, y luego se puede ver aquí. Entonces desplegaste tu sitio. Ahora puedes hacer clic en
configurar tu dominio personalizado. Depende de donde
conseguiste tu dominio. Puedes obtenerlo
directamente con Netlify, que probablemente sea el
más fácil, pero también puedes agregar cualquier dominio que hayas
comprado en cualquier otro lugar, y Netlify te va a
guiar a través de él, y también vas a
conseguir tu sitio seguro, lo que
significa que es HTTPS, lo
cual es muy cual O también puedes continuar usando tu nueva URL de Netlify de forma gratuita
12. 11 Conexión a aplicaciones de terceros: Entonces aquí tengo mi página, y puedes ver
aquí abajo con el
curso Brisa próximamente, si haces clic en Inscribirse, ahora mismo, no pasa nada. Entonces quiero que la gente
pueda inscribirse una lista de correo para obtener
más información más adelante. Ahora, hay muchos proveedores
diferentes
para la lista de correo. Sólo voy a usar Mailchim que es bastante popular Pero también puedes
entrar en Cursor y solo preguntarle cuál
recomienda para tus necesidades. Para empezar, voy a
hacer algo súper sencillo. En mi sitio web, si haces
clic en Registrarse, solo
vas a ser enviado
a una página de registro separada. En Mailchimp, voy a ir al público y
luego
a los formularios de registro Y entonces aquí se pueden
ver diferentes formas. Pop ups, embed, y voy
a ir por uno que sea una página de destino
separada. Entonces voy a hacer click en
Crear una nueva landing page. Y aquí solo construye
una landing page. Y voy a llamar a este
cliché Cafe landing page. Empecemos. Y luego puedes ver que hay una plantilla
muy bonita, así puedes hacer que esto se
vea muy bien. Pero sólo voy
a ir por esta súper simple de aquí para la demo. Deshazte de este de aquí, y
llamémosle un café cliché O llamémoslo curso barista. Guarde eso y vamos a
guardarlo y cerrarlo. Y luego voy a
dar click en Publicar. De nuevo, puedes editar cosas y simplemente puedes
hacerlo un poco
más propio. Pero por ahora, sólo
voy a ir a publicar. Y ahora si hago clic
aquí, comparte tu página, puedes ver que he creado solo este pequeño
letrero y formulario aquí. Entonces esta es la URL
que voy a copiar, y voy a decirle al
cursor sobre esto. Un pequeño consejo, lo
que puedes hacer es simplemente resaltar el
botón porque
sabes que es este
botón al que quieres clic y luego
hacer clic en Agregar al sombrero, y luego ya sabe a
qué te refieres Si se hace clic, abra esta
página en una nueva ventana, y luego solo pego el enlace
que obtuve de Mail Jump Y así
nos está diciendo lo que está haciendo. Se trata de agregar algo de JavaScript. Podemos hacerlo más tarde,
pero vamos a decirle que use solo HTML por ahora. Entonces lo acabamos de convertir
en un enlace. Vamos a aplicarlo y ya puedes
ver si hacemos clic en él, objetivo en blanco significa
abrir una nueva ventana, botón de
registro, y
luego se registra. Aceptemos eso, guárdalo. Vamos a saltar por
aquí y refrescarnos. Necesito ordenar el estilo
más tarde un poco. Y luego está abriendo esa
nueva página, y podemos registrarnos. Así que probemos esto. Sólo voy a llamar a
esta landing page. Bien. Entonces, si saltamos aquí
y nos dirigimos a nuestro público, y echamos un vistazo al contexto, entonces podemos ver que
esto ya se agregó. De verdad puedes empezar a
jugar con esto. Por ejemplo, podríamos agregar un campo de entrada
justo en nuestra página, y luego puedes hablar con
el cursor preguntándole cómo
puedes configurarlo que si
hay una entrada en este campo, eso pasa de
inmediato a Mailchimp Porque
lo mejor del cursor es que está usando
los llamados LLM No te
preocupes demasiado por cuál eliges. Todos van a
trabajar por lo que hacemos. Y esto es algo así
como el Che hiphi o Claude. Eso significa que en este caso, ven nuestro código y
entienden nuestro código, pero también están conectados con Internet
como tal y son solo un chatbd de IA al
que puedes preguntar también sobre cosas fuera
de y tu editor de código Otra gran cosa que
podrías hacer es, por ejemplo, echar un vistazo agregar un
pop up para Mail him, incrustar los formularios o
también usar otras herramientas. Uno que me gusta mucho
es comprarme un café. Entonces esto tiene estos pequeños botones de
soporte aquí, y puedes
agregarlos en tu página. Entonces, si se les
hace clic y alguien puede simplemente darte un euro o cinco euros o unos pocos dólares
y apoyar tu proyecto Entonces son cosas muy bonitas, y simplemente puedes platicar con Kerse sobre cómo
integrar esto Te dirá exactamente
a dónde ir en esas páginas y qué información necesita para ayudarte a conectar todo eso. Una última cosita que
quiero señalar, sin embargo, muchas de estas cosas
requerirán script Java. Así que tenemos un
archivo JavaScript en nuestra configuración. Sin embargo, actualmente
no está conectado a nuestro índice. Así que siempre
tendrías que decírselo a Cursor, súper simple.
Sólo vamos a contarlo. Entonces quiero usar el archivo Script
JS, cómo conectarlo. Y te va a decir que
agregues esto a tu HTML, y anota cómo lo agrega
al fondo de tu HTML. Entonces en la cabeza,
tenemos el estilo CSS conectado y luego JavaScript
justo antes de la etiqueta body. Entonces el mundo realmente
es tu ostra, así que solo empieza a jugar
y a hablar el
cursor sobre las cosas que quieres hacer y conéctate
con tu página. Te avisará sobre
temas de seguridad la mayor parte del tiempo. Sin embargo, sigue siendo una IA. Entonces, como principiante, sé sensato y no uses ningún dato
sensible.
13. Gracias: Bien hecho por
terminar este curso, no dude en contactarme en MolearningO Siempre me interesa
escuchar tus comentarios. También me harías un gran favor dejar una reseña aquí mismo. Ava disfrutó de este
curso y también
asegúrate de echar un
vistazo al moonlearning dot IO, donde puedes encontrar mucho material
adicional, así
como cursos Con la membresía M, puedes
acceder a todos mis videos,
así que cualquier cosa, desde conceptos básicos de UX UI, mucho sobre FINMA,
muchas inmersiones profundas, también, y también una sección
sobre Así que vamos a discutir
lo que sucede cuando diseño de la
interfaz de usuario se encuentra con el código en
cuanto a diseño, tipografía, color y cualquier
otro tema relevante En Moon Learning, también
puedes encontrar un enlace gratuito
de nómina a todos mis artículos recientes, así
como una página de recursos
donde trato de mantenerte al
día de las últimas cosas geniales que suceden en el mundo
del UX UI Design. Si prefieres un evento de la vida real, echa un
vistazo a la sección de
talleres y charlas. Hablo frecuentemente
en conferencias, además dar talleres en línea sobre temas
de UX, UI Design y solopreneurship Asegúrate de suscribirte a mi newsletter para
estar al día. Así que nos vemos pronto en
moonlaring dot IO.
Christine Vallaure, UI designer, speaker & teacher
