CURSO DE CSS COMPLETO: De Principiante a Front-End 2024
Vložit
- čas přidán 20. 07. 2024
- Curso COMPLETO de CSS desde Cero para convertirte en Desarrollador Front-End y puedas crear tus propias páginas web 💻
▶ No te pierdas más directos en: / midudev
00:00:00 - Introducción a CSS
00:03:04 - Qué es CSS?
00:06:43 - El significado de “Cascada”
00:07:45 - Recursos CSS que recomiendo y que no
00:11:23 - Dónde poner los estilos?
00:13:42 - Partes de CSS (selector, propiedad y valor)
00:18:23 - Colores
00:28:03 - Selectores - classes
00:29:45 - Selectores - ID
00:32:07 - Herramienta para practicar (recomendación)
00:32:35 - Herencia
00:37:48 - Valores especiales de la herencia
00:42:17 - pseudo-clases
00:43:57 - border y contorno
00:45:58 - más pseudoclases
00:47:29 - simular estados (hover, visible, etc…)
00:48:28 - first-child, last-child
00:49:40 - Selectores combinados
00:55:34 - Operador - Afectar por primer nivel
00:59:10 - Operador ˜ (hermano siguiente)
01:01:04 - Operador plus
01:02:52 - Cascada
01:05:53 - fallbacks
01:08:04 - Especificidad
01:13:39 - Estilos en línea
01:14:25 - Forma de saltarse la especifidad
01:18:37 - Unidades relativas y absolutas
01:24:26 - Reset CSS y Normalize
01:27:00 - Modelo de la caja
01:34:40 - Propiedades de la caja
01:40:35 - box-sizing
01:42:25 - FLEXBOX
01:43:32 - Modelo de la Caja
01:49:55 - Desbordamiento: Overflow
01:54:45 - text-overflow
01:58:02 - Position
02:00:34 - Absolute y relative
02:05:22 - Centrar con absolute
02:07:14 - fixed
02:10:42 - sticky
02:13:57 - z-index
02:27:34 - Flexbox
02:32:02 - display: flex
02:33:36 - flex-direction
02:36:25 - direction
02:37:00 - writing-mode
02:38:07 - flex-wrap
02:42:35 - Atajo de flex-direction/wrap (flex-flow)
02:42:55 - Controlar el espacio de los elementos
02:49:58 - Atajo de flex-grow-shrink-basis
02:50:53 - Ejemplo de flex
02:53:25 - Cambiar el orden de cada elemento
02:55:59 - Posicionar elementos: Jusitify-content
03:00:05 - gap
03:01:04 - distribución en el eje cruzado
03:04:14 - align-items
03:04:46 - distribución en el eje cruzado 2
03:08:22 - los más usados
03:12:43 - GRID
03:16:33 - Qué es Grid?
03:20:30 - Grid vs Flex
03:22:37 - Grid en código
03:24:06 - Nuestra primer Grid
03:29:36 - Creando más columnas
03:30:23 - Unidad especial
03:36:42 - grid template rows
03:38:30 - Cuadricula vacia
03:40:11 - Filas automaticas
03:42:46 - Propiedad repeat()
03:47:36 - Ejercicio practico Excel (recomendado)
03:55:56 - Que no hacer + Ejercicio
04:03:19 - Auto-fill auto-fit
04:14:23 - grid-column-start/end
04:16:36 - grid-row-start/end
04:28:17 - Creando un Layout
04:33:00 - Grid áreas
04:39:32 - Alineación en línea de los elementos
04:43:17 - Alineación en bloque
04:48:58 - ANIMACIONES Y TRANSICIONES
04:51:33 - 2 formas de hacer animaciones
04:51:58 - Transiciones
04:53:47 - :hover
04:56:39 - propiedad transition-duration
04:57:58 - Error común sobre las transiciones
04:58:47 - Diferentes estados
05:01:19 - El problema del transition all
05:06:53 - cubic bezier + HACK
05:09:46 - Control de Tiempos en Transiciones CSS
05:15:31 - atajo transition
05:18:05 - Propiedades que podemos animar + Trucos
05:24:29 - Animaciones + ejemplos
05:43:45 - estado con animation-fill-mode
05:46:53 - atajo para las animaciones (animation)
05:51:42 - FPS
05:56:46 - Animaciones con Scroll
06:02:15 - animation timeline
06:06:33 - Galería de imágenes
06:08:47 - Creando navbar para animarlo
06:12:47 - Rango de las animaciones
06:16:10 - Animando galería - Věda a technologie
Justo estaba viendo el curso de CSS para principiantes, que bueno tener un curso más detallado sobre el lenguaje :)
Muchas gracias midu, eres una gran persona, agradezco el que compartas tu conocimiento de manera gratuita.
Muchas gracias amigo!!!
lo que estaba esperando. Muchas gracias!
ostia justo llego para repasar todo lo que he estado aprendiendo estos dias, muchas gracias midu
Qué aporte de excelente calidad, Midu! Muchísimas graciasss
saludos desde Argentina! 🇦🇷
llevo 3 años como programador y creo q se me da muy bien el css, siempre que me dan problemas de errores de estilos los logro solucionar al instante, aun asi viendo videos de un gringo que hace componentes lindos de css puro que no recuerdo su nombre, me di cuenta que siempre hay cositas nuevas para aprender, asi que este video seran 6 horas de cine para mi domingo. Gracias midu!
Vaya curso más impresionante Midu, me he visto las 6 horas y he tenido la sensación que ha sido de media hora. Trabajo con datos y Python, a mi la web no me llama mucho, pero me están entrando unas ganas locas de ponerme a hacer un portfolio con lo que estás enseñando. ¡Gracias por todo el contenido que das! ♥
Por favor Miguel que pedazo de obra maestra, por favor has uno completo de esa magnitud con PHP puro incluyendo la interacción con bases de datos... Wuaoooo qué nivel. SIMPLEMENTE BRAVOOOOO!
PHP está muerto, así que olvidalo. (es broma 😂)
habia visto una hora del curso, volvi a ver y me salian 6, casi me da algo, pero despues dije:
lo voy a gozar como no lo puedes imaginar.
Muchas gracias!!!! He comenzado con muchas ganas a las 08h !
Midu, sos un crack, aprendo un montón con tus videos! Gracias por tu calidad al momento de explicar!!!
Ostia midu, que crack, viene 100/100 este aporte, graciass!!! 🎊
midu, por favor has un video de electron con react js, no existe ninguno actual y contigo aprendo mucho ❤
Genial, jutto lo que necesitaba, eres el mejor, crack, saludos desde Colombia
Gracias a tus videos he aprendido mucho más sobre la programación. Sigue así midu 🙌🏻
Tengo 45 años llevo 25 años programando. Siempre uso plantillas y trato de crear lo mínimo en css. Pero me hace falta en muchos casos. De muchos youtuber que vi el maestro es midudev gracias midu
efectivamente es un excelente maestro, yo no soy profesional pero me gusta aprender y él es el mejor.
Gracias por el etiquetado en el vídeo y por el contenido!! Lovely Midu :)
Muchas gracias! Llevadero y bien explicado!! Me llevo grandes lecciones ❤
Muchisimas gracias por el tutorial .Voy a ver completo este video , me averguenza mi nivel de css . Normalmente imprimo documentacion para aprender y me ha funcionado, pero en este caso me saldria un ojo de la cara imprimir a color xd
Muchísimas gracias por todo, los cursos que haces son superinteresantes, y aprendemos muchísimo , 😘😘😘😘
Por fín :,v a buena hora nunca aprendí css, siempre busque un sr.Curso.
Gracias Midu uwu
Soy tu fan.
Muchas gracias por todo el conocimiento midu 🤗
Lo de grid auto-fill estuvo fenomenal! Gracias midu!. Por fa invitame a españa. jaja Soy de colombia. Saludos!
Estaba haciendo prueba y error... ahora ya entiendo jaja gracias
Gracias midu. No sabes como estos videos me ayudaron a estilar paginas web, material de pura calidad. 🖤
Aaa ya entendí, este curso es recopilación de los otros 4 anteriores verdad?
Sii
Sí, para que lo tengáis en un sólo lugar
@@midulive amarte es poco Midu ❤️
Despues de este video, no te puede ir tan mal en una entrevista en una entrevista tecnica con las preguntas de CSS
Gracias midu , eres un crack bro , saludos desde Colombia:)
Pero midu 😮
Lo habíamos esperado desde hace años
Y encima me viene perfecto porque el siguiente semestre me toca programación web
Muchas gracias 🤗
Este curso está publicado desde hace 7 meses en este mismo canal, este video junta las 4 partes del curso en uno. Saludos
@@maximilianoforno2978 Sisi, me fijé que en otros comentarios mencionan que esto es una recopilación, gracias por la observación
Saludos 👋
Gracias por tu contenido!
que pedazo de curso Midu, terrible, millones de gracias
Al fin!!! gracias!!!
Que bueno ya con esto me puedo aventurar a dejar el tutorial y llevarlo a practica ( no lo mal entiendas ) lo que quiere decir me voy a tomar este video por lo menos una semana para practicar cada tema por mi parte, muchas gracias midu
Esto es una locura Midu sos mas util que la IA
Te amo mucho midu, voy a disfrutar mucho este video más que cualquier materia de mi universidad
Wow muchas gracias la verdad que entendí todo al 100 eres muy bueno explicando muchísimo mejor que mi profesor seria bueno que te animes a subir mas videos asi...❤ Que te vaya bien!!
Me viene de 10!!!! Gracias gracias gracias 🎉
Te quiero mucho amigo midulive.
Ohhhh es demasiado poder, demasiada epicidad, grande midu god
No conocía la página web.dev, está tremenda. Gracias por este aporte.
wowowow simplemente increíble
buenisimo!
una grasa de curso, gracias.
Gracias miduu🎉
COMO TE QUIERO MIDUUU
Primero, grande con este tipo de videos y compartir tus conocimientos, gracias
grande!gracias!
Gracias !!!
Contenido de CALIDAD.
Justo necesita este curso, muchas gracias midu ❤
Un placer!!
uno de js porfavor midu !!
midudev I LOVE YOU !!!!
Hola midu, te quiero dar las gracias porque has sido parte fundamental de mi crecimiento en el desarrollo web, recién hace un mes decidí entrar a este nuevo mundo para mi y la verdad, me encontraba perdido, viendo cursos de 24 horas, de 10 horas y perdí un poco la motivación pero fue encontrar tu canal y surgió de nuevo la motivación, gracias.
04:33:00 layout grid area
te amo
excelente
ahora si a emprender
Midu, en tu experiencia me recomiendas express o nest js, estoy en duda de cual elegir.
Maestro cuando tendremos uno de JS puro, nos hace falta
completa joya
Por fin puedo centrar un div
Todo un crack el midu
Sácatela que te damos tu trabajo de lubricada aquí en seco
espero poder comprender con este curso cuando ocupar em y rem, tengo dolores de cabeza de cuando lo podemos emplear tengo entendido que es lo que hace cada uno pero no se cuando emplearlo en un proyecto, si alguien me puede sacar esa gran duda se lo agradesco o si tienen un recurso de donde poder comprenderlo en la practica
Lo del minuto 6:25:02 no está hecho sólo con css no? Habrán usado gsap no?
Qué Dios te bendiga
Eso salen de mis sistema amigo
Empece el video sabiendo 5% de CSS y salí con 50%(al menos, jugando a lo que mmi memoria puede retener)
ER HUESO🦴🦴🦴 MIDU EL MEJOR🤩🤩🤩
todos sabemos que midu quiere hacer uno del delicioso svelte en cuanto salga la 5 ♥
Te voy a decir algo que ya debes sabes pero bueno, aun así lo voy a hacer: MIDU, ERES MUY GRANDE!. Cursos de HTML y CSS gratis y de MUCHA calidad. Ahora mismo me pongo de rodillas. GRANDE.
Gracias amigo 😍
Midu que teclado usas?
hola me interesa poder tener acceso a discord, como lo hago. tengo algo en proyecto para mi uso personal, pero me gustaría poder expresárselos con el dibujo del diseño que tengo en mente.
😱
4:27:22 acá se corta unos segundos
Esto es el curso que ya tenía dividido pero ahora en un solo video ¿no? Recuerdo haber visto todos los videos de CSS pero hace ya unos cuantos meses 👀
Sí, lo hemos juntado en un solo video para facilitar su consumo.
Yo estoy haciendo el de html que sacó hace aprox 8 meses... Me recomienda hacer mejor el que salió hace una semana? Gracias
Es el mismo. Este vídeo está resubido con todas las clases del de CSS
Midu, esto es parte de tu Bootcamp ? o esto es un curso aparte
Hola disculpá, em el video mencionás que hiciste el curso de HTML la semana pasada, pero el que encuentro en tu canal me dice hace 8 meses... es ese?
Es ese 👍
este men hace rato se gano el cielo y nuestros corazones jaja
me lo voy a ver solo por curiosidad, no quiero ni saber programar
Me viene al pelo despues del video de principiante haha
like
Midu tengo una propuesta para expandir más este video, porque no realizas en vivo de vez en cuando un challenge de Front-end Mentor, hay cosas ahí entre los challenges bastante interesantes. Saludos
Ya hemos hecho unos cuantos challenge de Frontend Mentor, pero haremos más en el futuro
@@midulive estoy practicando ahora mismo ahí, pero tengo serios problemas en hacer los diseños responsivos, no se me hace difícil el diseño móvil o desktop, pero el problema es la transición de uno a otro
Like si no conocias la diferencia entre border y outline
fua midu muchas gracias justo estaba buscando el curso jajaj, posdata DESBANEAME DEL SERVER!!!!
USER .kieni
😢
Es increible como explicas, en serio no te animas a crear un kotlin compose de principiante a experto? 😢
Jajaja primero tengo que aprender yo
@@midulive Ojalá algún día lo puedas traer Midu, hace poco lo estuve revisando luego de años de no tocar Android Studio y es una belleza como trabaja Jetpack Compose ❤️
Pero esto son los videos de la playlist de CSS no?
Sí, pero en un sólo vídeo para ayudar a la gente a tenerlos en un sólo lugar
donde esta el curso de HTML ?
midu.link/html
Alv
7:25 jajaja estos informáticos, siempre tomando ideas del mundo real y aplicandolas a cosas abstractas. Lo mismo me pasaba la primera vez que escuche la palabra motor de tal... el motor de docker, el motor del navegador, etc.
Primero!!!!!