Posicionar una lista en horizontal

Me impuse como reto hacer el clon sin ver los videos y completarlo me tomo 116 lineas en el editor. Ahora mirare los videos para ver que cosas pude haber optimizado.

Hay algo raro en el minuto 6:03. La alineación vertical no te va a centrar debido a que el instructor Diego no le da una altura al nav. Por alguna razón que no entiendo a Diego si le funcionó.

Pero al analizar el error me di cuenta que la height de nav no se esta definiendo, es por eso que nav toma el height de su contenido font-size definido en body.
Para corregirlo yo heredé el heigth de su padre header y el problema se solucionó.

header nav {
  display: flex;
  justify-content: flex-end;
  height: inherit;
}
header nav .navegationBar {
  width: 250px;
  height: auto;
  display: flex;
  list-style: none;
  justify-content: center;
  align-items: center;
}

puedes usar Flexbox Cheatsheet es un plugin de vscode que ayuda con flexbox
te muestra la función de como se alinea el display flex.

y se instala como: vscode live server .

El valor auto en realidad no toma el valor del padre, lo que hace es utilizar todo el espacio que dispone. Seria mejor utilizar en este caso inherit que si utilizar el valor de la etiqueta más proxima, en este el padre.

yo le añadi a mi codigo el hover para que se ponga el subrayado al poner el mouse encima de los links

