CURSO de CSS 2021 Rapido y Facil # 14 | 💻 ENLACES II

Summary

Este vídeo tutorial de CSS aborda el tema de las listas, esencial para crear menús en páginas web. Se explica cómo utilizar listas ordenadas y desordenadas, personalizar sus estilos con CSS, incluir iconos y enlaces. Se muestra cómo construir un menú vertical con estilos visuales atractivos, utilizando propiedades como 'list-style', 'border' y 'display'. Además, se ofrece una guía para descargar iconos gratuitos y aplicarlos en los elementos de la lista.

Takeaways

• 😀 El curso de CSS aborda el tema de las listas, un elemento importante para crear menús en HTML.
• 🎨 Se eliminan los elementos previamente creados, manteniendo solo el body, propiedades y estilos CSS.
• 📝 Se comienza con listas desordenadas utilizando la etiqueta `ul` y elementos `li` para representar segmentos de un menú.
• 🖌️ Se personalizan los estilos de las listas utilizando CSS, incluyendo el tamaño de fuente y márgenes.
• 🔄 Se muestra cómo cambiar el estilo de los marcadores de listas desordenadas utilizando `list-style-type` y `list-style-image`.
• 🌐 Se sugiere descargar iconos gratuitos de la web para personalizar los marcadores de listas.
• 📑 Se trabaja con listas ordenadas utilizando la etiqueta `ol` y se muestra cómo cambiar el estilo de los números.
• 🔢 Se exploran las opciones de estilo para listas ordenadas, incluyendo números romanos y letras en mayúsculas o minúsculas.
• 🛠️ Se crea un menú vertical utilizando listas desordenadas y se personalizan los elementos `li` con bordes y espaciado.
• 🌈 Se finaliza el menú con un efecto de color al pasar el mouse y se muestra cómo enlazar los elementos del menú a diferentes secciones.

Q & A

¿Qué tipo de elementos se discuten en el vídeo para crear menús?

Se discuten dos tipos de elementos: listas ordenadas y listas desordenadas.

¿Cómo se inicia el proceso de creación de un menú en el vídeo?

Se inicia en el archivo index.html, donde se usan elementos desordenados para crear el menú.

¿Qué elemento HTML se usa para crear listas desordenadas?

Se usa la etiqueta `<ul>` para crear listas desordenadas.

¿Cuál es la función de la etiqueta `<li>` en el contexto del vídeo?

La etiqueta `<li>` se usa para representar los elementos individuales dentro de una lista desordenada.

¿Cómo se pueden personalizar los estilos de las listas desordenadas en CSS?

Se pueden personalizar los estilos de las listas desordenadas usando propiedades como `font-size`, `list-style`, `margin` y `padding`.

¿Qué propiedad CSS se usa para eliminar los marcadores predeterminados de las listas?

Se usa la propiedad `list-style: none;` para eliminar los marcadores predeterminados de las listas.

¿Cómo se pueden cambiar los iconos predeterminados de las listas desordenadas?

Se puede usar la propiedad `list-style-image` y asignarle una URL de la imagen deseada.

¿Qué recursos externos se mencionan en el vídeo para descargar iconos?

Se menciona una página web donde se pueden descargar iconos gratuitos.

¿Cómo se pueden aplicar estilos a las listas ordenadas en CSS?

Se pueden aplicar estilos a las listas ordenadas usando la propiedad `list-style-type` y asignándole valores como `none`, `decimal`, `upper-roman`, `lower-roman`, `upper-alpha` o `lower-alpha`.

¿Qué es un menú vertical y cómo se construye según el vídeo?

Un menú vertical es una lista desordenada donde los elementos se presentan en una secuencia vertical. Se construye usando `<ul>` y `<li>` con enlaces dentro de cada elemento `<li>`.

¿Cómo se puede hacer un menú horizontal en CSS?

Para hacer un menú horizontal, se usa CSS para establecer el ancho y el alineado de los elementos `<li>`, y se pueden usar propiedades como `display: inline-block;` para que los elementos se muestren en línea.

Outlines

00:00

📝 Introducción a las Listas en HTML y CSS

El primer párrafo aborda el tema de las listas en el contexto de un curso de CSS. Se menciona la importancia de las listas para la creación de menús en la web. Se inicia con la modificación de un archivo HTML, eliminando todo excepto el body y se enfoca en el uso de listas desordenadas y ordenadas. Se explica el proceso de crear elementos de lista desordenada y se muestra cómo aplicar estilos CSS para modificar la presentación de estos elementos, incluyendo la alteración de la fuente y el tamaño, y la eliminación de los estilos por defecto utilizando 'list-style: none;'.

