5 Grandes Errores con CSS Layouts

[@CodelyTV]

(Rafa) 😡 EL Z-INDEX 9999999 ES LO MEJOR QUE HAY. ¿A qué sí? 👼

[@carlosgallegos789]

Confirmo :v

[@untens3346]

hasta este momento el comentario tiene 9 likes, ¿coincidencia?. no lo creo.

[@laura.seoane]

Si quieres que la persona que tenga que meter mano por ahi te odie, sí, sin duda.

[@liebgottcat]

seguido de un !important, de otra manera no vale para nada

[@mayerson18]

Jajajajajaja yo tambien lo usaba

[@twisterevolution]

Queremos mas Nuria Linter

[@CodelyTV]

🔦🔦🔦🔦🔦🔦🔦🔦🔦🔦

[@llaandresmcll3833]

sii por favor

[@code_castle]

Con Nuria en el Team esto está agarrando otro level... Buena elección.

[@CodelyTV]

Totalmente 😊😊✌️✌️

[@magdiel7ikari]

JAjaja la cara de rafa cuando probaron sin el z-index, 5:20!!

[@codigo3603]

1. Alterar el flow del CSS innecesariamente (0:36) 2. Z-Index excesivos (4:20) 3. Utilizar tamaños fijos (6:21) 4. Abusar de las Media Queries (7:58) 5. Flex vs Grid (9:25)

[@Cristian-qh6ww]

muy bonito el sticky y el grid, pero cuando IE es un requisito agua y ajo ;)

[@ep4r4]

Seria bueno que se hablara de las buenas practicas con el inspector de elementos y las ventajas de usarlo. Saludos de Colombia.

[@IVargasO]

Primer video que veo del canal, interesante el formato.

[@ricardorien]

Que dura Nuria. No me canso de escuchar buenas practicas en el código de CSS, es dificil de encontrar.

[@williamm5947]

Me gustó mucho el video. Aprendí bastante de las recomendaciones de Nuria.

[@ezequiellopez3645]

Me encanta todo lo que aprendo de Nuria!

[@adrianantanonorozco3303]

Genial las explicaciones, estaría muy chulo que hablase en algún otro vídeo sobre SASS o preprocesadores del estilo, ya que es css pero cogiendo muchas cosas de la programación como bucles, funciones(mixins), forma más sencilla de declarar las variables, etc. Y más adelante alguna cosita sobre JS o TS, frameworks o librerías como Angular, React, Vue, Svelte, Polymer (o una de tantas que salen cada 2 meses xD). Más participación de Núria es bien, eso significa frontend así que 10/10 jajajajaja.

[@txarli5011]

Pedazo fichaje! Me ha encantado la explicación de Nuria. Eso sí, el problema viene cuando tienes que soportar IE11 y no puedes usar position sticky o css grid... A mí me encantaría ver cómo resuelves estos problemas de compatibilidad entre ciertos navegadores. Lo dejo como idea :) Muchas gracias!

[@ricardorien]

¡Tremendo reto!

[@camilogomez5151]

IE que le den por cul0, si microsoft no haca eso compatible va a desaparecer. Como desarrollador siempre es un dolor de cabeza ese browser jajaja.

[@CrafterSama]

Muerte al IE11

[@joseamartinezr1966]

Es flipante lo que sabe Nuria de CSS (y supongo que de diseño web, claro), qué envidia. Deja en pañales a cualquiera!!! Enhorabuena por el video!!!

[@ivandios4]

Acabo de descubrir este canal, por fin un podcast de programación

[@facundoarlingtoncodorniu9961]

Me encanta Nuria. Quiero mas videos de ella

[@-trycatch-]

Buen video, Yo tambien siempre uso puros 9s para z-index e igual seguramente lo pongo a elemntos que no lo necesitan

[@TT7T7T7]

muy interesante...gracias

[@docentehectorcetina]

Excelentes tips muchas gracias por generar buen contenido 👍🏼

[@otharwaotharwa1462]

La parte de diseño en general la tenemos muy desestimada y en realidad es super importante. Por mas Nuria Linter !!!

[@emilianoguerrero4984]

Nice, todo los videos son una joya :)