a:hover{
 text-decoration: underline;
}```

Gente. Aca les dejo un link que explica como funciona FlexBox con ejemplos graficos FlexBox CSSTricks

Me encantan sus cursos. Soy ingeniera de desarrollo de software y todo lo he visto de pasada en la universidad, pero estos cursos me han ayudado a repasar y ha entender mejor las cosas.

esta chido para super-cargar mis habilidades en html y css !!

el height auto del .nav-right-section no hace nada y el curso pointer tampoco . …
el height auto : ajusta su alto para que sus elementos se muestren correctamente . El profesor dice que como el padre tiene 60px y .nav-right-section tiene su height auto , ahora este tendrá el mismo tamaño que el padre algo que es falso y si el auto solo ocupa lo que ocupa el elemento entonces el align-items tampoco hace nada ya que no tienes un alto para poder mover tus items…

Y las anclas por defecto traen el cursor pointer “USER AGENT STYLESHEET” … Quizás el profesor lo explique mas adelante, solo quise pasar este dato que me pareció curioso …
Hay más cosas que se pueden mejorar pero esperaremos que el prof las haga mas adelante ❤️

height: inherit; tambien podemos decir que herede el alto del padre.

Me gusta como explica, este profesor.

Una de las cosas que me ayuda muchísimo para entender dónde empieza un área y dónde acaba la otra es ponerle colores a cada selector, como lo hago aquí:
Así, puedes moverle y ver muy bien qué es lo que está cambiando:

voy en el segundo .21 y lo que he visto me dejó impactos, está super genial la forma de explicar de este profesor!!! Alguien sabe si tiene otros cursos dentro de Platzi?

Arquitectura CSS BEM

Les recomiendo esta extension para para el flexbox https://marketplace.visualstudio.com/items?itemName=dzhavat.css-flexbox-cheatsheet

Posicionar una lista en horizontal
.
Clase, es el identificador que le ponemos a una etiqueta para que a través de CSS le otorguemos estilos únicos. Los ID son únicos.

Con este juego pueden practicar Flexbox amigos

Genial, hasta ahora todo clarisimo. Igual es para repetir una y otra vez el curso.

les recomiendo este video para aprender mejor BEM, https://youtu.be/bvnzyXGkNY4

• Clases → genéricas. Se van a repetir.
• Id → Único.

Gran explicación y una forma muy sencilla de acomodar los elementos de navegación

Genial cada vez se aprende mas a no peliar con Css !jaja

La etiqueta a por defecto ya presenta su hover con cursor:pointer, por lo que no es necesario agregar esa propiedad en CSS 😅

Aquí mi aporte

Por los momentos no he trabajado que el fondo sea responsive, pero así vamos…

¿Quién esta Viendo esta clase en el 2023?

(

Alineacion en horizontal:

• width: 60px;

• justify-content: center;

Alineacion en vertical:

• height: 30px;

• align-items:center;

Si no definimos un tamaño de altura o ancho en la caja, las alineacion no funcionaran ya que no tendran un tamaño sobre el cual referenciarse para posicionar el contenido.

BEM:

<button class="button">
	Normal button
</button>
<button class="button button--state-success">
	Success button
</button>
<button class="button button--state-danger">
	Danger button
</button>

¿Qué diferencia hay en poner :

header nav .nav-right-section{
}

a poner:

.nav-right-section{
}

suponiendo que esa clase es única?

Es mejor heredar los estilos de los padres si se repiten o proporcionarcelos de manera independiente?

<nav {
	display: flex;
}

nav ul {
	display: inherit;
}
>

La verdad que me esta gustando mucho el curso, tiene muy buenas practicas que en el curso de desarrollo no vi y la verdad que son muy utiles, asi como el * para dale el mismo estilo a todos elementos, o bien de la forma rapida para crear la estrucura html usando “!”. Tambien me gusto como nombre a las clases y elementos en css, para identificar que sean unicos. !

class: Las clases se utilizan cuando se reusan los estilos en diferentes partes del código. Las clases empiezan con punto (.)
id: Los id se utilizan cuando se aplica estilo sólo una vez.

flex-start: Alinea elementos al lado izquierdo del contenedor.
flex-end: Alinea elementos al lado derecho del contenedor.
center: Alinea elementos en el centro del contenedor.
space-between: Muestra elementos con la misma distancia entre ellos.
space-around: Muestra elementos con la misma separación alrededor de ellos.

Deben colcoar esta pseudoclase para etiqueta a en el nav tal vez se aplique en otros a:

nav .nav-right-section a:hover {
text-decoration: underline;
}

Esto aplica la línea al momento de pasar el mouse!

Me gusta como escribe código este profe!!

Class = Generico
ID = Unico

Es muy buena la explicacion de De Granda. Gracias!

Me hacía falta esta clase para entender por completo al HTML y CSS

acá les dejo un juego de CSSGrid muy entretenido para practicar la técnica

¿Y los rem? 👀
En mi caso lo hice todo con REM.

Clase 8 - Posicionar una lista en horizontal

¿Qué metodología podemos usar para nombrar de manera fácil nuestras clases?

• BEM.

¿En qué casos debemos usar el selector de clase?

• Debemos usar el selector de clases cuando vayamos a repetir el mismo código en varios elementos.

¿En qué momento debemos de usar el selector de id?

• Cuando queremos estilizar un único elemento de HTML.

¿Qué pasa cuando definimos la propiedad width o height con un valor de auto de un elemento hijo?

• El elemento hereda el tamaño que tiene definido el padre.

¿Cómo podemos quitarle las viñetas que tienen los elementos <li> de una etiqueta desordenada u ordenada?

• Con la declaración:

list-style: none;

¿Cómo podemos quitarle el subrayado que tienen por defecto los elementos <a>?

• Con la declaración:

text-decoration: none;

¿Para qué nos sirve la declaración cursor: pointer;?

• Nos permite hacer que el cursor cambia a una mano solo cuando el usuario pase el mouse por encima del el elemento que tenga esta declaración.

Para los que ya se aburrieron de flexbox froggy hay un juego de zombies con flexbox, muy divertido chéquenlo 😄.
https://mastery.games/flexboxzombies/

📌 Width: Especifica la anchura del area de contenido de un elemento.

📌Height: Especifica la altura de un elemento.

📌Display: Para posicionar un elemento.

📌list-style: Quita los bullets que ya no nesecitas.

📌Justify-content: Centramos el contenido para que no se quede unicamente a la derecha.

📌align-items: Define la forma en que el navegador distribuye el espacio entre y alrededor de los elementos a lo largo del eje secundario del contenedor flexible.

📌 Margin: Margin establece el margen para los cuatro lados.

📌Margin-right: Establece el margen en el extremo derecho del elemento, los valores positivos acercarán el elemento a él y los valores negativos lo acercarán.

📌Color: Selecciona el valor de color de primer plano del contenido de elemento de texto y decoraciones de texto.

📌Text-decorarion: Para quitar subrrayado.
📌Cursor-pointer: Para poner la imagen de la mano al posicionar el cursor sobre el texto.

Para los que quieran practicar FlexBox les dejo un juego que me ayudo muchisimo se llama FlexBox Zombies lo recomiendo muchisimo

Mis respetos para el maestro Diego De Granda.

Excelente el tema de maquetacion en HTML utilizando la arquitectura semantica, esto nos facilitará más adelante cuando emepecemos a trabajar con los estilos

CODIGODEL CSS

a {
text-decoration: none;
cursor: pointer;
}

header {
width: 100%;
height: 60px;
}

header nav {
display: flex ;
justify-content: flex-end;
}

header nav .nav-right-section {
width: 250px;
height: auto;
display: flex;
list-style: none;
justify-content: center;
align-items: center;
}

nav .nav-right-section a {
margin-right: 10px;
color: #000000;
}

CODIGO DEL INDEX.HTML
<ul class=“nav-right-section”>
</ul>

Si quieren hacerlo 100%realista como yo el verdadero color de la fuente del nav de google es #212121
y además si agregan al css:

nav .nav-right-section a:hover{ text-decoration: underline; }
cuando pasen el mouse por encima se subraya el texto tal como en google.

buena explicacion, pero malas practicas hubiera estado genial que escribieras los selectores con la nomenclatura de BEM me imaginó que platzi debe tener otro curso donde te enseñan solo eso en 34 videos, en fin…

poder entender la metodologia BEM para nombrar clases en las etiquetas de HTML te va a ahorrar muchos dolores de cabeza y ademas podra hacer tu codigo reutilizable. por lo que te aconsejo sepas aprenderla muy bien BEM

gracias

Las clases de este profesor son de muy buena calidad, se nota que se piensa mucho el learning path antes de ejecutar la clase.

Excelente explicación de metodología BEM

Tenia la duda de que porque diego usa el tema de especificidad, cuando se puede colocar directamente la clase, lo probe y no genera ningún cambio, y a la conclusión que llegue es que a menos que se tengan estilos ambiguos se debe dar la especificidad, ademas de lo que lei en comentarios es por tema de que cuando son proyectos grandes es mas facil entender el codigo especificado de esa forma

que pasa si cuando guardo, ya no se actualiza?

psd: En la mañana estaba estudiando y deje todo abierto y ahora es de noche y estoy retomando las clases. ¿Eso tiene un impacto ?

Mi navegador colocó automatiamente el cursor en forma de mano sin codificar cursor;pointer;

¿Por qué al dar margin y cambiar el color a los links al seleccionar escribe nav .nav-right-section a y no escribe nav .nav-right-section li a?

Por qué no puso el li es mi pregunta. ¡Gracias!

les dejo un juego que esta genial para practicar flexbox (no es el de la ranita). tambien tiene para practicar grid.
https://mastery.games/flexboxzombies/

Disculpen, en el mintuo 6:03 donde diego poner

<align items: center;>

a mi no se me centran los elementos, de hecho no hace nada esa linea de estilos, algien sabe si sirve de algo en este caso?

Solo para aclarar no es necesario poner header nav .nav-rigth-section como se ve en el minuto 2:56 solo tienen que poner punto y el nombre de la clase que le hayan puesto , ósea solo esto .nav-rigth-section

• width: Sirve para definir el ancho que va a ocupar nuestro elemento en nuestra página web.

• height: Define el alto que va a ocupar nuestro elemento en nuestra página web.

• list-style: Quita los marcadores (o viñetas) de nuestras listas.

• align-items: Alinea mis elementos de forma horizontal. Podemos elegir en qué parte de nuestro contenedor podemos alinear nuestro elemento.

Aquí les dejo un link para que entiendan un poco mejor el funcionamiento del align-items:
https://www.w3schools.com/CSSref/css3_pr_align-items.asp#:~:text=CSS align-items Property 1 Definition and Usage. The,Sets this property to its default value.

muy claros los conceptos de css y html

Clases y Ids de CSS

Genial, Gran clase

Como en el header ya tenemos la declaración display: flex. Podemos ya directamente utilizar display: inherit.

Muy buen proceso, se entiende el paso a paso

Muy claro el paso a paso.

Hola compañeros. Me ahorré mucho código y me dio el mismo resultado:

header nav .nav-right-section{
  width: 250px;
  height: auto;
  display: flex;
  list-style: none;
}
header nav .nav-right-section a{
  padding: 10px;
  }```

