Aprende desarrollo web responsivo

1. Introduccion: Bienvenido de nuevo hoy. Vamos a estar construyendo este componente de cuadrícula de diseño receptivo. Si eres nuevo aquí, hola, mi nombre es Zoe. Soy ingeniero de software y ex profesor universitario al que le encanta enseñar a la gente cómo 2. Proyecto de clase: Bien, así que sí, como pueden ver, es un componente bastante simple que vamos a estar construyendo aquí, pero lo vamos a hacer en respuesta Entonces tiene la versión de escritorio y la versión móvil, y vamos a usar CSS grade si podemos. Entonces, echando un vistazo a nuestro componente aquí, en realidad no tenemos que usar grid. Podríamos usar flex, también. Entonces veamos cómo va. En realidad, podría ser más fácil para nosotros usar Flexbox. Pero vemos cómo tenemos nuestro tipo individual de esa primera sección en la parte superior aquí, y luego tenemos nuestras dos secciones más pequeñas en la parte inferior. Y luego en el diseño móvil, simplemente cae directo en una columna. Así que bastante sencillo, bastante simple, pero solo un poco diferente porque esa sección inferior sí cambia en términos de dónde se coloca. Entonces, sigamos adelante y construyamos esto. 3. Tutorial: Así que ya he ido adelante y construí la app de inicio. De nuevo, eso no es nada que hice esto como hace meses tipo de cosas en términos de configuración. Simplemente puedes seguir adelante y usar este kit de inicio. Es el material que siguiente combinación mecanografiado todo ya configurado Y solo puedes seguir adelante y clonarlo y usar esto como tu arrancador. Puedes usar esto y no necesariamente tienes que usar el elemento Typescript Podrías usar JavaScript si lo prefieres. Así que totalmente depende de ti si quieres usar esto, pero está vinculado en la descripción a continuación. Y además, si quieres seguir adelante, como, siempre, voy a vincular el diseño. Este es uno de los diseños gratuitos de front end mentor. Voy a enlazar eso en la descripción a continuación también. Entonces tenemos nuestra aplicación básica hilada aquí. Solo voy a seguir adelante y eliminar todo el tipo de estilos de reinicio existentes ahí, y eliminar eso ahí Y entonces realmente voy a seguir adelante y dejar caer el color de fondo para este diseño aquí si puedo agarrarlo. Escritorio. Veamos de qué color estamos tratando aquí. Creo que es este tipo de color azul claro. Entonces voy a decir para el cuerpo y el HTML, el color de fondo va a ser esto y, si, eso se ve bien. Así que tenemos nuestro conjunto de colores de fondo. Sigamos adelante y construyamos esta página. Entonces en la página, vamos a tener tres tarjetas, una tarjeta con, como, tres secciones, debería decir. Entonces supongo que para esta sección más grande, ¿cómo debemos hacerlo? Hagamos tres cajitas. Entonces voy a crear una carpeta de componentes componentes. Y diremos Nuevo archivo va a ser, um, encabezado de tarjeta. Voy a llamarlo. Nuevo archivo. Encabezado de tarjeta. Uy. Encabezado TSX Y nuevamente, puedes usar JSX si lo prefieres. Y luego voy a crear un nuevo archivo llamado contenedor tarjeta punto TSX Y eso solo va a contener todas nuestras tarjetas. Entonces usaremos box para poder diseñar usando XX prop para la interfaz de usuario de material, y luego voy a importar el contenedor de tarjetas a nuestra página de inicio. Entonces contenedor de tarjetas. Guarde eso ahí. Impresionante. Y luego el contenedor de tarjetas ahora va a tomar nuestro encabezado de tarjeta, y luego también tomará los otros dos componentes de tarjeta más pequeños . Encabezado. Impresionante. Fresco. Hasta ahora tan bueno. Así que vamos a trabajar ahora en el encabezado de la tarjeta. Entonces otra vez, voy a convertir esto en una caja. Um, sálvese. Y genial. Lo estamos viendo en la página. Um, centremos el contenedor de tarjetas en la página. Entonces sí, el contenedor de tarjetas es voy a configurar la visualización de la página para flexionar. Y vamos a decir flex digamos justificar contenido, perdón, centro y líneas de pedido Centro. Guarde eso. Y creo que sí necesito establecer una altura. Um, una altura para que esto sea 98 vista altura. Creo que probablemente debería terminar haciendo esto en CSS, pero cruzaremos ese puente un poco más tarde. Bien. Entonces, lo siguiente que queremos hacer aquí es sí, construir construir estas pequeñas piezas aquí. Entonces, dentro del encabezado de la tarjeta, parece que nos hemos unido a nuestra comunidad. Entonces necesitamos algún tipo de tipografía. Probablemente necesitamos tres elementos tipográficos diferentes, así que vamos a dejarlos caer. Diremos tipografía Um. Fresco. Y esta será nuestra primera. Únete a nuestra comunidad. Impresionante. Segundo uno Garantía de devolución de dinero sin complicaciones. Y luego la descripción de, como, lo que realmente están tratando de vendernos. Um, genial. Entonces eso es bastante sencillo. Ahora hagamos un poco de silen. Parece que hay unos 40 píxeles de M o padding, debería decir, padding, um, alrededor de los elementos. Digamos 40 pixeles, 2.5 Ram. Um y ¿qué más necesitamos aquí? Yo creo, eso podría ser que deberíamos hacer nuestro tamaño de fuente y cosas así. Entonces esto va a ser de 24 pixeles. Tamaño de fuente. Va a ser 1.5 rim. Um, este de aquí va a ser 18. Y entonces este de aquí va a ser regular, así que vamos a dejar eso en paz. Y luego pondremos nuestro color. Entonces este va a ser de este color aquí. Fond. O simplemente color. Um Bueno. Uh Esto va a ser esto, como, verde neón. Hagámoslo ahí. Y entonces esta va a ser esta, como, algo azulado. Nosotros diremos. Pero. Fresco. Eso lo guardaremos ahí. Impresionante. Hasta ahora tan bien, tenemos nuestra cajita ahí. La otra cosa que sí tenemos que hacer es establecer el color de fondo. Entonces estableceremos el color de fondo de la caja para que sea blanco. Guarde eso. Y eso se ve bastante bien. Hasta el momento tan bueno. La otra cosa que quiero hacer es establecer el ancho máximo para esta caja aquí. Entonces parece que el ancho es de 635. Eso va a ser por este contenedor de tarjetas. Voy a decir que el ancho máximo va a ser 635. Vaya, píxeles. Y la altura máxima. Porque solo se supone que es un componente. No es como una página entera. Va a ser 475. Vamos a poner eso ahí. Impresionante. Fresco. Hasta el momento, tan bien. Oh, otra cosa. En realidad, otra cosa que vamos a querer terminar haciendo es establecer el radio de la esquina. Parece que son unos ocho píxeles. Entonces diremos que el radio fronterizo va a ser 0.5 ram. Y eso solo curvará todos los bordes. Oh, no, no lo hizo. Bien, entonces en realidad tenemos que ponerlo en la tarjeta. Bien, así que lo pondremos. Vamos a seguir adelante y ponerlo en la tarjeta las piezas de la tarjeta en su lugar. Así que vamos a establecer el radio fronterizo. Y debería ser lo mismo que cuando estás haciendo arriba a la derecha, abajo a la izquierda. Entonces va a estar arriba, um, ¿qué es arriba arriba a la izquierda? Digamos, 0.5 Ram, 0.5 Ram y cero y cero, y luego podemos modificarlo si eso no es correcto. No. Bien, sí, eso es correcto. Entonces mira cómo simplemente curva la parte superior izquierda y derecha. Entonces eso es sólo para conseguirnos poco ese pequeño bisel. Así que vamos a dejar eso como está. Y creo, a lo mejor podemos agregar algo de peso de fuente, solo un poquito de peso a esta de aquí, no mucho, tal vez 600 peso de fuente. Y si, tal vez para esta, también. Nosotros haremos lo mismo. Vamos a guardar eso. Sí, eso se ve bastante bien. Um, haz un poco de espaciado, tal vez 24 pixeles. Bien, así que digamos, um, Margin. Margen. Top es 1.5. Vaya. 1.5 Rm. Um, bien. Y entonces como era 0.75 m y luego cero. Sí, y solo nos da un poco de margen por ahí. Y creo que eso es bastante bueno por ahora. Vamos con eso, y sigamos adelante y construyamos las siguientes dos cajitas aquí. Entonces primera caja ahí. El siguiente va a ser nuestro CTA, lo llamaré nuestro llamado a la acción de la CTA Entonces, sea lo que sea que terminemos si terminamos cambiando el producto, siempre podemos simplemente reutilizar este componente Entonces diremos caja. Um caja. Fresco. Hasta ahora tan bueno. Y luego lo importaremos a una tarjeta, nuestro contenedor de tarjetas. Ahora bien, aquí es donde se pone interesante. Entonces aquí es donde estaba como, podríamos usar Griter. Podemos usar Flex. Lo que estoy pensando que hacemos aquí es que usamos una caja, y luego dentro de esta caja, tenemos nuestros dos siguientes nuestros siguientes dos componentes. Entonces tendremos el CTA y tendremos cualquier otra cosa YS, ya sabes, componente Y luego voltearemos donde su posición basándonos en la orientación. Usaremos la media query para hacer eso. Entonces intentemos eso, a ver si funciona. Entonces con nuestro CTA, ahora vemos que lo tenemos ahí mismo. Sigamos adelante y hagamos lo mismo. Entonces vamos a agregar algunos estilos similares. Y honestamente, podríamos usar, como, un auto, como, una fuerza componente y todas estas cosas, pero no es como si pudiéramos crear una tarjeta que tenga 2.5 relleno automáticamente y luego tome un color de fondo como propiedad y tome el radio del borde como propiedad. Creo que estamos construyendo algo más grande, definitivamente sería útil hacerlo, sobre todo porque mantenemos nuestro lenguaje de diseño. Pero creo que porque es solo un componente singular, ahora mismo, sólo podemos copiar un par de los estilos. Así que vamos a añadir en algún relleno ahí. Vamos a establecer el color de fondo para que sea. Veamos de qué se trata. Uh, rectángulo. Este rectángulo. Mm mm. Bien, vamos a ver. Creo que es de este color. Si no lo es, podemos cambiarlo . Entonces empezaremos con este color. Fresco. Y entonces necesitamos lo mismo, esencialmente, tres CTAs diferentes o tres diferentes lo siento, elementos tipográficos Entonces empezaremos con la tipografía. Y el primero va a ser la suscripción mensual. Guarde eso Genial. Nuevamente, si fueran más similares en términos del estilo real, esto tendría totalmente sentido simplemente separarlo en uno a uno componente reutilizable. Entonces entonces tenemos esto, y voy a poner en un lapso aquí para el por mes, solo porque es un poco diferente en cuanto a estilo, pero queremos que esté en la misma línea. Y entonces es más una elección de diseño que como una separación informativa Y luego tenemos eso y luego tendremos un botón debajo de todo eso. Uy. Eso lo guardaré. Bien, genial. Entonces sí, básicamente esa sección de la CTA Lo siguiente que queremos hacer es establecer el ancho máximo. Entonces, um, ¿qué es? La altura va a ser 259. El ancho máximo va a ser 318, así que diremos El ancho máximo va a ser de 318 píxeles. De esa manera, no ocupa demasiado espacio. Um, genial. Creo que eso es correcto. Um, creo que una vez que agreguemos el otro, va a ocupar ese otro espacio. Así que sigamos adelante ahora, y queremos establecer el color. Entonces vamos a decir, colores para esto. El color es blanco. Y vamos a tomar prestado eso para el siguiente, también, creo que son todos blancos? Sí, todos son blancos. A excepción de ese pequeño giro. No estoy muy segura. Echemos un vistazo y veamos de qué color es ese. Bien, sigue siendo blanco. Simplemente la opacidad es menor Así que vamos a darle estilo a esto. Vamos a decir, um ¿Qué es? Uh, el color es RGBA. ¡Gritos! Lo puse entre comillas. Uh, oh, falta. Ahí vamos. Um, y creo que son 100, 100, 100. Después 0.5. Sí, eso es básicamente, sí. Entonces lo quiero, lo quiero en realidad, lo siento, 255, 255. Sí. Bien. Eso es lo que quiero. Lo quiero blanco, pero un poco ver a través. Eso parece correcto. Y luego fijemos el dimensionamiento ahora. Entonces esto va a ser 18 gritos. Digamos tamaño de fuente 18 pixeles. Esto va a ser de 32 pixeles. Y también peso de fuente, probablemente podamos decir también, peso de fuente de 600. Diremos tamaño de fuente dos REM y peso de fuente, probablemente como 800. Um, y luego pero por mes es diferente. No queremos por mes tener nada de eso. Entonces diremos que el peso de la fuente como 400 y el tamaño de la fuente va a ser uh, 16, entonces una Ram. Fresco. Y creo que probablemente también necesitamos hacer algún tipo de flex de pantalla, um, alinear elementos en el centro. Sí, de esa manera, ahí hay un poco de espacio. Bien. Interesante. Y luego también vamos a chicos hacer margen a la izquierda. Sólo para dar algo de espacio ahí como 0.5 para ellos. Impresionante. Se ve bastante bien. Y luego el último, no creo que tengamos que cambiar todavía. Es sólo la talla normal 16. Um, otra cosa, vamos a agregar en algunos otra vez, solo agregamos un poco de relleno, algún margen. Um, entre estos dos, creo que hay alrededor de un RM, digamos, margen superior. Un carnero. Y si, bastante bien. Y luego agregaremos en este botón en la parte inferior. Entonces el botón, probablemente alrededor de 1.5 Rm relleno en la parte superior. Bien. Y entonces va a ser va a decir registrarse. Y el color de fondo va a ser este. Entonces diremos antecedentes. El color es eso. Y el color real del texto va a ser blanco. Fresco. Uh, y si, eso debería ser. Creo, sí, lo haremos de ancho completo. Eso es Width, gritos. Es igual al 100%. Transformar texto no es ninguno , en realidad lo está forzando a mayúsculas, lo que no queremos Y entonces probablemente lo haremos, como, peso de la fuente, tal vez 600, que sea un poco más audaz. Um, en cuanto al tamaño. Sí, es normal. A lo mejor hacemos 800 incluso. Fresco. Y creo que a lo mejor hay un poco más de relleno en la parte superior. Cebolla. Eso se ve bastante bien. Entonces esa es la segunda tarjeta, ahí mismo. Sigamos adelante y creamos ese tercio la tercera pieza de la tarjeta, debería decir. Y esa va a ser nuestra Y y otra vez, probablemente se te ocurra un nombre mejor que Y, pero vamos a usar Y para salir. Entonces esto es, de nuevo, comenzando con la caja para material que. Usando eso como nuestra base. lo importaremos a nuestro contenedor de tarjetas Ahora lo importaremos a nuestro contenedor de tarjetas, así que diremos por qué. Fresco. Entonces ahora tenemos ya ves cómo se está apilando yendo recto hacia abajo. De hecho queríamos venir a un lado. Entonces aquí es donde empezaremos a perder el tiempo con nuestra exhibición. Entonces vamos a decir display flex, y eso debería simplemente, eso aparece hacia un lado. Ya ves como ocupa una cantidad igual en los costados. Entonces es una especie de compensación por el hecho de que está ahí La otra cosa que realmente queremos hacer, que me olvidé por completo es establecer ese radio de borde en la parte inferior. Entonces hagámoslo muy rápido antes de seguir adelante por completo. Así que una especie de reventar desde el encabezado de la tarjeta, vamos a modificar dónde está el radio de la frontera De hecho queremos que sea el fondo para. Entonces vamos a cambiar eso. O, no, en realidad, probablemente solo el de abajo. Entonces serán tres ceros y 0.5. Entonces solo queremos que este maíz sea curvo. Entonces, um, sí, tenemos eso ahí. Y luego pasemos a Y. Así que ahora para Y, queremos hacer básicamente un estilo similar a este. Entonces una copia, podemos tomar prestada esto y usar eso como nuestra base, y luego simplemente cambiar a donde va el cero Entonces el cero que queremos de ese lado. Entonces sí, verás que el borde exterior es curvo. También necesitamos agarrar este color, que es Oh. ¿De qué color es ese? Mm, creo que ese era el otro color. No creo que sí. Uh, otra forma rápida que a menudo agarro colores es usando este recogedor de color Sí. Impresionante. Súper rápido. Uh, el color de fondo va a ser esto. Perfecto. Perfecto. Bien, genial. Entonces tenemos eso. Ahora, vamos a caer en nuestro texto, y esto debería ser mucho más sencillo. Entonces tenemos y nosotros. Um caída en un elemento tipográfico. Por qué Tipografía de Estados Unidos. Fresco. Y va a ser, nuevo, una talla 18. Y entonces el peso de la fuente va a ser, creo que estaría en 600 para el otro. Um, entonces debería coincidir. Y entonces el color va a ser blanco. Fresco. Impresionante. Um, Max Width, tenemos ese conjunto. Entonces necesitamos esta lista aquí. Ahora bien, hay dos formas en las que podemos hacer esto. Podríamos hacer esto, como, solo una especie de break usando breaks, pero creo que la mejor manera de hacerlo es usando una lista desordenada real Entonces diremos Lista desordenada. ¿Tienen un componente de lista? Oh, ellos lo hacen. No lo he usado antes. Vamos a probarlo y ver cómo va. Um, entonces diremos lista. Y entonces, ¿qué es? ¿Lista? ¿Elemento de lista, tal vez? Sí, elemento de la lista. Bien. Y luego déjame poner el primero y ver si eso se ve bien. Tutoriales por expertos de la industria. Veamos, tipo de elemento, me veo mal, tipo de elemento Lazy. Oh, uh artículo. Bien. Mm. Se sangría. Realmente no me encanta sangrarlo. Um, creo que hay una propiedad que es como Listyle List style? ¿Ninguno? No. Um, Listyle CSS. Mm. Cuadrado en el interior. Ninguno. En el interior. Oh, interesante. Bien. Realmente no me encanta eso. Cómo eliminar Listar sangría, CSS. Fuera margen izquierdo. Margen izquierdo. Cero. A ver si eso funcionó. No. Vamos a probarlo aquí. No. Bien. Realmente no me encanta la lista solo porque no está haciendo lo que necesitábamos hacer. Entonces usemos una caja, y usemos elementos de tipografía simplemente bajando. Entonces déjame copiar todo ese texto. Déjala ahí. Mm Bien. Y simplemente los dejaremos caer en elementos de tipografía. Entonces, caray. Bien. Um Bien. Sí. Y guau, en realidad el número correcto. Fantástico. Uh, Uy. Bien, genial. Nos desharemos de este pequeño espacio extra ahí. Bien, genial. Entonces ahora tenemos todos esos alineados. Um, otra cosa que voy a querer hacer. Podría haber hecho un componente de estilo para estos, pero no lo hice. Nuevamente, hay formas de hacer esto mucho más limpio, ya sabes, si estás usando esto para tu cartera. Y eso se ve bien. Lo único que quiero hacer es establecer, como, un ancho mínimo. Entonces, ¿qué es? 318? Creo que voy a establecer el ancho máximo, pero el ancho mínimo. O es eso ¿Es lo mismo? Eso debería ser lo mismo, en realidad. Oh, no, eso no está bien. Um, creo que por eso está diciendo usar grilla. Um. Así que vamos a la guía de diseño de cuadrícula CSS Trix Entonces, decimos display grid. Vamos a probar eso. Um, así que para ello sería para este contenedor. Entonces, si decimos cuadrícula de visualización, columnas de plantilla de cuadrícula, una FR, una FR, simplemente deberían ocupar la misma cantidad de espacio. Fresco. Eso resolvió nuestro problema. Nosotros iremos con eso. Entonces eso funciona para esto. Para el diseño de escritorio. Entonces nuestro diseño de escritorio es básicamente completo. Estamos bien para irnos. Lo siguiente que queremos ver es nuestro diseño móvil. Entonces lo tengo abierto en una segunda pestaña solo para poder alternar de un lado a otro entre los dos. Para el diseño móvil, en realidad queremos que el queremos que sea solo una opción. Entonces si digo un FR, sí, eso es lo que queremos. Bien, así que pongamos nuestra consulta móvil aquí. Así que vamos a usar nuestro gancho de media query de material UI, importarlo desde aquí. Creo que tal vez necesitemos usarlo. Bueno, a ver. Podríamos haberlo usado en un par de lugares, y solo voy a voltearlo un poco. Voy a decir que Cs móvil es igual a min o lo siento, Max Width, 600 pixeles. Y así voy a estar preguntando como, si es móvil, haz esto, si no, haz otra cosa. Entonces, si es móvil, queremos que las columnas de la plantilla de cuadrícula sean solo una fracción. De lo contrario, queremos que sea una fracción y una fracción. Básicamente diciendo, como, es, o bien está configurado como uno y uno o es uno y dos. Entonces eso es lo que vamos a hacer ahí. Ah, y no le gusta porque esto necesita ser un componente cliente. Eso lo guardaremos. Bien. Impresionante. Fresco. Entonces eso se ve bien. Y entonces, sí, aquí lo está haciendo correctamente. La única otra cosa que quiero cambiar son estas pequeñas cosas molestas, um, del radio fronterizo Y siento que eso es parte del truco del diseño. Oh, en realidad, aquí, simplemente no lo tienen curvado en la parte inferior en absoluto. Interesante. Entonces supongo que solo quita el radio del borde si es recto hacia abajo. Um, no sé si eso es lo ideal o eso fue solo un accidente, pero seguiremos el diseño tal y como está delineado. Um, así que el radio fronterizo. Sí, vamos a tener que hacer dos más, um, dos consultas móviles más. Entonces copiaremos esta consulta de medios en CTA. Y nuevamente, no es estrictamente necesario, pero no se ve gris. No se ve pulida. Así que sí queremos asegurarnos de que hacemos lo mejor con lo que estamos trabajando. Entonces vamos a convertir esto en un componente cliente, y luego diremos, yo móvil, el radio fronterizo es cero, de lo contrario, el radio fronterizo es eso. Y luego haremos lo mismo en nuestra Y. También quitamos algunas de estas importaciones de no usar solo para mantener las cosas limpias. Diremos que si es móvil, el radio de pedido móvil será cero. De lo contrario, lo hará y, sí, eso se ve bastante bien. Eso es exactamente lo que queremos ahí. Entonces creo, sí, creo que estamos bastante buenos para ir allí. Así que sí, esa fue una forma muy rápida de cómo podemos usar CSS grid, una combinación de grid y flexbox, realmente, con el fin de construir un diseño responsive Como dije, hay formas de optimizar esto y algo así hacerlo mucho más limpio. Y te recomendaría que si esta es una de tus piezas de portafolio, definitivamente te tomes unos minutos y solo la limpies. Ya sabes, usa componentes mucho más razonables. No te repitas tanto y sí, conviértalo en una pieza de portafolio realmente, muy sólida.