05:04

🖼️ Personalización de Listas con Iconos

El segundo párrafo se centra en la personalización de listas utilizando iconos. Se discute cómo descargar iconos gratuitos de la web y cómo aplicarlos a los elementos de lista desordenada utilizando la propiedad 'list-style-image'. Se ofrece una sugerencia de página web para descargar iconos y se explica el proceso de selección y aplicación de estos iconos en el proyecto. Además, se exploran las opciones para cambiar la forma de los marcadores de lista y se presentan ejemplos de cómo modificar los estilos de las listas ordenadas utilizando números romanos o letras.

10:05

🔲 Creación de un Menú Vertical con Listas

El tercer párrafo describe el proceso de construir un menú vertical utilizando listas. Se detalla cómo trabajar con elementos de lista desordenada y cómo incorporar enlaces para que el menú sea interactuable. Se aborda la adición de estilos CSS para mejorar la apariencia del menú, incluyendo la modificación del color de fondo, el ancho y el margen, y la eliminación del espacio interno con 'padding'. Se enfatiza la importancia de la centrado y la visualización de los elementos de lista como secciones independientes, utilizando 'border' para separarlos visualmente.

15:07

🌐 Finalización del Menú y Enlaces en HTML

El cuarto y último párrafo concluye la creación del menú y explica cómo hacer que los elementos del menú sean interactivos, permitiendo la navegación a diferentes secciones del sitio web. Se trabaja en la personalización del aspecto de los elementos de enlace y se ofrecen detalles sobre cómo cambiar la fuente y el tamaño del texto. Se muestra cómo aplicar estilos para mejorar la apariencia de los elementos al pasar el mouse sobre ellos, cambiando el color de fondo y el color del texto. Finalmente, se menciona la posibilidad de vincular los elementos del menú a diferentes páginas HTML y se cierra el vídeo con una expectativa hacia el siguiente episodio del curso de CSS.

Keywords

💡Listas

Las listas son elementos HTML utilizados para presentar datos de manera organizada. En el vídeo, se menciona que las listas son importantes para crear menús, como se ve en la sección donde se trabaja con elementos desordenados y ordenados. Se usan etiquetas como `<ul>` para listas desordenadas y `<ol>` para listas ordenadas, y se personalizan con CSS para adaptarse a diferentes diseños de menú.

💡Etiquetas

Las etiquetas son los elementos HTML que definen el contenido y la estructura de una página web. En el guion, se habla de 'etiquetas de nombre web' y 'etiqueta de enlace', que son fundamentales para crear listas y enlaces en HTML, respectivamente. Las etiquetas permiten a los navegadores entender cómo se debe mostrar el contenido y cómo interactúa el usuario con él.

💡CSS

CSS (Hojas de Estilo en Cascada) es utilizado para dar estilo a los elementos HTML, controlando aspectos visuales como el color, la fuente y el diseño. En el vídeo, se utiliza CSS para personalizar la apariencia de las listas, como cambiar el tamaño de la fuente o aplicar un fondo específico, lo que demuestra cómo CSS puede transformar la presentación de los elementos listados.

💡Menú

Un menú en la web es una lista de enlaces que permite a los usuarios navegar a diferentes secciones de un sitio. En el guion, se aborda cómo construir un menú vertical utilizando listas desordenadas y se menciona la creación de un menú horizontal en un futuro episodio. El menú es un ejemplo práctico de cómo se pueden usar las listas para mejorar la navegación en un sitio web.

💡List Style

La propiedad 'list-style' en CSS controla el estilo de los marcadores de las listas, como los círculos, cuadrados o números. En el vídeo, se muestra cómo utilizar 'list-style-type' para cambiar el marcador de una lista desordenada a 'square' o 'none', y también se menciona cómo usar 'list-style-image' para reemplazar el marcador por una imagen, lo que personaliza la apariencia de los elementos de la lista.

💡Iconos

Los iconos son imágenes pequeñas que representan acciones, objetos o conceptos. En el guion, se habla de cómo incorporar iconos a las listas, como el icono de 'casa' para un enlace al inicio del sitio. Los iconos mejoran la interfaz de usuario, ya que proporcionan una visualización inmediata de la función de un enlace o elemento.

💡Personalización