aprendí algo que no sabia, por eso es bueno no adelantarse en los cursos.

aprendi la etiqueta cursor 😃

Relevante lo que dice respecto a las clases.
Repado.
Class —> Identificador de una etiqueta en HTML para que a través de CSS podamos darle un estilo único.

Me costaba antes esta parte

Con esta página se puede profundizar mas el tema de flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Con que facilidad dictas las clases, me sorprende demasiado.
Si mis profes de la carrera fueran como tu D:

yo use un display:inline-flex que igual coloca los elementos en forma horizontal y utiliza el espacio necesario por lo tanto no use width 250px y puse padding y margin en 0 para quitar el que traen por defecto o el que asigna el navevgador (40px en este caso) para centrar bien los elementos

Hola,
Como ya marcaron varios, me parece que el profesor aquí no lo deja claro, min 3:54.
Si ponemos “height: auto;” al .nav-right-section, este no va a tomar la altura del header, o sea los 60px, toma la altura del contenido.
Para que tome la altura del header, una opción es agregarle al nav “height: inherit;” para que el nav herede la altura del header.
Y ahora si el .nav-right-section pasa a tener los 60px.
Y agrego, se podría eliminar el “height: auto;” del .nav-right-section, porque en este caso no tendría sentido.

Excelente clase, todo muy claro hasta ahorita…