[@TheSldsnake]

Ya era hora empizo mañana mi suscripcion a codely

[@katherinebl]

Buenísimo! yo también soy del team de z-index bajitos como Nuria la Linter 😄

[@jhonoquendo6163]

Genial video... Creo para mi que CSS hoy en día está poderosísimo, pero no es fácil de dominar... Tiene sus cositas. Sigan hablando más de CSS

[@LuisCabrera]

Genial el video no conocia position sticky

[@iamleinad1381]

Hay navegadores que aún no lo pillan bien, no se si ahora que por fin explorer va a salir de nuestras vidas sea 100% utilizable, pero safari es muy perro y a veces se pasa el css por el forro de los cojo... 😂

[@joseaburt]

Nuria eres mi superheroína!

[@leonardolastra9585]

Les escribo sólo para decirles que me ha gustado mucho y me ha parecido contenido de calidad para mí. ¡Saludos desde Chile!

[@thereciolol2733]

Saludos desde honduras cracks son los mejores

[@3Designer_col]

esta chica sabe bastaaaaante

[@alexdavidhurtadoyeneris7116]

Excelente vide, el tema del rem, porqué debo usarlo en padding o margin?

[@gevurahs]

Omg el position sticky. Además ha ido al padding/margin típico que sabía que iba a estar ahí (cuantas veces lo habré puesto con el fixed xD)

[@kmilo93sd]

En mis tiempos de novato, cuando tenia que arreglar problemas de css, muchas veces eran z index, siempre encontraba exagerado que le pusieran z index 9999 999999 o más, si con poner 1 o 2 ya era suficiente y se entendía más el orden, aparte no eran ni necesarios muchas veces. Me alegra saber que estaba en lo correcto.

[@nicolascondoluci8576]

¡Genia, Núria! :)

[@luisfernandomontoya181]

Me encantaría si pudieran subir más vídeos de Nuria.

[@JoseRivastonistation]

Jajajajaja sticky... Rayos, . Jajaja Rafa no está solo en esto jajaja

Más Nuria linteeer. z-index:2; como máximo! 🤟🏻

[@ronaldm.r]

Vea me sorprende que él no conociera el position sticky jajaja XD pero esto me deja saber que no sabemos todo en la vida he, excelente coders ambos, me gustó el video!

[@CodelyTV]

Jajajaja, Rafa al aparato: Me he centrado tanto en back que llevo mucho tiempo sin hacer nada de front y todo ha cambiado por completo 😂

[@rodasDesign]

gracias señores, vaya descubrimiento el canal

[@sirlymary]

Que buen video

[@cervezafreskita3214]

Lo del z-index siempre me recuerda a eso de: "qué.. que qué de qué... Que qué de qué de qué..." Yo también uso ceros y unos, y siempre intento evitar el z-index :) saludos

[@juandeastora8317]

bueno video con el que me he topado, varias cosas del css que me hago como que no existen xD

[@jorgelujanm]

va dentro o fuera del ? Porque sticky no funciona si está dentro de .

[@romariogamesu]

pues el z-index hay que usarlo con cuidado, mas que todo con los que vienen de algunos plugins nos forzan a subir el número, pero puede ser de 0 a 5 y ya

[@emmanuelvalverderamos]

Lo que me he podido reír con la cara de Rafa cuando ha dicho lo del modal 🤣🤣🤣

[@CodelyTV]

Jajajajajajajajaja 😂😂😂😂😂

[@lavendernova1072]

Hay poca información de buenas precticas, metodologías y layout en css, me gustaría que se profundizará sobre esto ya que en la web hay información pero por tartecitas y no permiten hacerse una idea en general, también sobre trabajar css sobre bootstrap o cualquier otro framework.

[@carlossanchezacosta8289]

Graciassss.. y si, k siga Nuria k explik muy bien Z-index:1;

[@ricardorien]

Con z-index tengo entendido que se debe ir de tres en tres, números impares, por si se necesita un re-ajuste posterior.

[@eloytorres846]

Position sticky, menos mal que lo descubrí al poco de empezar con css

[@yefweb3848]

En vez de la suscripción puedo comprar solo el curso ?

[@ermes111sp]