La personalización es el proceso de adaptar el diseño y la funcionalidad de una interfaz de usuario a las preferencias del usuario. El vídeo trata sobre la personalización de listas en HTML y CSS, mostrando cómo cambiar el estilo predeterminado de las listas para crear menús más atractivos y funcionales, como se ve en la sección donde se trabaja con 'list-style' y se agregan iconos.

💡Enlaces

Los enlaces son hipervínculos que permiten a los usuarios navegar a otras páginas o secciones. En el guion, se menciona la etiqueta de enlace `<a>`, que se utiliza para crear enlaces en los elementos de la lista, permitiendo que los elementos del menú lleven al usuario a diferentes partes del sitio web o a sitios externos.

💡Efectos Visuales

Los efectos visuales son técnicas de diseño que se utilizan para mejorar la apariencia y la experiencia del usuario. En el vídeo, se abordan efectos visuales como cambiar el color de fondo y el color del texto de los elementos de la lista, y se menciona el uso de 'border' para crear divisiones entre los elementos, lo que ayuda a mejorar la legibilidad y el atractivo visual del menú.

💡Diseño Web

El diseño web es el proceso de creación de interfaces de usuario para sitios web. El vídeo se centra en el diseño web práctico, enseñando cómo construir un menú utilizando listas y CSS. Se discuten conceptos clave del diseño web, como la organización de contenido, la navegación y la personalización de la apariencia, que son fundamentales para crear sitios web atractivo y funcional.

Highlights

Inicio del curso de CSS sobre listas y cómo son importantes para crear menús.

Eliminación de contenido del episodio anterior, manteniendo solo el body, propiedades y estilos CSS.

Introducción a las listas desordenadas y su estructura básica en HTML.

Uso de atajos de teclado para crear elementos HTML y aplicar estilos CSS.

Personalización de listas desordenadas con font-size y otros estilos CSS.

Cambio de estilos de listas desordenadas utilizando la propiedad 'list-style-type'.

Eliminación de los marcadores predeterminados en listas con 'list-style: none;'.

Adición de imágenes como marcadores en listas utilizando 'list-style-image'.

Descarga y uso de iconos gratuitos de la web para personalizar listas.

Selección y uso de iconos específicos para elementos de listas desordenadas.

Introducción a las listas ordenadas y su configuración básica en HTML.

Cambio de estilo numérico en listas ordenadas con 'list-style-type'.

Uso de números romanos y letras en listas ordenadas.

Creación de un menú vertical utilizando listas desordenadas y enlaces.

Estilización de un menú con fondo, ancho, márgenes y alineación de texto.

Adición de bordes a los elementos de listas para区分各个部分.

Personalización de los enlaces del menú con color, fuente y padding.

Creación de un efecto de hover en los elementos del menú para mejorar la interacción.

Conclusión del curso y expectativas para el próximo episodio.

Transcripts

[Música]

qué tal amigos ya estamos de regreso con

nuestro curso de ss ss 8 clayon y hoy

vamos a ver el tema de las listas

bien como de costumbre vamos a eliminar

todo lo que hicimos en nuestro anterior

episodio

ok simplemente nos quedamos con el body

con la propiedad key controles en html

control s en listas en estilos perdón

punto css y bien hoy vamos a ver el tema

de las listas un tema sumamente

importante porque gracias a este tipo de

elementos vamos a poder crear un menú

tal como se tiene que hacer ok y bien

para hacer un ejemplo práctico y

recordad eso de las listas vamos a

comenzar primeramente en index.html

ok acá yo voy a traer los elementos

porque tenemos dos tipos de listas uno

de tipo ordenada y otro desordenada

vamos a comenzar con los elementos

desordenados y para hacerlo yo necesito

comenzar con un elemento o perdón con

una etiqueta de nombre web y dentro de

esta etiqueta huelén debo depositar los

segmentos o los bloques que van a

representar como segmentos dentro de un

menú o en este caso dentro de una lista

y para hacer eso necesito la etiqueta de

ley acá simplemente voy a darle del

nombre uno para poder identificarlo yo

me vengo a este punto y vamos a usar

este atajo de comando para no hacerlo

muy largo este vídeo aunque ya que

simplemente voy a cambiarlo por dos y

abajo puede hacerlo de la misma manera

voy a cambiarlo por tres presiono

controles y algo si podemos verlo pero

para verlo mejor me voy a venir a

estilos css lo que yo voy a hacer es

llamar a los elementos desordenados

weller

donde yo voy a trabajar un poco con el

font sites que sean de 40 píxeles o kate

punto y coma controles en más que todo

