Bueno, el atajo que vamos a ver en esta ocasión es muy importante. Vamos a ver cómo hacer agrupaciones con los paréntesis. Y tengo aquí este ejemplo con este
header, que es bastante complejo porque tiene dentro varias cosas. Por ejemplo aquí tiene su menú de navegación con estos ítems. Dentro tiene también un figure
quizás para poner el logo de la página con su imagen y su figcaption. Y también tiene un título: un h1. Pues todo esto lo podemos hacer con una sola línea,
pero a modo de agrupaciones y vamos a ver cómo. Bueno, lo primero que tenemos aquí es la etiqueta principal, así que la ponemos. Ponemos aquí nuestro header
y después ponemos el operativo de mayor para hacer los hijos. Y aquí tenemos tres hijos a la misma altura. Tenemos tres hermanos: el nav, el figure y el h1.
Por lo tanto habría que hacer así: nav+figure+h1. Y si yo doy tabulado ahí vemos que se forman dos, ¿ok? Bueno, pues entonces lo que vamos a hacer ahora
para que esto no sea así como lo hagamos es: vamos a hacerlo de la siguiente forma. Vemos que todo esto es un conjunto, ¿verdad? Y aquí dentro hay sus
propias características. Es un conjunto independiente. Entonces aquí ponemos el símbolo de los paréntesis y ahí haremos ese conjunto. Aquí ponemos el +
para hacer el siguiente hijo y el otro hermano. Y este es otro conjunto. Por lo tanto, ponemos otro paréntesis y ponemos el + y hacemos el h1. Es el último
de los hermanos. Entonces aquí tendremos el menú de navegación, aquí tendremos el figure y aquí tendremos nuestro h1. Vamos a comenzar con el menú de navegación,
puesto que este ya sabemos y lo hemos visto como se hace. Aquí dentro, en este menú de navegación tenemos que poner nav, dentro la ul, dentro cinco li's
y dentro de cada li tenemos que poner nuestro enlace. Este código, el del vídeo pasado, es muy sencillito. Aquí ustedes ven como dentro del nav está la ul, aquí
pongo el símbolo de hijo, dentro de la ul están los li's, que hay cinco, ahí están los cinco, cinco li's, y cada uno tiene un a dentro, un enlace. Pues ya
tenemos creado el conjunto de este código con el operativo del paréntesis. Y ahora nos toca hacer el figure. Bueno, ¿qué es el figure? El figure
tenemos el padre y dentro tenemos dos hijos. Y como esto también es algo independiente pues nos creamos otro paréntesis y aquí dentro ponemos img+figcaption
¿Ok? Y ahora nos venimos al final de la línea y le damos tabulador. Y ahí tenemos toda la estructura creada de una ¿Vieron? Si yo aquí, he regresado al código
pulsando control+z, si yo aquí este último paréntesis… vamos a repetir la parte del figure, porque quizá sea un poco la que puede costarnos más. A ver, ahora
repetimos el figure. Imagina que yo aquí hubiera puesto el figure y hubiera dicho así, sin paréntesis: img+figcaption. Sin paréntesis, ¿ok? Cuando yo aquí
le diera al tabulador también se podría haber creado, ¿ven? Entonces ustedes entienden que los paréntesis siempre se pueden poner, pero pónganlos cuando
realmente vayan a crear un conjunto que necesite ser separado. Algunas cosas no tienen que ser separadas porque ya se sobreentiende, ¿no? Si yo aquí digo que el
figure, dentro, tiene todo esto, pues es lógico, ¿no?, que todo esto esté dentro del figure porque aquí ya esto lo estamos independizando del resto con este
paréntesis global. Podríamos poner paréntesis a cada cosa, pero no hace falta que ustedes lo hagan. Así que recuerden, esto práctico de los paréntesis cuando se
acostumbren y hagan muchas prácticas y lo utilicen mucho en su escritura de código les va a ser muy potente porque vieron que con una sola línea si ustedes tienen
claro en su cabeza cuál es el código final que quieren lograr con una sola línea vean cuánto tiempo se ahorran de escritura. Pues espero que te haya gustado
este vídeo. Así que puedes darle a like, compartir, suscribirte y continuamos con más atajos.