Cual es el tema/extensión que usas en el Firefox. No queda nada mal esos colores "light"

[@bujurulu]

para los z-index uso variables semanticas: --z-header: 9; --z--modal: 19 y si necesito otroque por ejemplo este definido como "encima del modal" le pongo un calc " z-index: calc(var(--z-modal) + 1)) y asi garantizo que siempre se donde estan mis z-index

[@Saggiskate]

Yo uso en z-index a partir del 1, pienso que es mas práctico para apilar en capas, eso si, usar burradas como 999999999, solo cuando toco proyectos hechos por otras personas. Y lo del sticky, lo intenté usar, pero varias veces no me funcionaba con algunos navegadores, supongo que se habrá estandarizado ya. La verdad es que pensaba que era mas chapuza, pero me estoy dando cuenta que hago bastante buena praxis con css, me falta meterme mas en el tema Grid, pero creo que ya hay un curso del que me puedo fijar.

[@adridoz]

9 y el resto de números también ☺️

[@yerenpalacios8156]

Lo del sticky me lo aprendí cuando me di cuenta de que solo usaba position absolute y fixed

[@rads72]

Me han dado ganas de hacer el curso hmm

[@pablozapeta4098]

eres una diosa del css "Si no quieres ser como Rafa hazte este curso" xD

[@ecmc]

Yo uso números normales, uso el valor de la capa en el diseño para los zindex

[@jago5101]

Nuria es un pan, me gustaría que me explique asi los errores, tengo un profe que me explica asi

[@oscargalvez4]

Yo también soy de 9 en el z-index, aunque me estoy quitando, porque también me di cuenta que no era necesario.

[@fernandopoveda9861]

Se ve bien la pagina, no puedo creer que hayas hecho tu sólo....XD XD, incluido facebook...podías encontrarlo con el z-index:99.

[@wladimirrocha9417]

Estoy viendo el vídeo justo ahora. He usado z index y por cosas lo más que llegué fue a 5. En el caso de grid y CSS se combinan

[@rayizard]

Nuria, qué opinas de Tailwind?

[@moviedomof]

genia Nuria .. envíenme una que odio front

[@joserivera7632]

Yo también uso el 1 en el z-index

[@xavierll]

Una vez me maté a poner 999999 sin ver su efecto hasta que me dí cuenta de que era imposible sacar la ventana que intentaba porque estabe en un !

[@rads72]

para cuando esta disponible nuria linter en vs code ?

[@miguelcastano3210]

un libro de buenas pràcticas que incluya Saas para estructurar proyectos y hacer las cosas bien?

[@jeronimojimenez5365]

Con lo cómodo que es usar z-index 1! Y si acaso z-index 2 cuando quieres ordenar dos objetos, los dos por encima de la base.

[@julioojeda2283]

Yo tambien uso 9999 ya que uso otras librerias CSS y hay veces que ya tienen otros valores

[@ramam7787]

El z-index solo se usa cuando tenés posiciones absolutas, si no no hace efecto sobre el div. Y para el responsive no es recomendable usar valores absolutos

[@laura.seoane]

Yo para el z-index, como para casi todo en CSS, uso prueba y error. Si es 3, pues 3 y si es 9999999 pues es que algún cabrón como Rafa usó 999999 anteriormente. Con ganas de meterle mano al curso!!! Pero es que no paráis, no me da la vida 😂😂😂

[@CodelyTV]

✌️✌️✌️ A tope vamos 😊 9999999

[@EladioRochaV]

Yo también suelo usar valores grandotes en z index 😂 como 9999 xD. Pd: buen video

[@CodelyTV]

Bienbienbien!!!!!

[@ricardotovar6667]

Usar height es un error del que me di cuenta hace tiempo. Arruina, no solo en el caso de que queramos añadir más texto, el responsive también sufre.

[@vkorta4225]

Anda que menudos chapuzas los del 9999. Yo siempre 1111, que es mucho más elegante. ;)

[@noelhdez3640]

tambien uso el valor 1 en z-index, me quede loco cuando vi todos esos nueves xd 6:01

[@ingmoscar2488]

yo incrementaba en +1. Pero viendo la estructura de boostrap use sus valores e incrementaba 5 o 50. Por si necesitaba algo encima