para poder visualizarlo mejor

ok entonces ya podemos ver los elementos

de tipo desordenado son de tipo

desordenado ya que no tienen un orden

específico ok

estos elementos que ves acá no lo

podemos andar un orden ok entonces para

verlo ordenadamente me vengo acá y lo

que necesito trabajar es

y prácticamente va a ser lo mismo voy a

copiar todo esto y lo voy a pegar acá

presión o controles en acá precisamente

ya lo podemos visualizar ok pero acá no

estamos aplicando también ningún efecto

porque simplemente lo estamos aplicando

o el ok yo podría hacer esto

simplemente cambiaría esto por un ajo y

si presiona controles si aplicamos ok

pero también tú podrías hacer lo

siguiente acá como van a tener la misma

propiedad

simplemente coma y escribimos la

etiqueta ojo es conveniente que siempre

sean del mismo estilo en este caso

listas que de este tipo de elementos o

tipo de etiquetas controles y ahí está

se aplicó a ambos para verlo mejor acá

yo voy a poner un margen de 40 píxeles

punto y coma controles

ahí está ya lo podemos ver mejor de

hecho podría aumentarlo a 60 controles

en perfecto bien hoy lo que vamos a

hacer es trabajar con algunos estilos

específicos de listas que es el caso del

que vamos a introducir en este instante

que sería el list style ok si yo escribo

la palabra no debes tener ya una idea de

lo que va a pasar controles y todos los

elementos o básicamente los elementos

que diferenciaban de un elemento

ordenado o también desordenado han

desaparecido

ok entonces con liz style non podemos

aplicar precisamente ese tipo de efecto

bien para no complicarnos mucho y ver

este tema en profundidad qué te parece

si simplemente nos enfocamos en la parte

del juguete en los elementos de una

lista desordenada ok entonces esto yo lo

voy a comentar para que no influye en

nuestro código y esto también lo voy a

quitar para enfocarnos los elementos

desordenados si presionó control s ahí

lo podemos ver

acá también en html control s para

desaparecer la opción de elementos

ordenados acá lo que voy a quitar es

esto el nombre y vamos a presionar un

control s para tener los elementos por

defecto que sería el círculo de color

negro ok también se puede hacer lo

siguiente si seleccionó esta opción

circo control s ahora los círculos no

tienen un color de fondo ok y si quieres

cambiar de forma podrías escribir la

palabra square controles ya y mis

elementos ahora tienen una forma

cuadrada ok entonces de esa manera

puedes personalizar los iconos con un

elemento desordenado pero también puedes

traer iconos como de facebook como de

twitter como de youtube descargándolo de

la internet porque como se hace lo vamos

a ver en este instante bien acá como

sugerencia te dejo esta página en el

cual podemos descargar iconos totalmente

gratis como vas a poder apreciar acá

tengo una variedad muy

muy interesante pero la parte que más me

interese es en la parte de categoría ok

puedes seleccionar cualquiera de estos

yo voy a seleccionar este interfaz de

usuario y gesto ok recuerda que en la

descripción de este vídeo vamos a tener

precisamente el enlace para dirigirnos a

esta página para no demorar mucho yo voy

a seleccionar este objeto ok que está

dentro de este grupo y acá vamos a tener

varias variantes ok y lo que yo necesito

en este caso que sea precisamente el

icono de casa o inicio como lo conocemos

en este caso acá voy a tener la

dimensión

yo voy a seleccionar el más pequeño

ok de esta casa en este caso 32

ok una vez hecho eso yo te sugiero

también que puedas verificar qué tipo de

elemento quieres descargar en este caso

yo voy a seleccionar png bien nos dirige

a otra página y automáticamente va a

comenzar la descarga o te diriges a esta

opción y puedes forzar la descarga

seamos presidentes y en la parte

inferior ya tenemos la descarga y

simplemente vamos a llevarlo a nuestra

carpeta

bien una vez descargado los elementos en

este caso la casa tú te debes dirigir a

esta opción el explorador y revisar que

tengamos el archivo ok yo lo tengo acá

es png es éste no lo podemos ver mejor

entonces qué te parece si me dirijo a la

parte de la carpeta acá ya lo tienes ok

yo lo he cambiado de nombre para mí

simplemente ese canal se llama host

punto png para no tener ninguna

confusión al momento de escribirlo ok

house p en ejemplo ok bien una vez que

ya lo tengas en tu carpeta simplemente

vamos a llamarlo cómo se hace eso para

eso voy a deshacer esta línea de código

