5 Grandes Errores con CSS Layouts

🔥 ¡Aprovecha la oferta del Black Friday de CodelyTV Pro!
⮕ codely.tv/pro/blackfriday?utm...
--- USAR Z-INDEX 99999 ESTÁ MAL. USAR `px` ESTÁ MAL. NO HABLEMOS DEL GRID.
Si no quieres ser como Rafa hazte este curso 👉 bit.ly/layouts-css ✌️
Ahora en serio 😌, llevamos ya un tiempo trabajando juntos y Núria me ha hecho ver que no sé nada de CSS. En este vídeo hemos recopilado esos 5 errores más comunes que surgen mientras vas maquetando.
Ojo que también hablamos un poco de Flex vs Grid y un poco de DevTools.
Los ejemplos del vídeo los puedes ver en ⭐️ github.com/CodelyTV/css-layou... ⭐️
{▶️} CodelyTV
├ 🎥 Suscríbete: kzbin.info?sub_co...
├ 🐦 Twitter CodelyTV: / codelytv
├ 🌶 Twitter Núria: / nuria_codes
├ 💂🏼 Twitter Rafa: / rafaoe
├ 📸 Instagram: / codelytv
├ ℹ️ LinkedIn: / codelytv
├ 🟦 Facebook: / codelytv
└ 📕 Catálogo cursos: bit.ly/cursos-codely
#css #layouts #team_zindex_9999

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

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

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

[@ricardorien]

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

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

[@IVargasO]

Primer video que veo del canal, interesante el formato.

[@williamm5947]

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

[@ivandios4]

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

[@ezequiellopez3645]

Me encanta todo lo que aprendo de Nuria!

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

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

[@docentehectorcetina]

Excelentes tips muchas gracias por generar buen contenido 👍🏼

[@TheSldsnake]

Ya era hora empizo mañana mi suscripcion a codely

[@TT7T7T7]

muy interesante...gracias

[@otharwaotharwa1462]

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

[@katherinebl]

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

[@leonardolastra9585]

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

[@emilianoguerrero4984]

Nice, todo los videos son una joya :)

[@alexdavidhurtadoyeneris7116]

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

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

[@thereciolol2733]

Saludos desde honduras cracks son los mejores

[@nicolascondoluci8576]

¡Genia, Núria! :)

[@3Designer_col]

esta chica sabe bastaaaaante

[@joseaburt]

Nuria eres mi superheroína!

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

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

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

[@luisfernandomontoya181]

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

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

[@yefweb3848]

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

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

[@juandeastora8317]

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

[@ermes111sp]

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

[@sirlymary]

Que buen video

[@rodasDesign]

gracias señores, vaya descubrimiento el canal

[@rads72]

para cuando esta disponible nuria linter en vs code ?

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

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

[@rads72]

Me han dado ganas de hacer el curso hmm

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

[@emmanuelvalverderamos]

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

[@CodelyTV]

Jajajajajajajajaja 😂😂😂😂😂

[@JoseRivastonistation]

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

[@jorgelujanm]

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

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

[@carlossanchezacosta8289]

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

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

[@miguelcastano3210]

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

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

[@jago5101]

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

[@vkorta4225]

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

[@adridoz]

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

[@rayizard]

Nuria, qué opinas de Tailwind?

[@eloytorres846]

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

[@yoandyvillaman2790]

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

[@ecmc]

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

[@pablozapeta4098]

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

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

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

[@moviedomof]

genia Nuria .. envíenme una que odio front

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

[@yerenpalacios8156]

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

[@sheruzum22]

Wow

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

[@EladioRochaV]

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

[@CodelyTV]

Bienbienbien!!!!!

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

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

[@joserivera7632]

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

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

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

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

[@ingmoscar2488]

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

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

[@noelhdez3640]

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

[@jeanpaulsanchezmendoza1328]

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

[@dks7086]

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

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

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

[@marcelochoquepacheco6416]

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

[@andresin87]

Yo tambien uso zindex, -1 y 1

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

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

[@joeswizat9941]

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

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

[@Jadexb04]

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

[@danielhernandez-jz2sr]

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

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

[@ronaldcarhuaricra7960]

nuria destruyendo sus Z-index de Rafa

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

[@4strodev]

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