[@joeswizat9941]

el z-index he usado 1, 2 y alguna vez 3 pero si conozco algunos que adoran el 9999

[@andresin87]

Yo tambien uso zindex, -1 y 1

[@susor708]

siempre empiezo con 5 en el z-index... No sabía que era tan poco común 😂

[@ep4r4]

Yo también uso 1 en el z-index

[@land4bikers]

Sería genial ver la solución del error, no sólo saber que está mal, ya que quedamos igual 😅 Saludos

[@leunknownr805]

Pero sí lo dice en el video, revísalo bien :0

[@saulsalazar7410]

Uno de los problemas de GRID es que no es completa mente compatible con los navegadores(en especial los nativos que tienen android) y FLEX al tener mas tiempo es compatible. Si el target de la página web que se esta creando es muy especifico y sabes que usa lo ultimo en tecnología, no veo por que no deban usar GRID. Por ejemplo la página que muestran es para personas que desean aprender algún curso de desarrollo web, normal mente usan un navegador como chroome o firefox y tienen las ultimas versiones de estos. Aquí no hay problema con usar GRID. Pero si la página en cuestión fuera una de recetas de cocina, la cual tiene un público más amplio y lo ideal sería usar FLEX.

[@jeanpaulsanchezmendoza1328]

Yo sí he utilizado z-index como 1, 2, 3, etc. Incluso los he tenido mapeados

[@sheruzum22]

Wow

[@yoandyvillaman2790]

un valor para z-index diferente a 9? eso existe?

[@joseamartinezr1966]

Yo, el z-index lo uso en saltos de 10 en 10. Vestigios de una programación estructurada en BASIC de los tiempos de mari-castaña jajjajaaja (justo después de la extinción de los dinosaurios) :)

[@ronaldcarhuaricra7960]

nuria destruyendo sus Z-index de Rafa

[@JancoBH]

con los z-index cuando me toca usarlos también uso el 1, nunca me gustó eso de 9999999 sentí que era muy feo y por lo visto no estoy muy encaminado 🤣

[@VictorAlberto87]

Bueno en mi caso estoy aprendiendo a limitar los "zIndex" en un rango de 1 al 10 como máximo, antes solía usar de 9999 a 999999, pero luego de tener tantos elementos con esas cantidades se te puede ir de las manos y crear un desorden total.

[@danielhernandez-jz2sr]

Para los z-index hasta negativos he usado, pero eso siempre variaba de -1, 1, 2 jajajaajajaj

[@dks7086]

casi nunca uso z-index, solo cuando uso alguna librería que lo use y me de un comportamiento extraño.

[@AndresSaaN]

Ostia lo de los 999999 me ha matado. Yo soy otro gañán que los usa sin pensar. 😂

[@faller222]

Yo no uso z index. Una vez meti un map de leaflet y ahi si que tuve q meter un z index en mi meno por que el mapa venoa con z index 150. Un saludo

[@marcelochoquepacheco6416]

Sip uso: -1, 0 y 1, casos extremos la confiable 999999999999999😂

[@luisdiegobayonafarfan8643]

Yo utilizo mucho el 1

[@marcelolavizzar]

me he suscripto a este canal por Nuria,, muy grosa esta chabona.

[@4strodev]

Descubri que era el z-index con Nuria asi que empece con buenas practiacas

[@estebanmmp]

Yo creo que no he utilizado un z-index mayor de 7. jjaja

[@rr69sport69]

yo en z-index uso así: 1 para lo menos importante, 10 para posicionamiento si es relativo al padre, 100 para fixed y 200 si es modal. Y no los cambio, porque por teoría se sabe que si están a la misma "altura" el flujo o flow es el que da la última palabra xd

[@carlosmarti4010]

Yo también soy del #team_zindex_123 como Núria. Por cierto, ¿qué piensas del text-indent: -9999px;?

[@CodelyTV]

Eso da para otro vídeo 😬

[@carlosmarti4010]

@Núria Soriano Acabo de caer jajaja. Si el elemento está a la derecha de la pantalla y esta es 8K ya tiene que salir flotando un texto por ahí.