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 😊😊✌️✌️

[@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)

[@magdiel7ikari]

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

[@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!!!

[@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.

[@williamm5947]

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

[@Cristian-qh6ww]

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

[@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.

[@ivandios4]

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

[@ricardorien]

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

[@leonardolastra9585]

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

[@ezequiellopez3645]

Me encanta todo lo que aprendo de Nuria!

[@alexdavidhurtadoyeneris7116]

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

[@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.

[@pinocodex]

Nuria eres mi superheroína!

[@jorgelujanm]

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

[@thereciolol2733]

Saludos desde honduras cracks son los mejores

[@ermes111sp]

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

[@3Designer_col]

esta chica sabe bastaaaaante

[@emilianoguerrero4984]

Nice, todo los videos son una joya :)

[@facundoarlingtoncodorniu9961]

Me encanta Nuria. Quiero mas videos de ella

[@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 😂

[@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.

[@otharwaotharwa1462]

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

[@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... 😂

[@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

[@katherinebl]

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

[@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)

[@TheSldsnake]

Ya era hora empizo mañana mi suscripcion a codely

[@-trycatch-]

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

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

[@rads72]

para cuando esta disponible nuria linter en vs code ?

[@emmanuelvalverderamos]

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

[@CodelyTV]

Jajajajajajajajaja 😂😂😂😂😂

[@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

[@yefweb3848]

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

[@miguelcastano3210]

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

[@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

[@rodasDesign]

gracias señores, vaya descubrimiento el canal

[@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.

[@JoseRivastonistation]

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

[@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.

[@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.

[@XMAX7X]

muy interesante...gracias

[@rayizard]

Nuria, qué opinas de Tailwind?

[@luisfernandomontoya181]

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

[@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.

[@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.

[@carlossanchezacosta8289]

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

[@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

[@Lordyrock7787]

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

[@pablozapeta4098]

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

[@tabbaking]

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.

[@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

[@docentehectorcetina]

Excelentes tips muchas gracias por generar buen contenido 👍🏼

[@yoandyvillaman2790]

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

[@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 !

[@eloytorres846]

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

[@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

[@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

[@adridoz]

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

[@juandeastora8317]

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

[@dks7086]

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

[@nicolascondoluci8576]

¡Genia, Núria! :)

[@rads72]

Me han dado ganas de hacer el curso hmm

[@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.

[@joserivera7632]

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

[@yerenpalacios8156]

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

[@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.

[@ingmoscar2488]

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

[@sirlymary]

Que buen video

[@moviedomof]

genia Nuria .. envíenme una que odio front

[@robertomoreno7906]

Developer: "Eso está bien no? Eso está bien Nuria..." Designer: 🙄 Como en la vida real XD

[@CodelyTV]

Totalmente 😂😂😂

[@Zeneka10]

¿Designer?

[@mipisha]

Zeneke yo me he quedado igual 😂

[@Jadexb04]

Flexbox modificas en una dimensión y grid bidimensional, cada uno tiene su uso .

[@sanchezcarlos1986]

05:45 jajaj Nuria: si necesitas z-index, empieza bajito. Rafa: pon 99 😂

[@julioojeda2283]

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

[@misterdevio]

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

[@jeanpaulsanchezmendoza1328]

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

[@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

[@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) :)

[@AndresSaaN]

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

[@ronaldcarhuaricra7960]

nuria destruyendo sus Z-index de Rafa

[@eduardotrujillo9316]

Hoy aprenderemos a trabajar con capas en Photoshop. No hay ningún botón para añadir capas en 999 en 999?

[@noelhdez3640]

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

[@nachorodber]

Estáis seguros que son necesarios los z-index? No sé a mi siempre me encantó trabajar el CSS, ahora me pasé a sass y es la leche

[@vkorta4225]

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

[@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

[@KleineHassler]

Ahora soy mas fan de Núria

[@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

[@danielhernandez-jz2sr]

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

[@logan_business]

En la escuela te enseñan 99999 y luego tu como alumno 999999999999

[@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 🤣

[@gbeck1065]

yo uso 999 pero es que aveces cuando estas resolviendo algo a lo rápido tiras un numero seguro y generalmente es el 999

[@EladioRochaV]

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

[@CodelyTV]

Bienbienbien!!!!!

[@andresin87]

Yo tambien uso zindex, -1 y 1

Yo reconozco que soy un desastre y un 0 a la izquierda en cuestión de CSS. No sé el motivo pero no entra en mi cabeza. Un curso de fundamentos básicos de CSS me vendría de perlas. A ver si hay alguna herramienta que se ajusta a mi torpeza mental, que está en un nivel -9999999 xD