vamos a volver a traer pero esta vez voy

a seleccionar esta opción list style

image ok y acá voy a seleccionar la

opción que dice url

acá es precisamente donde debo depositar

el nombre del icono en este caso la casa

para hacerlo mejor recuerda siempre

poner comillas simples y escribir el

nombre del archivo en mi caso howse

punto png

perfecto al finalizar punto y coma y si

presionó controles acá ya podemos

visualizar ok entonces tú puedes

descargarte el icono que tuve es

conveniente y puedes personalizar las

listas como sea de tu agrado ok

bien esto es muy importante vamos a

dejar de largo los elementos huele y

ahora vamos a trabajar precisamente con

los elementos ordenados o listas

ordenadas con la etiqueta o el perfecto

controles en acá vamos a cambiarlo por l

y precisamente se presiona un controles

ya acá se sigue aplicando vamos a borrar

esto porque para diferenciar este

elemento recuerda que como lista

ordenada tiene que seguir una secuencia

de hora 1 2 3 4 así sucesivamente ok

para este tema hay varias opciones

solamente todos son las más usadas que

sería esta lista es time qué te parece

si trabajamos primeramente con el

elemento

pero román que programan si hago un

control es ya ok entonces mis números se

vuelven como números romanos que acá voy

a cambiarlo a siempre

controles es simplemente como ejemplo

ojo simplemente como ejemplo se ponían

un margen de siempre ok para que puedas

verlo mejor porque no es el único

también podría cambiarlo a la loua

román controles en acá los podemos ver

en minúscula

ok vamos a probar el otro

creo que es

latín contra el s y ya tenemos esta

opción miren en letras mayúsculas y si

selecciona la otra opción que sería la

uar o latín controles ya lo tenemos en

minúscula simplemente eso en los

elementos de listas ordenadas ya la vez

vamos a poder visualizar otro tipo de

iconos los hay pero los más usados

pueden ser números romanos o también

letras ok ya sea en mayúscula o

minúscula y bien qué te parece si ahora

vemos un ejemplo totalmente sencillo y

práctico para construir un menú en este

caso como una lista ok de manera

vertical bien para eso voy a pasar todo

lo que hice acá también esto acá vamos a

comentarlo simplemente con la palabra

menú

bien que necesito para construir mi menú

vamos a recusar esto lo primero que

necesito acá es trabajar con un elemento

de una lista en este caso obviamente a

una lista desordenada huela bien una vez

hecho eso acá voy a traer los elementos

de ley y dentro de este ley necesito una

etiqueta de enlace para que el puntero

pueda cambiar el icono y dirigirme en

algún lado

yo voy a seleccionar la opción link ok

voy a borrar esta parte porque

simplemente necesito como adorno porque

no necesito dirigirme a ningún punto ok

simplemente como ejemplo una vez hecho

eso te vienes a este punto en lo que

vamos a hacer es dar una referencia a lo

que voy a ingresar en mi caso inició

como un nombre para poder visualizarlo

ok y de la misma manera voy a presionar

el atajo las veces que sea necesario

perfecto entonces nos venimos a este

punto yo lo voy a cambiar por mapa

ok yo lo voy a cambiar también por

imagen

en este punto vamos a cambiarlo por

libro de lo que se te venga en la mente

perfecto una vez que ya tengan los

nombres de lo que quiere es visualizar

vamos a presionar un control ese y acá

ya lo tenemos como elementos

desordenados y obviamente con la línea

que viene por defecto cuando yo ingreso

una etiqueta tipo a de enlace ok

entonces ahora vamos a pasarnos a css

que vamos a hacer en css vamos a

trasladar esto por acá para poder

visualizarlo mucho mejor bien que vamos

a hacer en css acá también lo voy a

comentar

- bien lo primero que vamos a hacer es

trabajar con huele pero yo te recomiendo

personalizarlo a qué me refiero con eso

que éste huele vamos a darle una clase

qué clase le vamos a dar simplemente el

nombre de menú

ok entonces acá en csc vamos a llamar a

menú

muy bien dentro del menú vamos a traer

la etiqueta que estamos viendo list

style en este caso yo voy a poner la

versión no controles e iu sino notas

ningún cambio entonces recuerda que en

html también tenemos que presionar

control s ya que esto lo hemos hecho

recientemente no hemos guardado ok

entonces recuerda que con list style

none lo que estamos haciendo es

desaparecer el icono que viene por

defecto dentro de los elementos de una

lista desordenada ok y bien qué más

