columnas responsive con html y css

[Música] Bienvenidos a un nuevo vídeo Bienvenidos a Javi Hola como tema de hoy vamos a aprender las columnas responsibles con html y css totalmente desde cero para ello Acá tengo el resultado podemos apreciar tengo dos columnas totalmente responsi para todo el tamaño de dispositivo por ejemplo tenemos este pequeño tamaño es para celulares de 320 píxeles el tamaño para 480 tenemos tamaño tablet 768 Tenemos también para también PC 1024 Pixel con resolución de 1.280 hacia arriba totalmente responsable adaptable a cualquier dispositivo móvil es lo que vamos a aprender bueno sin más preámbulos empecemos acá tengo preparado el Index punto html y el estilo css bueno para eso lo que voy a hacer es voy a borrar para empezar desde cero ahí está está totalmente de 0 actualizamos acá el editor de texto de html es el brackets bueno para ello voy a empezar con la estructura básica de html5 tipeo html5 html 2.5 y tabular me aparece automáticamente en español y por ejemplo un título acá columnas response Ahí está ahora vamos a vincular el estilo link tabular y vínculo el estilo punto css seguidamente voy a agregar la nomenclatura para adaptar a disposición móviles meta vp tabular automáticamente se completan la estructura para adaptar a dispositivos móviles ahora en el body voy a agregar el contenido por ejemplo Primeramente voy a agregar un tip con el llamado contenido dentro de ese edit voy a agregar otros más llamado caja ahora dentro de esa caja voy a contener Primeramente voy a tener dos cajas por por dos ahora dentro de esa caja voy a tener un h1 más un párrafo presiono tabular este resultado ahora en el h1 voy a poner un texto 1 y como párrafo texto Loren se complete en la siguiente caja texto 2 y un login Igualmente ahí están si vamos si apreciamos acá esto es el pegado resultado una vez trabajado el archivo Index punto html vamos a trabajar el estilo punto css bueno para ello en general voy a agregar un margen cero a todos Martín 0 un padding Igualmente cero ahora recién voy a empezar a trabajar con las cajas con el contenido Primeramente voy a trabajar con el contenido y voy a crear un margen en general de unos tres Pixel si bien si pueden apreciar si solo el contenido ahora voy a trabajar con las cajas en primer lugar voy a dar un display si ven se me ubica en dos columnas ahora si dentro voy a dar un padding 10 píxeles de esta manera ahora lo que voy a trabajar voy a empezar a trabajar con el h1 el párrafo de cada texto voy a agarrar Entonces vamos a trabajar con caja dos puntos nth uno vamos a trabajar con él la caja 1 la caja uno con el h1 Ahí está le va a agregar un background de 0,69 ya con el resultado automáticamente en vista previa vamos un color White y vamos a poner un botón hacia abajo de unos 15 píxeles ahí está hemos trabajado con la con la caja 1 el h1 ahora vamos con la caja 2 El h1 también simplemente que cambiamos por caja 2 y cambiamos el color para que sea diferente 0.59 es un azul más claro ahí está ahora vamos a trabajar lo que es el párrafo Igualmente vamos a llegar a la caja igual para avanzar podemos copiarlo esta parte pero vamos a bajar con el párrafo ahora tenemos esto vamos a sacar un background también de unos un delito con un color White blanco ahí está y al párrafo 2 le vamos a sacar otro color vamos a agregarle 089 ahí están los colores son de manera de ejemplo ya ustedes lo pueden trabajar con lo que deseen bueno Eso es en tamaño primeramente para dispositivo móvil Y si voy agregando por ejemplo la página si veo se me adapta en general a todo Si lo maximizo Ahí está eso no queremos queremos que se adapte por cada dispositivo tenemos para 480 para tablet para PC y Súper PC ahora vamos a trabajarlo con esa medidas bueno para ello lo que voy a hacer Voy a agregar un arroba media y voy a trabajar primeramente para la medida a ver si lo maximizo me dirijo acá esta pestañita más herramientas y herramientas de desarrolladores Ahora me voy a dirigir me da esa opción y Primeramente voy a trabajar para 480 vamos a trabajar Me equivoqué para 480 píxeles en contra 80 creo que está bien no hay mucho que hacer vamos a trabajar para 768 tamaño Tablet y acá Quiero agregarle un interlineado un poquito más bueno vamos a hacerlo entonces me dijo de unos 7600 píxeles 768 píxeles Perdón tenemos esto Vamos a darle al internado a lo que es párrafo entonces buscamos la caja en cuanto a párrafo y un línea de unos 30 píxeles ahora vamos a dar resultado Ahí está en cuanto a 768 Ahora quiero para el tamaño de 1024 1024 píxeles vamos a verlo en 1024 mi 24 km un internado un poquito más amplio a ver en todo el variar de 40 píxeles vamos al resultado ahí está Y si podemos apreciar lo cierro esto aún ocupa toda la pantalla por ejemplo siento más pequeño empiezo a emplearlo 480 allí cuando ocurre ya de 768 y acá sigue con 768 acá ocurre ya el cambio de 1024 píxeles Ahora cuando ocurre el cambio de minutos 4 Pixel quiero que tenga el contenido solamente mil píxeles Entonces qué es lo que hago me dijo acá entonces agregó el contenido quiero que tenga un guay de 1024 píxeles New 2000 pizzas exactamente Ahí está y se lo acerco Ahí está por ejemplo si ahora maximizo tiene solamente 1024 Quiero agregar también un Magic auto que se encuentra al centro ahí está bueno eso en cuanto a 1024 píxeles pero quiero para un poquito más más grande entonces creo que hago copio esto quiero también para 1.280 pitcher Superior Pixel quiero que tenga el contenido en cuanto a contenido quiero que tenga un White de 1200 píxeles ahí está un poquito más grande ahora vamos a probarlo hemos logrado hacer con una responsable totalmente desde cero Ahí está 480 aumento a 768 aquí se aumenta a 1024 píxeles y ahí aumenta a 1.280 píxeles Ahí está totalmente desde cero Bueno espero que les haya gustado el vídeo si les gustó el vídeo no se olviden de suscribirse al Canal compartirlo en sus redes sociales simplemente gracias