Crea tu propio "Responsive Grid System" usando sólo HTML5 y CSS3

Este Tip de Tutorales a tu Alcance es un fragmento del curso gratuito Aprende HTML5 y CSS3. Más info: eepurl.com/gmmXBL
Encontramos muchos recursos para facilitar el desarrollo web, pero soy partidario de aprender hacer las cosas desde cero, así se tiene control sobre todo desarrollo, por eso en este TIP de Tutoriales a tu Alcance aprenderemos a crear nuestro propio sistema de columnas tipo Bootstrap!
♦ Si deseas ver cursos gratis de diseño web ingresa aquí:
tutorialesatua...
♦ Página de Facebook:
/ tutorialesatualcance
♦ Canal RUclips:
/ tutorialesatualcance
♦ Twitter @juanfurrego:
/ juanfurrego
♦ Instagram @tutoriales_a_tu_alcance:
/ tutoriales_a_tu_alcance
♦ Udemy:
www.udemy.com/...
#tutorialesatualcance #html5css3 #desarrolloweb

[@NacionHiEnergyMX]

Excelente curso, no sabia nada de grid y me quedo todo claro. Muchas GRACIAS !!!!!

[@cesarbarrionuevosaavedra]

Muy bien explicado!! es para alguien que no entiende nada de nada y lo termina comprendiendo. Gracias.

[@osvaldoaurelio]

pense que el video se acabara aqui 7:26 jajaja, saludos desde brasil!

[@TheZoolder]

Eres el mejor!!! todo muy claro felicidades amigo! excelente vídeo

[@pooooooolar]

Muy buen video! gracias!
Pero en el caso de realizar un rowspan, ¿como podria recorrer un bloque de fila a otra?

[@eduardomejia5020]

muy bien explicado, buen video

[@Welteroel]

Excelente video, muy bien explicado!

[@samucorreo2]

Gran video, sirve de mucha ayuda. Una duda, yo entiendo lo que has explicado, pero a la hora de crear las páginas webs ¿me recomiendas usar boostrap o este grid system más casero y trabajar yo el CSS? También tenía otra duda y es que si los programadores web profesionales usan el sistema de grid porque supongo que trabajaran todos con frameworks.

[@erickortiz7879]

Samuel Reyes Es importante aprender los dos. Por un lugar CSS Grid será el futuro pero en este momento no todos los Web browsers tiene soporte.
Por el otro lado muchas compañías usan Bootstrap y tal razón es mejor aprender los dos. No se olvide de flex box, como una persona que creará sitios.

[@germanbaena6579]

CSS Grid el futuro? Pero hace rato... hace más de un año CSS Grid tiene plena compatibilidad con todos los navegadores! En que planeta estás por favor, agárrate bien porque te llegó el futuro y no te diste ni siquiera cuenta!

[@knibtronic1]

Que exagerado.. bastaba con decir que la persona no estaba al tanto de los últimos cambios y listo. Me imagino como responderás para temas más serios.

[@cristinam.v.2593]

@@knibtronic1 exacto

[@almiroqa]

Es muy diferente la resolución de la pantalla del dispositivo y el viuport del dispositivo...

[@elvis_gastelum]

Todo perfecto hasta que llego a las media queries y me dejan de agarrar las reglas css dentro de las queries, busque por internet y las formas de implementar media queries son igual que aqui y por alguna razon no me agarra, alguien que sepa que me sucedio?

[@VeronicaMolderia]

Esto es bootstrap y no css GRID nativo pero como siempre explicas muy bien tus cursos

[@fernandofernandez982]

mucho lío con la "regla de tres", c/columna ocupa un 8.33333333% (8.33333333 x 6 columnas=50%)

[@albertoiribe9199]

Agregue un valor nuevo en cada @media para ocultar objetos en dimensiones donde ya no se necesiten
.col-xs-0{ display:none; }

[@dfinedigital]

Explicado con bolitas y palitos... Muy buen video... Muchas gracias enloqueci porque soy novato jajaja.... Aaaaa... Aaaa!!!!

[@danielx2268]

bueno todo bien hasta que vi ese float xDD

[@JonatanFajardo]

x2

[@eroscl8817]

No puedo acceder a www.ww3schools.com. ... alguien sabe q pasó?

[@victoravr10]

www.w3schools.com

[@ISSURUSS]

www.w3schools.com/

[@MathsMartin]

No utilizas HTML5 AL METER div!!!!