Eso de colocar header nav .nav-right-section no hace para nada falta, para eso estás usando clases. Con solo colocar .nav-right-section es suficiente.

Nunca me quedo muy claro cuando debo usar (justify / align) -content; item o self

Resumen:

Una buena forma de separar elementos es con la propiedad gap. Un gap de 1 o 2 em y ya está!

Para separar los items entre si, yo he usado column-gap: ;
esto es una propiedad del modulo flexbox y grid.

CSS: alinear horizontalmente una lista (header)

se nota que bajaron la velocidad para que termine durando 2 horas.

Que raro se hace cuando el profesor habla y habla y la pantalla está quieta con su código. Al menos otros cursos se ve una minipantalla con el profesor moviendo los brazos…

Este ejercicio del nav ya lo hice, lo hice diferente y esto me genera una duda.
.
La forma en que lo hice es que le asigné un width de 100% al contenedor que dentro tiene los anclas y luego con flex los alineé a la derecha.
.
El resultado visualmente es el mismo. Esta claro que hay diferentes formas de hacer las cosas.
.
Mi cuestion es, asi como existe BEM para tener estandares sobre nombrar las clases… ¿Existe algun tipo de estandar para saber como trabajar las estructuras?
.
Por ejemplo, Por qué colocar un <ul> con <a> y <li> y no botones en el header?
Los margenes se le colocan al contenedor o al elemento?
Todo elemento debe estar metido dentro de contenedores o solo los que consideremos necesarios?
Por que una pagina como platzi (Y muchas otras) tiene tantos contenedores dentro de otros contenedores?

Ese fondo está muy duro😮‍💨

CLASES: SON GENERICAS, SE USAN PARA SECCIONES QUE SE VAN A REPETIR Y LE PONGO ESTILO

ID: SON UNICOS

El cursor:pointer; que agrega al ancla no es necesario, ya que por defecto ya lo hace

Queda muy claro el apartado de las clases, podemos copiar ese estilo y usarlos con otros elementos siempre que no tengan una ID única.

Creo que darle la propiedad "cursor :pointer; " a las los selectores “a” esta de mas, por defecto traen esa propiedad todas las “a”

hola! como estan! Dejo mi pequeno comentario 😃 , a la hora de seprar los elementos en el nav, en vez de hacerlo como el profe Diego, lo que hice fue utilizar justify-content: space-between, y para que no exista tanto espacio entre ellos, cambie el width a 150px.

header nav .nav-right-section {
        width: 150px;
        display: flex;
        list-style: none;
        justify-content: space-between;
        align-items: center;
        
}

Posicionar elemento a la derecha

Otras arquitecturas conocidas son OOCSS y Atomic CSS.