Desarrollo de sitios web responsivos: HTML y CSS para diseñadores de sitios web

1. Introducción: Hola y bienvenidos a desarrollo web responsive, HTML y CSS para Diseñadores Web. Soy Chris, un Desarrollador Web Freelance y Profesor aquí en SkillShare.com. En este curso, te voy a enseñar cómo pasar del diseño al desarrollo a la hora de hacer sitios web. El primer apartado del curso será sobre las diferencias entre diseño web y desarrollo web. Revisaremos el diseño responsive, hablaremos de código, y terminaremos con un poco de SEO. En la segunda sección, tomaremos un diseño ya hecho creado en photoshop y convertirlo en una página web de respuesta completa. A pesar del título, esta clase está configurada para beneficiar tanto a Diseñadores Web como a Desarrolladores Web. Para Diseñadores Web, aprenderás cómo tus diseños se traducen en sitios web en funcionamiento para que puedas comunicarte mejor con los Desarrolladores o construir tus propios diseños tú mismo. Para los desarrolladores web, aprenderás a trabajar con Diseñadores y crear una copia precisa de sus diseños en HTML y CSS. Ya sea que seas un Desarrollador con ganas de trabajar con un Diseñador, un Diseñador con ganas de trabajar con un Desarrollador, o simplemente alguien que quiera construir habilidades en ambas áreas. Este curso es para ti. Entonces si estás listo para empezar, click en el siguiente video y te veré por dentro. 2. Diseño vs. desarrollo: responsividad: Antes de empezar a crear nuestro sitio web, es importante entender cuáles son las diferencias entre diseño web tradicional y el desarrollo web front-end. El mayor como se revela en el título de esta clase es Responsividad. En el contexto de la web, Responsive Web Design and Development significa que el diseño y diseño de tu página web responde a las dimensiones de la ventana en la que está contenida. A menudo pensamos en Responsive Web Design en cuanto a los tres dispositivos más comunes, una computadora portátil o de escritorio, una tableta o un teléfono móvil. Algunos diseñadores podrían confundir la versión móvil de un sitio web en particular para ser un sitio web diferente por completo. Pero por lo general el sitio web móvil es simplemente el mismo que la versión de escritorio, pero está hecho para ser sensible para que se adapte a ese tamaño de pantalla más pequeño. Ya ves, mientras que la tableta móvil y la PC son los ejemplos principales, simplemente representan diferentes puntos en un espectro fluido. Si tomo aquí la ventana de mi navegador, por ejemplo, se puede ver que la página web ya está respondiendo al cambio en el ancho de pantalla. En Google Chrome, puedo simular el ancho y la altura de la pantalla de un teléfono móvil abriendo mis herramientas de desarrollador y haciendo clic en la barra de herramientas del dispositivo de toggle. Ahora se puede ver la misma versión del sitio web, pero con un diseño adaptativo que se actualizará a cualquier tamaño de pantalla. Esto puede ser un área de confusión entre diseñadores y desarrolladores porque los diseñadores suelen crear sus diseños con un lienzo conjunto. Por lo menos, los diseñadores crearán una versión de escritorio del sitio web. Pero lo ideal sería que los desarrolladores recibieran diseños separados para los tres tamaños de pantalla comunes, PC, tablet y móvil. Fuera de esas dimensiones de pantalla particulares, depende del desarrollador asegurarse de que el diseño de la página web se mantenga fluido y que se ordenen los problemas que aparezcan entre ciertos tamaños de pantalla. Para los diseñadores, podrían utilizar comúnmente una herramienta como Adobe InDesign o Photoshop para crear secciones e insertar texto e imágenes. Una forma de conceptualizar esto es teniendo cada elemento representado por una caja. Este concepto se traduce bastante bien en desarrollo web, excepto que las cajas cambiarán dimensiones o cambiarán posición dados los diferentes tamaños de pantalla. Por supuesto, estos elementos o cajas, si se quiere, están determinados por cómo HTML y CSS, y eso es exactamente a lo que llegaremos en la siguiente lección. 3. Diseño vs. desarrollo: código y presentación visual: En la lección anterior, hablamos de cómo los diseñadores suelen crear diseños web en un lienzo estático mientras que en desarrollo web, tamaños de pantalla y elementos hasta fluidos, lo que significa que sus dimensiones y posición pueden cambiarlo en cualquier momento, este comportamiento es posible a través de HTML y CSS. Cubrí HTML y CSS extensamente en mi clase anterior, Fundamentos de Desarrollo Web, HTML y CSS, pero para aquellos de ustedes que no desean adentrarse en estos temas, HTML es un lenguaje de marcado que da estructura a web páginas y aplicaciones en toda la web. CSS es el lenguaje de hoja de estilo utilizado para describir la presentación de HTML. Cuando un no desarrollador mira un sitio web, esto es lo que podrían ver, pero para crear lo que ves aquí, necesitas escribir lo que ves aquí. Esto es HTML y esto es CSS. Vamos a entrar en cómo usar cada uno de estos en la sección práctica de esta clase, pero por ahora el punto que estoy haciendo es que la web, como sabemos, ella, está conformada por contenido contenido contenido en etiquetas HTML, tenemos reglas aplicadas desde CSS, que les dan estilo y maquetación. Esto es diferente a cómo un diseñador crearía un marcado estático de página web. Por ejemplo, usando una herramienta como Photoshop, seleccionarían entre una variedad de controles interactivos, y entonces esas selecciones se almacenarán en un archivo de Photoshop, cuyo código interno nunca verías. Ahora bien, esta información no tiene la intención de confundirte, sino simplemente sacar a la luz una gran diferencia entre Diseño y Desarrollo Web. Como desarrollador, he tenido problemas en el pasado, con comunicarme con clientes que no entienden el lenguaje técnico. Por ejemplo, los colores, Los colores en el desarrollo web están representados ya sea por códigos Hex, códigos RGBA, códigos HSLA, o por un conjunto de etiquetas reconocidas como blanco o negro. Idealmente, los diseñadores deberían facilitar a los desarrolladores saber qué colores usar al ser explícitos sobre el color exacto requerido. Otro ejemplo son las dimensiones. Similar a los colores, sería ideal que los diseñadores pasaran dimensiones específicas a los desarrolladores, lugar de depender del desarrollador para poder recogerlo visualmente. En el desarrollo web, las unidades más comunes son los píxeles para alturas y anchuras absolutas, y EM o porcentaje para alturas y anchuras relativas. En ambos ejemplos, los diseñadores suelen entrar en su software y anotar los colores o dimensiones específicos utilizados, poner eso a disposición del desarrollador. La excepción siendo, por supuesto, anchuras y alturas relativas. Pero no te preocupes si estás un poco confundido por toda esta charla técnica en la sección práctica de esta clase, en realidad vamos a bucear y traducir un diseño en una página web real, así que mantente atentos para eso. Hasta entonces sólo tenemos una consideración más para repasar y eso es SEO. 4. Diseño vs. desarrollo: SEO: El punto final sobre el desarrollo web que los diseñadores deben considerar es el SEO. SEO es sinónimo de optimización de motores de búsqueda. En el desarrollo web, deberíamos preocuparnos principalmente por un lado de SEO. Frío onpage SEO. Si bien onpage SEO incluye una gran cantidad de factores diferentes a las áreas comunes que pueden causar problemas son imágenes y encabezamientos. Cubramos las imágenes primero. Los diseñadores pueden estar acostumbrados a exportar imágenes y documentos con la más alta calidad posible, pero esto no es ideal para la web. Al construir sitios web, las imágenes sólo deben ser tan grandes como necesitan ser. El motivo por el que se trata de la velocidad de la página. Se ve cuando vincula una imagen en HTML, puede establecer un ancho y alto incluso en un documento CSS o directamente en el elemento. Este código se ejecuta cada vez que se accede al sitio web y eso significa que la imagen en esta dirección se carga en su totalidad cada vez. Por supuesto, hay algunas excepciones a esto, pero este es el comportamiento predeterminado. El hecho del asunto es que si tomas una imagen y la redimensionas a un tamaño más pequeño en tu código, simplemente desperdicias datos y cuanto más grande sea la imagen, más tiempo tardará la página en cargarse. Por eso es importante que el diseñador exporte las imágenes a no más de la resolución más alta posible. O bien, el desarrollador calcula la resolución más alta requerida y cambia el tamaño de las imágenes en consecuencia. A continuación, texto y encabezamientos. Cuando se trata de texto, tu elección de etiquetas es importante para el SEO en página, nos meteremos en las etiquetas cuando empecemos a trabajar con HTML directamente. Pero por ahora es importante tener en cuenta que el uso de las etiquetas correctas no se reduce simplemente a cómo se ve. En cuanto a las etiquetas de encabezamiento, a veces veo que los desarrolladores cometen el error de usar que alguna vez tiene el tamaño de fuente previsto. Pero si miras en el sistema de numeración para encabezados en HTML, encontrarás que se supone que la etiqueta h1 define el encabezamiento más importante y h6, el encabezado menos importante. los diseñadores web y otros no desarrolladores no entiendan este concepto. Por lo que es importante seguir la estructura correcta de los encabezados y actualizar los estilos de cada etiqueta si el aspecto de los mismos no es correcto. Por último, cuando se trata de texto dentro de las imágenes, trate de evitar esto donde sea posible. Las imágenes no son receptivas y los motores de búsqueda les cuesta leer texto en ellas, lugar de texto real en la página. En el pasado, el uso de imágenes para obtener un determinado diseño o estilo podría haber sido esencial. Pero hoy en día, HTML y CSS van mucho camino para reducir cualquier efecto deseado. Eso es todo para la sección teórica de esta clase. En la siguiente sección, nos vamos a poner prácticos y de hecho construirnos una página web a partir de una maqueta creada en Photoshop. Te veré en el siguiente video. 5. PSD a HTML: Antes de empezar: Por lo que antes de empezar, es importante que hablemos de conocimientos y herramientas requeridos. En cuanto a software, vas a necesitar solo un navegador web y el editor de códigos y para aquellos de ustedes que son nuevos en el desarrollo web, esto es lo que ambos principales. Un navegador no sólo es lo que usas para navegar por la web, sino también lo que usas para ver documentos HTML en tu computadora. Un editor de código es lo que usarás para escribir tu código y editarlo. Estas dos son básicamente las herramientas esenciales requeridas para cualquiera de mis clases de desarrollo web. Definitivamente necesitas un lugar para escribir código y un lugar para verlo. Adicionalmente, una copia de Adobe Photoshop es deseable pero no esencial. En la siguiente sección, voy a estar usando Photoshop para mirar el diseño del sitio web, inspeccionar colores y fuentes, y determinar el relleno y los márgenes. No obstante, si no tienes Photoshop, aún puedes seguir adelante. Por último, en cuanto al conocimiento, recomiendo que ya conozcas los conceptos básicos de HTML y CSS. Para un conocimiento fundacional de HTML y CSS, te recomiendo que tomes mi clase anterior de Skillshare, fundamentos de desarrollo web, HTML y CSS. Pero si tienes poco tiempo, las secciones HTML y CSS de mi primer curso, entendiendo el desarrollo web, una guía para principiantes de la web debería ser suficiente para proporcionar una introducción básica a estos dos idiomas. Aparte de eso, estaré brindando los archivos necesarios para que completes la compilación en la siguiente lección. 6. PSD a HTML: configuración: Por lo que ya deberías tener un editor de código, un navegador web, e incluso Photoshop listo o como alternativa, cualquier software que lea documentos. Para tomar un diseño para una página web y convertir eso en una página web real, vas a necesitar el simulacro real de la página web, las imágenes requeridas y las fuentes, colores y márgenes requeridos. Para aquellos de ustedes que no están trabajando con un archivo de Photoshop, necesitará su diseño y para proporcionarle las imágenes, los colores específicos, los nombres de las fuentes deseadas, y si es posible, los tamaños de fuente y los márgenes entre los elementos. En este caso, estaré brindando esa información para usted. En el caso de que sí tengas Photoshop y el diseñador te proporcione un archivo de Photoshop, podrás agarrar toda esa información del propio archivo de Photoshop. Eso es lo que estaré haciendo en esta clase. Para empezar, necesitamos ir a una dirección en nuestro navegador. He almacenado los archivos del proyecto para este proyecto en GitHub. Por lo que solo necesitas ir a Github.com/Christopherdodd/SkillShare. Una vez que llegues a esa página, verás un repositorio aquí, y aquí mismo está Cuda Project.zip. Haga clic en eso, y luego aquí dentro, haga clic en “Descargar”. Voy a poner el mío a escritorio. Por lo que voy a seleccionar Escritorio y hacer clic en “Guardar”. Ese es un archivo zip por supuesto, así que vamos a tener que ir a nuestro Finder o Windows Explorer, si estás usando Windows. Entra en Escritorio y amplía el proyecto. Podemos deshacernos del archivo zip en este punto. Cuando abrimos el Proyecto Cuda, hay dos carpetas, una es los archivos de diseño. Tenemos aquí el archivo Photoshop como lo denota the.psd. Entonces si no tienes Photoshop, no te molestes en abrir ese. Aquí mismo tenemos el PDF que representa el diseño, así que si abro esto, se puede ver el diseño que vamos a estar haciendo hoy. Esto es lo que vamos a poder hacer al final de esta clase usando HTML y CSS. Por supuesto, aquí también hay algunas imágenes, y ahí es donde entra nuestra carpeta de activos. En nuestra carpeta de activos, tenemos esas imágenes a nuestra disposición para llevar a nuestro proyecto. Si no estás usando Photoshop, y solo tienes la maqueta para que se apague, vas a necesitar los colores y fuentes específicos. Los he puesto en un documento PDF para ti, también en un documento RTF, si quieres entrar y copiar pegar, deberías poder copiar y pegar con la mayoría de los navegadores PDF de todos modos. Entonces si abro esto, puedes entrar y copiar códigos de color y pegarlos justo en tu proyecto. Ahora que tenemos nuestro diseño listo, es hora de empezar realmente a codificar este proyecto, y eso es lo que vamos a hacer en el siguiente video. 7. PSD a HTML: estructura: Entonces ahora que tenemos todos nuestros archivos de diseño listos, en realidad podemos seguir adelante y empezar a construir este proyecto en HTML y CSS. En esta lección, vamos a sentar la estructura usando HTML. Entonces en las siguientes lecciones, vamos a usar CSS para darle estilo. Pronto verás cómo el proyecto se une con CSS mientras que con HTML solo, no se parecerá en nada a esto. Entonces tengo mi archivo de Photoshop justo abierto frente a mí pero, por supuesto, como mencioné anteriormente, si no tienes Photoshop todavía puedes seguir en nuestra carpeta Proyectos aquí. Tengo la maqueta en PDF. Entonces lo que voy a estar haciendo usando el archivo de Photoshop, y si tienes Photoshop siéntete libre de seguir. Obviamente, lo que puedo hacer con el archivo de Photoshop es en realidad entrar e inspeccionar elementos. Entonces puedo entrar aquí y puedo ver que la fuente es Titillium Web, que el peso de la fuente es negrita, que el tamaño de la fuente es de 42.16 píxeles y si miro aquí, parece ser blanco pero en realidad no es un blanco puro. Está cerca del blanco pero no puro. Entonces lo que he hecho es que si vuelves a entrar a la carpeta y haces click en Colores y Fuentes, lo que he hecho es que te he dicho explícitamente lo que tienen todos estos diferentes elementos en cuanto a tamaños de fuente, pesos, y colores. Ojalá, y esto sea una lección tanto para diseñadores como para desarrolladores, los diseñadores deberían proporcionar esto para desarrollarse ya que no tenemos Photoshop, y los desarrolladores que no tienen Photoshop deberían solicitar esta información a los diseñadores. ocasiones los diseñadores esperan que los desarrolladores solo echen un vistazo a esto y sean capaces de averiguar la fuente solo por tamaño o averiguar el tamaño o peso de la fuente, eso es simplemente poco práctico. Así que asegúrate de que ya sea el desarrollador o el diseñador, estos detalles han sido escritos o están disponibles en el archivo de Photoshop, ¿de acuerdo? Muy bien, entonces lo otro que mencioné anteriormente, aparte de colores y fuentes son las dimensiones. Incluso usando una herramienta libre como Preview, todavía puedes inspeccionar las dimensiones. Puedes hacer clic en selección rectangular aquí y arrastrar una selección, y en realidad hay una herramienta en Vista previa si estás usando Mac o no sé qué usarías en PC, pero en realidad puedes ir a buscar Inspector. Ahora como arrastro, así tengo que volver a hacer la selección. Se puede ver por aquí, estoy obteniendo un ancho y alto para esa selección. Por lo que es aproximadamente 145 entre este logotipo y el inicio de este texto aquí. Entonces eso es realmente todo lo que necesitamos saber. El resto podemos escoger visualmente, pero cosas como dimensiones específicas, tamaños de fuente específicos, familias de fuentes, pesos de fuentes, algo de eso a menudo es difícil de identificar como desarrollador. Por lo que es importante obtener esa información dondequiera que esté en un documento como este o obtienes el archivo completo de Photoshop. Muy bien, así que sin más preámbulos, empecemos a construir nuestro HTML. Voy a abrir ATOM que es mi editor de códigos. Como puedes ver aquí, tengo abierto un proyecto anterior, pero solo cerraré eso. Lo que voy a hacer es crear un nuevo archivo. Voy a abrir una nueva ventana en Google Chrome que es mi navegador preferido. Lo que voy a hacer es dirigirme a [inaudible] a HTML. Aquí es de donde obtengo mi plantilla HTML de nivel base. Entonces voy a copiar eso, y lo voy a poner aquí. Al igual que en mis otros cursos de HTML y CSS, voy a cavar en mi archivo Project y voy a llamar a este cuda.html. Como sólo estamos construyendo un archivo HTML en esta clase en particular, sólo lo estoy nombrando Cuda. Pero si estuviera construyendo varias páginas, llamaría a este Índice para la página de inicio. Sólo una nota al margen ahí. Entonces una vez que guardo ese documento, obtengo todos los bonitos colores y además soy capaz de abrir eso en mi navegador. Entonces voy a mover esto al otro lado. Voy a arrastrar esto a mi navegador y, voila, tenemos acceso a nuestro proyecto ahora. Si los pongo uno al lado del otro, puedo ver el código y puedo ver la salida aquí. Está bien, entonces lo primero que voy a querer cambiar es el título Cuda. ¿ Qué hace Cuda? Voy a darle algunas palabras clave más, sitios web impresionantes y aplicaciones móviles, vamos con eso, sitios web impresionantes y aplicaciones móviles. Ahora solo una advertencia antes de meternos en esto, esto podría tardar un poco de tiempo en envolverte la cabeza alrededor de lo que estoy a punto de hacer. Este no es un curso fundacional de HTML y CSS, así que definitivamente te recomiendo que vayas y tomes esos cursos si aún no lo has hecho. Pero lo que estoy a punto de hacer es establecer la estructura que creo que tendría sentido para este diseño. Hay múltiples formas de hacer esto, y es posible que no lo hagas bien la primera vez. Como pones en CSS, es posible que tengas que modificar tu HTML. Todo eso está bien. En realidad ya he creado este proyecto, así que tengo una buena comprensión de lo que funcionó HTML y lo que no, y sí tuve que hacer algunos cambios. Entonces, solo ten eso en cuenta a medida que pasemos. Parte de mi proceso de pensamiento podría no ser inmediatamente claro para ustedes pero, de nuevo, eso sólo viene de mis conocimientos fundacionales y mi experiencia con la construcción de proyectos similares. Entonces, sí, viendo como lo hago y si tienes alguna pregunta, siéntete libre de preguntar en la discusión. Entonces esa es mi pequeña descargo de responsabilidad antes de que empecemos. De hecho, vayamos a través y construyamos esto. Entonces lo que estoy viendo aquí son tres secciones, ¿de acuerdo? Entonces si abro esto, aquí está esta sección que está representada por esta caja morada. Ahí está esta sección aquí la cual es la bonita caja verde. Tienes esta sección que es bonita y azul, y aquí abajo hay en realidad una cuarta sección, pero eso es más un pie de página. Entonces tienes la Sección 1, Sección 2, Sección 3, y un pie de página. Como se puede ver, el encabezado, que podemos considerar esta parte aquí mismo, es en realidad parte de la primera sección. Entonces voy a estar anidando eso dentro de la Sección 1, ¿de acuerdo? Ahora lo otro que estoy notando de inmediato es que no hay nada fuera de los límites de estas dos líneas de cuadrícula, ¿de acuerdo? Esto es algo común en el desarrollo web llamado contenedor. Ahora todo lo que ponemos en la página, si es un tamaño de pantalla que es bastante grande, no se extiende al ancho completo de la pantalla. Se sienta dentro de un contenedor de un ancho máximo de, bueno, solo echemos un vistazo y veamos cuál es el ancho máximo de esto. Puedes ver aquí solo estoy arrastrando mi herramienta de selección de un lado a otro. Entonces lo que vamos a estar haciendo en nuestro HTML es tener contenedores integrados en cada sección de 1140 y verás que sucede eso en la práctica muy pronto, ¿de acuerdo? Esto podría convertirse en una lección larga así que podría dividirla en dos, pero empecemos de inmediato. Entonces me voy a deshacer de esto, y voy a sangrar eso, conseguir algo más de espacio en nuestro documento, me gusta mucho espacio en blanco. Lo que vamos a hacer es la primera sección así que voy a sangrar, crear una sección. Voy a darle a esa sección un DNI de la Sección 1, muy inventiva, lo sé. Entonces cierra esa etiqueta. Si eres nuevo en HTML, necesitas una etiqueta de apertura y cierre, y vas a tener contenido en el medio. Está bien. Entonces tenemos dos secciones más así. Entonces voy a nombrar esa Sección 2, Sección 3 y luego tenemos un pie de página. Por lo que se trata de los elementos de primer nivel de nuestra página web, tres secciones y un pie de página. Ahora dentro de esta sección en particular, lo que voy a hacer es crear un contenedor, y eso es solo un div con una clase de contenedor. Eso va a asegurar que todo el contenido dentro no se ensanche a los 1140 píxeles. Solo voy a copiar y pegar eso en todo incluido el pie de página porque como puedes ver el pie de página está dentro de esos límites también. Está bien. Entonces ahora tenemos una sección y un contenedor. Lo siguiente que quiero es un encabezado. Entonces para crear este encabezado, voy a abrir y cerrar etiquetas de encabezado, y lo primero en el encabezado es una imagen, así que img-src. Aquí es donde puedo apuntar a un logotipo. Entonces si entro a un directorio, podemos ver activos aquí y luego podemos ver logo allá. Entonces assets/logo.png. Ahora en cualquier momento realmente puedes ir a recargar la página y ver qué tienes pasando. Como se puede ver aquí, la imagen no está llegando. Me pregunto por qué. Entonces ve e inspecciona aquí abajo. En realidad se está encontrando la imagen pero es blanca. Entonces porque hay un fondo blanco y hay una imagen en blanco, realidad no lo puedes ver. Para aquellos de ustedes que no saben, este es el Inspector y soy capaz de mirar cualquier página web e inspeccionar lo que está pasando en tiempo real. Entonces eso es realmente genial si no has tomado ninguna de mis clases anteriores. Entonces qué voy a hacer porque vamos a tener un montón de pequeños temas como ese. Yo solo voy a construir primero el HTML, y luego vamos a ver cómo se ve como documento puramente HTML, y luego vamos a construir el CSS y vas a tener una idea de por qué definitivamente necesitamos CSS. Entonces tenemos la imagen. Lo que voy a hacer ahora es hacer un nav. Entonces tienes nav de apertura y cierre, y dentro voy a hacer una lista desordenada. Entonces para los artículos de lista su LI, Así que voy a crear uno y luego duplicar. Entonces la primera es casa, y la otra cosa de estos enlaces no solo es que enlistan elementos ahí, por supuesto, enlaces, y para denotar un enlace, solo necesitamos usar la etiqueta a. Entonces cuando creas enlaces y aún no tienes la página a la que enlazar, muchas veces solo usas un hash, y tienes que cerrarlo. Ahí vamos. Ahora podemos copiar esto, y sólo podemos cambiar el nombre. Entonces en casa sobre, y si te preguntas por qué no lo estoy haciendo en mayúsculas, realidad podemos hacer eso en CSS, y eso en realidad sólo nos va a facilitar. Cuando estamos escribiendo nuestro código, no tenemos que verlo en mayúsculas, y si quisiéramos cambiarlo por cualquier razón para no mayúsculas después, podríamos simplemente cambiar un estilo y eso volvería atrás. El otro punto aquí es que el primer enlace está activo. Tiene una caja alrededor. Eso es lo que va a significar esa caja. Habrías visto esto en otros sitios web. Cuando estás en la página activa, hay algún tipo de indicación, y en este diseño en particular, hay una caja alrededor de la ubicación en la que estás. Estamos en la página de inicio por el momento así que hay una caja alrededor de casa, por lo que la forma más fácil de hacerlo en la convención habitual es agregar una cláusula al elemento de lista de activo. Entonces ahora tenemos nuestro nav y nuestra imagen dentro de un encabezado. Ahora podemos bajar y crear este siguiente apartado, que es el encabezamiento principal y el llamado a la acción. Voy a darle una identificación a esto, pensé largo y duro en esto, pero no pude llegar a un mejor nombre, encabezamiento principal y CTA. Sé que es largo y probablemente no el mejor nombre, pero es el más descriptivo. Entonces voy con ello. Ahora, este rubro particular aquí, es el encabezado de nivel superior de nuestra página web. Entonces es h1 lo que necesitamos usar. El otro bien de tener Photoshop es que puedo copiar directamente el texto del archivo de Photoshop en mi documento HTML. Lo último que no sea el encabezado es por supuesto el botón, y en HTML, si usas la etiqueta de botón, vas a conseguir algunos estilos que se ven bastante feos. Te mostraré lo que quiero decir con eso aquí mismo. Cambiaré esto a botón luego diré que trabaje con nosotros. Ya verás aquí ese es el formato estándar para un botón. Por lo que es más fácil peinar a veces si solo haces de esto un enlace y luego lo peinas como un botón. Por lo que probablemente se va a enlazar a otra página de tu página web de todos modos, así que queremos crear eso como enlace de todos modos. Yo sólo voy a darle una clase a esto porque en realidad hay dos de estos botones, y vamos a querer peinarlos de formas similares. Voy a darle una clase a esto, para que podamos apuntarlo de botón grande. Esa es prácticamente la primera sección. Ahora bajamos a la segunda sección, identifiquemos cuáles son los elementos. Lo que tenemos es esta sección de encabezamiento con un encabezado, una línea, y un párrafo, y luego tenemos estas cuatro columnas con un ícono, un encabezamiento, y un párrafo otra vez. Lo primero que voy a hacer es que ya tenemos nuestro contenedor aquí. Voy a crear esta primera pequeña sección, que clase como la sección de encabezamiento. En realidad, no usemos sección porque estamos usando sección por aquí. Vamos a llamarlo caja de título, caja es un poco diferente, así que no lo confundo con la sección. En caja de título. Como dije, tenemos un rubro, y ya tenemos un rubro de primer nivel, por lo que vamos a tener que ir más abajo en la lista y usar el rubro 2, voy a escribir en los servicios que brindamos. Nuevamente, voy a esperar hasta el final para cambiar todo esto a capiteles porque podemos hacerlo con un estilo. A continuación tenemos esta línea aquí, y generalmente para hacer una línea básica en HTML, todo lo que podemos hacer es simplemente usar esta regla horizontal de etiqueta, pero va a ser difícil darle estilo exactamente así. Entonces lo que voy a hacer es tener un div, darle una clase de línea, y luego podemos usar CSS para darle todos esos estilos que harán que parezca una línea. Entonces debajo, sólo tendremos una etiqueta de párrafo, y como lo hice antes, solo puedo seleccionar todo este texto y pegarlo justo en. Entonces tenemos aquí nuestra caja de título, y ahora podemos empezar a construir nuestras columnas. Entonces lo que necesitamos primero es una sección todo para esto. De lo que estas cosas suelen llamarse Blurbs. Entonces voy a llamar a la cosa que los contiene a todos como un blurb-row, y luego dentro de eso voy a crear cuatro divisiones con la clase de blurb. Ahora antes de duplicar eso cuatro veces, estos blurbs son más o menos lo mismo. Entonces lo que voy a hacer es construir uno de ellos primero y luego copiar y pegar. El primero, tenemos una imagen. Si entro en activos y entonces ¿cuál es el nombre de la misma? Bandera icon.png. A Little hack es que puedes entrar ahí, dar click para intentar cambiar el nombre, y luego en realidad solo copiar el nombre, para que podamos poner eso ahí dentro. Entonces vamos a otro rubro y lo voy a hacer un rubro 3 porque vamos bajando la jerarquía, y voy a llamar a eso branding. Entonces voy a poner en el párrafo, y luego tienes un blurb. Crea algo de espacio aquí, y vamos a duplicar eso tres veces. Yo también me voy a ampliar para este. Ahora tenemos que pasar y cambiar sólo la dirección del icono, el título, y el texto. Volviendo a aquí, el siguiente va a ser el icono de crayón.Así que solo copiaré y pegaré ese nombre de archivo, y lo llamaremos diseño. Podría adelantar rápido aquí porque básicamente estoy haciendo lo mismo por los cuatro. Muy bien, al final de todo eso, tenemos nuestra sección dos. Tenemos nuestra caja de título con un título, una línea, y un párrafo. Después tenemos nuestra fila de blurbs con cuatro blurbs cada uno con una imagen, un encabezado, y un párrafo. Entonces, sólo volvamos atrás y miremos estos lado a lado. Se puede ver cómo el HTML se traduce a los elementos que hemos identificado en el propio diseño. Ahora acabamos de tener la tercera sección para ponernos en contacto. Esta va a ser la más complicada porque las formas siempre son complicadas con el diseño responsive. Entonces al igual que los últimos, voy a bajar aquí, y en realidad puedo copiar y pegar esta caja de título porque es lo mismo. Puedo cambiar el encabezado para ponerme en contacto, y luego puedo copiar el texto del párrafo y sustituirlo. Muy bien, cajas de tittle ya en. Eso es genial. Ahora lo que voy a hacer es crear un div para el formulario. Sólo hay un formulario de contacto, así que le voy a dar a este un formulario de identificación de contacto. Entonces dentro voy a abrir realmente un formulario. Esto es lo que consigue una forma para funcionar. Tienes que ponerlo en realidad dentro de un formulario. Entonces lo que voy a hacer, que podría no tener perfecto sentido ahora mismo pero lo hará cuando empecemos a darle estilo con CSS, es crear filas para cada una de estas diferentes filas en el formulario. Simplemente va a hacer que sea más fácil peinar. En realidad podemos usar el estilo flex, que te mostraré en un video posterior. Voy a llamar a esto una fila de formulario. Yo quiero tres de estas formas-filas. Uno para nombre y correo electrónico, uno para mensaje, y otro para el botón. Ahora tenemos tres filas de forma. El primero, vamos a poner dos entradas. En primer lugar, tipo de entrada, texto, va a darle un nombre de “nombre” y un marcador de posición de “tu nombre”. El texto que va en este cuadro se llama marcador de posición por si no te diste cuenta. Eso es todo lo que necesitamos. Entonces podemos ir y crear una entrada para el correo electrónico. Tu correo electrónico va a ser el marcador de posición para ese. Ahora aquí abajo, este cuadro de texto en realidad no es una etiqueta de entrada, lo creas o no, así que llegué a hacer área de texto.Como atributo en área de texto, somos capaces de decir marcador de posición. el bien de integridad, también le daré un nombre, que será mensaje. El último, vamos a hacer otro botón grande, pero esta vez necesita ser una entrada para que se pueda enviar el formulario. Vamos a poner en otro tipo de entrada de envío, clase de botón grande porque se va a formatear de la misma manera, y el valor determinará qué va en el contenido real de los botones. En este caso va a ser “enviar mensaje”. Está bien, estoy seguro de que esta lección ha sido larga pero aguanta conmigo solo un poquito más porque sólo nos queda una sección, y es la sección de pie de página. Entonces nuevamente con la sección de pie de página, es similar a la sección de navegación porque tenemos una lista de enlaces. Pero yo no lo llamaría nav necesariamente porque no está navegando a otros lugares de la página web. En realidad se está vinculando a sitios externos de redes sociales. Semánticamente, sólo voy a llamarlo un div en lugar de un nav para sostener todos estos enlaces. Voy a darle a ese div una clase de enlaces de pie de página. Ahora como mencioné, es una lista, así que voy a crear una lista desordenada y luego tener los diferentes ítems. Al igual que la de arriba, se 'van a ser listas con enlaces dentro de ellas. Tan rápidamente, y podría avanzar rápidamente a través de un poco de esto. Voy a poner en los enlaces. Está bien. El paso final, como se puede ver aquí, es twitter está en azul. Asumo que eso es para enlace activo. No sé cómo podría ser un enlace activo donde si en realidad no estás en la página de twitter, pero vamos a tratarlo de la misma manera y vamos a darle una clase de activo. Básicamente, cualquiera de estos enlaces con una clase de activo va a tener ese color diferente. Al igual que aquí arriba, cualquiera de estos enlaces con una clase de activo va a tener esa caja a su alrededor. Esa es la forma habitual de hacerlo, así que nos estamos apegando a esa convención. Dulce. Entonces eso es más o menos chicos. Para el HTML, ya he puesto muchas clases, pero ninguna de esas clases está vinculada a CSS. Echemos un vistazo a cómo se ve en el navegador. Solo necesito refrescar mi página, y walah mira este hermoso diseño. Entonces chicos lo que estás viendo en este momento es HTML sin ningún estilo en absoluto. No hay estilos en línea, no hay archivo CSS, y así es como luce.Como puedes ver, CSS va a hacer todo el levantamiento pesado por nosotros a la hora de convertir lo que es esto en esto. De acuerdo, entonces por eso esta es sólo una lección, poner el HTML, y luego el resto de las lecciones van a estar en CSS. Lo que vamos a hacer es que lo vamos a dividir sección por sección. En realidad vamos a crear reglas de estilo. Entonces verás que esta estructura en realidad se juntan y se ven bastante cerca de lo que tenemos aquí. Espero no haberte perdido en este video. Perdón si fue un poco largo. Espero verte en la próxima donde en realidad empezaremos a hacer que esto parezca nuestro diseño aquí mismo. Te veré en el siguiente video. 8. CSS - Sección 1: Está bien. En la última lección, presentamos la estructura HTML de nuestra página web recién diseñada. Como puedes ver, HTML hace un poco para conseguir el contenido en la página, pero necesitamos mucho CSS para que se vea así. De eso se tratarán las siguientes tres lecciones. Lo vamos a dividir en tres secciones, Sección 1, Sección 2, Sección 3, incluyendo el pie de página, y luego vamos a trabajar para que sea sensible. Por supuesto, vamos a tomar decisiones CSS que garanticen la mejor oportunidad de que sea sensible a medida que bajamos a tamaños de pantalla más bajos. Pero inevitablemente, siempre hay pequeños temas que surgen. Vamos a aprender a arreglar esos también con consultas de medios. Por último, vamos a transformar este menú en algo que sea conmutable. No sé si eso es una palabra, pero básicamente lo que va a pasar es que esto se contrata y luego podemos activarlo y apagarlo en el móvil, que es una característica bastante estándar en muchos sitios web en estos días. En esta primera lección, vamos a hacer la primera sección y eso debería mantenernos ocupados. Primero lo primero, vamos a entrar en nuestro editor de código, y lo que tenemos que hacer es crear un nuevo archivo para albergar todo nuestro CSS. Voy a hacer clic en Nuevo archivo, y lo voy a guardar de inmediato para que tengamos nuestro color, así que navega a tu directorio de proyectos, y vamos a ponerlo bien con nuestro archivo HTML. Voy a llamarlo styles.css. Ahora la segunda parte de esto es vincular este archivo CSS a nuestro documento HTML. Cómo hacemos eso es yendo dentro de las etiquetas de cabeza, creando una etiqueta de enlace con un rel de hoja de estilo y enlace al archivo styles.css. Porque está en la misma carpeta, no necesitamos poner ninguna carpeta ni nada. Podemos simplemente ir styles.css. Lo primero que voy a querer hacer es este contenedor, voy a empezar por poner en una definición CSS de clase. Nuevamente, esta no es una clase fundacional CSS y HTML, sino puntos para las clases. Vea cómo hemos puesto clase como atributo en algunas de estas etiquetas. Podemos apuntar a esa clase poniendo un punto, y luego el nombre de esa clase, y luego entre corchetes rizados, todos nuestros estilos. Lo mismo para id Si estamos identificando un solo elemento en la página, usaríamos id, y para apuntar a un id, usaríamos hash y luego el nombre. Por ejemplo, para este rubro principal en cta, al que llegaremos un poco, lo apuntaríamos así. Ahora lo primero que quiero hacer es crear un max-width para este contenedor. Recuerdo que dijimos, 1140 píxeles. El segundo que vamos a querer hacer es asegurarnos de que sus centros en medio de la página. Voy a darle un margin-izquierdo de auto y un margin-derecho de auto. Básicamente, cuando tienes un elemento de un ancho fijo, puedes centrarlo dentro su elemento padre usando margin-left auto y margin-right auto. Si volvemos a nuestra página web ahora y recargamos, se puede ver que tiene algún espaciado agradable a ambos lados. Si arrastramos esto hacia adentro, seguirá manteniendo esa bonita caja, ese bonito contenedor en medio de la página justo hasta que lleguemos a un punto donde el ancho de pantalla es menor que este número aquí, 1140. Tenemos nuestro contenedor, eso va a afectar toda la página, y ahora vamos a trabajar en la primera sección. Lo que me gustaría usar son comentarios para etiquetar las diferentes partes de mi documento CSS, así que voy a poner un comentario aquí. Esto no hará nada. Esto es solo para nosotros mirando el código, y así puedes poner en un comentario comenzando con una slash y un asterisco y terminando con una slash de asterisco. Ahora voy a apuntar a mi primera sección usando el símbolo hash, que te mostré apenas un momento antes. Lo que vamos a hacer es darle a esta sección este fondo morado. Para aquellos de ustedes que tienen Photoshop, realidad pueden hacer clic en esto, y con unos pocos clics diferentes, pueden entrar y encontrar el código hexadecimal. En realidad ahora puedo crear un atributo para el color de fondo, poner en el hash, poner en el código. Si hicieras esto sin el archivo de Photoshop, va a estar en tu documento de colores y fuentes, y solo mirarías el fondo de la Sección 1 ahí está. Aunque no tengas Photoshop, recuerda, todavía puedes seguir adelante. Pero voy a usar Photoshop a partir de ahora para averiguar estas cosas. Le hemos dado el color de fondo, veamos qué sucede cuando actualizamos la página. Voila, conseguimos este bonito fondo. Pero aquí tenemos un problema. El cuerpo tiene un margen. No sé por qué eso está pasando directamente arriba, pero fácilmente podemos arreglarlo, de nuevo, voy arriba aquí porque estoy poniendo todos nuestros estilos universales en la parte superior. Podemos apuntar a todo el cuerpo de nuestro documento HTML. Voy a asegurarme de que no haya margen ni relleno simplemente poniendo margen, relleno cero. Ahora irá a los bordes. Como se puede ver aquí, todavía tenemos nuestro contenedor. Ya podemos ver nuestro logo, porque no tenemos fondo blanco, pero aún nos queda un largo camino por recorrer. En cuanto a la Sección 1, también quiero asegurarme de que sea lo suficientemente alto porque hay mucho espacio en nuestro diseño. Voy a marcar o bien la casilla en Photoshop o puedo arrastrar una selección y ver la altura aproximada de este elemento, y en realidad podemos arreglar nuestra sección para que sea la misma. Mide unos 595-596 de altura. Lo que voy a hacer es volver a nuestra definición de sección aquí, darle una altura min de 595. Ahí vamos. Obviamente no va a tener sentido ahora mismo, pero lo que vamos a hacer es mover esto aquí arriba, mover esto en el medio, hacer de este un bonito botón grande. Volviendo al diseño, siempre haciendo referencia al diseño, tenemos la primera sección de nuestra sección, o la primera área de nuestra sección es este encabezado. Como puedes ver, hay un poco de margen arriba. Lo que voy a hacer es unirme a otra selección para averiguar cuánto es eso, y digamos que son unos 55. A mí me gusta redondearlo a los cinco píxeles más cercanos. Vamos a ir en cabecera objetivo. Recuerda, si estás segmentando una etiqueta o elemento HTML, solo estás apuntando a todos ellos. No es necesario usar un hash o un punto. Simplemente puedes poner explícitamente en cualquier elemento al que estés apuntando y eso afectará a todos los elementos. este momento, sólo tenemos una etiqueta de encabezado, por lo que esto sólo va a afectar a esa. Lo que voy a hacer es darle una parte superior de relleno de 55 píxeles. Sé que dije margen, pero si cambiamos esto a margen, lo que va a hacer es empujar toda la sección hacia abajo y entonces conseguirás este espacio en blanco arriba de aquí. No queremos eso, queremos relleno top. Ampliar eso. En lo siguiente que vamos a trabajar es en este menú. En este momento, se ve como una lista estándar de enlaces. Lo que quiero decir con eso es que tenemos este estilo estándar para enlaces donde nuestro navegador, lo convertirá en un texto azul y le dará subrayado, y luego también estos feos puntos, ese es el comportamiento estándar de hacer listas de cosas y hacer ellos enlaces. Tenemos que anular eso. Voy a apuntar a los elementos de la lista seleccionando primero nav, luego entrando en la lista desordenada, y luego apuntando a todos los elementos de la lista dentro de estas listas desordenadas. Lo que voy a hacer es cambiar primero el estilo de visualización. En lugar de display block, que actualmente es ahora, voy a darle display block inline. Yo guardo eso. Ya verás, ahora va en línea en lugar de bloquear. Nuevamente, esta no es una clase CSS fundacional, sino una explicación rápida de inline versus block. Se puede pensar en el bloque como algo que extiende todo el ancho para la página y luego se apila uno encima del otro como lo es nuestra página web ahora, puede ver todo simplemente apilado uno encima del otro. Ese es el comportamiento estándar de la mayoría de los elementos para simplemente mostrar como un bloque. Pero usar bloque en línea nos permite tener estos elementos en línea. Si la pantalla llega a un punto en el que no puede soportar todos estos en línea, volverá a bloquearse. Es un método de visualización muy común, bloque en línea. Ahora quiero deshacerme de esta decoración de texto como se le conoce en CSS. Voy a apuntar a una capa más profunda y apagar la decoración de texto. Decoración de texto, ninguna. Ahí vamos. Todavía tenemos azul. Voy a entrar y hacer el color blanco, y ahí vamos. Una de las cosas que estoy notando ahora es que tenemos algunas fuentes bastante feas. Esto es probablemente algo que debería haber configurado al principio, pero lo haré, lo estoy descubriendo ahora. Nuestra fuente que estamos usando como está escrita aquí es Titillium Web. ¿ Cómo hacemos Titillium Web en nuestro proyecto? Lo que vamos a hacer es entrar en nuestro navegador y buscar fuente Titillium Web. Ahora, podemos entrar en Google Fonts, y Google Fonts almacena esta fuente en lo que se llama CDN. Una dirección pública a la que podemos enlazar y traer esta fuente. Voy a seleccionar esta fuente, y luego voy a dar clic en Personalizar. De lo contrario, sólo nos va a dar regular, así que voy a dar clic en Personalizar. Nos va a dar un montón de opciones diferentes. Yo quiero poder seleccionar ligero, regular, y audaz. Esos son lo que necesitamos para el proyecto. Pero si sospechas que vamos a necesitar más, solo puedes seleccionarlos todos. También podemos descargar estas fuentes y albergarlas en nuestra página web. Pero para los efectos de este curso, solo voy a usar esta etiqueta aquí, que enlazaremos a la fuente desde Google, y luego especificamos eso en nuestro CSS. Google lo hace fácil para nosotros. Simplemente tenemos que tomar lo que dice aquí y ponerlo en nuestro proyecto. Primero lo primero, esto va. Olvidé hacer la etiqueta final ahí. Bueno, aún funcionó. De todos modos, ahora me refiero a fuentes externas. Eso debería vincularse ahora. Lo que puedo hacer ahora es establecer el fondo del cuerpo. Estas serán las fuentes estándar de todo en el cuerpo de nuestro documento. Puedo copiar eso y cambiar la familia de fuentes a Titillium, me resulta muy difícil pronunciar éste a Titillium Web. Cerremos esto, volvamos a nuestro proyecto y veamos qué pasa. Hola, ahora tenemos una fuente diferente. Entonces va a haber ciertos puntos donde vamos a usar negrita y vamos a usar luces, creo. Pero por ahora sólo podemos poner todo a Titillium Web. Lo siguiente que quiero hacer es flotar el NAB a la derecha. Como se puede ver aquí, se viene debajo del logo y no quiero eso. Yo quiero que flote a la derecha. Ahora está a la derecha aquí. Se ve un poco restringido en esta vista. Pero como puedes ver, cuando somos más grandes que 1140 píxeles, tiene algún margen agradable. Vamos a llegar a un tamaño de pantalla más pequeño en una lección posterior. Pero saliendo de lo que tenemos aquí, voy a seguir trabajando para que estos a cómo los queremos. De nuevo, solo quiero recordarles antes de seguir adelante que pueden tomar algunos intentos para conseguirlo exactamente de la manera que se ve aquí, y eso está totalmente bien. Tenía algo de práctica de antemano. Algunos de mis procesos podrían no ser inmediatamente claros para ti, pero solo dale una oportunidad y prueba cosas diferentes si el relleno no funciona, prueba los márgenes. Si los márgenes no funcionan, solo sigue intentándolo y llegarás allí eventualmente hacer algunas investigaciones. Así es como la mayoría de nosotros aprendemos desarrollo web. Pero por ahora, me tienes para guiarte por cómo lo hice y ojalá tenga sentido si no como siempre cuadro de discusión abajo, si tienes alguna pregunta. Siguiente cosa, el relleno y la caja. Voy a entrar en el ítem de lista y le voy a dar algo de relleno. Solo echemos un vistazo al diseño de nuevo. Como puedes ver, hay un poco de relleno en la parte superior e inferior, pero hay más relleno a la izquierda y a la derecha. Sólo voy a estimar eso. Vamos a arrastrar un poco de un dedo del pie de selección. Se puede ver el ancho hay unos 17 píxeles, y la parte superior es de unos 15 píxeles. Se trata de unos 16 píxeles en cualquiera de los lados en realidad. Empecemos con eso. Empecemos con relleno de 16 píxeles. Para activo, voy a apuntar ese elemento específico con una clase de activo usando esto, darle ese color de fondo. Nuevamente, estoy usando Photoshop para hacer esto, pero puedes revisar en el documento este color en particular. Entraré aquí, hachís ese color en particular, y entonces realmente lo podemos ver en la pantalla de ahí. Como puedes ver ahora, solo poner ese relleno y ese color de fondo, y ya hemos hecho una gran diferencia. Ahora claro, una cosa que puedo ver aquí es que tenemos estos bordes duros. De lo que podemos hacer para suavizar esos hacia fuera se utiliza lo que se llama frontera-radio. Voy a agregar eso a nuestro elemento de enlace activo. Border- radio, cinco píxeles suele ser una buena cantidad. Ahí vamos. Ahora como puedes ver, el relleno es un poco más rectangular aquí. Eso voy a modificar ligeramente. Lo que voy a hacer es cambiar el relleno versus arriba e abajo a izquierda y derecha. Creo que eso está un poco más cerca. A lo mejor un poco menos de relleno en la parte superior. Un poco más de relleno a la derecha. De nuevo, no está en las capitales. El modo en que podemos hacerlo es mediante el uso de la transformación de texto, y podemos seleccionar mayúsculas. Ahora cada elemento de la lista dentro de un nav tendrá letras mayúsculas. Como pueden ver, todavía hay un poco de diferencia ahí, pero voy a seguir adelante porque no quiero pasar demasiado tiempo en ningún pequeño elemento. Por supuesto, la atención al detalle es importante, pero puedes pasar y experimentar con eso para que sea perfecto. Echemos un vistazo. Parece que una cabeza está bastante bien en este momento. El siguiente paso es toda esta sección. Eso lo etiqueté en un documento HTML como encabezamiento principal y CTA. Lo que voy a hacer es crear un estilo para eso. Encabezamiento principal y CTA. Ahora, ¿qué quiero de mi rubro principal y CTA? En primer lugar, noté que todo está centrado en la página. También noté que aquí hay algún margen. Si le echo un vistazo a eso, los márgenes alrededor de 150 píxeles. Lo que voy a hacer es darle a esto un margen superior de 145 píxeles. Ahora está más en el centro. Pero entonces también le voy a dar un texto alineado de centro para que se presente en el centro. Ahí vamos. Lo siguiente dentro de este rubro principal y CTA es el rubro real. Puedo apuntar al rubro que está dentro de la cabecera principal y CTA poniendo en encabezamiento principal y CTA con un h1 después. Lo primero que noto es que el color es blanco, no negro. Ahí vamos. El tamaño de la fuente es en realidad mucho más grande. Si entro aquí, puedo revisar 42.16. Yo sólo voy a ir con 42 pixeles. Tamaño de fuente, 42 pixel. Te darás cuenta de que es una fuente de peso, audaz. Por suerte instalamos ese peso de fuente también. Podemos bajar aquí y hacer font-weight negrita. Ahora echemos un vistazo. Vaya, mira eso. Es tan a menudo que el más pequeño de los cambios puede tener un impacto bastante grande. Es una locura pensar que empezamos con lo que estábamos mirando antes, que era si solo me deshago de este enlace de hoja de estilo. Esto es lo que estábamos mirando antes. No sé cuánto tiempo llevamos yendo tal vez 15 minutos de codificación. Ahora tenemos esta hermosa paz. Obviamente me estoy adelantando. Aquí hay una cosa más estilo y ese es el botón. Pero yo sólo quería hacer ese punto brevemente. Ya que el botón se va a peinar más o menos lo mismo que el botón de enviar mensaje aquí abajo. Voy a poner un estilo por encima de la sección uno para botón grande. El botón grande tiene algunos estilos diferentes en él. Lo más notable es que tiene mucho relleno. Nuevamente, dibujando la herramienta de selección en la parte superior, tiene alrededor de 27. A los costados. Tiene como 83. Esos números no serán exactos, pero nos dan un buen punto de partida. Voy a entrar y hacer relleno de 25, 90, 25, 90. También para el texto, queremos que sea de White. Echemos un vistazo ahora. En realidad podemos ver el relleno funcionando para nosotros todavía. También tenemos este subrayado, así que tendremos que arreglarlo. Pero lo que podemos hacer es agregar un estilo para específicamente este botón para que sea el fondo naranja. Entonces en realidad podemos ver el relleno funcionando. Lo que voy a hacer es empezar con este selector y es una etiqueta, así que lo voy a seleccionar usando un a Una cosa que noté es el subrayado, así que voy a deshacerme de la decoración de texto. Entonces lo segundo que voy a hacer es darle ese color de fondo. El color de fondo es, si entro e inspecciono este elemento en Photoshop, ahí está, lo pongo. Ahora veamos qué pasa. Tenemos este gran botón naranja. Estoy notando algunas cosas. El trabajo del botón de EU está en mayúsculas y el tamaño de la fuente es en realidad un poco más grande también. Al entrar aquí, puedo ver que en realidad son 18 píxeles. Al igual que antes para capitalizarlo, podemos usar la transformación de texto capitalizar. Podemos fijar el tamaño de fuente a 18 píxeles. Ahora se pone un poco más grande. Desafortunadamente el capitalizar no es lo mismo que mayúsculas. Perdón por eso. Capitaliza en caso de que te estés preguntando, solo tienes que capitalizar la primera letra de cada palabra. Ahí vamos. Trabaja con nosotros. Otra cosa que estoy notando es que hay algún margen entre el botón y el texto. Eso son unos 60 píxeles de margen. Como puedes ver, ya hay un poco de margen ya con la etiqueta de encabezado que viene incorporada. Pero podemos extenderlo a 60 píxeles. Voy a ir al encabezamiento, margin-bottom 60 pixels. Eso empuja un poco el botón hacia abajo. Otra cosa, border-radius para darle ese bonito borde curvo. Ahí vamos. ¿Hay algo más? Creo que eso es bastante bueno, chicos. Nuestra primera sección es bastante completa. Obviamente cuando redimensionamos, funciona bastante bien hasta cierto punto, vamos a llegar a arreglar problemas responsivos en un video posterior. Pero para la sección uno, creo que lo tenemos a un estado bastante bueno. Podría haber algunas discrepancias ahí, pero estoy bastante contento con eso. Espero que hayas podido seguir junto con esta lección, ahora vamos a hacer más o menos exactamente lo mismo, pero con esta sección y esta sección y luego por supuesto el pie de página, y luego vas a ver todo este proyecto llegar a ser así. Pero luego encima de eso, también vamos a hacer que sea sensible y funcione bien en cada tamaño de pantalla. Ese es el emocionante futuro de esta clase. Espero verte en la siguiente lección. Nos vemos entonces. 9. CSS - Sección 2: Muy bien, bienvenidos de nuevo chicos. En esta lección, vamos a seguir con la creación del CSS para nuestra página de aprendizaje lo lleve de esto a esto. Nos vamos a centrar en esta segunda sección aquí mismo en esta lección. Entonces en la siguiente lección, haremos la sección final. Al igual que antes, voy a empezar con la sección misma. Si hago clic aquí y hago clic en el rectángulo, si estoy usando Photoshop, puedo descifrar el relleno, por lo que el color de la caja y la altura de la misma. Marquemos esos estilos de inmediato. En primer lugar, voy a crear algo de espacio aquí para que ustedes puedan ver lo que estoy escribiendo más fácilmente. Voy a hacer trampa un poco y copiar lo que tenemos aquí. Voy a seguir separando cada sección con un comentario solo por legibilidad para mí y quien venga y mire esta hoja de estilo más adelante por la pista. Para la Sección 2, como mencioné, color de fondo como acabo de copiar, lamentablemente ya llené mi portapapeles con otra cosa, así que tengo que entrar y copiar eso de nuevo. Entonces las alturas que está aquí arriba son de 747 píxeles. Voy a ir con 745 sólo porque me gusta redondear hacia abajo y voy a usar min-height. Ahora, yo uso min-height aquí arriba también, y podrías haberte estado preguntando por qué uso min-height y no height. Tiene que ver con la capacidad de respuesta. En este momento queremos que tenga una altura mínima cuando todos los, supongo, elementos puedan caber fácilmente dentro de él. Pero cuando bajamos a un tamaño de pantalla más pequeño, se puede ver aquí con la Sección 1, ve la altura de la caja se hace más grande y queremos que las alturas de la sección se hagan más grandes, para incluir todos los elementos. Ahora vamos a hacer este texto más pequeño y cambiar algunas de las dimensiones de los elementos a medida que nos metemos en tamaños de pantalla más pequeños. Pero sin importar, queremos que esa sea una altura mínima pero en tamaños de pantalla más pequeños estamos contentos de que se extienda hasta el tiempo que tenga que ser para incluir todo el contenido. Ojalá eso lo aclare si te lo estabas preguntando. Si me desplazo hacia abajo hasta la segunda sección, guardo en el documento, refresco la página, ahora puedes ver que tenemos un fondo verde. Si extiendo la página completa, el contenido es en realidad más alto que el min-height en esta instancia, por lo que en realidad no estamos viendo ese min-height en efecto. Pero una vez que empecemos a poner estos de lado a lado, ya verás eso. Algo que estoy notando que no está del todo bien es que hay una brecha entre aquí. Sé por experiencia que las etiquetas de encabezamiento tienen un margen superior e inferior por defecto. En el inspector podemos ver esto por esta zona naranja. Si paso el cursor sobre el Epígrafe 2, podemos ver un área naranja arriba e abajo. Sé que eso está causando este espacio en blanco aquí. Lo que voy a hacer es efecto este H2 siguiente. En nuestro HTML lo llamamos un cuadro de título, voy a volver a espacio abajo, seleccionar title-box, H2. Lo que voy a hacer es deshacerme del margin-top, podamos deshacernos de eso, y lo que voy a hacer después es poner algo de relleno, lo cual no voy a hacer ahora, pero voy a poner en alguna parte superior de relleno, así que aún tiene algo de espacio de esta línea al epígrafe. Me estoy adelantando un poco trabajando en este rubro ya pero sólo quería deshacerme de ese pequeño espacio en blanco de inmediato. Volviendo a nuestra sección general, una cosa que necesitamos para toda la sección es que el color necesita ser blanco. De nuevo, poniendo en color blanco, guardando eso, y ahí vas. Ahora que hemos puesto en los estilos para toda la sección, trabajemos en las partes individuales. Tenemos primero este área de caja de título con la línea de encabezamiento y párrafo. Como vimos un poco antes, el área de title-box tiene la clase de title-box, y tenemos un H2 un div con una clase de línea y una etiqueta P. Algunas cosas que noté sobre el diseño de este cuadro de título es el número uno, está centrado, por lo que esta flotando hacia la izquierda o alineándose hacia la izquierda, por lo que necesitamos centrar el texto. Entonces lo segundo es que si amplío el tamaño de la pantalla, puede ver que el salto de línea está sucediendo bastante apretado, y cómo podemos conseguir eso es poniendo un ancho máximo para que no se extienda más que aproximadamente ese ancho. primero es lo primero, voy a espaciar, poner aquí un estilo de caja de título, text-align center, y echemos un vistazo a lo ancho que es este texto. Si dibujo una herramienta de selección a su alrededor , son unas seis o nueve. De nuevo, me gusta redondear hacia abajo, así que voy a hacer un máximo de ancho de 609 píxeles. Ahora lo que eso va a hacer es alinear el texto y darle un ancho máximo, pero todavía va a aparecer a la izquierda. Ahora cómo podemos arreglar eso es ahora que tenemos un ancho fijo, podemos poner en orden margin-izquierda y margin-derecha, y ahora eso aparecerá en el medio. Recuerde, si tenemos un elemento de bloque de ancho fijo, podemos centrarlo dentro de su elemento padre mediante el uso de orden margin-izquierdo y margin-derecho. Ahora voy a volver a este H1 y lo que quiero es un poco de relleno en la parte superior. Por aquí puedes ver que hay mucho relleno entre la parte superior de la sección y el encabezado. Nos hemos deshecho del margen así que ahora no va a haber margen inherente. Pero eso es genial. Podemos marcar en nuestra propia altura de relleno, y parece que son unos 120 píxeles. Voy a entrar aquí, crear una parte superior de relleno de 120 píxeles. Afortunadamente, mi software de codificación cada vez que ahorro, mata esas líneas extra. Podría simplemente poner un comentario, sólo para que deje de hacer eso. Perdón por eso. Volvamos a nuestra página web. Ahora podemos ver que aquí hay este gran espacio. No va a quedar del todo bien hasta que tengamos este rumbo bastante bien. Lo que necesitamos hacer para eso es hacerla más grande y hacerla capitalizada. Si entro y selecciono ese texto, puedo ver que es de 40 píxeles en negrita, y obviamente está mayúscula. Vamos a entrar y hacer eso. Tamaño de fuente, 40 píxeles, font-weight, negrita, text-transform mayúsculas. Volvamos a nuestro proyecto, a ver qué pasa. Ahí vamos. Ese es más o menos el encabezamiento de sección hecho. El siguiente es la línea, y en este momento no aparece ninguna línea, por lo que necesitamos crear esa línea usando CSS. En primer lugar, tenemos que apuntarlo, así title-box, luego line, y voy a volver a usar el archivo Photoshop como referencia. Podemos echar un vistazo a las dimensiones de esta caja haciendo click en aquí. Podemos ver que el ancho de la misma es de 87 y la altura es de cuatro. Vamos a marcar esos en nuestro CSS. Ancho 87 píxeles, altura, cuatro píxeles. Ahora no va a aparecer todavía. El espacio se va a crear, como se puede ver, pero no va a aparecer hasta que le demos un color, igual que cualquier div en HTML. No va a mostrar ningún color a menos que le demos un color. Si miramos esta caja, podemos ver que el relleno es más o menos completamente negro pero lo que sí tiene es una opacidad. Yo soy capaz de decir eso mirando las capas y comprobando aquí la opacidad. Si eso fuera un 100 por ciento, sólo sería una línea negra sólida. Pero a ver cómo se desvanece un poco en el fondo. Eso se debe a que tiene una opacidad del 15 por ciento. El modo en que podemos marcar eso en, en CSS es mediante el uso de RGBA. RGBA es una forma de poner en un código de color. Para esta pequeña función, hay cuatro parámetros. El primero es el canal rojo, el segundo es el canal verde, el tercero es el canal azul, y el último, no sé qué significa “A”, pero ahí es donde podemos poner en el opacidad. El código RGB para negro es solo ceros por todas partes porque no hay rojo, verde o azul. Voy a hacer es cero; cero; cero, y luego para la opacidad, lo voy a poner como decimal, así que 0.15. Si guardo eso, recarga la página, puedes ver que tenemos una línea, pero claro que está a la izquierda aquí. Lo que vamos a hacer es otra vez, orden margin-izquierda y el orden margin-derecha, no importa en qué orden los hagas, y ahora está en el centro. Tenemos nuestro rumbo, llegamos a alinearnos y ahora tenemos que trabajar en este párrafo. Creo que sólo va a ser cuestión de cambiar el tamaño de la fuente. Si me meto aquí, puedo ver que el tamaño de la fuente es de 18 píxeles y el peso es simplemente regular, así que no necesitamos cambiar eso. entrar en el cuadro de título, apuntando a la etiqueta P dentro de él, voy a establecer el tamaño de fuente en 18 píxeles. Volviendo atrás, ahora vemos nuestro cuadro de título trabajando bastante de cerca a lo que tenemos en nuestro archivo de Photo shop. lo único que realmente puedo notar aquí que es diferente en la nuestra es que hay un poco menos relleno aquí, así que solo echa un vistazo a esos 20 píxeles. Voy a volver a la fila. Nuevamente, eso es por este rubro con su margen heredado, va a tener inherentemente algún margen inferior. Como se puede ver aquí, ese espacio naranja es el espacio entre el texto y la línea. Lo que voy a hacer es cambiar el margen inferior del encabezado a 20 píxeles. Ahora, se puede ver que no es exactamente perfecto porque aquí también hay algo de altura de línea, por lo que podemos cambiar la altura de la línea. De lo contrario, podemos simplemente marcar hacia abajo el margen inferior hasta que esté más cerca del diseño real. Creo que eso está bastante cerca. Dulce. Esa es la caja de título. Si amplío la Ventana, se ve bastante bien. Ahora tenemos que conseguir que estas columnas sucedan. Lo que voy a hacer es volver a mi HTML y echar un vistazo a lo que tenemos. Tenemos un div aquí llamado blurb row, y luego dentro de eso tenemos cuatro blurbs. Para que todos se sientan uno al lado del otro, lo que voy a hacer es darles un ancho más apretado y luego usar el atributo display inline-block. Pasando a nuestro archivo CSS, voy a crear una regla para el blurb, y lo que voy a hacer es que en realidad hay cuatro columnas aquí. Ahora, teóricamente, si tenemos un 100 por ciento de ancho con el que trabajar, podemos hacer que todas estas columnas sean 25 por ciento, y entonces eso sumará 100. Pero en realidad hay otras cosas como margen, relleno, y bordes que se suman a la anchura horizontal y la altura de los elementos. Para estar seguro, un buen número, que es un poco menos de 25 es 23.33 por ciento. Voy a arreglar el ancho de esto a 23.33 por ciento, y debido a que es un ancho relativo, significa que el ancho de estos elementos va a responder si el contenedor se pone más pequeño que 1,140 píxeles, que es lo que queremos y lo verás trabajando en tan solo un segundo. Por supuesto que tenemos el ancho, pero no se va a mostrar en línea a menos que establezcamos el estilo de visualización en inline o inline-block así que lo he hecho. Ahora, voy a volver a cambiar a mi navegador, toque refrescar y voila. Ahora puedes ver que todos están sentados muy bien el uno al lado del otro. Sólo para mostrarte, si no lo hiciéramos 25 por ciento, habría un poco de salto de línea porque siempre hay margen de relleno y bordes que se interponen en el camino. El 23.3 por ciento le da un poco de espacio para respirar para que todos puedan sentarse bien juntos. El otro es centrar dentro de estas columnas. Como me has visto hacer una y otra vez, le voy a dar un estilo de text-align center, y ahí puedes ver que hemos llegado bastante lejos. Si volvemos a nuestro diseño, podemos ver que esto en realidad está un poco demasiado cerca del párrafo anterior. De nuevo, sólo voy a comprobar la altura de esto, de esos 80 píxeles. Voy a darle a la fila de blurb un margen superior de 80 píxeles. Ahí vamos. Volviendo al diseño, ahora creo que es hora de trabajar en los blurbs, y lo que podemos hacer por los blurbs es actualizar el tamaño de estos encabezamientos y párrafos y también capitalizar estos encabezamientos. Lo que voy a hacer por eso, apuntar al rumbo dentro del blurb, que creo que es un H3. Sólo comprobemos eso dos veces. Sí, así que H3s dentro de los divs con una clase de blurbs, vamos a cambiar el tamaño de fuente de esos, así que vamos a determinar cuáles son esos. Veinticuatro píxeles y también negrita, por lo que tendremos que cambiar el peso de la fuente también. Tamaño de fuente, 24 píxeles y peso de fuente negrita, y por supuesto, el texto transforma mayúscula. Guarda eso, y ahora tenemos un texto más grande. Aquí hay un poco del tema de alineación, pero llegaremos a eso en tan solo un segundo. Lo último que quiero hacer antes de arreglar eso es solo para asegurarnos de que estos párrafos sean del tamaño de fuente adecuado. Lo que voy a hacer para eso es ir a Photoshop, seleccionar la fuente, decir que 16 píxeles, y simplemente marcar eso en blurb. Nuevamente, empezando en blurb y luego apuntando a todos los Ps dentro del blurb, voy a arreglar el tamaño de fuente a 16 píxeles. Si actualizamos la página, podemos ver que no ha hecho ningún cambio y por lo que el texto debe de haber sido todo listo 16 píxeles. Ahora lo último que creo que tenemos que hacer en este apartado es trabajar en este margen aquí. Voy a volver a echar un vistazo con mi herramienta de selección, ver que son unos 60 píxeles, y entonces lo que voy a hacer es volver a este estilo para el Título 3 y darle un margen superior de 60 píxeles. Si guardo eso y refresco la página, ahora se puede ver que todo empieza a moverse hacia abajo. Pero hay un tema final y es que este rubro para branding está fuera de línea con el resto de los rubros. Ahora, ¿por qué es eso? Bueno, si se toma un segundo para mirar los párrafos aquí, cada uno de ellos está en dos líneas, excepto ésta. Si en realidad fuéramos capaces de entrar y cambiar la cantidad de texto en este párrafo, vamos a deshacernos de todo más allá de esa coma de ahí, verás que todo está en alineación de nuevo porque el texto sólo va sobre dos líneas. Podríamos eliminar algún texto y se alinearían muy bien, pero esa no es realmente una buena solución, sobre todo si queremos poner más texto para diferentes blurbs, y también puede romperse cuando bajamos el tamaño de pantalla como lo está haciendo ahora . La mejor manera y la forma más fácil de conseguir que eso funcione es mediante el uso de mesa de visualización. Todo lo que tenemos que hacer es volver aquí y para blurb en lugar de inline-block, inline-table, guarde eso, refrescar la página, e incluso con esa segunda o tercera línea de texto, todo está bien alineado como si fuera una tabla con tres filas. Ese es un buen pequeño hackeo disponible para nosotros en esta versión de CSS. Si se trataba de una tabla con tres filas, se puede ver que cada fila tiene aproximadamente la misma altura ahora, y por supuesto tenemos nuestras columnas que configuramos antes. Eso es un pequeño hackeo para que eso funcione. En ocasiones se necesita algo de experimentar con el estilo de visualización para solucionar pequeños problemas como ese. En la siguiente sección realmente vamos a ver otra llamada display flex. Estos diferentes estilos de visualización pueden ayudarte con estos problemas. Sí, eso resume más o menos la Sección 2. Si miro aquí atrás, se ve bastante bien aparte de una cosa más y es que, como se puede ver aquí, lo mismo de lo que estábamos hablando aquí arriba. Parece haber un ancho máximo en estos párrafos, o si simplemente dibujo mi cursor alrededor, puedo ver que tiene unos 200 píxeles de ancho. Vamos a entrar, darle un ancho máximo de 200 píxeles y como puedes ver, se está moviendo hacia la izquierda todavía. Tenemos que entrar y hacer esa cosa que siempre hemos estado haciendo para que las cosas se centren, y eso es el orden margin-izquierda, el orden margin-derecha. Guarda eso, y como puedes ver ahora, está creando ese espacio entre ese ancho máximo, eso está provocando que estas palabras se rompan en una nueva línea. Comprobación final. Creo que se ve bastante cerca del diseño. Nuevamente, pequeña atención al detalle. Podrías entrar y asegurarte de que, si las cosas son de cinco píxeles de diferencia, podrías entrar y hacerlas perfectas. Pero creo que para nuestros propósitos y para el propósito de esta clase, estamos bastante cerca de donde debe estar, y si arrastro mi ventana, puede ver el efecto de esos tamaños de ancho relativo. Recuerda que utilizamos 23.33 por ciento en lugar de un ancho de píxel y lo que eso permite es cuando estamos en estos tamaños de pantalla más pequeños, podemos empezar a verlos adaptarse debido al tamaño de su contenedor. Como puedes ver, ya estamos construyendo algunas prácticas que asegurarán la mejor oportunidad de que nuestra página web sea lo más receptiva posible. Nuevamente, una vez que bajamos a un tamaño como este, empieza a ponerse un poco desordenado, así que tendremos que arreglarlo. Pero de lo contrario, es bastante sensible a cierto punto y ese es el beneficio de pensar hacia delante y usar estos estilos relativos. Esa es la Sección 2. En el siguiente video, vamos a hacer la Sección 3 y también el pie de página. Espero con ansias verte en esa. 10. CSS - Sección 3: Muy bien, bienvenidos de nuevo chicos. Ahora estamos en el homestretch para conseguir que esta página web luzca bien en al menos escritorio. Ya hemos hecho la sección 1 y la sección 2. Ahora se trata de conseguir que esto se vea bien. Como puedes ver, nuestros estilos que creamos para caja de título ya han llegado por lo que no tenemos que volver a hacer esa sección. Eso es lo genial de las clases y crear estilos para ellas, se llega a reutilizar esos estilos. Lo que va a llevar la mayor cantidad de trabajo en esta lección aquí va a ser esta forma aquí. Primero lo primero, como lo hemos hecho en todas las lecciones anteriores, vamos a establecer los estilos generales para esta sección y vamos a seguir el mismo formato que los anteriores. Yo sólo voy a copiar la totalidad de la sección 2s porque vamos a usar los mismos atributos. Cambie el nombre de eso a la sección 3, y lo que vamos a cambiar es el color de fondo y el min-height. Como siempre, voy a entrar en mi archivo de Photoshop para averiguar qué debería ser eso. Como siempre, puedo hacer clic en “Rellenar” aquí y obtener el código hexadecimal exacto del color. Puedo ver la altura aquí sus 820 píxeles de altura. Marquemos esos de inmediato. Voy a cambiar ese código hexadecimal a eso y cambiar el min-height a 820 pixels. Volviendo a nuestro proyecto, ahora puedes ver que la altura ha tomado afectando el color del texto es diferente y tenemos ese precioso fondo azul. Con los estilos de sección y también los estilos de caja de título ya hechos por nosotros, lo único que nos queda por trabajar para esta sección es la forma en sí y eso nos va a mantener bastante ocupados porque como puedes ver, esta forma no se ve algo como lo que tenemos aquí. Primero lo primero, echemos un vistazo a nuestro HTML. Como puedes ver aquí, tenemos un contenedor div con el id del formulario de contacto. Tenemos la forma real dentro, y luego tenemos tres filas de formulario, cada una con entradas diferentes. Como pueden ver aquí, tenemos estos dos existentes en una fila, esto existente en una fila, y el botón de envío existente en una fila también. Ahora hay algunos pequeños temas aquí como no puedes ver el texto en el botón porque es de color blanco y el botón es de color blanco. Llegaremos a eso en tan solo un segundo. Pero para empezar con el elemento padre, para empezar, vamos a crear un estilo para formulario de contacto. En mi CSS, estoy creando una regla de estilo para cualquier cosa con un id de formulario de contacto, que va a ser este div aquí mismo. Lo que quiero hacer es igual que lo hemos hecho aquí para el cuadro de título es darle un ancho máximo y centrarlo. Voy a entrar en mi archivo de Photoshop y averiguar qué tan grande es este formulario. Redondeando al píxel más cercano, es alrededor de 871, 870, lo siento. Voy a entrar y darle a esto un ancho máximo de 870 píxeles. Ahora que tiene un ancho fijo, podemos usar el orden de margen izquierdo, y el orden de margen derecho para centrarlo dentro de su elemento padre. Ahora mismo todo esto está alineado a la izquierda, pero si vamos a inspeccionarlo en el front-end, puede ver que está existente en un contenedor ahora que está centrado y restringido a 870 píxeles. Ahora que tenemos esa base, es hora de darle estilo a los elementos reales dentro y podemos hacerlo usando la etiqueta Level Selector. Todas las entradas y áreas de texto, quiero que el color del texto ingresado sea blanco. También quiero que los antecedentes sean los antecedentes que tenemos aquí. Si miro estas cajas y en Photoshop, entra, agarra el código hexadecimal. Puedo cambiar a mi código. Software, cambie el color de fondo a eso. Volviendo a nuestro diseño, puedes ver que afecta a cada entrada y a cada área de texto. Ahora el problema con eso es que nuestro botón Enviar también es un elemento de entrada por lo que va a afectar también este botón, que podría no haber sido pensado y definitivamente para esto, no queremos los mismos estilos que tenemos en nuestra entrada cajas para afectar nuestro botón de entrada. Lo que vamos a hacer es que vamos a tener que poner algunos selectores de atributos aquí para asegurarnos de que sólo seleccione estos dos y no esta entrada. Esto va a parecer un poco incómodo si no estás acostumbrado a CSS antes, pero podemos apuntar a un atributo y valor usando estos corchetes en CSS. Vamos a apuntar las entradas con un tipo de texto. Entonces tenemos que crear otro porque este es en realidad tipo de correo electrónico así que copiar eso y cambiar el tipo a correo electrónico. Si guardo eso, verás que ya no está afectando el botón Enviar. Apenas estos insumos y ese área de texto. La otra cosa que noté es que tiene esta fea frontera. Voy a decir frontera ninguno para que eso se deshaga de eso. Estoy notando que el marcador de posición, a pesar de entrar y poder teclear con el color blanco. Como puedes ver aquí abajo, hemos cambiado el color blanco en realidad no cambia el marcador de posición. Sólo cambia el texto que escribes en estos cuadros. Para ello, vamos a tener que usar un poco de un tipo de selector especial, y ese es un pseudo selector. Cómo hacemos eso es escribiendo y voy a seleccionar todos estos colon, colon, marcador de posición. Esa es la forma en que podemos apuntar al placeholder de ciertos elementos dentro de CSS. Sé que podría parecer un poco funky, pero así es como es. Voy a colorearlo a blanco y luego wallah, puedes ver aquí que el marcador de posición no va a pasar y en realidad ya hay un poquito de texto ahí dentro. Eso se debe a que cualquier espacio que pongas aquí, cualquier espacio en blanco que se vaya a encontrar. Cerremos ese conjunto de etiquetas y ahí tienes. Textarea, es una extraña porque es una entrada, pero simplemente no actúa de la misma manera que una entrada. Volviendo al CSS, hay algunos otros cambios que necesitamos hacer aquí. Queremos asegurarnos de que el tamaño de fuente sea el mismo que nuestro diseño. Nosotros queremos sumar algún margen también. Entonces por supuesto, necesitamos hacerlos tan grandes como necesiten ser, por lo que son bastante pequeños en este momento, queremos que éste sea 50 por ciento de ancho, éste sea alrededor del 50 por ciento de ancho, y éste para extender el conjunto ancho de nuestro contenedor. Entrando en nuestra hoja de estilo aquí, realidad entrando primero en nuestro diseño. Podemos entrar, utilizar la herramienta de texto para seleccionar el texto aquí y ver que es de 18 píxeles. Entrando, tamaño de fuente, 18 píxeles. Ahora el tamaño de la fuente es más grande, pero los campos simplemente están demasiado juntos. Pongámoslo en un poco de margen. Voy a hacer un cálculo aproximado aquí del margen. El espaciado entre dice alrededor de 28. Aquí, son alrededor de 44, solo voy a ir con 26 por ahora. Margen, y esto podría cambiar en el futuro pero vamos a hacer sólo 26 por el margen. Como pueden ver, eso es un poco demasiado, así que voy a volver a marcar a tal vez 16. Vamos a necesitar cambiar eso, pero eso está bien por ahora. Lo que quiero hacer es asegurarme de que estos se extiendan por todo el ancho del contenedor, así que ahora voy a trabajar en estos, fila por fila. Tenemos que arreglar los, no sólo el ancho sino también la altura de ellos. Para los dos primeros, entrada de texto y correo electrónico de entrada. Voy a crear un poco de espacio aquí. Vamos a hacer que el ancho sea 50 por ciento y la altura. ¿ Qué debemos hacer para la altura? Si volvemos a entrar en la caja, sólo hay que despejar esa selección. Entra a la caja, podemos ver la altura es de 56 píxeles. Marquemos esa altura aquí. Ahora cuando refresquemos la página, como pueden ver, como mencioné antes con las columnas aquí arriba siendo 25 por ciento cada una. Si los hacemos 50 por ciento cada uno, con el estilo de visualización de inline, se va a romper a una nueva línea y tendremos darle un poco menos de un ancho para que pueda pegarse. Ahí lo tienes, con 45 por ciento. Vamos a necesitar cambiar eso en un rato y te voy a mostrar cómo vamos a hacer eso en tan solo un segundo. Pero por ahora necesitamos que este se extienda 100 por ciento y luego también vamos a averiguar la altura de ese también. Entonces entrando aquí, haciendo clic en la “Herramienta Rectángulo” para que podamos ver la altura. Podemos ver que son 200 pixeles. Voy a apuntar mi área de texto en mi CSS, fijar la altura a 200 píxeles, y establecer el ancho a un 100 por ciento. Ahora se puede ver que la línea superior y la segunda línea, aproximadamente va el ancho completo del contenedor. Ahora, como te mostré antes, necesitamos que esto sea 50-50. Pero por el margen, por todo lo demás, no se está alineando, así que conseguimos este borde que no se está alineando perfectamente con este borde. Lo que vamos a hacer para arreglar eso, es volver a poner esto a 50. Pero entonces tenemos ese mismo problema otra vez. ¿ Cómo superamos esto? Bueno, ahí es cuando podemos usar nuestro flex de display amigo. Si te preguntas antes por qué creé estas filas para empezar, class="form-row">, fue para este propósito exacto. Entonces si entro aquí y creo una regla de estilo para form-row, puedo mostrarte la magia del display flex. Voy a configurar esto para mostrar flex. Voy a refrescar la página y voila. Ahora se puede ver que los bordes se alinean perfectamente y se está flexionando, supongo que se podría decir, para conseguir ese resultado. Aunque cambie el tamaño de la página, todavía se mantiene perfectamente de borde a borde alineado. Esa es la belleza del flex. Nos estamos acercando bastante a donde queremos que esté. Estoy notando dos cosas en este momento que es diferente entre el archivo de Photoshop y nuestro documento, y eso es border-radius y también un relleno aquí a la izquierda. Voy a ir a arreglar eso ahora. Para todas las entradas, voy a entrar y cambiar el radio de frontera a cinco píxeles, como hemos hecho en todas partes y voy a tener un relleno de unos 16. Si refresco la página, puedes ver empieza a lucir un poco más agradable. Ahora también hay este margen aquí para el área de texto, y eso es de unos 24 píxeles. Por lo que en el área de texto específicamente, le voy a dar una parte superior de relleno de 24 píxeles. Ahí se puede ver que tenemos un bonito acolchado cómodo. Eso en realidad está bastante cerca de lo que tenemos aquí. Podría haber un poco de diferencia con el margen, pero en general estoy bastante contento con eso. Ya estoy listo para pasar a nuestro botón aquí. Porque ya hemos establecido un estilo para botón grande aquí arriba, podemos reciclar esos estilos, y así va a ser cuestión principalmente de cambiar el color de fondo. Por lo que el color de fondo del botón, si entramos y seleccionamos la casilla aquí, encuentra su atributo de relleno y copia. Podemos cambiar el color de fondo de nuestro tipo de entrada enviar. Por lo que vas a entrar aquí y dirigirlo de la misma manera que nos dirigimos a nuestro texto y correo electrónico. Basta con decir [type="submit "], y luego colorea de fondo el # código de 30bae7. Está bien. Como puedes ver, se está viniendo mucho más bonito ahora que ponemos ese color de fondo. Pero lo que tenemos que hacer también, es deshacernos de esa fea frontera. Está bien. Al igual que aquí, necesitamos asegurarnos de que el texto sea más grande y mayúscula, creo. También necesitamos centrar este botón y vamos a trabajar en un poquito del margen también. Si vuelvo a mi diseño, puedo comprobar cuál es el tamaño de fuente de mi botón. Son 18 pixeles. Marquemos eso en, tamaño de fuente 18 píxeles. Y como mencioné antes, está mayúscula. Entonces vamos a tener que usar la transformación de texto mayúscula, y entonces por supuesto, queremos que esté centrado. Margin-izquierda: auto, margin-derecha: auto. Guarde eso. Ven al otro lado y ahí vas. Está más en el centro. Sólo necesitamos arreglar una vez más el radio fronteriza. Echemos un vistazo a eso comparado con nuestro diseño. Bastante cerca. Lo único, como mencioné antes, es el margen, así que eso es de unos 60 píxeles y podríamos darle un margin-top aquí de 60 píxeles. Pero si inspeccionamos y veremos que estamos haciendo más grande la fila al tener un margen aquí. Lo que me gusta hacer en esta instancia, configurar una parte superior de margen en el envío de entrada. Voy a poner un estilo en línea en la form-fila antes de ella, y darle un margin-fondo de 60. Eso sólo asegura que las alturas de estas form-filas se mantengan iguales, y el margen se establece entre estas filas. Lo cual creo que es más apropiado, pero al mismo tiempo, realmente no importa. Podrías haber puesto el margen en el botón también. Está bien. Esa es nuestra forma hecha. Pasemos al pie de página rápidamente y terminemos esta sección y luego pasemos a las consultas de medios. Para esto, necesitamos hacer algo similar a lo que hicimos aquí arriba. Es sólo un montón de enlaces que actualmente están dispuestos como lista, por lo que necesitamos hacer algo similar a lo que hicimos por eso. En realidad voy a copiar y pegar lo que tenemos aquí. Desplázate hacia abajo, pega eso en. En lugar de nav ul li, lo que estamos apuntando son los enlaces de pie de página, y así puedes comprobarlo aquí abajo. Tenemos enlaces de pie de página con un ul y luego lis. No los queremos en mayúscula, así que le daré un texto transformado en mayúsculas, pero veamos qué pasa cuando hacemos eso. Genial. Ahora también necesitamos deshacernos de la decoración del texto y hacerlos blancos. Entonces voy a copiar y pegar eso. Nuevamente, cambiando los enlaces de nav a pie de página. Ahora no los puedes ver desafortunadamente, porque necesitamos cambiar realmente el color de fondo del pie de página. Entonces el pie de página es solo una etiqueta, por lo que podemos entrar a nuestro archivo de Photoshop como lo hemos hecho a lo largo de esta sección. Haga clic en el cuadro, descubra el color de fondo de eso, y luego marque en nuestro CSS. Entonces ahí lo tienes. Tenemos el color de fondo apropiado, pero aún no estamos del todo ahí, porque tenemos este margen por encima y por debajo de la lista. Entonces si voy a inspeccionar eso, puedo encontrar que la lista real desordenada, como pueden ver aquí por estas líneas anaranjadas, está creando ese margen. Entonces voy a entrar y apuntarme a esas listas desordenadas en particular como esta, y establecer margen a cero. Ahora si vuelvo, refresca la página, ahora, vuelve a la normalidad. Entonces dos cosas que estoy notando ahora de esto a esto es, número 1, necesitamos hacer más grande la fuente. Así que inspecciona eso en tan solo un segundo. También que tenemos esto colgando a un costado aquí, donde nos gustaría que estuviera más centrado. Entonces vamos a darle al contenedor un ancho máximo y centrarlo igual que lo hemos hecho con otros elementos aquí arriba. Entonces si vuelvo a mi archivo de Photoshop aquí, puedo ir a inspeccionar este texto y ver que son 24 pixeles. Entonces hagámoslo ahora. El tamaño de la fuente, 24 píxeles. Ahora con el contenedor, si miro aquí, se trata de tomar una herramienta de selección y ponerla de un lado a otro, tiene alrededor de 945 ancho, así que voy a crear un estilo encendido para los enlaces. Ancho máximo de esa cantidad, que fue de 945, y como de costumbre orden margin-izquierda, orden margin-derecha, guarde eso. Vuelve a nuestro documento aquí. Ahora se puede ver que se concentra. La única otra cosa realmente obvia aquí es que Twitter es de un color diferente en este diseño, y eso es porque por lo que puedo decir, es un enlace activo, como mencioné antes, no sé cómo podría ser cuando en realidad no estamos en el sitio web de Twitter en este momento. Pero sin importar, hemos decidido darle estilo como un enlace activo. Entonces he copiado ese código hexadecimal, y lo que voy a hacer, es target el mismo que he apuntado justo arriba, pero esta vez poner punto activo en el li, y luego color hash 30bae7, y ahí tienes. Ahora para que sea perfecto, aquí hay algunos problemas de relleno y margen, así que como puedes ver, hay un poco de margen entre aquí y allá, unos 45 píxeles, y en la parte inferior aproximadamente lo mismo. Entonces también entre ellos, hay alrededor de 50 píxeles entre ellos. Entonces para obtener un resultado similar a ese, lo que voy a hacer es poner algo de relleno en la propia lista. Parte superior acolchada. ¿ Qué fue otra vez? Alrededor de 50 relleno top 50 pixels, relleno inferior, 50 pixels, y luego entre los propios elementos de la lista, ya tenemos algo de relleno, pero tal vez podamos hacerlo un poco más grande, así que voy para cambiar estos de 16 a 20. Volviendo a nuestro diseño, ahora puedes ver que hay mucho más relleno, y hay algo más de margen entre cada uno de estos artículos. En realidad es un poco demasiado, así que lo que podría hacer es marcar eso a la mitad. Por lo que relleno superior, relleno inferior 25. Eso empieza a parecerse mucho más a lo que tenemos aquí abajo. De nuevo, podría haber algunas discrepancias, pero para los fines de esta lección, creo que la tenemos bastante cerca de lo que necesita ser, y si cambias el tamaño, puedes ver que eso está yendo bastante bien, responsivamente también. Pero como mencioné en las lecciones anteriores, se puede empezar a ver el salto de página en diferentes puntos en todas las secciones, si lo traemos un poco. Entonces con este, el texto se vuelve un poco grande y se pega. El menú se rompe en una nueva línea. Ese botón se cae y va más allá de la altura de sección. Aquí abajo, estas columnas se ponen súper apretadas y luego una ruptura forzada en una nueva línea, y por supuesto esto, forma aquí, y el pie de página, vamos a necesitar hacer algunos cambios en eso. El modo en que podemos hacerlo es mediante el uso de lo que se llama consultas de medios. Entonces en este momento, se puede ver una página web o una página web que hemos desarrollado para escritorio que funciona bastante bien y responde a cierto punto, pero lo que vamos a tener que hacer, es agregar en esas consultas de medios para asegurarse de que se vea perfecto en cada tamaño de pantalla. Entonces en el siguiente video, les voy a mostrar cómo hacer eso, pero estoy muy emocionado de que ahora hayamos transformado lo que era. Voy a hacer esto otra vez sólo para mostrar la diferencia. De qué fue esto hasta ahora esto solo poniendo algunos estilos CSS. Ese es el poder del CSS ahí mismo. Así que date una palmadita en la espalda por llegar tan lejos. Sólo nos queda un poco por hacer en cuanto a consultas de medios, entonces te voy a mostrar cómo hacer lo del menú móvil, que es bastante común en los sitios web móviles. Habla un poco de bootstrap también, y luego terminaremos la clase. Entonces no hace mucho tiempo, quédense ahí chicos, y los veré en el siguiente video. 11. CSS - consultas de medios: Bienvenidos de vuelta chicos. En esta lección, vamos a hablar de consultas de medios, y vamos a utilizar consultas de medios para hacer que nuestra página web sea plenamente receptiva. Recuerda, cuando redimensiono la página en algunas lecciones anteriores, empezó a volverse un poco incómoda, empieza un descanso un poco, y podemos arreglar todo eso con consultas de medios. ¿ Cuáles son las consultas de medios? Bueno, en realidad hay algunas cosas que puedes hacer con las consultas de medios. Tengo la definición aquí de w3schools.com. Puedes usar consultas de medios para revisar muchas cosas como ancho y alto, orientación, resolución. Pero en el contexto del desarrollo web responsive, podemos usar consultas de medios para cambiar las reglas de estilo de nuestros elementos en función de una gama de tamaños de pantalla. Para el rango de tamaños de pantalla generalmente estamos hablando de anchos de pantalla. Vamos a sumergirnos y mostrarles un ejemplo de inmediato. Lo primero que conocí es romper, y me gusta poner mis consultas de medios en la parte superior de mis archivos CSS para que se carguen primero. Lo primero que estoy notando es, lo que te mostré antes cuando redimensiono la ventana y llego por debajo de 1140 píxeles, empiezo a obtener márgenes ajustados a cualquiera de los lados, y eso no quiero. Aquí abajo, realmente no aparece, pero aquí arriba en el encabezado, sí. Lo que quiero hacer es en lugar de tener auto margin-left, margin-right auto porque ya no está tomando efecto porque es más pequeño que el contenedor. En realidad quiero arreglar un margen. Lo que acabo de hacer ahí fue inspeccionado un elemento, y eso trajo arriba las herramientas de desarrollador. Voy a mantener abiertas las herramientas de desarrollo para el resto de esta lección. El motivo por el que es como estoy redimensionando, se puede ver en la esquina aquí sale aunque muy brevemente con un ancho de pantalla, así que entonces realmente puedo ver en qué punto se están rompiendo los anchos de pantalla. Para este contenedor en particular, sé que va a ser cuando tenga menos de 140 píxeles. No estoy seguro de qué navegador estás usando, pero si estás usando Chrome, puedes buscar las herramientas de desarrollador. Creo que están en el menú Ver, Desarrollador, Herramientas de Desarrollador. Ya las tengo abiertas, así que acaban de cerrar. Otra vista que puedes usar para volver a ver esas dimensiones, es hacer clic aquí en la barra de herramientas del dispositivo de alternancia, y luego estás en el nodo Responsive. Puedes cambiar el tamaño de la ventana, y ese ancho permanecerá ahí arriba. Una cosa que debes tener en cuenta sobre la vista responsive en las herramientas de desarrollo de Google Chrome es que simula un entorno móvil. Si quieres usarlo avanzando, antes de meternos en los tamaños de pantalla más pequeños como aquí abajo donde es más como un teléfono o tableta, vamos a tener que poner una etiqueta extra en nuestro HTML, y vamos a tener para llegar a esto de todos modos, así que bien podríamos hacerlo ahora. Tenemos que poner en la metaetiqueta para viewport. No espero que sepas lo que es eso, pero si solo escribimos, metaetiqueta para viewport o viewport meta tag en Google, Va a venir para nosotros. Ya he estado antes en este enlace, que es un recurso bastante bueno de Mozilla. Aquí, si nos desplazamos hacia abajo, podemos ver la etiqueta de ventana gráfica que necesitamos poner en ese proyecto. Antes de ponerlo, ¿qué es? Bueno, aquí tienes un poco de fondo si quieres leer más al respecto. Básicamente, obliga a la ventana gráfica a ser la misma que el tamaño de la pantalla. Si te preguntas por qué eso no sería por defecto, es una forma de hacer sitios optimizados no móviles se vean en general mejor en tamaños de pantalla estrechos. En realidad son cuatro páginas que no están optimizadas para móviles. Por supuesto, en este día y era donde desarrollar todos nuestros sitios web es móvil responsive, por lo que es casi un dado que quisiéramos poner esta etiqueta en nuestro HTML. Un poco de un te metió ahí. Es solo algo que necesitamos recordar al desarrollar sitios web con capacidad de respuesta móvil. Asegúrese de que la ventana gráfica sea igual al ancho del dispositivo. Eso es todo lo que necesitamos para poner en nuestro HTML. Volvamos a nuestros estilos, y en realidad construimos algunas consultas de medios. A mí me gusta poner mis consultas de medios en la parte superior para que se carguen rápido. Cómo se escribe uno es mediante el uso de un medio en símbolo, pantalla, y luego esto es cuando se pone en su ancho máximo o min-width. También puedes poner en alturas también, pero para los efectos de esta lección, solo necesitamos hacer anchos. Como mencioné antes, el margen de este contenedor comienza a romperse una vez donde menor a 1140 píxeles. Voy a establecer esto en max-width, 1140 pixels. Después abre la consulta de medios usando de nuevo estos corchetes rizados. Entonces dentro de los corchetes rizados puedes hacer una regla CSS como de costumbre. Puedo crear una regla para contenedor en lugar de margin-left auto, margin-right auto, voy a hacer margin-left, unos 15 pixels, margin-right 15 pixels. Si guardo eso, recarga la página, puedes ver que no ha pasado nada. Déjame revisar esto. Si entro al contenedor y lo inspecciono, verás que los estilos están llegando, pero están tachados. Eso significa que están siendo anulados por estos de aquí. Si desmarcho estos, verás que ahora se aplican estos. Por supuesto, no podemos desmarcarlas para todos los usos del sitio web. Vamos a tener que encontrar una manera de arreglarlo para todos los usuarios. Un hackeo fácil que podemos usar es el signo de exclamación, importante. Si pones eso justo después del valor para el atributo, guarda eso, refresca la página, entonces anulará lo que tenemos aquí. Ahora, hay toda una jerarquía de especificidad en CSS, que repasé en mi curso de CSS y HTML. Si quieres conocer más sobre la jerarquía, puedes ir a revisar ese curso, como ya he mencionado antes. Básicamente, sólo necesitamos poner en un importante Con el fin de pisar por encima de esta regla en la jerarquía. Ahora, hay otra forma en que podemos hacer esto, y es poniendo esta regla en otra consulta de medios que no se aplica en este tamaño de pantalla, porque esto se aplicará en cada tamaño de pantalla porque no está dentro de una consulta de medios. Podría simplemente hacer eso en cambio para esta instancia en particular, al menos para fines de demostración. Lo que puedo hacer es poner una consulta de medios bastante similar por encima de esta, pero en lugar de max-width, pongo min-width, y marcaré en el mismo valor, pero uno extra. Ahora, voy a copiar estos estilos más. El ancho máximo puede permanecer igual en ambos tamaños de pantalla. Pero voy a quitar el auto margin-izquierdo y margin-derecho, y sólo tengo eso cuando el tamaño de la pantalla es mayor que 1141 píxeles. Si se pone más bajo que eso, entonces estará en este rango, y el margin-izquierdo y el margino-derecho serán de 15 píxeles cada uno. Si guardo eso, refresca la página por aquí, puedes ver el mismo efecto. Arrastre esta ventana responsive en un poco más y vea qué cambios podríamos necesitar hacer en tamaños de pantalla más pequeños. Algo que he notado es que el pie de página empieza a romperse en una nueva línea alrededor, vamos a marcarlo y ver, al 932, ahí es cuando esto comienza a romperse en una nueva línea. Ahora, necesitamos tomar una decisión de diseño aquí. ¿ Qué vamos a hacer en realidad cuando el tamaño de pantalla es demasiado pequeño que no puede tener todos estos con el mismo tamaño de fuente y relleno. Bueno, lo que creo que es más apropiado es tener el salto de línea, pero tener todo el texto centrado. Ves aquí cómo GitHub flota a la izquierda. Queremos que GitHub flote en el medio, y queremos que las líneas sean lo más igualadas posible, en cuanto a cuántos enlaces tienen en cada línea. Nuevamente, este es solo mi pensamiento. Puedes hacerlo como quieras, pero eso es lo que yo pensaría que es la mejor manera de hacerlo. Lo voy a simular aquí en mis herramientas de desarrollador. Lo que puedo hacer es bajar el ancho máximo de los footer-links hasta que empecemos a ver más de ellos caídos en la segunda línea. Actualmente, estamos en 900, por lo que va a tener que ser más bajo que eso. Marquemos en 850 y veamos qué pasa. Esperemos que ustedes estén cómodos con el uso de las herramientas de Desarrollador. estoy usando extensamente a lo largo de este curso, obviamente, porque son una gran herramienta y se puede experimentar en tiempo real con diferentes estilos. Si no te sientes cómodo con hacerlo de esta manera, siempre puedes ir directamente a tu archivo CSS, guardar, recargar la página, guardar, recargar la página, pero esto es un poco más rápido. Tenemos un segundo para bajar a una nueva línea bajando ese ancho máximo. Ahora, en realidad tenemos un número desigual de enlaces, así que no vamos a tener exactamente lo mismo en cada fila, pero cuatro y tres está lo suficientemente cerca. Voy a subir hasta el punto en que se rompa. Eso es 676. Ahora tenemos que recordar a anchos. Olvidé los puntos de ruptura, así que solo voy a crear un marco de consulta de medios por ahora. Simplemente crearé un espacio en blanco para ponerlo. Pero sabemos que queremos enlaces completos para actualizar a un ancho máximo de ese valor. ¿ Cuándo queremos que eso suceda? Si recargo la página, podemos volver a identificar ese punto donde se rompe a una nueva línea. Usando la vista responsive, estoy marcando hacia abajo los números y parece que es 932. Vamos a ponerlo aquí 932 pixeles. Actualizar la página. Aquí podemos ver que nuestro estilo se está sobrescribiendo de nuevo. Vamos a usar ese hackeo de importante, y si me refresco de nuevo, se puede ver que una vez bajemos de 933 a cualquier menor, se va a romper en dos líneas. Por supuesto, quiero todo esto centrado. Una cosa que puedo hacer al respecto es poner en un estilo de texto alinear centro. De nuevo, esto es solo en mis Herramientas de Desarrollador para comprobar si está funcionando. Sí, se ve bien. Vamos a entrar aquí, y el texto alinear centro. Vuelva a cargar la página para ver que esos cambios se han hecho permanentes. Sí, ahora lo tenemos roto en una nueva línea. Antes de desplazarnos hacia arriba y trabajar en los tamaños de pantalla más pequeños, en realidad estoy notando un poco de un problema que podría haberse perdido. Es decir, aquí hay más espacio a la izquierda que a la derecha. Esto no está exactamente sentado exactamente en medio, y esto va a ser más pronunciado si bajamos el ancho de la pantalla. Como puedes ver aquí, definitivamente está a un lado. Si vuelvo a 908 y le echo un vistazo al inspector para los enlaces se ve bien en cuanto a las casillas que aparecen en pantalla. Pero si entro en UL, puedo ver que el relleno, que está representado por el cuadro verde, está en la parte superior, inferior, e izquierda. Establecemos explícitamente el relleno superior e inferior, pero por alguna razón hay un relleno izquierdo. Esto debe ser algo que viene estándar con listas desordenadas. Pero es algo de lo que podemos deshacernos poniendo una regla, relleno izquierda 0. Ahí puedes ver que hemos resuelto el tema. Por supuesto, para que eso sea permanente, tenemos que ponerlo en nuestro archivo CSS. Voy a crear un estilo para los enlaces de pie de página UL y cambiar el relleno de la izquierda a 0. Ahora cuando actualicemos la página, ese cambio será permanente. Ahora que tenemos ese espacio extra que fue ocupado por el relleno, en realidad podemos cambiar este ancho máximo si queremos. Puedo marcarlo aún más para que más de los enlaces se rompan en la nueva línea. Eso es 636, parece estar donde está. Yo voy a actualizar eso aquí. 636. Actualizar la página. Ahora puedes ver nuestros enlaces de pie de página y nuestros enlaces de pie de página en línea muy bien en el centro de la página. Volviendo a 908, y echando un vistazo a la página mientras bajamos el ancho de la pantalla, echemos un vistazo a qué problemas surgen. Esto se está poniendo un poco apretado, pero aún no me preocupa demasiado. Bajando a alrededor de 800. Todavía estaba bien. Bajando aún más allá a alrededor de 750. Echemos un vistazo ahora. Todo se ve bien aparte de aquí mismo, podemos ver que esta marea se rompe en dos líneas, así que está estropeando un poco la alineación. Una forma en que podemos arreglarlo es reduciendo el tamaño de la fuente. Sólo voy a marcarlo en el inspector real. El 22 debería ser suficiente para resolver ese tema. Pero claro, tengo que averiguar cuándo empieza a suceder ese tema. Me voy a centrar en ese encabezado, arrastrar mi ventana hacia fuera, y parece que está ocurriendo a un ancho máximo de 797. Como siempre, voy a hacer una consulta de medios para esto, y justo como una pequeña nota al margen, chicos. No tienes que hacer tantas consultas de medios, podríamos combinar algunas de estas en realidad. Pero esta es justamente la forma en que me gusta hacerlo. Tradicionalmente, quizá quieras combinar estos o incluso tener ciertos puntos de ruptura, como en Bootstrap, que te mostraré más adelante. Pero para mí, solo me gusta pasar y solo arreglar las cosas una vez que llegue a ese ancho exacto de pantalla. Esa es solo la forma en que me gusta hacerlo, siéntete libre de hacerlo de otra manera. Esa nota lateral se acabó. Voy a crear un estilo para el encabezado del blurb para que sea 22 pixeles. Tamaño de fuente 22 píxeles, y porque estamos anulando un estilo anterior donde que ponerle importante, y ahí tienes. Al 797 fueron bastante buenos, vamos a arrastrar en nuestra ventana aún más abajo a alrededor de 735. Sí, 700 o 695. Ahora puedes ver que ese salto de línea empieza a suceder de nuevo con el rumbo. Pero dicho eso, en lugar de cambiar el tamaño de fuente del encabezado. De nuevo, creo que ya es hora de que esta fila de cuatro columnas se convierta en una situación de dos columnas, dos filas. El modo en que podemos hacerlo es duplicando el ancho de fila. Obviamente a medida que entramos en tamaños de pantalla más pequeños y más pequeños, va a haber un punto en el que la columna se rompe a una nueva línea. Podríamos también cortarlo temprano por la espalda y luego también podemos arreglar este tema de encabezamiento. Lo que voy a hacer es experimentar con 46.66 por ciento en mis Herramientas de Desarrollador solo para ver que funciona. Se puede ver que sí. Voy a elegir un ancho de pantalla cuando esto empiece a romperse de nuevo. Parece que sucede a los 732. Nuevamente, el uso de consultas de medios, ancho máximo 732, ancho de blurb 46.66 por ciento, e importante para asegurarse de que anula el estilo anterior. Actualizar la página. Ahora puedes ver que una vez que llegue a 732, se romperá en dos filas con dos columnas cada una. Otra cosa que estoy notando que realmente no vimos antes cuando todos están alineados uno al lado del otro, es que necesitamos un poco de margen en la parte inferior. Aquí se puede ver que eso está un poco demasiado cerca de la siguiente sección, y estos dos están un poco demasiado unidos. Voy a darle al blurb algún margen de fondo también. Margen inferior 30 pixels. Ahí se puede ver que hay un poco más de espacio para respirar entre los elementos. No tuve que ponerle importante a esa porque aún no hemos definido una regla para el fondo del margen. 704, vamos a marcar hacia abajo a alrededor, vamos con 50 incrementos, 650. Estoy bastante bien con eso. Bajemos a 600, la forma se ve bien. Ahora tenemos un tema. Podemos ver que nuestro botón se está extendiendo hacia la siguiente sección. Voy a marcar hacia arriba para ver cuándo sucede este cambio. Parece que sucede exactamente a las 619. Cómo voy a resolver esto, es que este texto se ve un poco grande de todos modos. Puedo reducir el tamaño de eso y eso traerá ese botón de nuevo a la sección. Ya deberías estar acostumbrado a escribir consultas de medios porque ya hemos escrito tantas de ellas. Simplemente marcando en un ancho máximo de 619, y para el tamaño de encabezado, está en 42 ahora, creo que 35 será suficiente. Vamos a marcarlo en las herramientas del inspector. Sí, eso se ve bastante bien. Voy a entrar en encabezamiento principal y CTA, tamaño de fuente H1 35 píxeles, y por supuesto, importante anular ese estilo anterior. Ahora si refrescamos la página, eso va a ser permanente. Como puedes ver, una vez que llega a ese punto, el texto se hace más pequeño y no tenemos ese botón que se apague a la siguiente sección. Otra cosa que notarás es nuestro menú aquí arriba. Se está rompiendo en una nueva línea y ya no se ve genial. Eso es algo que puedes arreglar ahora, pero en realidad vamos a construir un menú móvil específicamente para móviles. No me preocupa esto en esta etapa, esa va a ser la siguiente lección. Pero echemos un vistazo a todo lo demás en nuestra página. Todo lo demás se ve bastante bien todavía. Voy a seguir adelante, 550. Ahora nos estamos metiendo en los tamaños que podrías ver en tu teléfono. Aquí puedes ver que el texto es un poco grande, vamos a tener ese botón rompiendo de nuevo. Yo sólo lo puedo decir. 450. Eso está bien, 400 y ahora se puede ver ese botón irrumpiendo en esa sección otra vez. Voy a hacer más o menos el mismo estilo, pero sólo tienes que añadir un nuevo punto de ruptura. En el punto de ruptura del 404, quiero que el rumbo se haga aún más pequeño. Voy a marcarlo a 25, sólo para que nos dé algo de espacio para trabajar cuando entremos en los tamaños de pantalla aún más pequeños. Básicamente puedo copiar lo que ya tenemos aquí, cambiar esto a 25 y cambiar el punto de ruptura o el ancho máximo a 404. Ahora bien, si refresco la página, puede ver una vez que llegue a ese punto donde se iba a romper el botón, ahora está volviendo a alinearse. Como puedes ver aquí en los servicios que brindamos, Está empezando a ponerse un poco apretado con estas columnas, así que lo que voy a hacer es convertirla en una fila de una columna a partir de ahora. Hagámoslo al 404 solo para salvarnos escribiendo otra consulta de medios. Lo que voy a hacer es entrar aquí, blurb, ancho y hagámoslo 90 por ciento. Eso asegurará que sólo uno vaya en cada fila. Vamos a necesitar poner esa importante etiqueta como de costumbre. Guarda, refresca la página, y ahí tienes. Ahora, tenemos un tema con margen y luego si se puede ver eso pero hay un poco más de espacio a la derecha que a la izquierda, así que lo que voy a hacer es darle un margen igual la izquierda del 5 por ciento y un margen sobre el derecho de 5 por ciento. Siempre que no haya relleno, 5 más 5 más 90 sumará hasta 100 y debería alinearse muy bien. Como se puede ver, tiene. Desplazándose hacia abajo, se está poniendo un poco apretado aquí pero déjame ir un poco el tamaño de pantalla más bajo a 350. Recuerda ignorar aquí el menú. En nuestro formulario, se está poniendo un poco apretado, pero todo se ve bien. Voy a bajarlo a 300 y a los 300, puedes empezar a ver cómo se estropean los botones. Aquí mismo, el mensaje de envío y el botón de trabajo con nosotros se está poniendo un poco mal. Ahora bien, no quieres optimizar para tamaños de pantalla que son como ridículamente pequeños, como 200. Una vez que nos metemos en estos tamaños de pantalla más pequeños, me gusta simular los tamaños de pantalla de los dispositivos populares. En el Galaxy S5, así es como se va a ver nuestra página web con un ancho de 360 píxeles. En el pixel 2 con un ancho 411, así se va a ver. En el pixel 2 Excel, así se va a ver, y así sucesivamente y así sucesivamente. Si vamos a la vista para el iPhone 5, se puede ver que los teléfonos móviles van tan bajos como 320. Creo que eso es lo más bajo que se pone y ahí es cuando se puede ver ese botón estropeando y también aquí abajo. Lo que voy a hacer es trabajar en ese botón continuación y tal vez eso podría terminarlo para nosotros. Si hago algo de experimentación aquí, si bajo el tamaño de fuente, tal vez eso vaya a funcionar. Sí. Entonces yo voy a hacer eso. Averigamos en qué momento. Siempre podemos simplemente marcar en 320, pero voy a encontrar el punto exacto en el que se mete para que sea sensible en todos los tamaños de pantalla. Marcando hacia abajo, parece que sucede alrededor de 314 pero por alguna razón, si actualizamos la página en 320, iPhone 5, se pone un poco mal. Hagamos solo 320 en pantalla de medios y ancho máximo 320. Vamos a reducir el tamaño de fuente del botón grande a, ¿qué fue lo que decidimos? Creo que fueron 15 pixeles y vamos a poner un importante al final de eso. Ahora bien, si refresco la página, se puede ver que los botones ya no se rompen. Si voy hasta aquí, este botón tampoco está roto. Ahora, lo que tal vez quieras hacer es hacer más pequeño el tenedor del lugar y el texto que escribes aquí y tal vez realmente quieras probar en móvil para ver si necesitas hacer eso. Pero para fines de esta clase, creo que lo tenemos lo suficientemente cerca de la capacidad de respuesta móvil. Echemos un vistazo a nuestro trabajo volviendo al modo responsive y arrastrándolo de un tamaño de pantalla ancha a un tamaño de pantalla ajustado. Hagámoslo sección por sección y tengamos una comprobación final para ver si algo importante se rompe del menú por supuesto. Aquí se puede ver como si se va a romper pronto, pero ponemos en esas consultas de medios. Nuevamente, a medida que vamos cada vez más pequeños, se rompe por debajo de 300 pero no creo que haya tamaños de pantalla que sean menores a 300, así que probablemente no necesitemos optimizar para eso. Echemos un vistazo a nuestra segunda sección. Como se puede ver, comienza como una fila de cuatro columnas, se vuelve más apretada y más apretada. El encabezado se hace más pequeño y luego nos dividimos en una fila de dos columnas y luego a un cierto tamaño de pantalla, nos dividimos en una fila de una columna. Entonces para el formulario, el formulario al que no hemos tenido que hacer muchos cambios. Creo que ni siquiera cambiamos nada al respecto. Esa es la belleza del flex y cómo lo configuramos. Si vamos cada vez más bajos y más bajos, sigue luciendo bien. A lo mejor queremos reducir el tamaño del texto de esta dirección aquí y por supuesto, el pie de página. Si bajamos hasta el fondo, podemos ver que una vez que nos vemos obligados a romper en una nueva línea, rompe dos adicionales, se enlaza a una nueva línea,la centran enlaza a una nueva línea, en el medio y luego a medida que arrastras interior e interior, se mantiene centrado y se ve bien. Ahí van, chicos. Esa es nuestra página web ahora arreglada para móviles con consultas de medios. Nuevamente, como mencioné, el menú es lo último que necesitamos resolver. Lo que vamos a hacer es tener aquí lo que se llama un ícono de hamburguesa, para que puedas activar y desactivar el menú y lo vamos a dar formato más bien. Eso es bastante estándar en los sitios web y aplicaciones web modernos. Creo que esa es una lección importante de tener. Esperemos que esta lección no fuera demasiado larga sobre las consultas de los medios. Como dije, me gusta tener muchas consultas de medios pero puedes combinar algunas de estas también y tener menos puntos de ruptura, menos puntos donde están sucediendo las cosas. Pero cómo me gusta hacerlo es empezar de par en par, bajar el ancho de la pantalla y arreglarlo a medida que avanza. Diferentes trazos para gente diferente chicos, no hay forma equivocada de hacerlo. Tan pronto como el sitio web se muestre bien en todos los tamaños de pantalla, eso es lo más importante. Gracias por ver chicos, espero verlos en el próximo video donde vamos a trabajar en este menú móvil. 12. Crear un menú para celular: Para terminar nuestro proyecto de página web responsive, lo que vamos a hacer en esta lección es convertir este menú en un menú adaptable móvil conmutable. A medida que bajamos el ancho de la pantalla aquí, puedo ver que se pega y se rompe en una nueva línea y a un cierto tamaño de pantalla, uno de los elementos se rompe a una tercera línea. Ahora bien, esto no se ve muy mal sin 1, 2, 3, 4, 5 enlaces de menú, pero en algunos otros sitios web podríamos tener seis o más elementos de menú y una vez que lleguemos a un ancho de pantalla por aquí, empieza a llenarse un poco. Empieza a ser más difícil para la gente presionar con los pulgares en el móvil y necesitamos una solución. Uno realmente común, y el que vamos a estar construyendo en este proyecto, es algo que probablemente has visto antes. Voy a abrir mi propia página web, christhedeveloper.com y puedes ver tenemos un menú de nivel superior aquí que cuando bajamos el tamaño de la pantalla se convierte en un ícono de hamburguesa, que ahora podemos cambiar el menú de manera vertical. Esa es la diferencia entre el escritorio y una versión móvil. Para hacer esto, lo que vamos a necesitar es HTML y CSS por supuesto, pero también vamos a necesitar JavaScript. Porque si estoy activando y apagando las cosas, estoy haciendo que la página web sea interactiva y para toda la interactividad en el front end, necesitamos usar JavaScript. Lo primero que voy a querer hacer es crear el enlace para ampliar y contraer el menú, y lo que necesitamos para eso es el ícono de la hamburguesa. Ahora, al igual que hicimos con importar la fuente para Titillium web use esa fuente dentro de nuestro proyecto, vamos a necesitar importar lo que se llama fuente de icono. Una fuente de icono es más o menos lo mismo que una fuente de texto normal, excepto que en lugar de estas letras del alfabeto, vamos a tener diferentes iconos. El ícono de fuente que vamos a utilizar para este proyecto y probablemente el más popular del mundo se llama Font Awesome, y puedes acceder a él yendo a fontawesome.com. Basta con hacer click en Empezar a usar Gratis, y aquí te presentamos la forma más fácil de configurarlo en tu página web, solo copiar esta pieza de HTML. Voy a copiar eso y así como mencioné, cuando hicimos la etiqueta de Google, sólo vamos a vincularla desde un CDN externo, que significa que no tenemos que descargar la fuente nosotros mismos. Ahí lo tienes, es una etiqueta bastante larga, aquí hay algunos atributos que realmente no necesitamos entender. Esto va a importar el archivo que necesitamos para acceder al ícono de la hamburguesa. Volviendo a la página web de Font Awesome, solo necesitamos buscar la referencia para el ícono de la hamburguesa. Podemos entrar en iconos y hay más de 5 mil de ellos, así que podemos filtrar aquí. El que estamos buscando se llama barrs y puedes ver aquí es el primer artículo. Voy a dar click en esa y me va a dar el HTML exacto que necesitamos poner en ese proyecto para que se presente. Voy a dar click para copiar y lo que voy a hacer es, dentro de nuestro encabezado, crear algo de espacio y lo voy a poner después del nav. Voy a poner una etiqueta de enlace, y por ahora sólo la voy a tener en blanco. Voy a darle un ícono de ID de menú, y más adelante voy a poner algo de código JavaScript ahí para que en realidad vaya a hacer algo cuando hacemos clic en él. Dentro de esa etiqueta de enlace, voy a poner en el código que acabamos de copiar de ahí. Si volvemos a nuestra página web y refrescamos la página, se puede ver que ahí tenemos el ícono de la hamburguesa, pero está justo en contra del logotipo y es azul y realmente no está formateado correctamente. Eso es lo que vamos a tener que hacer a continuación, y lo otro es que no queremos que se presente en EVA de escritorio. Voy a agregar un atributo de estilo al enlace y configurarlo para que no muestre ninguno. Lo que esto va a hacer es asegurarnos de que por defecto no se muestre cuando cargamos nuestro sitio web. Ahora por supuesto queremos que se muestre en un tamaño de pantalla más pequeño. Lo que voy a hacer es encontrar un punto de ruptura que se alinea con una de nuestras consultas de medios solo para que sea más fácil, y luego voy a hacer que se presente en el móvil. Al abrir de nuevo nuestras herramientas de desarrollador para que podamos ver látigos de pantalla, voy a llevar el ancho de la ventana a un punto en el que creo que necesita entrar en el menú móvil. Ahora, debido a que no tenemos muchos enlaces de menú, en realidad podemos ir bastante lejos sin entrar en el menú móvil. En otros sitios web, es posible que tengas seis o más enlaces, por lo que quieres hacer el punto de ruptura antes o incluso ocultar algunos de los enlaces. Pero para nosotros, sólo voy a elegir alrededor del 797. De nuevo, puedes elegir donde quieras ponerlo, podríamos hacerlo mucho más tarde aquí abajo como 619, o aquí arriba al 797, depende de ti. Simplemente es más fácil si usamos un punto de ruptura que ya hemos determinado aquí arriba en nuestras consultas de medios. ir a nuestro código, dije que vamos a cambiar a 797 píxeles. Lo que voy a hacer, el icono del menú de destino y configurarlo para mostrar inline-block, y tenemos que hacerlo importante porque ya hemos colocado el estilo de visualización ninguno en el elemento real. Vamos a necesitar usar importante para anular eso. Ahora refrescando la página, verás que el icono no aparece, pero si bajamos el ancho de la ventana a menor que 797, puedes ver que empieza a aparecer ahí arriba. Ahora, necesitamos poner mucho más estilos para que esto funcione, así que empecemos con eso. Si traemos la pantalla que tenemos de nuevo, lo primero que noto es que es azul y es pequeña. Para poder arreglar ese color blanco y font-size, voy a establecer en 25 píxeles. Ahora si estás un poco confundido por qué estamos usando font-size, recuerda que estamos usando fuentes de iconos y solo porque no son letras alfabéticas, sigue actuando como una fuente dentro de HTML. Si refresco la página, puedes ver que se ve mucho más grande y ahora es blanca. Se ve como queremos que se vea, pero la posición de la misma sigue siendo un problema. Ahora, una cosa que podríamos estar inclinados a hacer es flotarla a la derecha. Ahora puedes ver que flota entre la imagen y el menú aquí. Pero la cosa está en el móvil, realidad no queremos que este menú se presente. Queremos que se muestre vertical cuando activemos y desactivemos esto. Otra cosa que vamos a tener que hacer en esta consulta de medios es apagar el menú por completo. Si miramos por aquí, es justo dentro de este nav, al que no le hemos dado una identificación, y solo hemos usado nav una vez por lo que es seguro para nosotros usar el selector de nivel de etiqueta. Lo que vamos a hacer es configurar el nav para que no muestre ninguno en este tamaño de pantalla. Ahora si refresco la página, puedes ver que una vez que lleguemos a ese tamaño de pantalla, el menú de escritorio se esconderá y luego aparecerá un ícono de hamburguesa. Sólo tenemos que darle algún margen porque está atascado justo al borde aquí. Voy a darle 15 píxeles de margen a la derecha. Ahora, se puede ver que empieza a salir de un lado. También se está alineando un poco más alto que nuestro logotipo aquí, por lo que quizás quieras darle algún margen a la parte superior también, tal vez unos 10 píxeles. Hay otra forma en que podríamos hacer esto usando posición absoluta, pero no te confundiré más. En realidad hay algunas maneras en que podríamos conseguir que ese ícono apareciera. De hecho voy a reducir ese margen máximo a cinco. Creo que eso está un poco más en línea. Dulce. Ahora que tenemos el menú de escritorio escondido en el móvil, y en lugar de eso, tenemos este ícono de la hamburguesa en su lugar, lo siguiente que vamos a tener que hacer es conseguir este ícono de la hamburguesa para realmente cambiar el menú. De lo contrario, ¿cuál es el punto de ocultar el menú de escritorio para empezar? Para eso, vamos a necesitar usar JavaScript porque cada vez que necesitamos aceptar la entrada del usuario y cambiar algo en la página, necesitamos usar JavaScript. Lo que voy a hacer es copiar y pegar algo de JavaScript porque esto no es exactamente un curso de JavaScript. Pero voy a explicar cuál es la función que vamos a estar usando y cómo funciona realmente. primer lugar, antes de que realmente creemos la función, quiero agregar un atributo a nuestro enlace aquí. Este atributo se va a llamar on-click, y dentro voy a agregar una función JavaScript. Se va a llamar a la función JavaScript Toggle Menu, y para definir una función necesitamos poner corchetes abiertos y de cierre y un colon. Ahora lo que esto va a hacer en charla técnica es agregar esta función al evento on-click de esta etiqueta de enlace. Pero realmente todo lo que necesitas saber es que esta función se activará cuando hacemos clic en este enlace. Ahora para activar y desactivar este menú vamos a necesitar etiquetarlo de alguna manera. Podríamos etiquetarlo usando nav, así que solo un selector de nivel de etiqueta, pero existe la posibilidad de que pueda haber múltiples etiquetas de navegación. Yo sólo voy a ser un poco más diligente aquí y en realidad definir esto con una identificación. Voy a llamar a este menú principal. Eso es todo lo que necesitamos hacer en nuestro HTML para que esto funcione. Ahora, por el JavaScript que voy a poner en la parte inferior de la página. Podemos poner algo de JavaScript en nuestro documento HTML usando etiquetas de script, y luego en medio voy a copiar y pegar mi función. Esta es la función que he preparado antes. Se llama menu toggle. Como puedes ver que coincide con el nombre aquí arriba, y lo que va a hacer es agarrar el elemento por el ID del menú principal, que está justo aquí, el nav y va a comprobar si actualmente está mostrando es decir, es el bloque de estilo de visualización. Si es así, configure la pantalla en ninguna. De no ser así, se va a poner a bloquear. Una pieza de código bastante sencilla. Simplemente va a cambiar el estilo de visualización de ninguno a bloque en función de si está actualmente en bloque o actualmente en ninguno. Una función bastante básica ahí. Ahora si guardo y recargo la página, ahora todo se ve igual. Pero si hago clic en este icono, se puede ver que desactiva y activa el menú. Ahora el tema aquí es que tenemos el mismo menú que lo hacemos en el escritorio. Es exactamente el mismo menú de escritorio, solo en un tamaño de pantalla diferente. Lo siguiente que vamos a tener que hacer es cambiar el estilo de este menú. Lo que voy a hacer para que no afecte el menú de escritorio es definirlo en esta consulta de medios. En esta consulta de medios, se va a mostrar el icono de menú. Va a tener todos estos atributos. El nav se va a apagar por defecto, pero si hacemos clic en él, eso luego cambia para mostrar inline-block. Para terminar esto, solo necesitamos darle estilos a esto para que sea vertical. Ya definimos un ID, por lo que puedo entrar y apuntar main menu usando su ID y para obtener los resultados que quiero voy a hacer el menú de ancho completo, y voy a hacer cada ítem en el menú. Usando un selector descendiente aquí, estoy dirigiendo elementos de lista dentro de una lista desordenada dentro del menú principal. Voy a configurar eso para mostrar bloque en lugar de bloque inline-block. Si guardo eso, refresca la página ahora puedes ver cuando activas el menú, estás obteniendo una lista vertical. Ahora el problema con este menú vertical es que está empujando nuestro ícono de hamburguesa hacia abajo también. Eso se debe a que todos nuestros elementos están flotando. Recuerda que hemos configurado este icono de menú para flotar a derecha y si nos desplazamos hacia abajo hasta donde definimos el nav, lo hemos configurado para flotar a la derecha también. Si estos elementos flotantes, si uno cambia el otro va a cambiar. Basta con arreglar este ícono a la derecha en lugar de hacerlo flotar. Lo que voy a hacer es usar posición absoluta, y en lugar de margen superior vamos a ponerlo en el top 5 pixels y derecho 15 pixels. Puede que no estés familiarizado con la posición absoluta, pero es solo una forma en que podemos cambiar el posicionamiento de un elemento para arreglarlo en cierta posición y usar arriba, derecha, izquierda e inferior para posicionarlo en base a la ventana. Refrescando la página. Ahora va a estar demasiado arriba, pero al menos se está quedando en el único lugar. Voy a experimentar con algunos tops aquí. A lo mejor 20 pixeles, no mucho más. Probemos 50 pixeles. Probemos 55. Ahora que he experimentado con eso, voy a sumar 50 a nuestro top, que sea 55 pixels. Ahí van, chicos. Esa es una forma en que podemos movernos por el flotador es fijándolo a este borde de la ventana mediante el uso de posición absoluta. Eso se ve bastante bien hasta ahora, pero lo que quiero hacer para que sea más obvio donde empieza y termina el menú es darle un borde. Bajando a nuestro menú principal aquí, voy a definir un borde y va a ser una línea blanca de 1 píxel, sólida. Probemos eso. Refrescar la página y luego activarla. Ya puedes ver un borde alrededor del menú. Pero no me gusta del todo en los lados y arriba, así que voy a cambiar eso a frontera abajo para que sólo vaya en la parte inferior. Refresca la página, y ahora puedes ver que hay una línea aquí para decirte que ese es el final del menú. También podríamos poner fronteras en los artículos de línea mismos, pero eso me parece bien. A lo mejor queremos realmente poner uno en la parte superior. Borde, parte superior, 1 pixel. Nuevamente, chicos, muchas de estas cosas son subjetivas, así que si quieren entrar ahí, afinarlo un poco más y hacer que se vea mejor y móvil, definitivamente hagan eso. Probablemente quisiera agregar un poco más de margen a la parte superior. Es como la temporada al gusto. Hay mucha subjetividad involucrada y sí, solo usa tu propia discreción de cómo quieres que se vea. Pero en general, estoy bastante contento con eso. Si probamos en escritorio y móvil ahora, en escritorio si cambiamos el tamaño no va a aparecer. Pero si refrescamos la página, va a aparecer y luego si entramos tamaños de pantalla más pequeños podemos activarla y desactivarla. Si la tenemos encendida y luego volvemos a entrar aquí, entonces podemos verla encendida. Si quisiéramos solucionar ese pequeño problema, podríamos creando otro evento de JavaScript que detectara cuándo la pantalla se hace más grande y luego encendiera de nuevo ese menú. Pero creo que es un tema bastante pequeño porque mucha gente no va a estar re-dimensionando su ventana así. Probablemente van a cargar su ancho de ventana al ancho en el que lo van a estar usando. Eso es un poco extra que podemos poner, pero para fines de esta clase creo que ya hemos hecho lo suficiente para mostrar la mecánica de cómo conseguirías que funcione este menú móvil y cómo conseguirías que se ocultara en el escritorio y luego aparecería en móvil. Eso es todo para este diseño de página web receptiva. Espero que esto no haya sido demasiado largo de una sección práctica para ustedes chicos. Tengo una lección extra después de esta sobre Bootstrap. Si te interesa cómo puedes agilizar y ahorrar tiempo en la creación de todos estos estilos, definitivamente quédate para la lección de bonificación. La lección extra sobre Bootstrap va a ser sobre el uso de estilos prefabricados. Como puedes ver aquí, la mayor parte de esta clase ha estado escribiendo estos estilos CSS. Pero usando Bootstrap, podemos escribir nuestro HTML de cierta manera con ciertas clases y no tener que escribir tanto CSS. Si te interesa hacer lo que acabamos de hacer, estado de una manera más rápida usando Bootstrap, definitivamente quédate. Te veré en el siguiente video. 13. Extra: introducción a Bootstrap: Bienvenido a todos a nuestra lección extra sobre Bootstrap, la biblioteca HTML, CSS y JavaScript más popular del mundo. ¿ Qué significa todo eso? Bueno, Bootstrap es solo un montón de código que podemos enchufar a nuestro proyecto que nos permite ahorrar tiempo escribiendo todos estos estilos, y también algunos JavaScript también. Si vamos a getbootstrap.com o buscamos Bootstrap en Google, podemos llegar al sitio web de Bootstrap. Ahora bien, si quieres cavar, este no va a ser un video en profundidad en Bootstrap. Siéntase libre de leer la documentación, mire algunos ejemplos. Lo que quería hacer en este video en particular es demostrar cómo Bootstrap afectaría nuestro proyecto actual, y cómo cambiaríamos nuestro HTML para usar estilos que ya están incorporados en Bootstrap para ahorrarnos tiempo creando páginas web desde diseños de conjuntos o maquetas de sitios web. Te lo he mostrado un par de veces a lo largo del curso, pero si entro aquí y elimino el link o lo comento, así ya no se aplica a la hoja de estilo, y refresco la página, esto es lo que se ve nuestra página web como sin CSS. Ahora, lo que podemos hacer es agregar en Bootstrap y ver cómo eso afecta a nuestra página HTML, y luego podemos usar estilos y clases de Bootstrap para que se vea similar a lo que teníamos con Bootstrap. Volvamos a nuestro Inicio Bootstrap y pinchemos en “Comenzar”. Ahora, al igual que hemos hecho con Google Fonts y Font Awesome, podemos descargar el Font, el CSS, todo eso nosotros mismos, y luego referirlo. Pero me gusta usar el CDN, nos ahorra tener que descargarlo en nuestro equipo. Si solo copio la etiqueta HTML que han establecido aquí, esto cargará CSS en nuestro documento. Para efectos de esta lección, no me voy a molestar con el JavaScript. Esto es sólo el CSS. Una vez que cargemos eso en, voy a refrescar esta página y ver qué pasa. Como puedes ver, ya estamos viendo algunos cambios de estilo. El tipo de letra es diferente, y también podemos ver que está usando nuestro contenedor también. Pero en la versión Bootstrap de un contenedor, hay muchos más puntos de rotura y partes donde cambia el ancho del contenedor. entrar en nuestra documentación para Bootstrap, recrear el encabezado usando Bootstrap. Voy a dar click en “Componentes” aquí, y podemos empezar a utilizar algunos de los componentes Bootstrap. Para el encabezado, voy a encontrar Navbar, que es el equivalente de cabecera en Bootstrap. Aquí puedes ver el HTML requerido para hacer este Navbar aquí. Para que el nuestro se vea así, no tendríamos que cambiar ningún CSS porque ya está incorporado. Sólo tendríamos que poner en este HTML. Lo que voy a hacer es copiar esto, voy a colocar estos lado a lado solo para poder copiar etiquetas ul. Inicio será el mismo conjunto de características. Vamos a poner sobre. Entonces en lugar de fijar precios de trabajo, y luego este es un enlace deshabilitado. Realmente no necesitamos eso, así que voy a borrar eso. Copia y pega de nuevo estos dos para nuestros otros enlaces. Blog y Contacto. Voy a poner Blog y Contacto. Ahora que hemos copiado a través de los elementos del menú, sólo podemos eliminar completamente nuestro viejo nav. Si guardo eso, volvamos a nuestro proyecto, veamos cómo ha afectado. Ahora puedes ver que tenemos esta barra de navegación creada para nosotros. No es exactamente como nuestro diseño, pero nos ahorra mucho tiempo con la creación de CSS. Como verás si entraste en ejemplos aquí, todos los sitios web de Bootstrap tienen el mismo aspecto porque usan los mismos estilos, por lo que obtendrás un poco de look Bootstrap. Es posible que estés realmente familiarizado con el look Bootstrap ahora cuando lo veas. Si ves un sitio web que se ve así, podrías sospechar que es Bootstrap. En realidad se puede comprobar entrando en el código fuente y comprobando la referencia a Bootstrap. Aquí lo puedes ver ahí mismo. Nuevamente, no va a mostrar exactamente como nuestro diseño, pero lo que es una característica realmente poderosa de Bootstrap es el sistema de columnas. Pero antes de llegar a estas columnas aquí, quiero arreglar este botón. En Bootstrap, tienes estilos de botón justo fuera de la caja. Voy a hacer clic en “Botones” aquí, y puedes usar una clase de btn btn-primary para convertir cualquier etiqueta de enlace en un botón que se vea así. Eso es lo que voy a hacer. En lugar de clase big button, voy a reemplazar eso por clase btn, btn-primary, recargar la página, y ahora puedes ver tenemos un botón estilo Bootstrap donde si ponemos nuestro cursor sobre él, cursor se convierte en un puntero, y también cambia el color del botón, para que sepamos que es un botón. Como dije, sin embargo, son las columnas las que hacen que Bootstrap sea muy poderoso. En cuanto a servicios que brindamos, podemos cambiar esto a un sistema de columnas en Bootstrap. Para poder buscar cómo harías eso, podemos hacer click en “Layout” aquí, y podemos aprender sobre la cuadrícula. Aquí, se pueden ver los diferentes puntos de ruptura cuando un estilo termina cambiando en estos puntos específicos. Recuerda, en el video anterior hablé cómo en mi enfoque usamos muchos puntos de ruptura diferentes. En Bootstrap, solo tienen 1, 2, 3, 4 puntos de ruptura mayores. De todos modos, eso es sólo una nota al margen. Si nos desplazamos hacia abajo, en realidad no tienen una sección sobre filas y columnas. Creo que podría estar en un menú diferente aquí. Déjame buscar en este cuadro, filas, Sistema de cuadrícula. Aquí vamos. Está en el elemento del menú Cuadrícula en Diseño. Aquí puedes ver cómo funciona. Te animo a que vayas a leer esto si te interesa Bootstrap. Es bastante en profundidad, y es un gran recurso para aprender cómo funciona. Pero básicamente, lo que tienes son divs con una clase de fila, y luego dentro de ellos, tienes divs con una clase de col. Después para definir qué ancho quieres esas columnas, puedes poner en otro estilo el cual le dirá al elemento HTML lo grande que quieres que sea. Este es, por supuesto, un sistema receptivo. Se va a mantener esas proporciones yendo a medida que cambias el tamaño de la página. Aquí vamos. Clases receptivas. Cómo eso se relaciona con nuestro proyecto es que tenemos esta fila de blurb, y luego tenemos blurbs. Entonces en lugar de fila de blurb y blurb, solo voy a deshacerme del blurb y tenerlo como fila, luego cambiar todos los blurbs a columnas. Debido a que tenemos cuatro columnas que queremos de igual ancho, y Bootstrap funciona en un sistema de 12 columnas, necesitamos dividir 12 por 4, y eso determinará qué clase usamos. Por lo que 12 dividido por 4 es 3, así que podemos poner en un guión aquí y convertirlo en un diseño de tres columnas, y luego poner en el número 3. Yo guardo eso, refresca la página por aquí. Ya verás que tenemos alguna columna bastante bonita de inmediato. Si cambiamos el tamaño de la página, mira esto, empiezan a redimensionar. En cierto punto, se descompone. Una vez que se descompone, sin embargo, no tenemos que crear nuevas reglas CSS. Todo lo que necesitamos hacer es agregar más clases a nuestras columnas aquí. Queremos que se rompa en una nueva línea en cierto punto de ruptura. Usando los puntos de rotura de Bootstrap como referencia, aquí puedes ver extra pequeños, medianos, grandes y extra grandes. Digamos, en medio, queremos que sea un diseño de dos columnas por fila. Además de col 3, tienen col md para medio y luego en lugar de tres, seis; que está duplicando ese número. Ahora, cuando actualizamos la página, está cambiando la columna. Desafortunadamente, cuando redimensionamos la página de esta manera, no va a cambiar de ese diseño de frío-mediados 6. Lo que vamos a tener que hacer es sumar grande entre aquí. El código para más grande es lg. Voy a guardar eso, refrescar la página, y ahora cuando esté en ese medio, va a ser un diseño de dos columnas. Entonces cuando está en tamaños de pantalla medianos son más bajos, va a ser un diseño de dos columnas. En realidad se puede ver que se rompe en un diseño de una sola columna más adelante también. Simplemente arrastrándolo otra vez. Se puede ver que tenemos esas columnas responsive sin tener que escribir ningún CSS nosotros mismos se trata de usar las clases correctas aquí arriba. Si realmente miras el archivo Bootstrap, es enorme. Hay tantos estilos CSS diferentes. Tomaría mucho, mucho tiempo escribirlo nosotros mismos. Hay mucho que podemos hacer con solo clases e identificaciones en Bootstrap. Todo el CSS está básicamente escrito para nosotros aparte de cosas que queremos personalizarnos. Al igual que, por ejemplo, los fondos que teníamos, no tenemos esos colores de fondo ahora mismo. Todavía tendríamos que escribir algunos estilos nosotros mismos. Seguimos vinculando una hoja de estilo externa y escribimos nuestros propios estilos encima de esto. Pero como puedes ver, podemos ocuparnos de algunos de los aspectos de estilo comunes mediante el uso de clases de Bootstrap. Otra cosa a la que quiero llamar su atención es que nos dio un menú móvil por defecto. A ver cómo, cuando vamos más allá, se contrata. Pero el problema y la razón por la que no está alterando es porque necesitamos importar ese JavaScript también. Recuerda, solo vinculamos la hoja de estilo, no el JavaScript. Sólo para arreglarlo rápidamente, puedo copiar todos estos enlaces de JavaScript, ir a mi cabeza, voy a expandirme aquí, poner todos estos enlaces JavaScript, guardar, volver a nuestro proyecto, y hacerlo más pequeño. Ahora, se puede ver que nuestro menú está cambiando. No voy a pasar por toda la página y recrear usando Bootstrap, eso sólo tomaría demasiado tiempo, y esto es sólo una lección extra. Solo quería mostrarte que podrías usar Bootstrap para ahorrar algo de tiempo, aprovechar algunos estilos ya creados, y ojalá te ahorres de escribir una hoja de estilo tan grande como lo has hecho aquí mismo. lo que realmente ayuda Bootstrap es de lo que te mostré, el sistema de columnas es increíble. Las columnas y contenedores, no tendremos que actualizarnos. Bootstrap es muy bueno para hacer que todo se ajuste bien en diferentes tamaños de pantalla. Se ocupa mucho de ese trabajo receptivo para nosotros. Si te desarrollas con Bootstrap como punto de partida, tienes una bastante buena probabilidad de que todo vaya a funcionar bien en dispositivos móviles y de escritorio. Eso es más o menos chicos. Esa es la lección extra donde estamos hablando de Bootstrap. Si quieres que vaya en profundidad con Bootstrap, avísame. Podría ser una idea para una futura clase. De todos modos chicos, espero que hayan aprendido una o dos cosas sobre la creación de páginas web basadas en diseños. Nuevamente, si hay algún área en particular que te haya confundido, ya sea el JavaScript, si se trata del HTML CSS, definitivamente ve y echa un vistazo a mis otras clases, si te interesa, puedes conseguir un comprensión de lo que todo está haciendo. Desafortunadamente, no tuve tiempo de repasar todos los fundamentos de HTML y CSS, y seguir con el proyecto de clase. Pero si te interesa, puedes entrar y fortalecer tus conocimientos usando esas clases. Una vez más, gracias chicos por unirse a mí en esta clase. Vamos a terminar con la conclusión en el siguiente video. Eso es, chicos. Gracias por ver. 14. Conclusión: Entonces que más o menos concluye esta clase sobre el desarrollo web Responsive. Para tu proyecto de clase, quiero que tomes un diseño de sitio web, ya sea una plantilla que encontraste en línea o un sitio web existente, e intentes replicarlo con HTML y CSS. Una vez que hayas terminado, asegúrate de compartirlo con el resto de la clase. Recuerden chicos, traducir diseños en HTML y CSS, como hemos hecho en esta clase, es una habilidad que mejorará con la práctica. Entonces no espero que sepas exactamente qué elemento HTML o estilo CSS usar en todos y cada uno de los escenarios. Lo más probable es que vaya a ser un poco de juicio y error, y por supuesto, una buena cantidad de Googling anticuado. Dicho esto, si necesitas algún consejo u orientación, asegúrate de dejar un comentario en el recuadro de discusión de abajo, y haré todo lo posible para señalarte en la dirección correcta. De todos modos, chicos, gracias por mirar. Espero volver a verte en algunas de mis otras clases.