Maquetacion con DIV y CSS

Поделиться
HTML-код
  • Опубликовано: 18 окт 2024
  • Ejemplo de maquetación con CSS y el modo de empleo de los DIV

Комментарии • 384

  • @alexmaherz7734
    @alexmaherz7734 4 года назад +18

    Tenés ganado el cielo, hermano. Me has salvado de una grande.

    • @JhanGio
      @JhanGio  4 года назад

      Gracias amigo, me alegra haberte podido ayudar, bendiciones

  • @geronelo1435
    @geronelo1435 Месяц назад +1

    Espectacular, gracias por tu tiempo y aporte , **lo realicé**

  • @fabricadeartesania6537
    @fabricadeartesania6537 2 года назад +6

    Un tutorial inmejorable. Nunca antes había visto uno en que se explique todo tan sumamente bien. ¡Mil gracias!

  • @cristianomarpuentesdiaz5925
    @cristianomarpuentesdiaz5925 3 года назад +10

    Acabo de ver este video, y la fecha es de casi 3 años me alegra que sigas subiendo contenido para ayudarnos

  • @juandev591
    @juandev591 2 месяца назад

    Muchas gracias por este tutorial de maquetacion, hay personas que explican bien y claramente, directamente, sin dar vueltas. Este tutorial me ha aclarado lo que otros largos tutoriales no han podido explicar.

  • @TheFanny200
    @TheFanny200 3 месяца назад

    Dios mio!! Por fin! He entendido los divs gracias ha sido un regalo del cielo❤❤ hoy es sábado, y para el lunes debía tener claro los divs. Me has salvado abandonar he empezado de menos0 no sé nada........y ahora miro con claridad.millon de gracias es poco❤❤

  • @EJ-hj4nd
    @EJ-hj4nd 3 года назад +5

    Me entusiasmé con este video. Muy bien explicado, y me encantó la forma tan ordenada de codificar. Mi profesora me pide que use DIVs, así que a mí sí me sirve el video 👍

  • @alejandroencarr1719
    @alejandroencarr1719 Год назад

    El video que estaba buscando 🥲💯. Mejor de ahí se daña, creo que es uno de los mejores videos que he visto de programación.

  • @ingesoft2009
    @ingesoft2009 4 года назад +1

    Me gano la vida programando en php y siempre tengo que repasar las nociones elementales de css, y este video esta SUBLIME!!!!!!

    • @JhanGio
      @JhanGio  4 года назад

      Gracias amigo, tienes razón, por eso hice este video para ayudar pues a quienes quieran comenzar en esto del diseño web, sé que hay mejores tecnologías pero nadie nace aprendido y pues una base siempre la necesitamos, bendiciones.

  • @ronnyrosales8333
    @ronnyrosales8333 4 года назад +4

    BUENÍSIMO. Es la única palabra que tengo para calificar este videotutorial, te agradezco por tan valioso aporte. Saludos.

  • @javiergaray7171
    @javiergaray7171 4 года назад +1

    Muy bien explicado Jhansi!!!!!. de los 1000 videos me quedo con este!!

  • @adrianwagner7106
    @adrianwagner7106 4 года назад +2

    muy muy buen tutorial, muy completo y resolviendo problemas que se salen en el camino q a cualquiera de nosotros como aprendices nos puede pasar. al fin entiendo esto gracias a ti.

    • @JhanGio
      @JhanGio  4 года назад

      Gracias amigo, muy amable de tu parte, y pues este es mi punto con el video, que quienes inician en esto de diseño web pues puedan comprender las base. Bendiciones

  • @MariaRodriguez-gc6mv
    @MariaRodriguez-gc6mv Год назад

    Hola me encantó tu explicación ya que fue fácil de entender y bien orientada para nosotros los principiantes. Muchas gracias

  • @rominapereyra9674
    @rominapereyra9674 2 года назад

    Gracias por tu tiempo Jhansi. Me aclaraste bastante.

  • @mae2476
    @mae2476 4 года назад +1

    Esta super como lo haces muchas gracias eres lo mejor ya me suscribí

    • @JhanGio
      @JhanGio  4 года назад

      Muy amable de tu parte amigo, cualquier duda estoy a tu órdenes, bendiciones

  • @nicolasprieto3607
    @nicolasprieto3607 5 лет назад +3

    Estoy estudiando Desarrollo de Aplicaciones Web y este video me ayudó mucho, así que te ganaste un suscriptor, gracias :)

    • @JhanGio
      @JhanGio  5 лет назад

      Gracias amigo, muy amable de tu parte

  • @mariangelsselgasserra3219
    @mariangelsselgasserra3219 4 года назад +1

    Muchísimas gracias desde Barcelona.Muy amable

  • @MundoJucora
    @MundoJucora 5 лет назад +3

    La mejor explicación del mundo, gracias totales

    • @JhanGio
      @JhanGio  5 лет назад +1

      Muy amable de tu parte, bendiciones

  • @mauriciobolivar7088
    @mauriciobolivar7088 3 года назад +1

    Excelente, muy bien explicado. No sabes cuánto te aprendí. Muchas gracias

  • @LIQUIDCHEF11
    @LIQUIDCHEF11 3 года назад

    EXCELLENTEEE UD EXPLICA TAN BIEN QUE , le da uno alegria no quiere que se acabe el video muchas gracias DIOS LE PAGUE,,, Voy hacer mil canales para darle mil likes!!

    • @JhanGio
      @JhanGio  3 года назад

      Gracias amigo muy amable de tu parte, bendiciones

  • @Fabian_R
    @Fabian_R 4 года назад +1

    Muchísimas gracias, me sirvió mucho. Usted explica muy bien.

    • @JhanGio
      @JhanGio  4 года назад +1

      Gracias amigo muy amable, bendiciones

  • @atlonrg
    @atlonrg 3 года назад

    Que bueno de lo mejorsito que he visto en cuanto a claridad, de esta foorma se entiende muchisim mejor

    • @JhanGio
      @JhanGio  3 года назад

      Gracias amigo, muy amable de tu parte, bendiciones

  • @yoteenseno5090
    @yoteenseno5090 Год назад

    pasaron 6 años de este video pero gracias me ayudaste mucho con tu video muy explicado

  • @nikolatesla5769
    @nikolatesla5769 3 года назад

    Excelente video, bien explicado, tenes madera de maestro.

  • @shantysilva5230
    @shantysilva5230 2 года назад +1

    Gracias por la información estaba un poco perdida en ciertos aspectos pero con este vídeo me ha quedado muy claro. 🤗🤗

  • @Wilfer_Suarez
    @Wilfer_Suarez Год назад

    Muy buena la explicación, ayudo muchísimo para maquetar con CSS gracias un buen like

  • @franciscosuarez1258
    @franciscosuarez1258 5 лет назад +2

    Muy buen video bro!
    Al principio no me salía bien y yo pensaba que el error era del programa en el que estoy programando, pero me di cuenta que me faltaba poner ";" en algunas partes del codigo de css
    Excelente!

    • @JhanGio
      @JhanGio  5 лет назад +1

      Gracias, muy amable... Y bueno, menos mal que pudiste darte cuenta, y a como podras ver el punto y coma es esencial para muchas cosas en informatica como por ejemplo en programacion tambien

  • @grupopspropiedades
    @grupopspropiedades 2 года назад

    Excelente!! excentisimooo!! Aprendi mas con vos en 38min que en el curso de 1 año. Gracias totales!!

  • @Denk_Carlos
    @Denk_Carlos 3 года назад

    Muchas gracias por este video, realmente me ayudo mucho. 👍👋🇦🇷

  • @skrillexcapitan
    @skrillexcapitan 4 года назад +1

    Muy buen video, me sirvio demasiado, todo lo tuve que hacer en un block de notas, y por el momento me va todo bien
    Excelente video me ah encantado

    • @JhanGio
      @JhanGio  4 года назад +1

      Muy amable amigo, gracias por tu comentario aunque un editor de texto como sublime text, bracketts o visual studio code, creeme que te facilitan la vida, bendiciones amigo

    • @skrillexcapitan
      @skrillexcapitan 4 года назад

      Jhansi Aguilar es que me lo encargaron de tarea y de ese modo:(

  • @reparacionesyalgomas
    @reparacionesyalgomas 3 года назад +1

    Amigo gracias por esa excelente y puntual explicación era lo que estaba buscando

  • @jorgecarrillo4928
    @jorgecarrillo4928 Год назад

    Muy buena explicación, gran video, gracias. 👍

  • @braulioparra6735
    @braulioparra6735 5 лет назад +1

    Amigo, muchísimas gracias por preparar este vídeo. Me ayudo mucho a entender el proceso para poder crear una pagina web. Excelente video!!!

    • @JhanGio
      @JhanGio  4 года назад

      Gracias amigo, muy amable de tu parte, bendiciones

  • @PegasoDigital
    @PegasoDigital 11 месяцев назад

    Excelente. MIL GRACIAS. Aprendi full.

  • @ruthjimenez2512
    @ruthjimenez2512 2 года назад

    Muy bien explicado muchas gracias maestro a cada quien se leda lo que se merece

  • @araquito_18
    @araquito_18 3 года назад

    mis mas sinceras felicitaciones @Jhansi Aguilar por este gran video

  • @Neho1980
    @Neho1980 Год назад

    Excelente lo coloque en practica y todo super bien, muchas gracias

  • @AnimeLand_Oficial1
    @AnimeLand_Oficial1 3 года назад

    Simple y sencillo,sin rodeos ,con este videos aprendi html y CSS e hice rápido mi primera página web

  • @elizabethcervantes8390
    @elizabethcervantes8390 8 месяцев назад

    genial a un no comprendia pero con este video acabe de entenderlo muchas gracias.

  • @jesussalas1329
    @jesussalas1329 2 года назад

    Muy buen ejemplo muy entendible. Gracias por compartirlo. Bendiciones

  • @jhonconnor8440
    @jhonconnor8440 4 года назад +1

    Felicitaciones por el tutorial,bien explicado y detallado.
    Gracias

  • @AlejandroDiaz-ss5cy
    @AlejandroDiaz-ss5cy 5 лет назад +4

    Déjame decirte que eres el puto amo, mil gracias y Dios te bendiga

    • @JhanGio
      @JhanGio  4 года назад

      Gracias amigo, muy amable de tu parte, bendiciones

  • @jorgesebastianfigueroa2042
    @jorgesebastianfigueroa2042 7 лет назад +4

    Te amo! Gracias por todo, tengo q rendir y me habia olvidado el tema div, y la diferencia con la clase.

    • @puritocodigo784
      @puritocodigo784 6 лет назад

      ruclips.net/video/IqDwUROjU3U/видео.html

  • @lesterrubio2714
    @lesterrubio2714 4 года назад +1

    saludos esto debería llamarse como esos libritos amarillo "maquetación para tontos" muy bien explicado, por fin pude comprender el uso del ccs y la maquetacion mil gracias !!!! Pulgar Arriba!!!

    • @JhanGio
      @JhanGio  4 года назад

      Haha, no amigo, no lo hice con ese afan de llamarlos así... Sino que pues, recuerda, nadie nace aprendido y aja, esta es una opción para que puedan conocer como ocupar html, en este caso usando Divs, aunque ya hay otras etiquetas semánticas: Header, Nav, Section, Footer y Aside que cumplen la misma función del Div. Gracias por tu comentario positivo, bendiciones.

  • @nicorh3668
    @nicorh3668 2 года назад

    Muchísimas gracias por el vídeo!!! Excelente

  • @isidorasantos5711
    @isidorasantos5711 3 года назад

    muy buena explicacion me ayudo mucho muchas grasias

  • @nilobrayanvallejopablo564
    @nilobrayanvallejopablo564 3 года назад

    Maravilloso hermano
    Muchas gracias

  • @rauli.carrasco1710
    @rauli.carrasco1710 4 года назад +1

    Gracias por compartir tus conocimientos! He aprendido mucho sobre la maquetación! Que estes bien! Saludos!

    • @JhanGio
      @JhanGio  4 года назад

      Gracias, muy amable de tu parte, bendiciones

  • @Grupokuma
    @Grupokuma 7 месяцев назад

    Excelente video, Gracias por compartir

  • @jonathanhans18
    @jonathanhans18 5 лет назад +4

    Excelente!.. Muy bien explicado! que buen tutorial, muchas grcias , por fin pude entender este tema. Definitivamente me subscribo a tu canal.

    • @JhanGio
      @JhanGio  5 лет назад

      Muy amable de tu parte, gracias

  • @Ryakudatsu
    @Ryakudatsu 2 года назад +1

    Me sacaste de dudas, gracias !

  • @hbravog24
    @hbravog24 3 года назад

    Extraordinaria explicación... Gracias

  • @joesajor7242
    @joesajor7242 Год назад

    El mejot tutorial amigo. Gracias.

  • @GuanacoBlz
    @GuanacoBlz 5 лет назад +5

    muchas gracias, entendi a la perfeccion este tema.. Justo lo que necesitaba!!

    • @JhanGio
      @JhanGio  5 лет назад

      Muy amable de tu parte, bendiciones

  • @gamesmuonline7524
    @gamesmuonline7524 3 года назад

    gracias por tu conocimiento, hoy aprendi algo mas

  • @joseluisgarcia-j.3826
    @joseluisgarcia-j.3826 4 года назад +1

    PROFE BUENÍSIMO! - MILLONES DE GRACIAS

    • @JhanGio
      @JhanGio  4 года назад

      Gracias amigo, bendiciones

  • @arturooliva5036
    @arturooliva5036 5 лет назад +1

    ojala asi me hubiesen enseñado en la uni... mil gracias por el video, ha sido de mucha ayuda! te ganaste un suscriptor mas

    • @JhanGio
      @JhanGio  5 лет назад

      Gracias, muy amable por tu comentario, vere si puedo compartir mas material

    • @paoloose
      @paoloose 2 года назад

      siempre leo este tipo de comentarios, me pregunto que me deparará en la universidad este próximo marzo

  • @hectorrivera898
    @hectorrivera898 Год назад

    muchas gracias estaba frustado sin poder maquetar me sirvio muchas gracias

  • @sergioyanez7474
    @sergioyanez7474 4 года назад +1

    Excelente trabajo. Muchas gracias.

    • @JhanGio
      @JhanGio  4 года назад

      Gracias amigo, bendiciones

  • @ugustokgp0404
    @ugustokgp0404 2 года назад

    Gracias por su explicación. Excelente material

  • @eliassantos8982
    @eliassantos8982 3 года назад

    Jhansi, genial su video !!! gracias por compartir sus conocimientos. Dios lo bendiga;. aqui en Colombia cuando queremos expresar que alguien realmente domina un tema decimos: El que sabe sabe; y usted realmente sabe. Bendiciones.

  • @victorjesusyisus
    @victorjesusyisus 5 лет назад +1

    buena explicación Gracias.
    soy un super principiante
    no se mucho al respecto como tu que haces el vídeo verdad
    pero si pudiera colaborar con algo es que
    Para mi gusto es mejor trabajar con pixeles o porcentajes todo en lugar de em
    para evitar errores como los que tienes de ajustar las cajas a sus correspondientes lugares
    bueno como a mi me gusta que quede mas exacto pues tendría que hacer operaciones para que al porcentaje del total de los pixeles le reste el valor de em multiplicado por dos
    Es mi opinión espero haberle ayudado a alguien.

    • @JhanGio
      @JhanGio  4 года назад

      Gracias por tu aporte amigo, y pues tienes razón, esto de las medidas es bastante complejo, tanto las absolutas como las medidas relativas. Tu usas porcentajes, yo usé Em a manera de ejemplo pero suelo ocupar mejor los porcentajes aunque aun estos a veces necesitan ajustes. Quizás el mas exacto de usar es el pixel aunque yo no lo catalogaría como medida absoluta o relativa pero la verdad es la que mejor se adapta. Bendiciones.

  • @javiero5349
    @javiero5349 2 года назад

    Muchas gracias por la explicación, todo muy detallado

  • @isaacfernandezrojas2313
    @isaacfernandezrojas2313 4 года назад +1

    Grande profe, muy bueno el tema y mejor la explicación.

  • @mauricioelflaco
    @mauricioelflaco 4 года назад

    Buen dia. Muchas gracias por compartir tu video, tenia muchos problemas para encapsular cajas dentro de otras cajas pero me quedo claro con la etiqueta float lo que se puede hacer. Saludos

  • @gustavogomezAR
    @gustavogomezAR 2 года назад

    Excelente! Muchas gracias. Muy claro y prolijito!

  • @vankravitz
    @vankravitz 2 года назад

    Gracias por compartir esta forma de maquetar, el video es exelente.

  • @blink42space70
    @blink42space70 4 года назад +1

    buenisimo estaba buscando algo asi facil rapido y sencillo

  • @romeroandresr
    @romeroandresr 4 года назад +1

    la mejor explicacion que estaba buscandooo, sos un grandeeee

    • @JhanGio
      @JhanGio  4 года назад

      Gracias amigo, muy amable de tu parte, bendiciones, cualquier duda estoy a tus ordenes.

  • @antonydiaz6367
    @antonydiaz6367 2 года назад

    Excelente video bro, muchas gracias explicas muy bien

  • @ojosabio7416
    @ojosabio7416 4 года назад +1

    Gracias profe jhansi, pude hacer la tarea que usted me dejo

    • @JhanGio
      @JhanGio  4 года назад

      Me alegra haberte podido ayudar, bendiciones

  • @TheMetalazul
    @TheMetalazul 5 лет назад +2

    suscribo estas palabras..."Excelente!.. Muy bien explicado! que buen tutorial, muchas grcias , por fin pude entender este tema. Definitivamente me subscribo a tu canal." jaja

    • @JhanGio
      @JhanGio  5 лет назад

      Gracias amigo muy amable, cualquier duda ahi estamos

  • @isaacceballos8483
    @isaacceballos8483 2 года назад

    Excelente explicación, gracias

  • @christianlara1964
    @christianlara1964 3 года назад

    Excelente vídeo.
    Muchas gracias, saludos.

  • @edeerjacksonguevaratina9870
    @edeerjacksonguevaratina9870 3 года назад

    Gracias por la información y el excelente tutorial

  • @DragonNegro1989
    @DragonNegro1989 2 года назад

    Es justo lo que necesitaba, ahora entiendo mejor lo que es el maquetado, muchas gracias^^

  • @jurkovich6808
    @jurkovich6808 3 года назад

    espectacular tu tutorial, se entiende perfectamente

  • @bairondajome9919
    @bairondajome9919 4 года назад

    Excelente video entendí como hacer los maquetados de una manera fácil Gracias 🙏🏿

  • @nimyacevedo9120
    @nimyacevedo9120 4 года назад

    Hola: en verdad soy cero en el tema lo he intentado con varios tutoriales y no lo he logrado
    gracias a ud. lo logre, pero entendiendo lo que hice porque aparte que ud. explica con suficiente tiempo lo hace muy entendible para que personas como yo que por primera vez hacemos algo asi; lo logremos pues fue genial y me senti en la gloria, creame, me parecia imposible y creia que jamas lo iba a lograr pero con su tutorial lo hice y lo entendi mil gracias
    un saludo,
    Quisiera enviarle mi trabajo para que lo viera , jajja, humm es que me siento muy orgullosa jajajja.

    • @JhanGio
      @JhanGio  4 года назад

      Perdone que hasta hoy vi pero si quiere que lo vea puede mandarlo a jhansiaguilar@gmail.com bendiciones y gracias por su comment

  • @DaniMFG.
    @DaniMFG. 2 года назад

    Lo he entendido muy bien, muchas gràcias ;)

  • @alchemist8540
    @alchemist8540 3 года назад

    Muy buen video, muchas gracias por tu aporte , necesitaba esa practica

  • @christianneyra9974
    @christianneyra9974 7 лет назад +3

    Muy bien explicado, excelente tutorial, muchas gracias .

    • @JhanGio
      @JhanGio  7 лет назад

      Gracias mi estimado, muy amable de su parte

  • @jhovha92
    @jhovha92 3 года назад

    Que buen ejemplo! muchas gracias!

  • @giancarlomejia5496
    @giancarlomejia5496 3 года назад

    Muchas gracias me sirvió para entender

  • @giangrecco3801
    @giangrecco3801 2 года назад

    gran video me ayudo muchisimo!

  • @daniellucas1827
    @daniellucas1827 3 года назад

    increíble explicación

  • @primoviaje
    @primoviaje 5 месяцев назад

    Excelente, muchas gracias..!

  • @maca4464
    @maca4464 2 года назад

    Gracias!!! Excelente video!!!!

  • @frankespiritu6030
    @frankespiritu6030 6 лет назад +8

    que buen tutorial, muchas grcias , al fin entendi este tema.

    • @JhanGio
      @JhanGio  5 лет назад

      Muy amable de tu parte, gracias

  • @Camux8
    @Camux8 4 года назад +26

    les pones a los Div el ID que en verdad debería tener cada clase ejemplo: en ves de Div debe ser Header, Div debe ser Nav, Div debe ser Section... Div ya pragmáticamente no se utiliza mas que para contener en algunas ocasiones. Lo segundo es que para CSS lo ideal es poner Class y no Id a los elementos dejando los Id para trabajar con JS según la manera correcta de hacer las cosas. Fuera de eso buen vídeo buena explicación.

    • @JhanGio
      @JhanGio  4 года назад +18

      Tienes razón pero te pongo un caso: ¿Qué sucedería si luego la persona quisiera ocupar el framework de Bootstrap? No se maneja con etiquetas semánticas sino con puro DIV y claro, usa solo clases y en ese sentido y como tú dices hubiera usado solo clases mejor; pero, en aquel momento por el hecho de pensar que los ID son únicos e irrepetibles, se suponía que no quería repetir formatos para otras secciones más que solo la nombrada. Las formas de maquetación en HTML son cambiantes, que se usaban y luego dejan de usarse, de repente vuelven a usarlas pero es bueno conocer el manejo de varias de estas cosas para que no te tomen por sorpresa

    • @oscarfiblas2096
      @oscarfiblas2096 4 года назад

      @@JhanGio ¿Es decir Bootstrap tiene que actualizarse entonces?

    • @JhanGio
      @JhanGio  4 года назад +6

      @@oscarfiblas2096 No, no estoy diciendo eso, las formas de maquetación son diversas y cambiantes, y cada quien tiene su forma, lo que no veo correcto es despreciarlas, él me pudo decir que usar DIVs era obsoleto pero por eso le ponía el ejemplo de Boostratp, entonces ahi depende mucho de cada persona y como lo quiera manejar, es a tu gusto y como te sientas mejor y no está de más que conozcas varias formas, así tu escoges con cual te sientes más cómodo, es como la matemática, puedes usar cualquier método siempre y cuando sea correcto

    • @alesnm77
      @alesnm77 3 года назад +7

      @@JhanGio si fuera tan bueno no estaría mirando un video para aprender a maquetar, no des bola! Hay gente al pedo!!! Esta muy bien todo el video. Además cada un programa como quiere!!!

  • @aprendeingles6459
    @aprendeingles6459 4 года назад

    Gracias por la importante información

  • @brolynuliseshurtarterios4563
    @brolynuliseshurtarterios4563 5 лет назад +1

    Gracias por esa enseñanza tan explicita, me resolviste el diseño de mi proyecto :D!

    • @JhanGio
      @JhanGio  4 года назад

      Gracias amigo, muy amable de tu parte, bendiciones

  • @samav7836
    @samav7836 4 года назад

    De verdad que aprendí muchísimo hermano muchas gracias por tomarte el tiempo para educar

  • @juanri
    @juanri Год назад

    Excelente tutorial!!!

  • @leomuntt
    @leomuntt 4 года назад

    Buen tutorial nuevo suscriptor

  • @salvador23220
    @salvador23220 4 года назад +1

    Eres grande maestro gracias

    • @JhanGio
      @JhanGio  4 года назад

      Gracias amigo, bendiciones

  • @joseluisarroyo2608
    @joseluisarroyo2608 5 лет назад

    Muchísimas gracias por el video y por la gran explicación. Excelente

    • @JhanGio
      @JhanGio  5 лет назад

      Gracias amigo, muy fino, bendiciones

  • @Ryussaki
    @Ryussaki 3 года назад

    estuvo bueno pana tu video , una critica constructiva es el sonido del micrófono o eso que suena cuando respiras pero todo lo damas esta un 100 .

  • @Buzca
    @Buzca 3 года назад

    Explica muy bien. Muchas gracias!

  • @tavo2423
    @tavo2423 3 года назад

    excelente gracias por su aporte