- 13
- 25 417
Fran WEB
Spain
เข้าร่วมเมื่อ 24 พ.ค. 2022
Hola a todos y bienvenidos a mi canal!! Aquí encontrarás vídeos de diseño, programación y desarrollo web! Mi objetivo con este canal es ayudar al mayor número de personas posibles a resolver problemas en el desarrollo de páginas web, mostrando lo que sé y con total humildad. Aquí encontrarás tutoriales de CSS, HTML y Javascript. En el futuro también haré vídeos de frameworks como Angular o ReactJS, y veremos API Rest, SQL...etc. Espero que os ayuden!
FLEXBOX CSS desde CERO| Explicación COMPLETA de FLEXBOX en español 2023
¡Hola a todos! En este vídeo vemos flexbox o el modelo de caja flexible en CSS. Empezamos viendo algunos conceptos básicos, y poco a poco nos vamos metiendo en las diferentes propiedades relacionadas con esta manera de diseñar: vemos flex-direction, flex-wrap, flex-flow, flex-basis, flex-grow, flex-shrink...etc. También en la última parte del vídeo vemos justify-content, justify-items (que no se puede usar en flexbox), align-content y align-items. ¡Espero que os resulte de ayuda!
Índice del vídeo
00:00 - Introducción: ¿qué es flexbox?
01:09 - Contenedor flex e items flex
03:35 - Eje principal y eje cruzado de flexbox
06:12 - Propiedad flex-wrap
09:42 - Propiedad shorthand flex-flow
11:04 - Propiedades flex-basis, flex-grow y flex-shrink
18:01 - Propiedad flex
19:32 - Espacios libres y ocupados en flex
21:38 - Propiedades justify-content, justify-items, align-content y align-items
29:36 - Otros aspectos: self-align, inline-flex...
Índice del vídeo
00:00 - Introducción: ¿qué es flexbox?
01:09 - Contenedor flex e items flex
03:35 - Eje principal y eje cruzado de flexbox
06:12 - Propiedad flex-wrap
09:42 - Propiedad shorthand flex-flow
11:04 - Propiedades flex-basis, flex-grow y flex-shrink
18:01 - Propiedad flex
19:32 - Espacios libres y ocupados en flex
21:38 - Propiedades justify-content, justify-items, align-content y align-items
29:36 - Otros aspectos: self-align, inline-flex...
มุมมอง: 968
วีดีโอ
Qué es el contexto de formato de bloque (BFC) en CSS | Block Formatting Context en CSS
มุมมอง 312ปีที่แล้ว
Hola a todos, en la explicación de hoy vemos un aspecto muy interesante de CSS que es el contexto de formato de bloque (en inglés Block Formatting Context, BFC). El contexto de formato de bloque está estrechamente relacionado con la propiedad float de CSS. Vemos cuáles son sus principales características y para qué nos puede servir conocer su funcionamiento al detalle. Índice del vídeo 00:00 - ...
LAYOUT en CSS con FLOAT tutorial | Maquetación en CSS con propiedad FLOAT
มุมมอง 674ปีที่แล้ว
Hola a todos! En este vídeo vemos el uso de la propiedad float (float left y float right) de CSS en la realización de un layout muy sencillo. Usar float es la manera tradicional de maquetar páginas web, con lo que resulta esencial conocer cómo funciona. Espero que os ayude!
Float CSS tutorial completo en español | Cómo usar float y clear en CSS
มุมมอง 1.7Kปีที่แล้ว
Hola a todos! En este tutorial vemos la propiedad float de CSS que nos permite flotar elementos a izquierda y derecha (con float left y float right). Vemos distintas combinaciones y situaciones que espero os ayuden a entender todo lo posible la propiedad float. Además vemos la propiedad clear de CSS que nos permite limpiar elementos flotantes. Espero que os ayude! Índice del vídeo: 00:00 - Intr...
Position absolute vs fixed CSS | Posicionamiento absoluto y fijo en CSS
มุมมอง 472ปีที่แล้ว
Hoy vemos más en detalle las características de position absolute y position fixed en CSS, así como las diferencias entre ambos. En la guía de position de este tutorial vemos a fondo el comportamiento que tienen los elementos al aplicarse un position fixed o un position absolute con múltiples ejemplos. ¡Espero que os ayude! Índice del vídeo 00:00 - Introducción 01:26 - Diferencias de concepto e...
Z-Index en CSS | Contextos de apilamiento en CSS con POSITION
มุมมอง 327ปีที่แล้ว
En este vídeo vemos el concepto de z-index en CSS, junto con el concepto de contexto de apilamiento. Ambos conceptos son esenciales para entender el posicionamiento con position en CSS. Espero que os ayude! Índice del vídeo: 00:00 - Introducción 00:50 - ¿Qué es z-index? 01:22 - Ejemplo con z-index 05:16 - Ejemplo sencillo de superposición de elementos sin z-index 05:59 - Reglas básicas de super...
Posicionamiento en CSS | POSITION CSS explicación
มุมมอง 2.4Kปีที่แล้ว
En este vídeo vemos el posicionamiento en CSS con la propiedad position: analizamos el funcionamiento de position static, relative, absolute, fixed y sticky. Espero que os ayude! Índice del vídeo: 00:00 - Introducción 01:10 - Position static 01:58 - Position relative 02:38 - Propiedades top, bottom, left y right 05:15 - Espacio respetado por position relative 06:18 - Position absolute 12:34 - P...
Colapso de márgenes en CSS | Explicación al DETALLE
มุมมอง 888ปีที่แล้ว
En este vídeo vemos el colapso de márgenes en CSS, un aspecto que especialmente para la gente que está empezando puede provocar quebraderos de cabeza. ¡Espero que os ayude!. Índice del vídeo: 00:00 - Introducción 00:46 - Qué es el colapso de márgenes 01:16 - Tipos de solapamiento de márgenes 01:48 - Cuándo no se da el solapamiento de márgenes 04:14 - Qué margen se aplica según el signo de los m...
BEFORE y AFTER en CSS explicación completa | Pseudo-elementos en CSS
มุมมอง 3.4Kปีที่แล้ว
Tutorial de pseudo-elementos before y after en CSS. En este vídeo primero se explican los aspectos técnicos básicos de before y after, y tras ello se muestran un ejemplo básico y un ejemplo de menú en el que se usa after. ¡Espero que os resulte de utilidad! Índice del vídeo: 00:00 - Introducción 00:40 - Diferencia entre pseudo-elementos y pseudo-clases 02:18 - Tipos de pseudo-elementos 03:10 - ...
Transiciones en CSS | CSS Transition TUTORIAL en 10 MINUTOS
มุมมอง 6132 ปีที่แล้ว
Hola a todos! Hoy vemos la propiedad transition de CSS: vemos como hacer transiciones de manera muy sencilla paso a paso. Espero que os ayude!! Link del vídeo de animaciones en CSS: th-cam.com/video/0NcgSelBDDU/w-d-xo.html Índice del vídeo: 00:00 Introducción 01:20 Propiedad transition-property 01:52 Propiedad transition-duration 03:00 Uso de hover y transform 03:52 Prueba con position:relative...
Animaciones en CSS | Crear animaciones con ANIMATION en CSS
มุมมอง 5792 ปีที่แล้ว
Hoy os traigo un tutorial de CSS animation donde veremos cómo realizar nuestras primeras animaciones de forma muy sencilla. Espero que os ayude!!! Índice del vídeo: 00:00 Introducción 01:05 Propiedad animation-name 01:30 Propiedad animation-duration 01:50 Implementación de la animación con @keyframes 03:40 Propiedad animation-timing-function 05:04 Propiedad animation-iteration-count 05:52 Propi...
CSS Display NONE vs visibility HIDDEN vs visibility COLLAPSE | EXPLICACIÓN
มุมมอง 1.6K2 ปีที่แล้ว
Tutorial CSS sobre las propiedades display none, visibility hidden y visibility collapse. Vemos las principales diferencias entre ellos y algún que otro detalle que viene muy bien. Espero que os ayude!! 00:00 Introducción breve 00:49 Display none 01:19 Visibility hidden 02:00 Visibility collapse 07:21 Conclusiones/resumen
CSS Background Image Responsive | Imagen de FONDO Responsive CSS en 10 MINUTOS
มุมมอง 12K2 ปีที่แล้ว
Tutorial de background image responsive en CSS. Establecemos un background image (imagen de fondo) responsive en CSS paso a paso y analizando las distintas propiedades que están relacionadas. Espero que os sirva de ayuda!! Índice del vídeo: 00:00 Mini introducción 00:57 Background-image básico 01:33 Background-repeat 02:05 Tamaño de la imagen en caso de no especificarse 02:32 Background-size co...
Muy buena y precisa la explicación acerca de este tema que desconocía por completo. Gracias por el video.
¡Muchas gracias!.
Gracias!
Excelente explicación, muchas gracias..
Para mi trabajo me quedé con el contain, cuando disminuía el tamaño el cover no mostraba la totalidad de la imagen sino la centraba
Me gustaría preguntarte porque aplicas float al header?
Gracias genio!!
Gracias, mejor explicacion que he encontrado 👍
bro gracias por la data
Puedo aplicar un psuedo elemento con solo dos puento ( :after) ?
No, debes colocar obligatoriamente los :: para que se haga referencia a un pseudo elemento, si no estarian haciendo referencia a una pseudo clase
Te quedo muy buena la explicación :) ...
hola tienes algún curso completo de css que abarque este tipo de temas saludos ?
excelente!!! gracias
Para maquetar, rey moro
y esto para que sirve ?
*AYUDAAAAA* recien me inicio en esto de la programacion web, sigo tus videos y los voy practicando paso a paso, no se que podria ser , pero al colocar flex-direction:row; los elemento se muestran pero en columnas y al colocar flex-direction:column; se muestran en filas, dentro de la hoja .css no tengo otro contenedor utilice flex y en la pagina .html es el unico archivo que tengo referente a la caja de flex
Magistral explicación ❗❗💥💥💥 *Por favor haz un video similar explicando css grib*
que buen video hermano muchísimas gracias
Toda la confusión del posicionamiento la generan los mismos standares de no nombrar las cosas por su nombre. A algo relativo lo llama absoluto (respecto a la su ancestro) y a lo absoluto lo llama relativo.(respecto a la pantalla).
Promo sm 😚
Excelente video, para estudiar y practicar flexbox Css lo recomiendo
Muchas gracias! Me alegro que te haya ayudado
Excelente tutorial 🫡
Muchas gracias!!
Porque haces ruido molesto con la lengua?? Muy fastidioso hacer ese sonido .. ni dan ganas de verlo completo
Buenas gabriel, dejando de lado que este tipo de comentarios me cuesta un poco entenderlos..., imagino que será la respiración que con el micro puede generar un sonido molesto. Intentaré mejorarlo en los siguientes vídeos. Gracias por el feedback, y siento que no pueda ser de tu provecho el vídeo.
@@franweb creo que se refiere al ruido que haces cuando pegas la lengua al paladar y la sacas rápidamente, no sé cómo describirlo, pero creo que sería algo como un "th" o "dh" jajajaj en lo personal no me molesta y no me había dado cuenta de la frecuencia hasta que leí el comentario xd, no creo que sea algo incómodo o desagradable pero ya ves que puede haber gente quisquillosa en todos lados
totalmente fuera de lugar ese comentario. Si no te fue útil el video, buscá otro que si te sirva, al contrario de tu comentario que no le sirve a nadie. Sos el tipo de gente que solo le gusta comentar cosas que no son de provecho, una pena que tengas que reducirte a eso. Y cada cual habla como se le sale canta, realmente.
muy buena explicacion broo ❤
Muchas gracias!!
Buen viedo, me ayudaste muchisimo!
Muchas gracias, me alegro mucho!
Me encantó, muchísimas gracias ❤
Gracias a ti por ver el vídeo!😀
hola fran, explicas muy bien el contenido. todo los videos son de mucha utilidad. 👍
Muchas gracias por el comentario! Me motiva mucho que digas eso! 😀
Excelente la manera de explicarlo. Muchas gracias!!
Gracias a ti por el comentario!!
Gracias por compartir tus conocimientos.👍👍👍
Gracias a ti por ver el vídeo! 😀👍
Buenasoo locooo yo recién termine un cursito y esto me re ayuda arriba te dejo mi like y mi subs
Muchas gracias amigo😋
excelente explicación. nuevo subscriptor. muy bueno!
Muchas gracias😀
Hola, muchas gracias por tu video me sirve demasiado para mis proyectos. Te hago una pregunta, sabes porque en mi cel no se ve la imagen? Gracias.
Tendría que echarle un ojo, así sin más es complicado. Siento contestar tan tarde he estado inactivo😅
Sinceramente me salvaste, esta super bien explicado y la información super útil, nuevo suscriptor
Me alegro que te haya servido 😀
super útil y al grano la info ! Me gusta cuando encuentro videos que en pocos minutos explican un tema y no dan vueltas ni se van por las ramas. Por mas creadores de contenido de programación/diseño que hagan videos cortos y directos al detalle. Te dejo mi like y me suscribo. Un saludo!
Muchas gracias!! Me alegro que te guste mi manera de explicar! Un abrazo
Gracias. Llevaba todo el día rompiéndome la cabeza con esto. También se podría solucionar, poniendo un { overflow: hidden; } aunque son mejores las otras soluciones. Nuevo sub y mucho animo 🌟
Me alegro mucho de que te haya servido!! Gracias a ti!
y solo con css se puede hacer y como. Gracias
Muy bien explicado muchas gracias
Gracias a ti!! Me alegro de que pueda ayudar!
pero' que buen video !!👌👌👌
Muchas gracias!! Me alegro que pueda resultar de ayuda
Excelente, muy bien explicado... justo lo que estaba buscando!!!
Muchas gracias! Siempre encantado de poder ayudar!
Quiero corregir en el minuto 3:00 aprox, que cuando digo el "pseudoselector hover" eso no es correcto, quería decir pseudoclase, tuve un pequeño lapsus! Espero que eso no os haya confundido en el vídeo, y que os resulte de ayuda! 😄
Recién estoy aprendiendo css y HTML 😅, te logré entender fácilmente ☺️ tu vídeo me es de mucha ayuda para un proyecto q tengo en mente, podrías hacer un vídeo sobre los botones y funciones porfiss 👉👈😅🥺
Muy buenas!! Muchas gracias por tu comentario! Me alegro de que te haya ayudado!! Con botones y funciones te refieres a efectos sobre botones? Por ejemplo que cuando se pase el ratón por encima cambie de color o aumente de tamaño...
@@franweb sip algo asi... también podría ser q active una función con Javascript como ejemplo... q apreté un botón y q pase una animación o algo así
@@chino3153 Perfecto!! Tomo nota para hacerlo más adelante! Muchas gracias de nuevo por tu apoyo!! Un saludo!
Gracias por tomarte el tiempo de hacer un vídeo tan bien explicado, me sirvió muchísimo. Suerte con el canal. Soy nueva suscriptora 😊😊
Muchas gracias a ti por dedicarle tiempo y suscribirte!! Me alegro que te sirviese el vídeo! Estos comentarios me ayudan y me motivan muchísimo!!😄😄