podemos hacer por el momento qué te

parece si damos un fondo vamos a

seleccionar background color en este

caso de color café brawn punto y coma

controles y aquí ya podemos visualizarla

perfecto pero para verlo mejor voy a

incrementar el tamaño del texto con un

fondo sites que te parece de 600 píxeles

ok para que puedas verlo

perfecto

vamos a controlar el ancho with en este

caso vamos a poner la opción de 350

píxeles control s que ya lo tenemos

limitado

ok para verlo mejor voy a otorgar un

margin en este caso de 50 pixeles punto

y coma

controles ya ok ahora ya podemos verlo

de una manera centrada y también para

quitar este espacio yo voy a poner el

padding en este caso en cero

contra lesión ok para poder manipularlo

y también pueden aplicar de una mejor

manera el text align center

perfecto que entonces lo que hemos

manipulado es todo en general ok ahora

necesito pasar a los elementos de ley ok

estábamos en este punto ahora voy a

trabajar de una manera personal los

elementos el eje que entonces nos

venimos acá un poquito más abajo vamos a

ingresar al menú y seguidamente al

elemento l ok

abrimos llaves y dentro de acá

simplemente lo que yo voy a hacer es que

cada uno de estos elementos puedan

distinguirse ahora simplemente al tener

este fondo parecen que fuese simplemente

un solo elemento que tiene inicio mapa

imagen etcétera ok yo necesito que sea

inicio independiente mapa independiente

imagen independiente con una especie de

secciones o como una lista ok entonces

para hacer eso yo me vengo a este punto

y yo simplemente voy a escribir border

button que yeste border button en este

caso de la misma identidad que

manejábamos siempre a un borde tres

píxeles en mi caso

yo lo voy a hacer de color blanco ok

white

y obviamente tiene que ser de fondo

sólida ok o de borde sólido perdón

vamos a ponerlo acá para ver lo mejor es

impresión los controles en aquella

podemos ver una especie de división ok

gracias a border botones de 3 píxeles

que hay para poder verla mejor bien

simplemente eso en la parte de la ley

que es el contenedor de inicio de mapa

imagen libro y así sucesivamente bien

ahora necesito trabajar con estos

elementos inicio mapa imagen con la

etiqueta entonces lo que tengo que hacer

es entrar a menú

seguidamente a él y posteriormente

bien lo primero que voy a hacer es

quitar esta línea y recuerda que sólo

hacíamos contextos de colección en este

caso con punto y coma

controla ese ahí está ya no lo vemos

vamos a cambiarlo de color a esta opción

controles él se ve mucho mejor

de hecho también podría ser los

siguientes font family

selecciona la opción que tú veas

conveniente en mi caso yo voy a

seleccionarse ok si presionó punto y

coma control s no notamos ningún cambio

puede seleccionar otro no está el bética

voy a quitar el área el sheriff también

simplemente helvética control s

se ve mucho mejor ok y bien para poder

manipular los elementos dentro de un

elemento de ley yo te recomiendo siempre

cambiar básicamente al display ok a el

elemento bloque

gay block punto y coma y presión los

controles obviamente no puedes notar el

cambio porque ahora lo vas a poder ver

cuando aplique un padding qué te parece

de 14 píxeles punto y coma controles ok

y se ve mucho mucho mejor ya estamos por

terminar esta parte del menú y para que

parezca un menú vamos a darle el efecto

joven que entonces vamos a hacer lo

mismo punto menos vamos a echar hay ley

jajaja y dentro de a vamos a darle el

efecto cover

que abrimos llaves simplemente voy a

cambiar el color de fondo el background

que sea de color

tomate game punto y coma y también el

color de texto en este caso que sea de

color negro black punto y coma controles

ya nos dirigimos con el puntero del

mouse y ahí la tienes

ok hemos hecho un ejemplo sumamente

práctico y sencillo del uso de las

listas y más adelante vamos a crear un

menú de manera horizontal donde vamos a

poder ver la aplicación precisamente de

este elemento si tú quieres dirigir a

una opción recuerda que acá yo tengo

java punto html de nuestro anterior

episodio entonces acá vienen en inicio o

curso en esta pestaña yo podría cambiar

por este enlace ya va a punto html

miren aquí yo voy a poner java

en html que se están controles y si doy

un clic en el curso me lleva al curso de

java ok muy bien y bien eso ha sido todo

por hoy espero que este episodio haya

sido de tu agrado y nos vemos en el

siguiente episodio dentro de tu curso de

css