¡APRENDE CSS GRATIS! Curso de CSS desde cero para principiantes

Поділитися
Вставка
  • Опубліковано 3 січ 2025

КОМЕНТАРІ • 200

  • @jesusperezhidalgo1669
    @jesusperezhidalgo1669 Рік тому +117

    Estamos muy agradecido contigo por aportar tanto a la comunidad.

  • @hennny.20
    @hennny.20 Рік тому +71

    Midu lleva a toda la comunidad de desarrollo hispano-hablante sobre sus hombros, gracias midu!

  • @aldolunabueno2634
    @aldolunabueno2634 Місяць тому +1

    El modelo de la caja: 1:27:01
    Todo elemento html está dentro de una caja. Una caja está compuesta de tres componentes que de adentro hacia afuera son el contenido, el padding y el borde. Además, el dimensionamiento (sizing) de una caja está dado por las propiedades width y height.
    > *box-sizing:*
    Propiedad que determina cómo se mide la caja según una de dos opciones: content-box o border-box. De forma más explícita, toma como referencia uno de los componentes: contenido o borde.
    - content-box:
    Este es el valor por defecto, y nos dice que width y height determinan el tamaño del componente de contenido. Sobre él todavía faltan colocar el padding y el borde para tener la caja completa que delimita el elemento.
    - border-box:
    Pero, si quieres que el ancho y el alto de la caja queden directamente determinados por width y height, entonces usa el valor border-box, el cual deja que el borde y el padding "roben" terreno hacia adentro de la caja que ya has determinado, dejando al contenido el resto.
    En pocas palabras, content-box fija el tamaño del contenido, mientras que border-box fija el tamaño del borde, y estos valores fijados están dados por width y height. ¿Lo entendí bien?

  • @nicolascarrillo4355
    @nicolascarrillo4355 Рік тому +16

    Ojalá midu nunca se retire, porque el que mejor explica estos temas. Te amo midu. Gracias por hacerme mejorar, el cambio que he tenido ha sido brutal

  • @davidcode22
    @davidcode22 Рік тому +35

    He realizado como 4 cursos de CSS en el pasado 2 básicos e intermedios y 2 avanzados pero sin duda me apunto a este. Estoy seguro que aprenderé algo nuevo

    • @nelsonmendez2676
      @nelsonmendez2676 Рік тому +12

      Midu explica todo muy bien. Le da un toque el saber como funciona todo.

    • @iancler772
      @iancler772 11 місяців тому

      Con el es simplemente, sencillo@@nelsonmendez2676

  • @mburonb
    @mburonb 11 місяців тому +7

    La verdad chabon te felicito. He visto varios de tus videos y me encanta la forma en la presentas el contenido. Sos muy didactico, vas al fondo de la cuestion, interectuas con los que estan conectados y sos muy claro a la hora de explicar. La docencia se te da de manera natural. En lo que a mi respecta, me has aportado un monton de conocimiento. Te deseo lo mejor para tu vida porque el aporte que has hecho a la comunidad es TREMENDO. Por muchos mas midudev! Abrazo grande desde Argentina

  • @fundaciongenios
    @fundaciongenios Рік тому +9

    Espectacular explicación. Llevo más de 20 años como programador y con este video aclaré todas las dudas que tenía. Mil gracias.

  • @tato1599
    @tato1599 6 місяців тому +2

    ¡Gracias!

    • @midulive
      @midulive  4 місяці тому

      Gracias por comentar y por tu aporte amigo!!!

  • @d3m3tri0
    @d3m3tri0 Рік тому +16

    Por si a alguien no le ha quedado claro cómo funciona el modelo de cajas, os dejo una explicación que a mí me ayudó:
    Imagina que recibes un paquete (caja) de Amazon: el contenido (content) es el artículo (elemento en la caja), o en nuestro caso, un encabezado, párrafo o elemento de imagen.
    El contenido está rodeado por un espacio llamado relleno (padding), similar a cómo el plástico de burbujas separa (protege) un artículo de la caja que lo rodea. Utilizar el relleno (padding) sirve para ajustar el espaciado dentro de un elemento.
    Piensa en el borde (border) como la caja de cartón en la que se envió tu artículo.
    El margen (margin) es el área fuera de la caja, y se puede utilizar para controlar el espacio entre otras cajas o elementos (a mayor margen, mayor espacio entre las cajas/elementos; a menor margen, menor espacio entre los elemento; incluso se puede poner márgenes negativos). Otra forma de decirlo es que utilizamos los márgenes para ajustar el espaciado fuera de un elemento (es útil que los márgenes empujen en una dirección).
    Un saludo.

    • @djezshadow
      @djezshadow 8 місяців тому

      Genial, Gracias!!

  • @franciscomartinezuc9811
    @franciscomartinezuc9811 4 місяці тому +1

    Papu! Qué pedazo de clase, eres fenomenal hno, a veces siento que te olvidas de algunas cosas en los directos o que se yo, pero lo haces muy pero que muy bien. Muchas gracias!!!

  • @Franrdev
    @Franrdev 9 місяців тому +4

    midu, excelente explicación, no entiendo por que la mayoría de lugares que enseñan programación no explican este tema como corresponde..

  • @nelsonmendez2676
    @nelsonmendez2676 Рік тому +6

    Finalmente comence a entender CSS, Midu eres excelente explicando y lo que mas me gusta es el explicar todo desde su origen y su porques

    • @midulive
      @midulive  Рік тому +4

      Gracias! Esa es la idea! Una explicación que sienta bien las bases! ☺️

    • @nelsonmendez2676
      @nelsonmendez2676 Рік тому

      ​@@midulive Mil gracias!!! Esperando la proxima clase.

  • @diegoimberti4398
    @diegoimberti4398 10 місяців тому

    35:16 por eso es que, cuando determinas en el “body” el color de fondo, cambia el color de fondo de toda la pagina: incluso los back colores de los textos. Esto que parece obvio, poca gente se da cuenta. Si no fuese asi, los textos quedarían del color de su propio fondo y el body de otro..

  • @albertolizcano5863
    @albertolizcano5863 4 місяці тому +3

    Excelente profe, muchas gracias por explicar tan bien 😼😼💪💪💪

  • @droid-jr9940
    @droid-jr9940 Рік тому +40

    por fin podre centrar mi div correctamente ..... adios margin: 0 auto !!!! ...

  • @SantiCantero96
    @SantiCantero96 8 місяців тому +1

    Vine a ver el video porque ando con dudas sobre css en el curso que estoy haciendo y con pocas cosas que escuche me quedaron mas claras que en el curso que estoy tomando. Gracias midu! No dejes de subir contenido porfavor.

  • @carlosgermanruiz31
    @carlosgermanruiz31 7 місяців тому

    Eres un máquina chaval, llevo casi un año estudiando todo esto y hasta que no lo he visto contigo no lo he podido ver tan claro!! Muchisimas gracias por tanto

  • @xxcardasxx
    @xxcardasxx Рік тому +6

    Que grande Midu, llevo 3 años ejerciendo de programador y lo que más me llena es el Front-end y tu curso me hizo recordar y descubrir varias cosas interesantes o alguna que otra cosa que estaba aplicando de una manera no tan eficiente así que desde ya muchas gracias por todo este contenido y recomendadísimo para todos!
    Saludos desde Chile!

  • @lobobogard9236
    @lobobogard9236 11 місяців тому +2

    midu en serio tus tutoriales valen oro llevo programando 15 años y css para mi siempre fue una pesadilla y actualmente si lo manejo decentemente pero al ver este curso me enriquecio mucho mas y aparte ahora entendi muchos errores que no comprendia en css estoy muy agradecido en serio saludos.

  • @_isDev
    @_isDev 10 місяців тому

    hermano tienes el don de la enseñanza! pocos youtubers de programcion he visto que son tan claros al explicar. Soy nuevo en tu canal y ojala pueda encontrar un curso asi de JavaScript. Saludos

  • @MyoneAlways
    @MyoneAlways 8 місяців тому

    Muchas gracias, no soy muy fan de front, pero me toca por el ciclo, y se me estaba haciendo bola. Ahora he entendido muchas cosas que pasan cuando me pongo a manejar CSS, Y que no se explican en las clases.

  • @stevenquihuire3523
    @stevenquihuire3523 10 місяців тому +2

    Acabe los cursos de HTML y CSS y ahora he recordado, aprendido y reforzado todos los conociemientos te agradezco por estos tutos, andaba uscando y llegaste jeje gracias por este apoyo a la comunidad

    • @eliasidbuelvas7670
      @eliasidbuelvas7670 10 місяців тому +2

      Amigo buenas, dónde hiciste los cursos ?

    • @stevenquihuire3523
      @stevenquihuire3523 10 місяців тому

      @@eliasidbuelvas7670 Los cursos de Mirudev ahorita seguiré sus practicas y los cursos del profe juan

  • @ramiromartinezjuarez8376
    @ramiromartinezjuarez8376 Рік тому +1

    Te amo midu muchas gracias por desperdiciar minutos de tu vida enseñando todo lo que sabes

  • @jamevatutoriales
    @jamevatutoriales Рік тому +1

    A todos los que están comenzando al igual que yo
    Aprecien este contenido. Si se ponen a ver de lleno videos de gente haciendo proyectos van a hacer cosas buenas pero no van a saber que están haciendo en realidad.
    Hay muchos conceptos y muchos por qué de las cosas que en el de HTML y este de CSS comprendí mejor gracias a eso
    Contenido de calidad
    Midu, muchas gracias por este gran aporte, tu comunidad está más que agradecida contido
    Espero podamos continuar en este camino como desarrolladores y lograr los objetivos

  • @HistoriasDeBajoPresupuesto
    @HistoriasDeBajoPresupuesto Рік тому +3

    He descubierto este canal justo cuando he empezado el FP de DAW, y sinceramente creo que no podia haber sido en un momento mejor. Muchisimas gracias midu, es por ti que finalmente le estoy empezando a pillar cariño al desarrollo web. Das muy buenos consejos. Si algun dia consigo un curro de esto, ten por seguro que no caere en malas practicas gracias a la buena base que estoy pillando por estos videos

  • @hugoandres5480
    @hugoandres5480 Рік тому

    Por eso amo tu canal jaja muy bien mandado alv 11:23 " cada uno que haga lo qie quiera " y para aportar es que cada quien es libre o no de usar lo que guste. Saludos

  • @diegoimberti4398
    @diegoimberti4398 Рік тому +2

    Yo no he podido esperar a que colgaras el Video, y me comí el que está colgado en Twitch. Maravilloso

    • @midulive
      @midulive  Рік тому

      Y punto! Gracias, Diego! 😊

  • @GabrielPozo
    @GabrielPozo Рік тому +2

    Como siempre, excelente curso, hiciste CSS mas sencillo hasta para para alguien que ah sido un backend developer por años como yo. Todavía voy a seguir siendo pésimo en esto pero ahora al menos lo entiendo correctamente😄

  • @carmelojosuecanelon1109
    @carmelojosuecanelon1109 Рік тому +5

    justo estaba terminando el de HTML para empezar con este curso, excelente

  • @bechuinabechuina4162
    @bechuinabechuina4162 Місяць тому +1

    Muchas gracias, muy esclarecedor

  • @casimortal
    @casimortal 11 місяців тому +2

    Nos has salvado. Estamos agradecidos ♥

  • @last_sequence
    @last_sequence 22 дні тому

    excelente clase y muy bueno para explicar de manera sencilla, gracias midu

  • @danielaalcaza8759
    @danielaalcaza8759 6 місяців тому

    Me encanto! super bien explicado!! Amo los comentarios y tu simpatía! Sigo con flexbox!! 🤓🚀Muchas Gracias!! por más contenidos!!

  • @keranavca
    @keranavca Рік тому +1

    justo ando con css, gracias para mas retroalimentación

  • @jedelorbeminaya
    @jedelorbeminaya 11 місяців тому

    Por un momento pensé que sabía utilizar CSS, pero al visualizar este MAJESTUOSO curso inductivo he aprendido y aclarado conceptos que desconocía. ¡Muchas Gracias @Midudev por este gran aporte!

  • @SonGoku-pc7jl
    @SonGoku-pc7jl Рік тому +1

    hacia dos años desde que aprendí css y desde entonces no lo volví a disfrutar tanto como en tu curso de css! :), ya tenia ganas que sacases el curso para reentenderlo todo más y mejor jaja, lo has explicado todo de forma maestra como siempre! tus fans te adoramos jaja! infinitas gracias de que el curso siga! :D

  • @lazarillomochilero
    @lazarillomochilero Рік тому +2

    Gracias, lo estaba esperando !!!!!!!!!!!!!!!!

    • @midulive
      @midulive  Рік тому +1

      Pues aquí esta! 😍

  • @mdt2080
    @mdt2080 Рік тому

    Genial el vídeo y gracias por compartir. Me recuerda tambien a antena 3, por los anuncios constantes cada minuto.

  • @lucianodeniro6475
    @lucianodeniro6475 Рік тому +2

    Muchas gracias midu te deseo lo mejor

  • @vspoke9150
    @vspoke9150 Рік тому

    Yo ya se programar en HTML y CSS pero estos cursos me ayudan con cosas que ningun youtuber comparte.

  • @Ni_idea_de_tecnologia
    @Ni_idea_de_tecnologia Рік тому +1

    En el Visual Studio también sale la especificidad cuando posicionas el cursor sobre el selector. Muy buenas explicaciones. Gracias

    • @elliotgaramendi
      @elliotgaramendi Рік тому +1

      Ten cuidado con el nesting de CSS, hasta donde lo usaba me daba mal la especificidad, el del navegador si era el correcto.

  • @emilianojara62
    @emilianojara62 Рік тому +2

    Te quiero mucho midu!!! gracias por compartir tu conocimiento, creí que sabia bastante sobre css pero con todos los tips que das siempre demuestran que siempre se puede aprender algo nuevo

  • @skilkry
    @skilkry Рік тому +2

    Midu, das cátedra en cada vídeo, gracias por tus explicaciones 😃

  • @eliasbest
    @eliasbest Рік тому +1

    el de html fue una pasada!! ❤💥 Super útil, super practico, aprendí muchísimo sin tener que tirarme 8 horas y casi que llegar a los mismo resultados xD

  • @jonnathanbaculima4447
    @jonnathanbaculima4447 Рік тому

    Saludo midu desde Ecuador... Agradecerte nomás por lo que aportas a la comunidad... de verdad muchas gracias he visto cursos de CSS pero no he encontrado esos detallitos como el border-box, la especificidad como medirla hasta la herramiento nos das, esos detallitos son los que marcan la diferencia de tu contenido con el de otras personas... muchas gracias midu en verdad muchas gracias me has ayudado tanto tanto en el mundo tan complejo del Desarrollo Web. Suerte en lo que te propongas y todas tus metas se cumplan midu..!!!! 💪💪💪🙌🙌

  • @DeberiasTenerUnGato
    @DeberiasTenerUnGato Рік тому +3

    Muy didáctico muy todo, mejor que todos y la verdad 10/10 había cosas que no entendía y este man se la rifa ❤ Arriba el América

  • @ChristianHerreraFarrera
    @ChristianHerreraFarrera 4 місяці тому

    Gracias midu gracias a ti e mejorado y descubierto Js tambien e mejorado html y css me gustaria que agas un curso de html pero que enseñes tadas las etiquetas

  • @levy_perez
    @levy_perez 8 місяців тому

    Me volaste 🤯 la cabeza en el min 44.59 min no sabes cómo me ha costado entender la realización del menu en css

  • @christiansebastianbustos5840

    sos el Julio Profe de la programacio, gracias Midu

  • @kinyoldboy9240
    @kinyoldboy9240 8 місяців тому

    Me he dado cuenta que no estaba suscrito (SOLUCIONADO). Alguien que muestra los recursos de aprendizaje es alguien en quien se puede confiar (hay de todo en internet y algunos parece que guardan eso en súper secreto). Primero seguiré todos tus cursos de CSS de UA-cam y, después, miraré todos los recursos que has recomendado. En cuanto a w3schools, no te quito razón pero para gente que parte de cero creo que está decente por darte una pequeña idea de lo que es cierto lenguaje, además hay muchos lenguajes donde puedes iniciarte para luego comprender recursos más avanzados. Y, después de todo este rollo, muchas gracias por compartir, como siempre!!!!

  • @galletasniper2584
    @galletasniper2584 Рік тому +1

    Grandioso curso, gracias por subirlo a UA-cam

  • @jmunozco
    @jmunozco 9 місяців тому +1

    Muy bueno, muy ameno y muy didáctico, chapó!

    • @midulive
      @midulive  9 місяців тому +1

      Muchas gracias!

  • @omarbarra3456
    @omarbarra3456 Рік тому

    Gracias, aprendiendo a ser front con el mejor

  • @feraltu12
    @feraltu12 Рік тому

    Muchas gracias por compartir tu conocimiento, saludos desde El Salvador

  • @alanprieto5105
    @alanprieto5105 Рік тому

    Muchas gracias por esta clase, insuperable!!

  • @marieladeoliveira5453
    @marieladeoliveira5453 5 місяців тому

    Me encanta como explica! 💙

  • @rosiibarra390
    @rosiibarra390 11 місяців тому +1

    Excelente explicacion, gracias por tu contenido

    • @midulive
      @midulive  11 місяців тому

      Gracias a ti

  • @AnM-of4wz
    @AnM-of4wz Рік тому

    ¡Bendiciones hermano! Te deseo muchos más éxitos en tu carrera. ¡Gran curso! Saludos desde Cuba.

  • @david_gt8
    @david_gt8 Рік тому

    En mayo del presente año estaba cursando el pre de ingeniería en software pero no pude pasar una materia y reprobé entonces si quería volver a cursar el pre para ingresar a la universidad tendría que pagar una multa por haber reprobado el pre, si hubiese aprobado el pre ya estuviera en el primer semestre pero supe que puedo aprender a programar por mi cuenta así como estoy estudiando matemáticas para volver a estudiar e ingresar a otra carrera de ingeniería en el próximo año y veré tus vídeos para poder programar desde cero hasta lo final

  • @estebanestrella1558
    @estebanestrella1558 Рік тому +1

    Ahora todo tiene sentido 👌

  • @adriangarciasobrado7186
    @adriangarciasobrado7186 11 місяців тому

    genio Midu! muchas gracias por todo!

  • @rebecavasquez3955
    @rebecavasquez3955 Рік тому

    Gracias por el curso, se me hizo más fácil entender este de CSS que el de HTML jajs más que todo por el tema del maquetado y los formularios se me hacen enredados de entender pero el CSS si se me facilita

  • @Santi.dev23
    @Santi.dev23 Рік тому

    Hoy voy a ver este curso. Si viene de Midu, es bueno!

  • @XxQuidanxX
    @XxQuidanxX 11 місяців тому +1

    Todo muy claro gracias midu

  • @tomasponce9409
    @tomasponce9409 Рік тому +1

    Oshtia tiooo
    No sabía que necesitaba este vidio

  • @sol____-_-
    @sol____-_- Рік тому +1

    Nos has salvado, estamos agradecidos.🤍🌬

  • @luisrojas7130
    @luisrojas7130 Рік тому

    Eres un crack midu!! he aprendido demasiado en react gracias a usted!! Saludos desde CR!!

  • @estados2
    @estados2 Рік тому +2

    Grande midu, eres un crack

  • @richardprice360
    @richardprice360 Рік тому +1

    lo estaba esperando :)

  • @jeffersonchavezdiaz9306
    @jeffersonchavezdiaz9306 Рік тому +3

    Que programa usas para hacer zoom y que extensión usas en vscode que cuando escribes rellena letras o autocompleta... Gran curso lo aprenderé muy bien

  • @mainoraguilar698
    @mainoraguilar698 Рік тому

    Ya deseo la proxima clase. Gracias.

  • @robds
    @robds 2 місяці тому

    Las propiedades que afectan al contenido suelen ser heredadas (como texto y tipografía).
    Las que afectan al diseño estructural no se heredan (como tamaño y las de modelo de caja)

  • @leo_fdez
    @leo_fdez Рік тому +1

    muy ! bueno ! .. me encanto. Gracias por el update ajaja :)

  • @humbertovlopez8643
    @humbertovlopez8643 Рік тому +1

    Justo estoy por empezar un proyecto de svelte y quiero hacer mi propio css desde 0

  • @Miithkara
    @Miithkara Рік тому

    ¡Gracias por compartirnos estos contenidos! ¡Y más con buen rollito y una sonrisa! Siempre es mejor aprender así :D

  • @Wilfer_Suarez
    @Wilfer_Suarez 8 місяців тому

    muy buen curso me falto como el mas propiedad de responsive como relative, margin auto, o por ejemplo como hace youtube para dejar quieto el nav o el aside

  • @AdrianSoto200
    @AdrianSoto200 Місяць тому +1

    No entendí lo de la herencia y los hijos 36:40

  • @wsomas
    @wsomas Рік тому

    Eres un crack, tienes una facilidad para explicar.

  • @Viccc___
    @Viccc___ 6 місяців тому +2

    Midu eres el padre de esto. En 2 horas aprendí más que en dos años de DAW...

    • @midulive
      @midulive  6 місяців тому +1

      Gracias majo :)

  • @alexiscaceres2268
    @alexiscaceres2268 Рік тому +1

    Me encanta como explicas te daría un beso midu

  • @d3m3tri0
    @d3m3tri0 Рік тому

    Hola, he probado con Brave y Chrome y no consigo que me aparezca la leyenda con la especificidad del selector en las Herramientas para desarrolladores (min. 01:12:35). Es por el navegador? Por alguna extensión que hay que instalar? Gracias

  • @curiosities923
    @curiosities923 Рік тому

    Una maravilla de curso, 1000% recomendado si eres nuevo.

  • @z_H1RO_z
    @z_H1RO_z Рік тому +1

    Que Teclado usas midu? 😄

  • @elliotgaramendi
    @elliotgaramendi Рік тому

    W3S es muy bueno para ver el cuadro de valor por defecto, animable, heredable, etc. Y tiene buenos ejemplos, pero ya debes tener conocimientos para sacarle el máximo provecho.

  • @AdrianSoto200
    @AdrianSoto200 2 місяці тому +1

    10:05 Precisamente era con lo que mi profe nos estaba enseñando xD

  • @emca707
    @emca707 7 місяців тому

    Gracias por todo midu

  • @franciscoguerra4969
    @franciscoguerra4969 Рік тому

    siempre crack midu ! muy bueno que salgan videos actualizados de html y css pero...
    yo solo quiero decir, que no es ni almohadilla ni hash es NUMERAL xD
    saludos desde Argentina!!

  • @enriqueruiz320
    @enriqueruiz320 Рік тому +1

    Ahhhh!!! no maaa me perdí el en vivo 😢

  • @snithfferx
    @snithfferx 11 місяців тому

    Me siento más cabezón...
    Gracias por la lección.

  • @elbobinas
    @elbobinas 4 місяці тому +1

    Vaya padreada en el 45:38

  • @aravello
    @aravello Рік тому

    Soy muy pro Angular, pero me gusta bastante tu contenido 😅

  • @willisarias9253
    @willisarias9253 10 місяців тому

    gracias por estos cursos hermano

  • @javiergarciafillol4454
    @javiergarciafillol4454 Рік тому

    Siempre se aprende cosas nuevas!

  • @adriq4949
    @adriq4949 11 місяців тому

    eres un maldito crack!!! te ailoviu

  • @gustavouzcatequi
    @gustavouzcatequi Рік тому

    increible tutorial eres un maestro genial

  • @gabysanchez8726
    @gabysanchez8726 Рік тому

    Miiiiduuuu, a dia de hoy recomendas seguir utilizando Sass o ya no?

  • @GabrielaAlbornoz-k6g
    @GabrielaAlbornoz-k6g 2 місяці тому +1

    Hola, no consigo el curso de html que comentas en el video. Me ayudas por favor?? Gracias

  • @juanandrade8468
    @juanandrade8468 Рік тому

    Gracias Miduuu! 😃

  • @facuveron2509
    @facuveron2509 Рік тому

    muchas gracias midudev :)

  • @TheZemarko
    @TheZemarko Рік тому

    Que grande Midu. Consulta, porque no lo encontré, esta el de Flex y Grid?