Capacitación para Bootstrap (Bootstrap 5) | Haydn Adams | Skillshare
Menú
Buscar

Velocidad de reproducción


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Capacitación para Bootstrap (Bootstrap 5)

teacher avatar Haydn Adams, Creative Technical Educator

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Lecciones en esta clase

    • 1.

      Acerca del curso

      2:35

    • 2.

      Plantilla principiante

      3:23

    • 3.

      Agregar un archivo css personalizado

      1:56

    • 4.

      El contenedor

      4:14

    • 5.

      Configuración de la navegación

      11:45

    • 6.

      Añadir el logotipo SVG

      2:44

    • 7.

      Preparación del gráfico de héroes

      7:01

    • 8.

      Centrar el texto de héroes con Flex

      6:01

    • 9.

      x eje y espacio de eje y eje

      6:00

    • 10.

      Centro y principal principal de texto

      3:30

    • 11.

      Los iconos de pie pie y bootstrap

      10:12

    • 12.

      Preparación de la página sobre la página

      1:57

    • 13.

      Acerca de el contenido de página con flotaciones y overflow

      8:46

    • 14.

      La cuadrícula

      10:02

    • 15.

      Bootstrap 5 cartas

      4:14

    • 16.

      Botones de Bootstrap

      3:47

    • 17.

      Gutas) Gutters

      6:04

    • 18.

      Configuración de la página de contacto

      2:02

    • 19.

      Agregar detalles de contacto

      2:40

    • 20.

      Configuración de la forma

      12:24

    • 21.

      Netlify y el método arrastrado y drag

      2:16

    • 22.

      Formas de Netlify

      6:53

    • 23.

      Agregar el honeypot a la forma a la forma de añadir la masa de honeypot

      2:25

    • 24.

      Un poco más limpieza adicional

      5:24

    • 25.

      Un pie sticky

      3:13

    • 26.

      En conclusión

      0:33

  • --
  • Nivel principiante
  • Nivel intermedio
  • Nivel avanzado
  • Todos los niveles

Generado por la comunidad

El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.

204

Estudiantes

3

Proyectos

Acerca de esta clase

Diseño de diseño. Construir. Despliego. Rápido.

En el curso de Bootstrap Bootstrap Bootcamp de Bootstrap construirás el portafolio que eres las herramientas que te ofrecemos en Bootcamp Aprovecharemos el poder responsivo del bootstrap para hacer que tu sitio web tenga perfecto en cualquier dispositivo, desde el más mayor escritorio hasta un viejo iPhone 6.

Diseñaremos un portafolio que no funciona, sino que se ve increíble. Muestra tus obras de arte artísticas, aficiones y cualquier otro artesanos en este portafolio visual. Construiremos desde cero, paso a paso

Los sitios web deben vivir en tu computadora. Debe ver el mundo completo. Es por eso que aseguro mostrarte cómo subirlo / implementar tu trabajo allí para que los veas. y conecta un nombre de dominio a él.

Veremos cómo utilizar lo siguiente:

  • El diseño web responsivo

  • Cuadrícula / envase

  • Navaja / Navbar

  • Integración de logotipos de SVG

  • Flexs Flexbox

  • Heading / estilo de referencia

  • Diseño de formas

  • Tarjetas

  • Despliegue de tu sitio web

  • ..y ¡más!

** BONus ** ** **

También te guiaré a la forma de configurar una forma de trabajo a través de Netlify . Aprenderás a crear una página de éxito también, así que tus participaciones se pasen de forma correcta. Convirto el formulario con el diseño de formas de Bootstrap 5.

Quiero que este curso sea conciso conciso para que puedas comprender rápidamente el poder de Bootstrap 5 y estar en tu proceso. Estoy muy emocionada de mostrar el increíble poder de Bootstrap 5.

Conoce a tu profesor(a)

Teacher Profile Image

Haydn Adams

Creative Technical Educator

Profesor(a)

I grew up in two words—the web design / development world where I wrote HTML, CSS and now JSX, and the graphic design world where I mastered H&J's in Quark (yes, I said Quark).

I've now shifted nearly all of my work online but find that the design elements shouldn't change just because they've shifting to pixels rather than paper.

In 2020, it's crucial to understand how to code, especially as a designer, and more so to learn how to design through coding.

Before making Udemy videos, I was a instructor at Academy of Art University in San Francisco where I taught web design and development for over 13 years. Also during that time, I launched 3 iPhone/iPad Android apps and had the best-downloaded app in the University's history.

Ver perfil completo

Level: All Levels

Valoración de la clase

¿Se cumplieron las expectativas?
    ¡Superadas!
  • 0%
  • 0%
  • Un poco
  • 0%
  • No realmente
  • 0%

¿Por qué unirse a Skillshare?

Mira las galardonadas Skillshare Originals

Cada clase tiene lecciones cortas y proyectos prácticos

Tu membresía apoya a los profesores de Skillshare

Aprende desde cualquier lugar

Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.

Transcripciones

1. Acerca del curso: Oye, lo que está pasando el lunes, esto es oye, números con un diseñador que codifica. Muchas gracias por echarle un vistazo a mi curso Bootstrap bootcamp. Realmente quería crear un curso en el que te sientas seguro usando Bootstrap 5, tanto entendiendo la información dentro los muelles como entendiendo cómo funciona todo en conjunto. Vamos a construir una página web de portafolio simple. Vamos a diseñar la navegación en primer lugar, y lo más importante, asegurándonos de que también se convierta en una navegación receptiva. Abajo, nos vamos a centrar en flex usando la información de Bootstrap five para mover el texto al centro de la página y también hablar de cómo puedes descomponer diferentes piezas basadas en una XL, una L, una mediana, pequeña , y un diseño móvil. Todo en nuestro diseño siempre será móvil primero ya que eso es Bootstrap 5. Siguiendo esta página de inicio, también nos centraremos en el diseño del pie de página para traer los iconos de Bootstrap de las redes sociales. Si quieres traer Facebook u otros iconos a los que eres bienvenido. Para este proyecto, nos vamos a centrar en Twitter e Instagram. Pasando a este diseño en nuestra página sobre, te mostraré cómo puedes usar las carrozas dentro de Bootstrap para posicionar una imagen a la derecha. Y luego cuando llegue al marco Móvil, cae justo a la mitad de la página. Después de eso, llegaremos a la página del portafolio. Y la página del portafolio nos enfocaremos en la cuadrícula. Entonces con ello tengo una cuadrícula de tres columnas y luego dentro de un diseño móvil, tengo una cuadrícula de dos columnas y luego tengo una cuadrícula de una columna. Nos vamos a centrar en la cuadrícula y también en cómo funcionan estas tarjetas. Además de cómo funcionan estos botones, esta es una página muy detallada que realmente se destaca con Bootstrap 5. Terminar por fin, vamos a golpear la página de contacto. Y no sólo órgano para construir un formulario de contacto, sino que voy a construir un formulario de contacto al que puedo enviar información. Esta forma funciona. Y usando el poder de Netlify, puedo golpear Submit y crear una página de éxito de contacto que diga gracias por su envío. Te saldrás con conocer todos los detalles importantes de cómo funciona Bootstrap 5 en este curso, el curso bootstrap bootcamp. 2. Plantilla principiante: Oye, qué pasa cuando dice, Hey, datums, y muchas gracias por tomar mi curso Bootstrap bootcamp. Tengo dos pantallas justo aquí en la parte superior es mi Chrome poco área podría ver en mi sitio web es ancho y probar mis proyectos con. Y abajo, voy a usar Visual Studio Code. Esta es una de mis herramientas favoritas para usar para la edición de código. Está hecho por Microsoft. No puedo dejarlo diciendo eso, pero Visual Studio Code son las rodillas de la abeja. Cuando se trata de la co-edición, puedes usar el color que quieras usar. Pero para mí, voy a usar el código de Visual Studio a lo largo de todo este curso. Por lo que de nuevo, puedes elegir el color que quieras utilizar Sublime Coda. Puedes usar Microsoft Word si eso te gusta, pero en general, debo seguir con el código VS en este proyecto. Entonces para empezar, voy a dirigirme a getbootstrap.com. Voy a bajar y decir que empiece, sólo para empezar. Y aquí abajo a mitad de la página es si la busco, la plantilla de inicio, voy a copiar esto porque esto es todo lo que tengo que usar orden para que Bootstrap funcione realmente. Voy a copiar. Voy a entrar en código de Visual Studio, creando nuevo archivo y pegarlo en. Y luego lo voy a hacer es que voy a dirigirme a mi nueva carpeta, que es proyecto nuevo, y llamar a este índice punto HTML. Y lo que es genial de VS Code es que las coordenadas de color automático. Todos los archivos son todos los archivos, todos los nombres de los archivos y otras palabras que se coordinan con el HTML o cualquier documento en el que estés trabajando. Entonces si se ejecuta por esto para rápido, para que Bootstrap funcione, se requiere un par de componentes y la plantilla ya me proporcionan todo eso. Arriba en la parte superior, hay que proporcionar algún tipo de idioma como si se tratara de un árabe. Cambiará y mostraremos por el camino en este proyecto que ya no hay una izquierda y derecha, sino un inicio y fin ya que el árabe va de derecha a izquierda y el inglés va de izquierda a derecha. Eso es de derecha, de izquierda a derecha. Yo lo digo bien. Sí, dije eso bien. Después de eso estamos viendo el UTF o el conjunto de caracteres dentro del código. Esto sólo nos dirá esencialmente que queremos usar los caracteres que son ingleses de UTF-8. También necesitamos la ventanilla. Esto se requiere porque a medida que escalamos y subimos y bajamos en nuestro proyecto, la ventanilla permite que el proyecto crezca y se encoja con el ancho siendo el dispositivo con el dispositivo de ancho XYZ con escala inicial diciendo al 100%, la magia realmente ocurre cuando incluimos el CSS Bootstrap. Esto se entrega en una red de distribución de contenido o CDN, por lo que reside virtualmente impresionante. Y es una hoja de estilo. Y la otra pieza abajo es este script que permite que el JavaScript se ejecute, que iba a correr especialmente nuestra navegación. Y algunas otras cosas de fondo. Esas tres cosas, las etiquetas Meta requeridas, el Bootstrap, CSS, y el script es realmente lo que se requiere para que Bootstrap funcione. Se trata de Popper y Bootstrap JS separados. Todo está resaltado porque está comentado. De qué preocuparse por eso. Entonces lo único que quiero hacer está bien en esta página de índice, así que acabas de escuchar es que quiero crear un archivo CSS personalizado. 3. Agregar un archivo css personalizado: Entonces lo que hago aquí es que voy a agregar un archivo CSS, y quiero agregar el CSS después del archivo minificado Bootstrap porque quiero anular o cambiar hola aquí. Quiero cambiar eventualmente algunas configuraciones que son por defecto para bootstrap, no mucho, solo algunas cosas. Entonces voy a decir primero es enlazar una trampa. Voy a seguir adelante y agregar primero el archivo CSS y luego crear el archivo CSS siguiente, voy a decir, voy a decir periodos slash CSS slash custom. Css. Y RHEL va a ser una hoja de estilo. Deja eso y cerraremos, no con una X, con un signo de interrogación, sino con un símbolo mayor que. Si guardo esto y voy a crear un nuevo archivo. Por lo que entraré en archivo o Comando N para nuevo archivo. Y voy a guardar este archivo. Y también sobre Visual Studio Code es que recuerda dónde guardaste por última vez tu último archivo. Por lo que sabe dejarlo aquí. Voy a decir CSS para un nombre de carpeta. Y le daré a esto un nombre CSS de punto personalizado. Cuando tuve que hacer muchas veces es para asegurarme de que funcione. Voy a añadir un cuerpo y vamos a añadir un color de fondo de 0 que no ha surgido en un tiempo. Aguamarina darte un color brillante para ver que va a funcionar porque si podemos ver este color de fondo, sabemos que tanto el CSS como el HTML están vinculados entre sí. Cuando guarde esto, voy a volver a mi carpeta y arrastrar mi archivo de índice. Y hola mundo. Se trata de Hello World. Con esa maldita aguamarina fea. Eso está bien. Voy a venir al archivo CSS, deshacerme de este cuerpo, guardar. Y si refresco la página en Chrome, esa aguamarina desaparece y ahora tenemos nuestro CSS enlazado con éxito. 4. El contenedor: Ahora que tenemos el archivo CSS, podemos ponerlo a un lado sólo por ahora mismo. Quiero empezar a trabajar en la navegación, alguien diseñado de arriba a abajo en este proyecto. En el archivo índice, si me desplaza hacia abajo, dice Hola Mundo, justo después del cuerpo es donde voy a empezar a trabajar. Voy a decir div y luego decir contenedor de clase. Y ese contenedor es probablemente la herramienta más poderosa que vas a usar dentro de Bootstrap. Y te mostraré por qué. Añadamos el contenedor y realmente llevemos la etiqueta H1 al contenedor. Entonces lo dejaré caer. Entonces si guardo esto y refresco Chrome, mira, ¿qué pasa? Hola mundo se mueve hacia el, de la izquierda hacia el centro de la página. ¿ Por qué es eso? Eso es porque si muevo mi diseño, miro Hello World, ya que se acerca y se acerca al borde, salta. Eso se debe a que el contenedor contiene puntos de ruptura. Hay cinco puntos de ruptura principales en los que enfocarse. Volvemos a buscar bootstrap y me voy a desplazar hacia arriba. Busco al doc para asegurarme de que estoy en el lugar correcto. Lo que quiero mostrarte es dentro del diseño es donde vas a encontrar rejilla. Y la cuadrícula tiene varios puntos de rotura. En realidad, está en el contenedor, que se enfoca en la cuadrícula. Salté adelante un par de pasos. El contenedor cuenta con un par de áreas diferentes. Ahí hay pequeño, mediano, grande, XL. Dónde están estos corresponden a nuestro punto de ruptura. Por lo que menos de 576 es tu tamaño extra pequeño o esencialmente tu tamaño móvil. Tu pequeño en 576 es más de una tableta vertical slash teléfono horizontal. Tu médium. Más de la tableta horizontal slash tableta más grande. Y el grande y extra grande y doble XL cabeza al tamaño de la pantalla de escritorio. Y se puede decir que tienen varios puntos de rotura. Entonces solo usamos la palabra contenedor aquí abajo. En el móvil, es un 100 por ciento de ancho, pero luego se convierte en 540 píxeles, 720 píxeles, 960, 1140, 1320. Entonces si volvemos aquí, podemos ver cómo se va a romper en diferentes puntos de ruptura en este diseño. Lo que también es importante destacar son estas siglas, son estas pequeñas abreviaturas que son SM, MMD, LG, XL, doble XL, y fluidas. Fluido casi podemos ignorar porque básicamente dice hacer todo un 100 por ciento en todo el espectro. Rara vez uso esto solo porque simplemente prefiero usar un contenedor con toda la rela para puntos de ruptura relevantes. Pero SM se refiere a pequeñas, medianas, grandes XL y dobles XL. Ya verás que vamos a utilizar estas diferentes piezas en el camino a lo largo de nuestro viaje. Y si queremos hacer de nuestro contenedor solo un cierto tamaño, podemos decir contenedor dash de un cierto tamaño. Por ahora, me gusta simplemente mantener el contenedor como está. Pero presta atención esos SM, MMD, LG, exilio y doble XL. Observe otra pieza y si has venido de Bootstrap 4, esto es una diferencia. Observe que el extra pequeño no tiene el exceso. En el pasado, tendrías SM y luego dash X S. Bootstrap cinco cambió el juego. Ahora es móvil primero, o extra pequeño por defecto. Y luego si quiero cambiarlo, tenemos que sumar el SM, MMD, LG XL, y doble XL. Por lo que avanzando en este proyecto, todo es móvil primero, asumiendo que va a bajar, no arriba, lo que significa que va a ir de móvil, todo lo demás. Y si queremos cambiarlo, tenemos que poner algo pequeño y bajando de esta manera, voy a disparar por el camino lo que quiero decir con eso, pero parecía estar consciente de que todo es móvil primero y no hay otro lenguaje para delinear realmente extra pequeño. 5. Configuración de la navegación: Bienvenido de nuevo al contenedor más adelante. Pero lo siguiente que quiero hacer después de los contenedores, quiero agregar una navegación a este hola mundo. Entonces voy a mover hola mundo fuera del contenedor por ahora mismo. Los tiraremos justo hacia atrás es, y dentro del contenedor es donde quiero agregar mi navegación. Escribamos lo siguiente y asegurémonos de que esté etiquetado correctamente. Perfecto. Voy a decir menos que firmar y voy a decir nav clase igual navbar, navbar expandir. Voy a decir LG y te voy a mostrar por qué es eso. Y un poco después del LG, tenemos que decir ¿es claro o está oscuro? Navbar, barra de navegación, barra de navegación. Voy a decir que es ligero. Esto significa que es un fondo de color claro. Si dijimos oscuro, eso es más para el modo oscuro. Entonces voy a decir cerrarlo, abrir y cerrar mi nav y voy a añadir otra cosa. Voy a agregar un contenedor una vez más solo para sostener el contenedor de clase div space. Y aquí dentro, lo que voy a hacer es que voy a añadir mi navegación real. Mi primer arte es que tengo que enfocarme en el logo. Por lo que voy a decir logo va aquí por guardarlo. Hola, logotipos aquí. Vamos a crear un espacio para el logo eran sólo algunos texto. Y después de eso, traeremos el logo con el archivo proporcionado para caer en la parte superior izquierda y poner el texto en la parte superior derecha. Entonces donde dice logo va aquí y Hello Worlds de vuelta fuera del contenedor ya que está en el extremo izquierdo de la página donde dice logo va aquí. Cuando voy a hacer es decir una y luego decir clase igual marca navbar. Y aquí dentro voy a decir H ref, y voy a decir index.html. Para enlazar de nuevo al índice, lo cerraré. Y justo dentro de esta a, voy a decir diseños de John Smith. Yo lo guardo. Ahí está. Observe cómo no tiene rollover cuando le pongo el ratón sobre él. Como logotipo o un diseño en la parte superior izquierda, debes permanecer lo más estático posible. Y con ello no hay rollover porque agregamos la clase de marca navbar a esto, una etiqueta. Totalmente bien. Lo que quería hacer, está en el lugar correcto. Ahora que tengo lugar para que mi logo vaya, voy a continuar y construir mi navegación por el lado derecho para luego volver y caer en el logo. Entonces después de la a, quiero agregar un niño pequeño, lo que significa que quiero agregar un pequeño ícono de hamburguesa. Entonces cuando esto golpea un cierto tamaño, digamos debajo de lo grande, porque dije expandir en grande, lo que significa que cuando golpea el medio, quiero ver una hamburguesa o un ícono de menú móvil. Entonces lo que voy a hacer es después de la a, voy a decir botón y luego decir clase igual navbar, niño pequeño. Y por espacio extra, voy a hacer un par de cosas por legibilidad. Voy a bajar esto. Y lo que haré es que no se olvide de cerrarlo. Cerraré así el botón. Y así aquí dentro voy a sumar una más, Claro, un par de cosas más. Y después de la clase, dab bar niño, voy a decir tipo igual botón. Y luego va a decir datos BS para Bootstrap. Y diremos Toggle es igual a colapso. Y después de los datos BS toggle, diré datos BAS, objetivo e igual. Y voy a poner una identificación aquí y podemos conectar los dos y un poco. Voy a decir nav bar, nav. Voy a capitalizar el final. Asegúrate de que estés siguiendo a lo largo de la delineación exacta. Yo sí usé una N mayúscula también aquí mismo. Al ser mayúscula y minúscula son dos cosas diferentes. El aria controles va a ser nav bar, nav. Aria expandida va a ser falsa porque no se va a expandir por defecto. Y voy a decir aria, etiqueta igual a toggle navigation. Muchas de esas, sé mucho solo por un botón, totalmente tiene sentido. Entonces después de ese botón, voy a poner una etiqueta span, LF span tags. Ellos son los superhéroes de internet porque no hacen absolutamente nada. Span, voy a decir es clase igual, diré Navbar, niño pequeño, icono, gota en la etiqueta span. Déjalo abrir y cerrar. Entonces mucho trabajo solo por un botón. Y si guardo esto, nada va a aparecer porque aún no hemos incluido el nav aquí. No hay nada que abrir y cerrar. En cuanto a una navegación. La mitad de la etiqueta span. Voy a decir que la clase div es igual a colapso, colapso navbar. Y luego ID que escribo arriba en navbar nav. Voy a volver a poner aquí mismo. Voy a decir id y agarrar ese navbar nav, suéltalo. Yo como que es una copia y pega para asegurarme de que no lo estropeo, cual soy muy bueno haciendo. Y abrir y cerrar el div dentro esta clase div es donde vamos a añadir nuestra navegación. Entonces lo voy a hacer es voy a decir UL. Y aquí dentro voy a añadir una clase UL igual, voy a decir navbar. Conozco muchas palabras para navbar, navbar, nav. Y luego voy a decir MS auto. Y te mostraré un poco lo que hace esto. Esto es cuando no verás de inmediato del bate, pero te mostraré en un poco cómo funciona éste, MS auto y centro de texto. Por lo que dentro de esta URL, voy a añadir un LI. Y en el LI voy a añadir una H ref. Y pondremos un letrero de libra por ahora mismo. Y deberíamos decir, oops, me olvidé la clase H ref class igual a nav link. Y también en la LI que también salté, tenemos que decir clase y luego decir nav item. Estaba pensando demasiado rápido en el enlace de navegación y se me olvidó saltar en el artículo de navegación. Dentro de esta a, diremos enlace número uno. Y cuando guardo esto y lo dejo caer y refresco la página, no pasa nada. Me di cuenta cuando estaba escribiendo el botón, no me daba el botón de cerrar. Entonces voy a volver aquí. Cuando escribo menos de signo Cerrar botón, quiero rodear la clase span con el botón. Voy a cortar esto y bajarlo y añadir la etiqueta span dentro del botón y la dejaremos caer justo por ahí. Alguna razón por la que no estoy haciendo bien el espaciado de repente, pero debería alinearse ahí mismo. Y la clase span, cuando también noté que deletreaba mal el colapso, dije collage. Se trata de COLS LAP desordenado. Cuando hago esas dos cosas. Y lo guardo pops link número uno. Vamos a cambiar el tamaño del navegador y a ver si el menú móvil aparece también. Entonces voy a agarrar mi navegador. Y una vez que golpee por debajo de lo grande, lo que va a pasar es que va a golpear este medio y se va a convertir en un menú móvil. También tenga en cuenta que el tipo está en medio de la página y la navegación está muy por encima en el lado derecho. Eso se debe a que por un par de cosas, este MS Auto dice margen izquierdo, pero en las nuevas formas de escribir código en Bootstrap, S representa la izquierda y el inglés y la barra de inicio escribir en árabe, con ello este auto MS. Si lo saco por 1 segundo, mi navegación termina en el lado izquierdo, justo al lado de los diseños de John Smith. Yo lo quería en el lado derecho. Por lo que MS. Auto lo mueve de la izquierda esencialmente a la derecha. Y si eres árabe, eso se moverá de derecha a izquierda o el inicio a la otra dirección. Lo que hace el centro de texto, si saco esto y lo guardo, y lo dejo caer. Observe cómo las palabras y podría querer esto en su diseño. El enlace número 1 aparecerá justo debajo de los diseños de John Smith. Lo prefiero en el centro para mi diseño. Y ten en cuenta cuando se trata de un diseño móvil, entra a inspeccionar dentro de Chrome. Es realmente pequeño. Entonces una vez más, lo prefiero más en medio de la página, pero depende de ti. Por mi diseño. Voy a seguir diciendo centro tecnológico. Ahora centro de texto esencialmente dice todo desde la APP móvil enviar a la apretada. Pero ya que si salimos del diseño móvil, este enlace uno está en su propia pequeña celda. Con ello el tech center sigue siendo moot porque todo se mueve por sí solo a la derecha. De todas formas, voy a guardar esto para asegurarme de que lo tengo correcto. Entonces, ¿qué hacer a continuación es que quiero agregar tres piezas de navegación. Entonces este artículo nav voy a duplicar, voy a decir nav item. Por alguna razón mis pestañas no se alinean perfectamente. No sé qué está pasando. No, yo quiero volver. De todos modos, por alguna razón no estoy consiguiendo pestañas perfectas por alguna rara razón. Todo está desalineado de todos modos, no es gran cosa. Yo estoy totalmente bien de esa manera. Entonces en esta área, déjame copiarlo y dejarlo caer. Y ahora tengo enlace uno. Y si digo enlace número 2, enlace número tres. Ahora tengo enlace uno, enlace dos, y enlace tres. Voy a cambiar esto por sobre cartera y contacto. Entonces aquí dentro, voy a decir sobre, voy a decir cartera. Y diré contacto. Si puedo deletrear contacto correctamente. Y después de esto, voy a ahorrar para asegurarme de que se presente. Y voy a añadir el href porque voy a copiar y pegar este archivo índice por la carretera de todos modos. Entonces voy a cambiar este H ref y decir sobre HTML, portafolio, dot HTML y HTML de contacto. Si guardo esto, no voy a dar clic. Pero he tenido el ratón de Rahway sobre él. Se puede ver abajo dentro de Chrome, dice sobre cartera y contacto. Estos también son para ir en el futuro. Cuando duplique esta página para la página sobre, la página de portafolio y la página de Contacto. 6. Añadir el logotipo SVG: Cuando por fin tengo que hacer es añadir el logotipo a los diseños de John Smith. He incluido la imagen para si quieres usar mi versión o puedes usar el logo que quieras en tu proyecto. Voy a crear una carpeta nueva y decir imágenes. Y en eso, voy a venir a mi otra carpeta e ir a agarrar mi carpeta de imágenes y encontrar el título de John Smith, SVG. Yo uso SVG porque son lista de píxeles. Son esencialmente archivos vectoriales en línea. Y también incluyo el archivo AI en caso de que quisiera cambiar algo a eso por el camino en mi proyecto web. Voy a traer a John Smith. Ahí está. Diseños de John Smith. Y aquí dentro lo voy a hacer es volver a subir a la cima. Y vamos a buscar el lugar donde dice una marca navbar clase John Smith diseña. Voy a traer el cuadro. Entonces voy a decir, voy a cortar esto, voy a traerlo de vuelta en un segundo. Voy a decir IMG SRC y decir imágenes de barra de puntos. Y quiero título de John Smith. Ahora por mi diseño, también voy a decir con 225 y la altura va a ser 76. Si crea su propio logotipo de diseño, entonces sí presta atención a su ancho y altura proporcionalmente a su diseño. Y luego va a decir alt, y voy a decir logo para John Smith, diseño, diseño plural, o consiguió la S justo ahí al final. Y después de esa imagen, voy a cerrar porque las imágenes se autocierran. Y lo que también quiero hacer dentro de esto, una etiqueta es que me gusta tener información que decir, ¿qué es este enlace? Entonces voy a decir clase span. Y aquí dentro, la D en Bootstrap es para exhibición. Voy a decir mostrar ninguno. Y voy a pegar en diseños de John Smith. Me gusta tener texto real para aparecer dentro de mi código, pero no visualmente en la pantalla para delinear la imagen. Entonces si guardo esto y vuelvo aquí, ahora consigo diseños de John Smith. Y entonces también me gusta de Bootstrap, es si lo miras, el texto no está sentado a la derecha ni abajo, discúlpame, o arriba en la parte superior. Pero se sienta más como línea de base en el medio. Para una estética de diseño bastante cool. Impresionante. Ya tenemos nuestra navegación hecha, y ahora quiero hacer a continuación es quiero construir este gráfico héroe dentro de mi página de inicio. 7. Preparación del gráfico de héroes: Dulce. Ahora que tenemos nuestra navegación hecha es momento de diseñar realmente más del interior de esta página de índice. Voy a bajar más allá de la navegación y justo entre HelloWorld en el div, voy a decir la palabra main, ya que este es el contenido principal de nuestra página. Dentro de aquí, voy a decir cabecera. Y dentro de aquí, voy a añadir un par de cosas. Voy a añadir un div y cerrar este div. Y luego dentro de este div está voy a añadir el uno. Lo que quiero hacer, déjame caer este aquí. ¿ Es esto delinea un par de cosas. Una, el principal es el contenido principal de nuestra página. También el encabezado delinea el título de nuestra página. Una que también voy a hacer es que aquí voy a construir un panorama grande, literalmente una gran fotografía. Voy a agregar una superposición de color, que va a ser este div aquí mismo. Y el texto no es un ir dentro de él. Entonces lo que puedo hacer es que voy a empezar con una foto. Entonces si vuelvo a mi Finder y con las fotos proporcionadas, voy a ir a agarrar esa imagen de mi otra pantalla. Lo que voy a hacer es que voy a arrastrar esta imagen de índice, se ve así. Voy a poner esta foto a través de la página en la parte superior. Entonces quiero hacer es dentro de este encabezado, voy a decir que el estilo es igual a fondo, guión, imagen, colon, y decir URL. Y aquí es donde voy a colocar la foto. Voy a decir URL, comillas simples, puntos, imágenes de slash, e imagen de índice. Ahora por defecto, esto no va a hacer mucho, sólo va a estar luciendo así. Se va a llenar a su padre, lo cual está bien porque el texto llena el espacio para ahora mismo, lo que quiero hacer es que esto sea un poco más grande en la página. Entonces vamos al CSS, vamos, lo que voy a hacer aquí es que voy a añadir un encabezado. Voy a decir cabecera, HA DR. Y luego dentro del encabezado diré colon de fondo. No se repita. Y luego centro y centro para asegurarse de que esté dentro de este diseño. Después de eso, lo que voy a hacer es que voy a decir tamaño de fondo. Y yo diré tapar. El motivo por el que me gusta usar cover es, es que sostiene el espacio sin importar el tamaño del navegador. Y como sé que este encabezado va a requerir algún cambio de color del texto, voy a decir que el color es blanco. Guardar, refrescar. Y ahí está. Por lo que puedes decir que está encajando con el espacio de este texto. Si quería estar un poco más bajo en la pantalla, voy a agregar una superposición de color y eso va a dictar el tamaño dentro de este diseño. Entonces lo que voy a hacer es en este índice, dentro de este div, voy a decir clase. Puedo deletrear clase correctamente. Voy a decir superposición de color. Para su diseño. Es posible que desee o no un color que dependa de usted cómo desea lograr eso. En la superposición de color. Voy a volver al CSS. Y voy a decir periodo de superposición de color con un nombre de clase. Y me desplazaré hacia arriba. Y esta superposición de color va a decir un par de cosas. En primer lugar, quería dictar el color de fondo. Entonces voy a decir color de fondo, y quiero darle un RGB a. La razón por la que uso la a es para Alpha. Entonces diré RGBA. Y este diseño, voy a decir 0 coma 0 coma 0.4. Y cuando guardo esto, note cómo oscurece un poco la imagen. Bastante guay, pero aún no está bajando esto un poco más bajo. Entonces lo que quiero hacer es en esta superposición de color, voy a decir Min height. El motivo por el que uso min-height es en el caso pongo mucho contenido aquí. Esto puede expandirse más allá de la altura mínima de 60 altura vertical. Cuando guardo eso, ahora obtengo el diseño que cabe en el espacio. Ahora ten en cuenta si tenía el navegador un poco más alto. Observe cómo la imagen bruta incrementalmente más alta en función del tamaño del navegador. Pero lo único que sí quiero arreglar, es que es un poco demasiado alto para un diseño móvil. Entonces voy a seguir adelante y escribir una consulta inmediata para arreglar esto de que suceda. Entonces lo que quiero hacer es si traigo esto de vuelta a donde debería estar después de la superposición de color, voy a decir en medios y usar los puntos de corte que se encuentran en Bootstrap 5, voy a decir ancho máximo, colon 767.98 px. Abrir y cerrar los corchetes. Y ahora esto va a cambiar siempre que se ponga por debajo de 767.98 píxeles, que son esencialmente 766 o 767. De todos modos, voy a decir superposición de color aquí. Y voy a cambiar la min-altura de 60 a 30. Entonces diré min-altura, diré 30, altura vertical. De qué hace esto, y puedo conseguir un poco más de espacio. Es sólo que tenga que respirar un poco en la página es ahora y refresco esta página cuando voy debajo de un tamaño de 767.98 píxeles, va a caer de tamaño así como así. Ahora obviamente, nunca tendremos un diseño de un sitio móvil que sea este tipo de rectangular. Entonces en realidad, cómo se verá si traigo esto un poco más grande y voy a Inspeccionar y dejarlo aquí. Ahora este diseño encaja mucho mejor en este espacio proporcionado por lo que no es súper alto. Si tuviera 60 aquí cuando mapeo esto hace un par de días, Simplemente sentí que en un sitio móvil, esto era simplemente demasiado grande. Ahí va. Entonces para mí estaba ocupando demasiado espacio y quería más de ese diseño rectangular. Por lo que con ello pasó de 60 a 30. Y encaja ahora en ese espacio. Perfecto, bueno, casi perfecto. Hola mundo sentado en la parte superior izquierda. Pero lo que quiero hacer es moverlo hacia abajo al medio de la página Q flex en Bootstrap 5. 8. Centrar el texto de héroes con Flex: Bootstrap 5 tiene flex, flex box incorporado justo en el marco. Si vuelvo a Bootstrap 5, y si escribo en Flex, Ahí está. Por lo que el flujo nos permitirá flexionar nuestro músculo de diseño. Esto es realmente genial y me encanta el flex cada vez más. Cuando llego a hacer es llegar a decir, Hey, soy un contenedor Flexbox. Eso es genial. Y usando el flexbox, lo que quiero hacer es si me desplaza por la página, lo que busco es justificar el contenido no a la izquierda, no a la derecha. Pero quiero ponerlo justo en el medio. Yo quiero mover Hola Mundo derecho al centro. Middles quieren moverlo hacia el medio, pero también centrarlo verticalmente. Y la razón por la que podemos hacer esto es que establecemos una altura, o en este caso una altura mínima. Entonces cuando busco hacer es hacer dos cosas. Voy a moverlo al medio. Y la poderosa herramienta o flexes, puedo alinear los artículos al centro justo aquí. Todo esto está delineado en Bootstrap 5 y puedes elegir lo que quieras usar. Y si lo miras aquí mismo, observa que tienen lo pequeño, el mediano, el grande, y el XL. Cuando escribes cualquier código en Bootstrap 5, puedes escribir el SM en medio justificar inicio de contenido y centrado entre alrededor de manera uniforme y mediano, grande XL. Lo que eso significa es que puedes establecer puntos de ruptura para hacerlo. Se quiere hacer ya sea todo el camino a través del tablero o simplemente parcialmente a través del tablero. Déjame que ella se refiera con eso. Bueno, yo voy a hacer aquí es volver al índice y a un HelloWorld. Vamos a traerlo de vuelta. Podemos ver tanto nuestro código como Chrome también. Y dentro de este Color Overlay, voy a decir d flex para configurarlo como flexbox. Y voy a decir justifique centro de contenido. Lo que esto va a hacer va a mandar un conjunto de Phi, va a centrar el contenido a través de todo. Empezando por el diseño móvil, refresco la página, Hello World. Entonces digamos que no quiero que esto suceda excepto sólo en un cierto punto de ruptura. Si volvemos a flex que justifiquen centro de contenido, noten cómo podemos decir, Sabes qué, no lo quiero. Donde si sólo quiero de nuevo este lado izquierdo, va a empezar con el arranque. Entonces digamos, digo, ya sabes qué, justificamos que miremos aquí abajo. Voy a agarrar el inicio de médiums justificados. Entonces lo que va a pasar es que si agrego esto, el centro justify-content estará hacia el centro en el móvil y el pequeño actor con fines de diseño. Hagamos grande. Por lo que el móvil, el pequeño, y el medio estarán todos centrados y el grande, volveremos a la tira de inicio a la izquierda. Entonces si le echo un vistazo a esta derecha de aquí, observe cómo está en el lado izquierdo porque a la grande o más grande, volvió al inicio de la tira izquierda. Si cambio el tamaño de mi navegador, vamos a golpear un grande, vamos a pronto vamos a golpear el XML. Y el grande, siempre me olvido que hay un doble XL en Bootstrap 5. Y ahora cuando caigo por debajo de una gran derecha por aquí, el medio va a patear en este diseño móvil sensible. Y va a patear hola mundo al centro porque dijimos todo desde APP móvil estar centrado hasta que golpeas el grande y luego regresas a la izquierda. Entonces si saco esto aquí mismo, refresco la página, y me encuentro, se va a centrar en la página sin importar cuál sea el punto de ruptura, porque es móvil primero. Ahora que tenemos centro justify-content, lo que busco, si me desplazo aquí abajo es una línea de ítems. Y esto me da opciones para, quiero alinear artículos al centro también. Entonces lo que voy a hacer es alinear elementos centro va a ir al medio, verticalmente, refrescar la página, bajarla. Esto exactamente lo que quiero tener. Ahora, obviamente este no será un tamaño normal del navegador. Esto es lo que quería hacer. Hola Mundo en medio de la página. Esto ahora está perfectamente centrado, arriba y abajo, izquierda y derecha. Gracias a alinear elementos centro y justificar centro de contenido. Y de nuevo con Bootstrap 5, si vuelvo aquí, están todos los puntos de rotura dentro de Inicio, Fin, Centro, línea de base, y estiramiento. Aquí puedes ver las cinco opciones. Y hay pequeño, mediano, grande XL, n doble XL. Este es el poder diciendo que tal vez no lo quiero en medio. Una vez que llego a un cierto tamaño, podría querer la línea de base. Entonces sabes qué, Digamos que grande va a conseguir la línea base. Voy a copiarlo en. Y ahora la línea de base golpea hasta que llego por debajo de la grande. Y ahora se remonta al medio porque alinear items center es móvil primero. Para este proyecto, las amines alinean los artículos justo en su centro a través de todos los tamaños. Entonces lo voy a sacar, pega Save. Y ahora sin importar con qué tamaño trabaje, siempre va a estar en medio de este diseño luciendo bastante bien. Sigamos adelante. 9. x eje y espacio de eje y eje: Para esta siguiente área de contenido, quiero construir una sección dentro del centro de esta página que no sea demasiado amplia. Entonces esta es una de las pocas cosas que construyo que está fuera del alcance de Bootstrap 5, pero la uso mucho. Y lo que es, yo lo llamo la sola llamada. Y la sola llamada se sienta dentro del contenedor y solo se expande a un ancho máximo. Dentro de mi área personalizada. Lo que quiero hacer es después de la superposición de color, voy a agregar una sola llamada y sólo decir sola llamada. Lo que esto va a hacer es que voy a decir en la sola llamada, que sea ancho máximo. Y aquí dentro de 750 píxeles. El motivo por el que usar la regla de 750 píxeles es que quiero que sea lo suficientemente ancha como para legible, pero no demasiado ancha que crea tensión ocular en la página. Ese contenedor es fantástico, pero es casi demasiado ancho para una sola columna. Dicho eso, aún quiero usar los puntos de ruptura cuando entre en juego. Entonces quiero asegurarnos de que fluya lo mejor posible. Entonces lo que quiero hacer a continuación es aplicar la sola llamada y luego traer el contenedor también en el diseño. Entonces lo que voy a hacer es que voy a decir en mi archivo de índice dentro de esta sección principal, pero después del encabezado, voy a decir div class single call. Ahora nota, sí capitalicé el mar y llamé para delinear la palabra llamada. Después de una sola llamada. Voy a decir M x auto. Y hablemos de espaciado. Si miramos la parte superior aquí arriba, usamos el M, S Auto. Eso es para el arranque o el lado izquierdo. En un diseño escrito en inglés, el x auto es decir ambos lados, margen X como en el eje x de inicio y fin o izquierda y derecha. El auto, esencialmente poniendo esto en medio de la página. Si entonces cierro esto y golpeo prueba, Vamos a dejarlo caer. Y ahora la prueba de palabras se asienta aproximadamente en medio de la página en ese tamaño de 750 píxeles. Si entramos en nuestro diseño, Vamos a añadir un color de fondo. Y sólo traeremos amarillo, verde. Eso debería ser realmente interesante. Observe ahora que esto es hasta donde ¿por qué quería leer? Eso es todo lo que quería hacer es en medio de la página. Y si volvemos y sacamos el auto Emax y ahorramos, Eso va a simplemente sentarse en el lado izquierdo. No quiero eso. Yo quiero traer de vuelta el auto MX en este diseño y algo más. Esto está sentado muy cerca de este diseño, casi demasiado cerca. Por lo que quiero agregar algo de espaciado a este diseño también. Por lo que ya hemos utilizado el m x, x para izquierda y derecha. Pero ahora quiero enfocarme en la zona superior y en la parte inferior. Si el eje x atraviesa, el eje Y sube y baja. Ya que quiero que sea parejo a través de todos los lados arriba y abajo. Supongo que no todos los lados, sino los dos lados, arriba y abajo. Voy a decir m, y. y puedo decir MI uno a 51 siendo un pequeño espacio adicional, que es demasiado pequeño, a un poco más lejos, tres poco más lejos aún por saltar un poco más allá, N5, saltando el más abajo de la página, Es respectivo de su padre en términos de espaciado, hay algún margen inferior. Entonces si ejecutamos el editor inspect, observe cómo el div tiene márgenes superior e inferior justo ahí. Así es como quiero tener es por el camino. Quiero el espaciado parejo en la parte superior e inferior de este diseño. Entonces lo que obtenemos es conseguir que el eje x sea auto o el mismo izquierdo y derecho. Y también obtenemos el MI 5. Ahora aquí está la cosa. Esto se ve muy bien en esta página. Pero como vemos en el diseño móvil, esa palabra prueba baches justo hasta el borde de la página Q, el contenedor para el auto Espaciado en el diseño. Entonces si agregamos el contenedor de clase div container, y lo cerramos y dejamos caer la prueba de palabras ahí dentro. Prometí que el color verde va a desaparecer en unos minutos. Entonces si dejo caer la prueba de palabras ahí dentro y creo que ahí va. Ahora mira lo que pasa. Observe que arrancó el borde del diseño. El contenedor contiene margen natural y relleno que se encuentran al otro lado del tablero. En cualquier lugar pongo la palabra contenedor. Por lo que con ello se utilizó la palabra contenedor para contener la palabra prueba. Bastante genial. Puedo aprovechar la potencia del contenedor. Por lo que realmente no se ve afectada esta parte hasta que llega a un tamaño cada vez más pequeño y golpea el tamaño. Observe cómo la prueba de palabras no está en ningún lugar cerca del borde de la página. Ese contenedor está dentro de esa caja verde. Entonces si sacamos el verde amarillo, por suerte, la palabra prueba se sienta justo junto con él, y los puntos de ruptura patean por debajo de 750 píxeles. Bastante cool. Ahora haz lo siguiente es quiero agregar el texto dentro del cuadro real. 10. Centro y principal principal de texto: Entonces la prueba de palabras no me está haciendo mucho. En realidad quiero escribir algo de texto aquí. Y como esto es más de empresa de decoración y diseño de interiores, voy a hacer algún tipo de título dentro de la prueba de palabras. Ya que ya hemos usado el H1, esto es más un H2. Debería hacer es H2. Yo uso la frase, todo, haz que tu habitación luzca increíble. Y si lo dejo caer y lo guardo, ahí está. Ahora para el H2 en este caso, sí lo quiero al centro de la página. Si quisiera que cada H2 se centrara, me dirigiera a la costumbre y diría H2 center. En este caso, voy a decir H a clase, y diremos centro de texto. Ahora de nuevo, este es el poder de la parte de centración tecnológica, es que tengo la capacidad de decir tech center, o podría decir texto M o irá LG center. Y lo que va a pasar es, es que si vamos, whoops. Quise decir empezar. Ahí vamos. Inicio es igual a la izquierda. Por lo que la trae de vuelta al lado izquierdo. Cualquier cosa por encima y la grande y luego por debajo del gran kickback al móvil primero o centrado. Entonces si vuelvo aquí, si vuelvo y vuelvo, Ahí va. Ahora el texto se remonta al centro en el medio o más pequeño. Y sabemos que el medio se pone en marcha porque entra la parte móvil. Todo se ve fantástico. Ahora para mí, sí quiero mantenerlo Tech Center por lo que eliminaré el texto Inicio LG. En este caso. Una vez que guardo, vuelve a estar en medio de la página. Después de la H2, voy a sumar una ventaja. El plomo es donde puedes tener un párrafo de apertura en tu diseño. Ya que no tengo ningún texto, soy un traer lorem ipsum a este diseño. Por lo que voy a decir p clase lead en este párrafo. Y tengo una extensión incorporada en VS Code. O si empiezo a escribir lorem, puedo decir bajarlos y simplemente decir Laura ellos. 25, pulsa la tecla de retorno. Y pone en 25 palabras. Si guardo esto, ahí está. Ahí está mi texto de Lorem Ipsum ahí mismo. Por lo que el plomo hace que el tipo sea más grande y agrega un peso más delgado por defecto. Echemos un vistazo a eso versus el diseño del párrafo predeterminado. Y puedo teclear lorem, dejarlo caer, guardar. Y note cómo el plomo se ve un poco diferente al honorable párrafo dentro de Bootstrap. Para fines de diseño, me gusta tener tres, así que voy a caer en un párrafo más. Y solo podemos ver las diferencias. Voy a golpear la llave de retorno sólo para separar las tres piezas. Y ahora tengo tres bits de texto. Y tenga en cuenta también que el espaciado por encima de este H2 y por debajo de este H2 es exactamente el mismo. Me gusta usar la palabra plomo, que está dentro de Bootstrap 5 para simplemente tirar poco peso para que tu ojo vaya, Hey, H2 primero, leed segundo, y luego el párrafo normal, tercero, cuarto, y así sucesivamente y así sucesivamente. 11. Los iconos de pie pie y bootstrap: Por lo que tenemos la parte superior del diseño hecho navegación y el héroe. También hemos agregado algún texto dentro de nuestra sección principal. Y el último paso es agregar el pie de página al diseño en la parte inferior. Entonces quiero hacer es después de la principal, voy a añadir pie de página. Voy a decir pie de página. Déjalo caer. Solo escribamos la prueba de palabras para ahora mismo para asegurarnos de que se sienta en la parte inferior de la página. Y ahí está. Lo que quería hacer con este diseño como quiero asegurarme de tener espaciado dentro de este pie de página. Y también quiero agregar algo de coloración al diseño también. Entonces voy a añadir un color de fondo al pie de página. Dentro de mi costumbre, me uní, puse el pie de página después de todo mi código y antes de la consulta de medios. Entonces voy a decir pie de página. Y aquí dentro, no pie de página, p, sólo pie de página. Y abrir y cerrar los corchetes rizados. Y voy a decir color de fondo. Y de qué color voy a usar, voy a decidir es sólo un gris oscuro. Entonces voy a decir color de fondo y voy a decir libra signo slash hashtag 333. Eso me da una franja marrón oscuro, en realidad gris oscuro, no de color marrón. Apenas se veía un poco marrón en la pantalla durante 1 segundo. Perfecto. Tengo la palabra test, es marrón. Hemos agregado algunos márgenes en el pasado en nuestro diseño, pero ahora quiero agregar relleno para mi espaciado. Entonces si volvemos al índice, usamos el Emax en este diseño y arriba también. Utilizamos la MS M es para margen, S es para arranque y auto. Entonces lo que quería a continuación es que no quiero usar margen, quiero usar relleno. Entonces con este diseño dentro de mi pie de página, lo que voy a hacer es quiero decir clase. Aquí vamos y decimos relleno y, pero la parte superior e inferior y le damos un máximo de cinco. Y cuando guardo esto y refresco, ahora obtengo mucho más espaciado en este diseño. Lo que quiero hacer a continuación es que quiero mover la palabra test a la mitad de la pantalla. Y voy a cambiar la prueba y añadir iconos para redes sociales en la parte inferior de mi página. Entonces lo que voy a hacer es que voy a decir div loops. En lugar de hacer eso, sólo me deshago de todo. Diré clase div. Y como voy a agregar iconos a través de esta página abajo, voy a cambiar el flex de columnas simples como hemos usado aquí arriba, dos filas abajo para una fila de iconos en Bootstrap 5 flex. Entonces voy a decir div class es igual a d flex, flex row. Y como quiero que vaya en medio de la página, voy a decir justifique centro de contenido. Y cuando cierro esto, cada niño individual. Entonces si digo div y diremos test, y si copio esto, ahora estas se van a convertir en filas. Entonces si digo test, test2 y test3. Ahora lo que es más fácil también, hagamos también el color de la fuente sólo para que sea legible. Iba a añadir eso más tarde, pero como estamos aquí de todos modos, vamos a decir color blanco. Ahí vamos. Entonces test, test2 y test3 todos pueden ir dentro de la fila flex. Vamos también a buscar el icono del flujo. Entonces voy a hacer una búsqueda en Google y decir que no iconos flex. ¿ Qué tal los iconos de Bootstrap? Entonces si buscamos los iconos de Bootstrap, surgirá como iconos dot getbootstrap.com. Y esto ha sido subiendo su inversión 1.4. Hay más de 60 iconos meteorológicos. Impresionante. Pero busco iconos de redes sociales y primero voy a empezar con el ícono de Twitter. Entonces lo que quiero hacer es que quiero desplazarme hacia abajo por estos iconos y puedo desplazarme por todos ellos. O simplemente puedo empezar a escribir para filtrar. Y escribiré Twitter, y ahí está. Entonces el ícono de Twitter, puedo copiar este archivo HTML, copiar eso. Y lo que quiero hacer es volver a Visual Studio Code. Y en el índice, voy a sacar estos tres divs y los voy a tener, Vamos a tener los devs sean las filas. Voy a añadir la etiqueta a como fila. Por lo que un HREF, aquí es donde agregarás tu URL de Twitter si tienes una. O en este caso, sólo diré Twitter.com. Y dentro de esta etiqueta, debería, debe alinearse hasta ahí. Su interior de aquí, voy a dejar caer este SVG. Svg también viene con un ancho y alto. Y como sabemos que es un icono cuadrado, puedo cambiar esto por el tamaño que quiera. Para este diseño. Voy a decir 25 y 25, 25, 25, Guardar. Echemos un vistazo. Oye, oh, bueno tipo de eso es porque el SVG toma en cuenta el color del enlace. Y por defecto el color de enlace en Bootstrap 5 es azul y azul oscuro. Cambiemos eso a blanco y luego un blanco roto dentro de esta costumbre, voy a decir pie de página. Y luego una, y luego cambiar el color del enlace a color. Simplemente diremos blanco al principio, por guardarlo. Ahora es blanco, pero va a ese todavía azul oscuro. Entonces quiero hacer es dentro de pie de página a, lo bajaré y diré pie de página un hover y lo cambiaré a un signo de libra de color. No que por lo general aparezca para mí. Bueno, de todos modos, veamos si puedo conseguir algún color para aparecer. Está bien. Fuera del Photoshop vamos usualmente solía darme el color. Probemos eso. Vamos a Photoshop viene pantalla diferente. Déjame probar un blanco por un segundo. Probemos un humo blanco. Ahí vamos. A ver si eso funciona. Sólo dame algo de color Visual Studio Code. Vamos a guardar, refrescar. Y no me encanta ese humo blanco. Entonces tuve que hacer dentro de un Photoshop o cualquiera de tus editores favoritos es si traigo a Photoshop aquí mismo, lo uso solo para elegir un color. Por lo que en Photoshop o cualquier software que quieras usar para nuestro recolector de color, puedo elegir algún tipo de color que sea blanco roto. Por lo que nunca saltaré un gris. Y justo para que traiga algún tipo de tono, éste es DF, DF, y df. Si minimizo el cambio de humo blanco a caer en este color gris. Ahora se ve un poco mejor. Tenemos un cambio de colores para que puedas ver cuando lo vuelvas encima. Perfecto, tenemos el a y el hover. Yo quiero volver y traerlo un poco más. Ya hemos hecho Twitter, así puedo volcar, clic en Twitter y arriba pops Twitter. Y si ahora vuelvo, entonces puedo ir a Instagram o como llamé quiero. En este caso, voy a traer dos iconos. Primero lo traje en Twitter. Ahora voy a traer Instagram, instagram lejos. Buscando Instagram, encontrándolo, copiando el SVG. Entonces lo que haré es volver a bajar después de esto una etiqueta, diré un HREF. Vamos, HREF. Y diremos https colon slash slash Instagram.com. De nuevo, puedes agregar tu manejador de Instagram aquí mismo. Cierro la a etiqueta, dejo caer, sangré e ignoro todos los caminos. lo que me estoy centrando es el ancho de 16 y 16. Yo me voy a quedar con lo mismo al 25, 25, Guardar. Y ahora lo que obtengo son dos iconos y están realmente unidos. Entonces quiero hacer es que quiero agregar un poco más de relleno. Ahora puedo usar una de dos vías. Puedo pad Instagram y empujar desde la izquierda o empujar hacia la izquierda. O puedo empujar el icono de Twitter lejos o de la derecha hacia Instagram. Entonces voy a mirar Twitter. Y arriba en la parte superior de Twitter, lo que busco es la a, y me gusta agregar más espaciado. Por lo que en el área de Twitter, voy a decir un HREF. Y luego después de eso, voy a decir clase igual a relleno final, y voy a decir cuatro. Tendrá un área clicable. Entonces si no quieres que se pueda hacer clic, siempre puedes cambiarlo a m por margen. Entonces el EMI, se quedará igual. Pero ahora no voy a tener un área clicable, así que depende de ti si quieres tener un espacio clicable ahí dentro para relleno o el m para margen y 4. Por lo que el margen lo empuja y gracias al flex, ahora lo mantiene en medio de la página. Ahora que tenemos esta página terminada, vamos a seguir adelante a la página sobre. 12. Preparación de la página sobre la página: Voy a seguir adelante y esconder Chrome. Y lo que quiero hacer es subir al índice HTML y duplicarlo y decir de punto HTML. Voy a traer esto a mi diseño y empiezo a sacar piezas que no necesito. Voy a volver a Chrome, así que no estropees esto. Y sí, se verán igual a primera vista. Entonces lo voy a hacer es sacarlo todo excepto por los diseños de navegación y John Smith y el pie de página abajo. Entonces dentro de mi sobre, voy a ocultar el índice y voy a mantener al cliente arriba en caso de ADUs y el archivo CSS optimizado. Voy a desplazarme hacia abajo, buscar la sección principal. Por eso también me gusta usar la palabra main porque pueden decir qué sacar y qué no sacar. Voy a sacar todo lo demás excepto la prueba y prueba principal y correcta. Ahí está. Se ve bien. Ahora como estamos en la página sobre, quiero que la navegación se mantenga activa. Y puedo hacer eso dirigiéndome a la navegación y donde dice clase nav link. Voy a decir la palabra activa. Lo que eso va a hacer es que va a convertir la palabra a punto a un color oscuro para delinear la palabra sobre la suma en la página sobre. Y mientras estamos en ello, vamos a añadir la palabra acerca a nuestro título de nuestra página también. Entonces si me desplazo hacia arriba la línea 13 de Mine, buscando el título de la palabra, voy a decir la palabra sobre línea vertical y luego hola mundo cambiará esto una vez que estemos todos terminados. Pero por ahora mismo lo mantendremos simple. Y diré sobre HelloWorld. Enfriar. Tenemos nuestro título y tenemos el sobre estar activos y nuestra navegación. Ahora es el momento de traer algún contenido. En esta página Acerca de. 13. Acerca de el contenido de página con flotaciones y overflow: Ahora es el momento de agregar contenido a esta página Acerca de la página. Y además del texto para esto sobre personas, imaginario John Smith, persona, quiero traer una foto de John Smith. Tengo una foto aquí mismo. Voy a traer yo voy a traer este. Voy a copiar desde la pantalla frontal y traer el retrato de John Smith. Nota, este diseño es un diseño cuadrado. Yo quería usar eso. Por lo que voy a traer la plaza tanto como un diseño móvil como un escritorio diseñado para ser redimensionado. Y así sentí que la plaza era más apropiada para el diseño. Depende de ti cómo quieras lograr eso. Pero para mi diseño, estamos usando el icono cuadrado para que eventualmente se use el retrato de John Smith. Lo que quiero hacer aquí es dentro de esa sección principal, ¿dónde está? Voy a traer ese solo Call, Saúl, digamos que la clase div es igual a una sola llamada. Y un par de cosas que quiero leer, traer el auto MX, y quiero traer un par de cosas diferentes también. Yo quiero bajarlo por la página. Entonces voy a decir MI para margen superior e inferior. Voy a decir dos porque ya no tenemos ese gráfico de héroe. Y sentí que cuando lo diseñé para algo más grande, quiero decir MI m d Por lo que quiero decir con esto es, y te lo volveremos a mostrar. Es si digo la prueba de palabras, observe cómo se sienta la prueba de palabras en esta página. Eso se debe a que está sentado a un cuatro en el espaciado. No obstante, cuando llego a un sitio móvil, me di cuenta de que estaba un poco demasiado lejos, así que va a patear un poco más arriba en la tableta móvil slash pequeño y mediano o la pequeña, discúlpame y di T2. Entonces por eso dije dos Vs por. Finalmente cae un poco más bajo. Y entonces estamos todos a punto de ir. Perfecto. Lo siguiente que quiero hacer entonces es agregar una clase div igual a contenedor, no contacto. Y asegurándose de que el div se cierre. Y quiero añadir una pieza más porque voy a añadir un flotador a esta imagen. Y las carrozas necesitan ocultas para que no flote fuera de la página. Por lo que en este caso, Bootstrap 5 tiene algo llamado desbordamiento oculto. Por lo que puedo cambiar mi desbordamiento a oculto, con ello se asegura de que la imagen permanezca en la página. No va sobre fluyendo sobre el div. El cuadro va a flotar alrededor del texto y luego parar y no flotar una vez que lleguemos a un diseño móvil. Entonces en este caso, dentro de este contenedor clase div desbordamiento oculto, voy a decir H1, decir de John Smith. Y aquí dentro diré H1. Voy a sumar una ventaja. Por lo que p Clase lidera y trae en nuestro siempre famoso Lorem Ipsum escribiendo lorem. Y diremos 25, va a larga intro. Ahí está. Y si guardo eso, Ahí se trata de John Smith. Y si subimos y bajamos la página, puede decir que se acerca un poco y luego nos separaremos más en base al diseño. Bastante cool. Por lo que después de esta área, bajo esta sección P, voy a añadir otro párrafo de tipo. Y agregaremos Lorem Ipsum. Y vamos a añadir un párrafo más de tipo para indicar quién va a tener bien, ya sabes qué, vamos a asegurarnos de que tenga tres párrafos. Entonces lo guardamos. Y ahí está. Yo quiero hacer a continuación es que quiero llevar una foto hasta arriba a la derecha. No obstante, si el texto no va tan lejos por la página, quería asegurarme de que la imagen no sangra en el pie de página porque vamos a usar algo llamado float, ¿verdad? Entonces lo que voy a hacer es después de la ventaja, voy a decir p apertura cerca. Y si solo decimos fuente de imagen por su cuenta, decimos imágenes y retrato de John Smith, y decimos alt o viaje de John Smith. Y si cierro esto, mira lo que pasa ¿A aliviar gigante? Eso es genial. Pero si lo piensas, no quiero que sea tan grande porque quiero que sea lo suficientemente pequeño como para caber en este lado derecho. Entonces tengo que asegurarme de que esta imagen también refluya, cosa que sí, pero quiero un más pequeño cuando realmente fluye. Entonces voy a hacer un par de cosas. En primer lugar, quiero que esta imagen sea una altura máxima de 300 por 300. Voy a decir que ancho es igual a 300. Y una altura de 300. Y se ve bastante bien. Ahí hay enorme solo escalofriante en este tamaño justo aquí. Lo que a continuación quiero hacer es que quiero posicionarlo al centro cuando no estoy flotando. Entonces lo que voy a hacer es que voy a decir p clase centro de texto. Perfecto. Entonces toda la idea es que cuando no está flotando por aquí en el lado derecho, está fijo al diseño. Esto es más lo que quiero hacer cuando llegue al sitio móvil. Y como Bootstrap es móvil primero, es por eso que quería lucir como cuando les golpeo, Mobile framework se ve realmente bien. Tenemos diseños de John Smith arriba y abajo para nuestra navegación sobre John Smith una ventaja. Y tenemos esta carita sonriente en un campo de trigo y todo el cuadro y el sol detrás también. Entonces se ve bien aquí, pero no los quiero en el centro. Yo quiero que el texto fluya a su alrededor en un diseño no móvil. Entonces esto es lo que vamos a hacer. Vamos a añadir un par de cosas diferentes a esta imagen. Dentro de esta imagen, voy a bajar la fuente sólo por legibilidad. Bajaré el ancho, bajaré la altura, y bajaré el Alt. Y vamos a caer eso también sólo para que estemos en la alineación. Lo que a continuación quiero hacer es añadir una clase. Entonces voy a añadir una clase y voy a decir float, MD end. Pero también me aseguro de que no flote cuando golpeo el pequeño o más pequeño. Entonces diré flotar ninguno y luego flotar MD final. Entonces lo que va a pasar es que el final es como la derecha frente a la izquierda. Entonces esos 0s que escribimos antes están por n slash derecha. Entonces si guardo esto, ahora lo que pasa es anotar cómo el texto se sienta a la izquierda de esta imagen. Y si no teníamos el desbordamiento oculto, aquí es donde surge el problema. Aunque. Simplemente flota un poco y luego ese pie de página aparece en tu diseño cuando estás escribiendo tu sobre sección, es posible que no tengas este problema. Podría tener suficiente texto, pero yo pongo eso en caso de que sí tenga un problema. Bootstrap 5 proporciona desbordamiento oculto por defecto en su diseño. Por lo que de esa manera atrapa el fondo. Y que M Y2 o MY para, atrapa la parte superior y la inferior con éxito en nuestro diseño. Al igual que eso, tenemos nuestra página sobre terminada y se ve bastante bien. Y podemos probar para asegurarnos de que esté funcionando refrescando la página. Y entonces puedo apretar este botón. Y se sienta todavía en medio del diseño sin preocupaciones de que flote hacia la derecha porque lo detuvimos flotando a cierto tamaño. Por lo que no hay ninguno para el flotador en más pequeño o más grande. Por eso puse ahí el SSM para atraparlo. Y como el valor predeterminado no es flotante, podría decir flotar ninguno y seguiría funcionando. Pero sólo porque para mí, el predeterminado y el móvil ya no es ninguno. Por lo que escribí DSM para asegurarme de que atrapa a cierto tamaño. Entonces por defecto debajo del MD, se almacenará en caché para monitorizar lo que me gustaría decir SM porque sé que va de medio a pequeño en ese sentido, en ese instante. 14. La cuadrícula: Impresionante. Terminamos la página sobre. A continuación, quiero pasar a la sección de portafolio. Voy a cerrar estos dos HelloWorld sólo por ahora mismo. Voy a llegar a un proyecto nuevo. Voy a duplicar el sobre. Por lo que vamos de sobre copia dos portafolio. Y si puedo escribir portafolio correctamente, bajarlo a mi código, voy a deshacerme de todo el contenido extra que tenía para mi página sobre. Entonces donde dice principal, me voy a deshacer del div a div y sólo decir la palabra prueba, guardar. Y volvamos a arrastrar cartera. Perfecto. Entonces ahora tengo cartera, así que voy a cambiar la palabra un top de alrededor de dos portafolio. Y aquí arriba, llego a la cima, cambiaré la palabra sobre dos portafolio. Ahora para este proyecto, lo que quiero hacer en esta sección, oops, también tengo que crear el activo en el portafolio desde el alrededor también. Entonces aquí voy a desplazarme hacia abajo, sacar la palabra activa de la palabra sobre y poner la palabra activa en el portafolio. Yo refresco la página, estamos en la página de Portafolio y la página de portafolio. Entonces si miramos hacia atrás, si volvemos a nuestra página de inicio, realmente teníamos un diseño de una columna en esta página. Y teníamos un diseño de una columna en la página sobre en el portafolio. No quiero diseñar de tres columnas que cuando se trata del escritorio. Quiero un diseño de dos columnas cuando se trata del diseño de la tableta. Y quiero, por supuesto, 100% o un ancho de columna completo cuando se trata del móvil. El poder de Bootstrap, que posiblemente es una de las herramientas más poderosas de su arsenal, es la red. Si nos dirigimos a Instagram, Vayamos a getbootstrap. Y aquí dentro, voy a ir a empezar. Y lo que busco es la grilla, porque esta es la herramienta más poderosa que llegamos a usar dentro de Bootstrap. Y la grilla va así. El cuadrícula funciona al tener una fila y una serie de columnas. Entonces si tecleamos en fila y col tres veces, vamos a conseguir una cuadrícula de tres columnas. Entonces si vengo aquí a mi sección principal, voy a escribir div class igual a fila. Y debió haber atrapado al div cercano. Ahí va. Y después de eso voy a escribir clase div. Y diremos llamada, igual que tiene aquí. Entonces si voy a llamar, voy a decir columna 1, y voy a duplicar esto. Dos, columna dos. Y luego la columna tres. Si guardo esto y vuelvo a portafolio hola mundo, tengo columna 1, columna 2, columna 3. Algo que también tengo que añadir es que también tengo que añadir un contenedor porque eso va a sumar todos nuestros puntos de ruptura. Ahora mismo sin contenedor, simplemente se mueve en una dirección de forma libre. Entonces en esta zona, voy a cortar la fila, ¿no? Whoa, no tan lejos. Vuelve. Ahí vamos. Y voy a añadir un contenedor a este diseño. Entonces diré que la clase div es igual a contenedor y caer en mis filas. Lo que quiero que pase es perfecto, esto se alinea y esta alianza columna 1, 2, 3. El problema sin embargo, si solo escribimos las columnas es, es que no funciona dentro de los puntos de ruptura del contenedor. Aviso de nuevo, tenemos nuestro desplegable para nuestro menú móvil. De forma predeterminada, si acabas de empezar a escribir columnas, agregarás columnas hasta que te quedes sin espacio. En cuanto a cuántas columnas puedes poner a través de la página. El grid funciona en un sistema de 12 columnas. Entonces para mí esto no tiene puntos de ruptura que decir a dónde quiere ir. Entonces en cuanto a una grilla, voy a escribir sólo para mostrar algo. Voy a decir col 12. Llama a 12, termina col 12. Mira lo que pasa cuando escribo 12, 12 y 12 junto a las llamadas. Desciende hasta una línea vertical. Eso es porque imagina que tenemos 12 columnas viniendo a través de esta página. Digo que para esta primera columna, llene 12 de esas 12 columnas. 12 dividido por 12 es igual al 100%. Probemos algo diferente. Añadamos un nuevo punto de ruptura porque ahora mismo en Bootstrap 5, este es nuestro tamaño móvil. Entonces cuando llegue al marco Móvil, siempre va a ser 12 de cada 12 llamadas o 100% a través. Digamos que golpeamos el tamaño mediano que queríamos coseno 50 por ciento, 50 por ciento. Entonces lo que voy a hacer es que voy a decir llamada. Dash AMD y 50 por ciento va a ser 6 o 6 dividido por 12 equivale a 50 por ciento. Entonces si digo col md seis, col md seis, y col md seis sin espaciamiento doble. Déjame guardar esto. Déjame empezar de nuevo con el menú móvil. Déjame refrescar esta página y ahora ver qué pasa. Si golpeo el pequeño, ahora golpeo el medio. Observe cómo es 666. Entonces la columna uno, columna dos, columna tres cae abajo porque va más allá de las 12 columnas. Eso está totalmente bien. Y cuando voy más lejos, se queda en una capacidad del 50 por ciento. Bueno, cuando voy XL grande y doble XL, quiero un diseño de tres columnas. Entonces con ello lo que voy a hacer es que voy a decir llamar a LG. Y si quiero tres columnas, 12 divididas por 3 es 4. Entonces voy a decir, oops, vuelve a la de arriba también. Voy a copiar este. Y así tengo móvil a las 12, medio, a las seis y grande y arriba a las cuatro. No olvidemos el último. Ahí vamos. Ahora mira lo que pasa. Ahora tengo columna uno, columna dos, columna tres en cuatro columnas. No obstante, caí y bajé al medio. Ahora le pego al 50 por ciento y ahora le pego al 100% o le pego a un menú móvil. El grid tiene muchas herramientas poderosas, pero 12 no uso casi en absoluto es que la llamo las columnas DOM donde solo están sentadas ahí solas. Si crea tres columnas iguales, pero no tiene ningún punto de ruptura adjunto a ella. Por lo que puedo usar toda una combinación de diferentes herramientas. Pero yo uso el poder del exceso se ha ido. Pero uso el SM, MMD, LG XL y doble XL para establecer esencialmente los puntos de ruptura de mi columna. Y así es como uso el guión col, la llamada SM. Yo uso el col md, o tenemos columna D guión número de columnas. Y luego uso el col dash LG para decir por encima de ese número, ponerlos todos en ese diseño. Y esa es tu elección cuando se trata de una cuadrícula, puedes usar cualquier combinación. El motivo por el que me gusta cuando usan 12 como mis 12 columnas es que puedes dividir eso por 2, tres, o seis. Y por supuesto 12, dándote una amplia flexibilidad. Ahora bien, no tienes que usar sólo esos números si quieres hacer diseños un poco diferentes. Digamos que queremos que la columna media sea realmente, realmente grande y las otras dos sean realmente, muy pequeñas. En tanto llegue a los 12, estoy en forma. Entonces digamos que queremos hacer el medio 110. Y luego haremos el top 11. Y este 1110 más uno, más uno es igual a 12. Cuando guardo esto y vuelvo, si vuelvo a ese diseño medio. Ahora vamos a ver, y el texto es tan pequeño. Tomemos eso de vuelta. Es una columna tan pequeña que no podemos leer la columna uno. Digamos sólo dos. Haremos ocho. Y luego dos otra vez. Ahí vamos. Observe cuánta más pequeña es la columna uno. La columna dos es mucho más amplia. Y la columna 3 nuevamente es tan pequeña como la columna uno. Siempre y cuando mis números sumen 12. Puedo atravesar este diseño. Por supuesto que los quiero todos igual para mi diseño. Entonces voy a volver al 666, pero este es el poder de la rejilla Bootstrap. El motivo por el que usar una cuadrícula es que quiero arreglarla en su lugar. El Flex era más para posicionar cosas que ciertas posiciones dentro de un espacio. Y la cuadrícula está diseñada para organizar las cosas de manera uniforme o para crear una barra lateral al contenido principal. De verdad empecé desde el principio con una grilla para la mayoría de mis proyectos. Y este proyecto aquí mismo no es la excepción. Ahora que tenemos nuestra grilla en su lugar. Columna uno, columna dos, columna tres, Sigamos adelante y traigamos algunas tarjetas y añadamos algo de contenido a este portafolio. 15. Bootstrap 5 cartas: Entonces lo que quiero hacer a continuación es que quiero traer algunas cartas. Y como se ven las tarjetas es si bajamos al contenido o en la sección de componentes, busco la tarjeta de palabras. Y todo un carrito es básicamente proporciona un contenedor de contenido flexible y extensible con múltiples variantes y opciones. Quién esa es una definición realmente, realmente vaga. se ve una tarjeta es esta imagen en la parte superior, título de la tarjeta algún texto y un botón. Sigamos adelante y construyamos esto. Y lo mejor de las tarjetas es que llenan el espacio de su padre. Lo que eso significa es que las tarjetas se ajustarán en función del tamaño. El retículo. Ahí ejemplo en getboostrap es bueno, pero establecieron un estilo en línea a un ancho de 18 RAM. Y eso está bien, pero quiero hacer algo diferente. Voy a tomar las cartas y me voy, vale, construyámoslo fuera llena el espacio del padre. Entonces, ¿cómo vamos a escribir la tarjeta? Entonces si bajamos aquí a la columna 1, voy a sacar la columna uno. Y lo que voy a hacer es que voy a decir div class iguala tarjeta. Abre y cierra ese carrito. Déjame también hacer hola mundo con sólo mirar la tarjeta en tarjeta dos veces. Y la primera pieza de la tarjeta es que quiero traer una foto. Entonces lo voy a hacer es que voy a venir a esta carpeta. Ya tengo una carpeta de imágenes existente aquí. Voy a agarrar unos comedores más pequeños y arrastrarlo a mi carpeta de imágenes. También voy a agarrar la oficina más pequeña y arrastrar eso a mi carpeta de imágenes. Y también una zona de estar, cuadro más pequeño. Vamos a arrastrar eso. Entonces tengo esas tres fotos porque las tarjetas en las fotos van primero. Tengo que traer el cuadro desde el principio. Entonces lo que voy a hacer es que voy a decir IMG, SRC. Y traeremos imágenes y agarraremos los comedores más pequeños punto JPG. No olvides darle un alt tags. Diremos Alt y diremos comedor. Y después de eso tengo que añadir una clase porque quiero que el auto ajuste o quiero que la imagen se ajuste a la tarjeta. En este caso, diré que clase es igual a tarjeta, IMG top. Y si cerramos nuestra tarjeta, Lo que también es útil son los códigos VS como si algo anda mal. Tienes este brillante div rojo aquí. Voy a cerrar la tarjeta. Y ahí está la imagen. Observe cómo se curva la tarjeta alrededor de esas esquinas redondeadas. Y como no tenemos otro contenido, la curvatura estará en la parte inferior también. Pero quiero agregar algún contenido o quiero agregar alguna información al cuerpo de la tarjeta. Entonces después de la parte superior de la tarjeta, lo que voy a hacer es div class igual cuerpo de la tarjeta para establecer la parte del cuerpo del carro. Ahora, Bootstrap sí recomienda el h5, así que me voy a quedar con el h5. clase H5 es igual al título de la tarjeta. Y aquí dentro voy a decir comedor. Nota puedes usar lo que sea hg18 o un párrafo si lo deseas. Simplemente estoy bien. Las reglas que Bootstrap recomienda usar el H5 en la sección de tarjetas. Después de este que voy a hacer es voy a añadir una clase p igual texto de tarjeta. Y nuestro viejo fan, el señor Lorem Ipsum, así que diremos lorem 20 y trayendo un párrafo de 20 palabras. Y si guardo esto, ahora lo que consigo es el comedor con el texto Lorem Ipsum. Ahora lo que quiero durar es que tengo que tener un llamado a la acción o un lugar para que la persona haga clic en un botón para ver más de este comedor. Y cuando hagamos eso es que voy a usar el botón Bootstrap. 16. Botones de Bootstrap: Yo quiero parar y echar un vistazo al Bootstrap, pero voy a volver a subir a la sección getbootstrap. Y si bajamos al área de componentes en getbootstrap, voy a dirigirme a los botones. Quiero mostrarte todas las combinaciones de botones que llegues a usar. Y el que quiero usar para este proyecto. Por lo que los botones son geniales porque crean una forma uniforme de llamar la atención. Ya es esquinas redondeadas y tiene una serie de colores. Por lo que por defecto, hay que agregar tanto el btn para identificar el botón y luego la elección de colores. Después de eso. Los colores son uniformes dentro de getbootstrap. La primaria es azul, la secundaria es gris, aciertos verde. El peligro por supuesto es rojo, la advertencia es amarilla. El info es este tipo de color turquesa. Y obtienes luz, oscura, y por supuesto, nada más que un eslabón si ese es el caso que quieres tener. Casi nunca uso el enlace porque un enlace es realmente sólo enlace. Realmente uso tres de estos, principalmente, la primaria para el azul porque el azul indica que es un color de enlace cuando se trata de la web. Y luego si no uso primaria, generalmente uso claro u oscuro para rellenar mi diseño. Ya que tengo más de este diseño de decoración de interiores en blanco y negro en este proyecto, voy a ir con la luz y la oscuridad. Pero aquí está la parte genial. A mí. A mí me gusta la oscuridad, pero sentí que el botón simplemente sería demasiado fuerte en esta página. Si me desplazo hacia abajo, también obtienes no solo tus botones normales, sino y te vinculan pero un sí importante, eso es para un formulario. Pero también obtienes los botones de contorno. Me encanta éste porque éste es poderoso, no ser demasiado poderoso. lo que me refiero con un poderoso, como puedes ver estos botones, pero estos son casi tan fuertes con todo color pasando. Por lo que quiero la capacidad para que el usuario sepa entonces dónde hacer clic. 17. Gutas) Gutters: Para ver el efecto completo de las canaletas funcionando, vamos a traer dos columnas más de información. Entonces lo que voy a hacer es que voy a copiar esta tarjeta de tarjeta a tarjeta. No necesito copiar las columnas porque ya están ahí. Y lo dejaré caer, y lo dejaré caer en la columna tres. No conseguí el C. capitalino Así que ahora lo que tengo o comedor, comedor, y comedor. Cambiemos eso para incluir también la oficina. Entonces voy a cambiar el del medio por no comedores más pequeños, sino oficina más pequeña. Y todos dicen oficina. Ahora cuando llegue es la oficina y el cuerpo de la tarjeta, me cambiaré a cargo. Y ha cambiado. Y cambiaré la última a la sala de estar. Entonces copiaré esa URL o más bien el nombre del archivo. Y cambiaré las áreas de estar más pequeñas a la de estar y sacaré la sala de palabras. Y por supuesto, duplicaré el área de estar a área de estar para el H5. Ahora cuando tengo son tres columnas. Por lo que tenga en cuenta las canaletas dentro del diseño. Y esto también es importante Porque cuando volteo esto a móvil, pero también sucede es notar lo abarrotado que se pone este espacio entre las diferentes tarjetas y la cuadrícula apropiada. Entonces así es como vamos a hacer esto. Si volvemos a subir a la fila, lo que busco es fila de clase div. Voy a decir primero, quiero algo de margen superior. Entonces quiero un poco más de espacio entre esta zona aquí arriba. Entonces voy a decir remar, oh, ya sabes, y también me olvidé, me olvidé de nuestra H1. Dispara. Estaba tan emocionado con el portafolio. Olvidé totalmente poner el título de esta página, digamos uno. Y mi portafolio. Eso es lo que era para mí. Esto estaba un poco lleno cuando tenía el H1. Entonces eso es lo que iba a hacer está vacío para el margen superior uno. Ahí vamos. Tan solo un poco de espacio extra pasando. Entonces después de la fila con margen superior uno, voy a añadir una letra g y decir m, D3. Entonces aquí voy a decir G para canaleta a la talla mediana, quiero que tenga un tres. Cuando se trata de espaciar. Sólo un poco más de espacio aquí. Pero fíjate ahora mismo aquí en que el espaciado es parejo e incluso a través de los cuatro lados. Ahora para mí, cuando voy al móvil, no necesito tanto espacio que ahora mismo entonces por supuesto no hay espacio porque solo golpea el medio y más grande. Entonces si dijera G3, esto iría móvil arriba. Y para mí hay espacio. Pero cuando se trata de un diseño móvil, siempre estoy considerando cómo puedo comprimir o acercar las cosas lo más cerca posible. Y así para mí, lo que quiero hacer es querer quedarme con M D3, pero quiero decir, Gee, T2. Y traeré el g2 del otro lado. Prefiero ir móvil primero y luego MMD, LG XL, doble XL mientras cruzo y subo, Depende de ti. No importa de qué manera los coloques porque funcionará pase lo que pase. Pero quiero que el móvil sea dos y luego pequeño a B2 y luego md a ser tres. Si refresco esta página , sólo la acerca un poco. Estoy pensando en cómo puedo comprimir o poner las cosas lo más cerca posible en el lado móvil. Cuando le pegue a la pequeña, Se va a quedar también. Pero cuando golpee el medio, va a caer a tres por un poco más de canaleta dentro de este diseño. Ahora por supuesto, la parte inferior no son canaletas. Es la zona media es la canaleta. Por lo que tengo que añadir un poco más de espacio dentro de mi diseño. Entonces lo que voy a hacer es dentro del contenedor, voy a establecer margen. Por qué para la parte superior e inferior a dos. Y entonces cuando yo también quiero hacer es que voy a decir relleno. ¿Por qué? Quiero un poco de relleno extra cuando se trata de la mediana y más grande. Entonces voy a decir agregar medio para. Y eso me da un poco más de espacio para respirar cuando se trata de portafolio en este diseño. Y baja un poco aquí mismo. Por lo que mi portafolio se sienta un poco fuera del título. Y ahora todo se mueve y funciona con éxito. Para su diseño. Es posible que desee aumentar o disminuir las canaletas. Puedes ir por supuesto de uno a cinco y sacarlo por completo. Entonces si digo, no quiero canaletas, puedo decir 0 y van a chocar juntos. Eso está totalmente bien. Si quieres que las fotos estén justo al lado de la otra, entonces usa 0. Si quieres que estén más separados, di cinco. Y ahora se separan. Para mí el número tres estaba justo en el medio donde me dio suficiente espacio en K me suficiente espacio entre ellos. ¿ Dónde está el número seis? Ahí está. Y a lo largo de este viaje, todo es receptivo. Siempre que uso MDL, GSM XL, y doble XL, todo se vuelve receptivo. Y protagonizo con el móvil primero, móvil primero y subo dos medios, en este caso, el móvil primero, mediano, grande. Este es el poder de las canaletas y el diseño responsive de Bootstrap. En general. 18. Configuración de la página de contacto: Hemos logrado mucho. Tenemos nuestra página de inicio, tenemos nuestra página sobre terminada, tenemos una configuración de página de cartera. Y si quieres ir más allá, eres bienvenido para crear estos Conoce más secciones. La última página en la que queremos trabajar es la página de contacto. No voy a dar click en eso bastante todavía porque se va a estrellar. Entonces vamos por aquí y duplicemos nuestra página de portafolio. Y vamos a decir contacto. Y bajaremos la página de contacto a continuación. Y cambiaremos nuestra cartera de formularios de navegación activa. Para contactar activo. Voy a sacar todo lo demás que no necesito, incluyendo este div abajo. Entonces empezaré con el div y sacaré el segundo alas div. Ahí vamos. Mantendré el contenedor en mi cartera debería decir contactarme. Entonces diré contacto. Contáctame. Ahora puedo dar click en Contactar, y ahora va a funcionar. Esto se ve bien. Y si su diseño está demasiado abajo, podría volver a la m Y2 por ahora mismo. Ahí va, trae un poco más arriba. Si por ti, eres como, Sabes qué, esto se ve un poco demasiado abajo, entonces tráelo de nuevo arriba. Entonces para mi diseño, ya que las carteras un poco más ocupadas, decidí bajar una. Y para este diseño, así es solo un contacto. Voy a traerlo de nuevo. Ahora estamos todos a punto de trabajar en la página de contacto. Ah, una cosa más. Portafolio casi se perdió eso. Una última sección. Casi iba a presidir casi demasiado rápido, digamos contactarme. Y ahora nuestro título dice contactarme. Contáctame y tenemos el activo en su lugar en nuestro diseño. Ahora sigamos adelante y construyamos una cuadrícula de dos columnas. Agregaremos algunas características de contacto y construiremos un formulario dentro de esta página de contacto. 19. Agregar detalles de contacto: Entonces después de esto, tengo que crear una fila y añadir algunas canaletas. Entonces abajo, volvemos abajo buscando nuestro contactarme. Voy a armar una fila. Entonces voy a decir div class es igual a fila y darle un G5 en una, dado mucho espacio en este diseño. Y sólo para que tengamos un apropiado, voy a decir 66 y voy a usar el medio para identificar este. Entonces voy a decir div clase col md seis. Y diré columna 1. Y duplicaré esto para la columna dos. Y diremos columna para guardar refrescar columna uno, columna dos. Impresionante. Esta columna del lado izquierdo, o el inicio en Bootstrap 5 es que nos estamos deshaciendo de la izquierda y la derecha y ahora estamos metiendo más en inicio y fin. Entonces esta columna uno por aquí, voy a decir párrafo. Ah, ¿cómo hacer eso? Eso es interesante. Párrafo y traerles un Lorem Ipsum, digamos brazo inferior de 25, un poco de como contactarme. Guardar. Ahí hay un poco de información sobre la persona y cómo contactar con ellos. Y luego agregaré tanto un número de teléfono como un correo electrónico. Entonces diré que el teléfono va a ser código de área. Usaré mi número de San Francisco para 15 por 55. 55. 55. Perfecto. Ahí vamos. Y luego abajo, voy a agregar una dirección de correo electrónico. Diré que eres bienvenido. Envíame un correo electrónico. Y diremos John Smith sombrero diseños de John Smith. Por favor, no envíes esto por correo electrónico porque en teoría, alguien podría tener esta dirección de correo electrónico. Así que solo asegúrate de que esto sea solo un e-mail ficticio. Entonces si lo guardo por defecto, aparece, pero quiero enlazar este correo electrónico. Entonces voy a cortar esto por un segundo. Voy a dejar caer un HREF igual. Y si eres nuevo en escribir correos electrónicos, tenemos que decir masculino 2, colon, caer en el e-mail y ponerlo de nuevo dentro de la etiqueta a. Y lo que pasa es que ahora se convierte en un enlace en el que puedo hacer clic para luego enviar un correo electrónico a John Smith. Diseños de John Smith. Totalmente cool, luce y bien. Ahora es el momento de agregar el formulario en el lado derecho. 20. Configuración de la forma: Está bien. Entonces tenemos la información para el teléfono y el correo electrónico. Y este otro lado aquí a la derecha, voy a añadir un formulario a este diseño. Entonces en la columna 2, lo voy a sacar y decir forma. Bueno eso es un más detalles después, pero por ahora nos quedaremos con el diseño básico de la forma. Todo formado inicio y final con la forma abierta y la forma cerrada. Y este diseño, voy a crear dos columnas para el FirstName, LastName, hacer una columna para el correo electrónico, y luego solo un área de texto para algunos comentarios. Entonces nada demasiado loco de esta forma. Entonces lo voy a hacer es primero crear filas y columnas para que esto funcione. Entonces diré fila clase div. Y ten en cuenta que pretenden que se trata de un 100 por ciento porque se trata de una grilla totalmente nueva. Dentro de una rejilla, los padres 50%, pero dentro de ella seguimos en un 100 por ciento. Entonces en este caso voy a decir div class row. Y dentro aquí voy a añadir una cuadrícula de seis columnas clase div. Y dice que nos estamos quedando con el formato medio. Yo diré col, md seis. Y ahora voy a decir la columna 1 solo para asegurarme de que esté funcionando. Y voy a duplicar esto. Y tengo columna uno bucles y columna 2. Ahí vamos. Por lo que tengo un diseño de dos columnas para mi formulario. Entonces en la columna uno, lo que voy a hacer es que voy a decir etiqueta. Siempre olvido que hago eso. La ropa no viene con ella. Ahí vamos. Por lo que esta etiqueta va a ser 4 nombre de pila. Y verás por qué esto es importante para conectar la etiqueta con el campo de entrada y el segundo. Y entonces la clase va a ser, esto es de bootstrap, etiqueta de formulario. Y dentro de la etiqueta diré nombre. Después de esto. Yo entonces quiero traer un insumo. Por lo que necesito poner información de entrada en este formulario. El tipo sólo va a ser texto. El nombre, vamos a decir es nombre de pila. Y la clase que vamos a decir es forma, control de guión. Y un IED va a coincidir con la palabra cuatro. Entonces diré que id es igual a nombre de pila. Por lo que uso N mayúscula para la segunda palabra para identificar también el ID. Ten en cuenta que no puedes tener el mismo DNI dos veces en una página. Entonces estamos bien ahí. Y ahora cuando guardo esto, lo que consigo es FirstName, cool. Y puedo escribir mi nombre ahí mismo. La segunda columna que voy a decir es LastName. Entonces lo que voy a hacer es duplicar este mismo estilo y arrastrarlo o copiar y pegar y decir apellido, apellido a apellido, nombre. Te mostraré un poco por qué vamos a usar esto. Diremos apellido y diremos apellido. Ahora lo que obtengo es FirstName, LastName. Dado que las direcciones de correo electrónico son más largas que normalmente los nombres y apellidos de las personas. Voy a escribir el correo electrónico en todo el campo. Entonces como no necesitamos usar 66, tenemos que usar 12 o llamar al 12. Entonces después de esta sección de este div a este div, voy a decir clase div y diremos col 12. Entonces, sin importar con qué punto de ruptura se trabaje, siempre será un 100 por ciento de esta parte de la columna. Y sólo una prueba fuera. Voy a decir la prueba de palabras, dejarla caer y ahora ver qué pasa. Así que ten en cuenta que todo se mueve. Si esto está demasiado cerca en tu diseño, posible que quieras decir pequeño go 12. Entonces podría querer decir en este caso, llamar a SM 12, o simplemente decir col 12 en este caso. Y ahora lo que va a pasar es, oops, tengo que decir llama a SM 12. Y dejaremos caer eso. Y dejaremos caer eso. Bueno, eso es medio. Sabes qué, tal vez deberíamos ir a lo grande. Yo me lo devolvería. Mirándolo. Podríamos necesitar hacer un diseño grande en este caso. Entonces, ¿sabes qué? En realidad digamos que no M d2, creo que deberíamos decir grande 12 porque ese se pone un poco abarrotado en el medio. Entonces me lo llevo de vuelta. Hagámoslo. Pensé que tenía ese pre-diseñado y luego una segunda mirada a cambiar de opinión. Entonces voy a decir. Lg va a ir a seis, y LG va a ir a seis. Y ahora lo que pasa es que esto se ve mucho mejor en este caso. Por supuesto, está un poco lleno este apellido y el FirstName porque como vimos antes, cuando se trataba de la sección de portafolio, hay que añadir algunos cortadores. Entonces en el diseño de formularios, voy a agregar una fila. Entonces en la sección de fila, voy a decir rho g dash tres. Y eso da ahora algo de espacio en este diseño. Puedo dar un paso más allá sin embargo, porque tengo la forma sentada sola y la clase div. ¿ Y si solo combinamos esos dos juntos? Voy a sacar este div. Voy a subir la clase al formulario. Por lo que la forma misma se convierte en una fila. Y yo siempre digo menos código, mejor. Entonces voy a bajar y justo más allá de la forma. Voy a luego mover los divs acaba de volver un comando soporte izquierdo dentro del código de VS Studio me ayudará a hacer eso. Un poco de limpieza. En la IL-3. Si refresco, todavía se ve igual. Y de nuevo, esto también es cuando trabajo con una cuadrícula que podría necesitar para mover las cosas. Md sí funcionó cuando hice esto por primera vez. Y luego a segunda vista, creo que el más grande mejor. Por lo que tiene que ir un poco más lejos para llenar el espacio. Ahora estamos de vuelta en el camino. Ahora el correo electrónico es un poco diferente a FirstName y LastName. Entonces donde tuvimos col 12, esto va a atravesar todo el diseño. Voy a sacar la prueba de palabras y usaré etiqueta para. Y puedo decir correo electrónico en este caso, clase va a ser forma. Etiqueta. Ahí vamos. Y vamos a decir correo electrónico. Eso es correcto. Dirección de correo electrónico en este caso. Y cerraremos con la etiqueta. Después de eso. Vamos a sumar la entrada. Y la entrada no va a ser texto de tipo, sino escribir correo electrónico. Entonces diremos tipo email, nombre. Diremos correo electrónico. Y entonces diremos que clase es igual a forma. Control atrapa eso. Y la identificación tiene que igualar a Wu lo que golpeé tecla Retorno. El ID tiene que coincidir con la palabra cuatro. Entonces el id es el e-mail y lo cerraremos al usuario frontal. Simplemente piensan que el correo se ve igual que este. Lo que también es genial de Bootstrap 5 es que utiliza el enfoque pseudo-clase. ¿ Cuál es el enfoque pseudo-clase? Cuando hago clic en él, gira este brillo de gradiente azul alrededor del FirstName, lastName. Esto ayuda al usuario a identificar qué campo hay en esta solo una pieza extra me gusta de Bootstrap porque realmente ayuda a dar un poco realmente experiencia de usuario al campo en el que estoy trabajando. Perfecto, luciendo bien. Entonces lo siguiente que vamos a hacer es que voy a bajar la cabeza, quiero crear un área de texto después de la dirección de correo electrónico. Seguro que todo está guardado. Cual es. Entonces éste va a ser después de la llamada 12. Yo quiero hacerlo de ancho completo otra vez. Entonces diré div, clase col 12. Apertura cerrar. Y diremos etiqueta para comentarios. En clase Es una forma. Etiqueta. El sello. Y diremos comentarios. Y éste no va a ser un insumo. Va a ser lo que se llama área de texto. Entonces lo voy a hacer es decir área de texto, clase, control de formularios. Y después de eso, vamos a darle un nombre y luego te mostrará por qué el nombre es realmente importante en este caso, nombre, comentarios. Id es igual a la palabra cuatro. Entonces diremos comentarios. Y filas. Vamos a decir que son tres. Aquí te dejamos algunos importantes. No baje esto después de que se cierre. No poner espacio entre el área de texto y un espacio aquí dentro será un espacio aquí dentro. Entonces si guardo esto, lo que quiero decir con ese espacio es que quiero ese pequeño cursor. Lo que también es bonito de esto es notar el bonito relleno que nos metemos aquí. Y no sé por qué me está mostrando la forma. Entonces lo voy a hacer es que voy a hacer esto sólo para deshacerme de dejar caer mi correo electrónico. Ahí vamos. Es decir, arreglaré un más tarde. De todos modos, en esta sección de comentarios me gusta mucho esto es que realmente crea este relleno realmente hermoso dentro de mi sección común. Pero si fuera a soltar este área de texto hacia abajo así, lo que pasa es, es que en realidad hay todo este espacio extra. Eso es parte de la sección de comentarios porque se me cayó esto. Por lo que lo trata como espacio extra en mi diseño. Aunque creara aquí tres espacios. Pone aquí tres espacios. Asegúrate de que estás área de texto cerrada está justo al lado del área de texto abierto. Este es un I C y muchos diseños, la gente no se da cuenta de que ese espacio extra solo conduce. Estos están locos emocionados. Tienen esta cantidad extra de espacio y tienen que borrarlo esencialmente PARA trabajar con él. Perfecto. No digamos esa página. Guardemos esta página, refresquemos, y ahora estamos de vuelta al área de texto correcta. Y por supuesto, para que un formulario funcione realmente, tenemos que crear un botón para enviar la información. Entonces lo voy a hacer es, voy a decir clase div y diremos col 12 para que sea una columna. Y diré en este caso, tipo de botón es una clase de botón enviar, vamos a decir es btn. Y luego btn-primaria. Voy a usar el típico azul. Y diremos que se sometan. Ahora lo que tengo es una forma. Pero en teoría, si tuviera cumbre, podría presentar el formulario. Bueno, vamos en realidad como un bono a este curso, quiero crear un formulario de trabajo para que lo utilices. 21. Netlify y el método arrastrado y drag: Para que este proyecto funcione realmente, tenemos que ponerlo en fila hasta ahora hemos pasado tiempo justo en el escritorio. Entonces lo voy a hacer es que voy a venir y jalar hacia arriba a Netlify. Aquí vamos. Netlify, lo es. Netlify hace que la aplicación web moderna sea más rápida, empresa de comercio electrónico, todas esas cosas buenas. Pero lo que también hace, me permite arrastrar y soltar sitios web justo en la web. Voy a iniciar sesión. Y si no has usado Netlify antes, entra en registro. Y en mi inicio de sesión bajo estos sitios de palabra, mío realmente no lo tiene aquí, así que tengo muchos otros sitios web. Voy a dar click en sitios. En el mismo fondo. El tuyo probablemente estará vacío frente a todos mis sitios. Quiero desplegar un nuevo sitio sin conectarme para conseguir Seguro que sí, solo quiero arrastrar y soltar mi carpeta de salida del sitio aquí. Si tomo esta carpeta y agarré mi nueva carpeta de proyecto, si la arrastro aquí abajo, observe cómo se vuelve a este blanco versus el contorno. Si lo arrastro justo dentro, Lo que va a pasar es que me va a construir un sitio web completamente nuevo. ¿ Qué tan alucinante es eso? En unos 30 segundos, acabo de lanzar mi sitio web en una cadena aleatoria de palabras. Entonces si digo Configuración de Dominio, voy a venir a Editar Nombre del Sitio. Y llamaré a éste John Smith, temp por ahora mismo. Lo que obtengo es una URL que funciona. Y obtengo la página Acerca, obtengo la página de portafolio, obtengo la página de contacto. Eso es apestoso impresionante. Pero lo que realmente consigo, por lo que realmente me encantó Netlify, es que si vuelvo a volver a Netlify, han formado sección. Y en realidad puedes construir en un formulario usando Netlify y enviar información automáticamente usando su sistema. Adelante y pongamos la información para que los formularios Netlify funcionen en este proyecto. 22. Formas de Netlify: Entonces voy a mover este pasillo por ahora mismo. Y lo que quiero hacer es volver a mi código y aquí agregar alguna información adicional al formulario. Entonces si vuelvo arriba, busco el formulario. Ahí está. Y el primero es donde empiezo. La clase está totalmente bien. Pero lo que quiero añadir es un nombre. Y este nombre va a ser el formulario de contacto o simplemente contacto. Ahora, hay dos métodos que tengo que configurar. Esos o consiguen o un post. Y GET es si estás obteniendo información de un formulario como digamos Google. A post es si quiero publicar información a un formulario como un formulario de contacto. En este caso, voy a decir Post. Tengo que añadir un par de cosas extra. Y por legibilidad, voy a perder algo de espacio. Sólo voy a bajar esto y bajar esto sólo para que tengamos un poco más de legibilidad pasando. Método post. Y el formulario se va a abrir y cerrar. Después de la publicación de método, quiero decir datos Netlify, true para decirle a Netlify, Hey, esto es un formulario. Echa un vistazo. Después de este apartado. Yo quiero decir acción y esta cosa realmente genial. Porque la acción, quería decir en realidad, bueno, cuando envíes el formulario, dele al usuario una respuesta de vuelta. Entonces voy a decir acción. Voy a decir en este caso slash contacto, dash, éxito. no tenemos esta configuración de página, pero lo haremos antes de que ejecutes esto demasiado lejos. Entonces diremos éxito de contacto. Pero HTML, esto está diseñado para decirle al usuario cuando entrego esta información, va a funcionar. El motivo también tuve las palabras nombre, nombre, apellido, correo electrónico, y comentarios es que esto va a aparecer en Netlify es sección de formulario. Entonces cuando guarde esto, voy a volver a mi cuenta de safari. Y déjame tirar de esto para acá. Entonces lo que quiero hacer es volver a citar, resumen y leer arrastrarlo y soltarlo. Voy a volver a los despliegues de producción, digamos despliegues de reducción. Y en este caso, aviso necesidad de actualizar su sitio. Sí, sí lo hago. Y he guardado en absoluto. Y de nuevo, realmente no puedo ver el cambio aquí porque es más de los funcionamientos internos de la forma. Entonces voy a volver a Project New, abrir mi versión de Safari up y arrastrar proyecto nuevo. Aquí arriba. Se va a subir el proyecto no debería ser demasiado largo. Y no noté que la carga no siempre cambia, así que tengo que entonces normalmente refrescar la página y luego está todo listo para ir justo ahí. Probemos esto. Oh, una cosa más tengo que hacer. Dije que me iba a convertir en una página de éxito. Yo no lo hice. Por lo que tengo que asegurarme de crear un éxito de contacto. Entonces lo voy a hacer es que voy a duplicar la página de contacto y decir Duplicar o Comando D en la Mac, controlar D en la PC, y decir éxito de contacto. Y todo lo que voy a hacer es que voy a sacar el formulario y sólo decir gracias por la información. Entonces busco el formulario, comento hacia abajo y formé un formulario. Y sólo diré en una simple etiqueta de párrafo, gracias por su presentación. Y no podemos ver hasta que realmente ejecutemos el formulario. Entonces vamos a guardar esto. Se salvó. Perfecto. Ahora nos vemos bien. Déjame subir esto una vez más. Se saltó el arma, así que nos va a dar un mensaje de error. Voy a arrastrar y soltar esto. Y de nuevo usa esto no cambia por defecto, así que tengo que ir a refrescar la página y ahora está publicada. Y ahora deberíamos ver en nuestra sección de formularios, notar cómo tenemos un formulario. Contamos con un formulario activo llamado contacto. Y aún no hay envíos en este formulario de contacto. Dije aún, bueno, ahora si dirijo mi sitio web, así que si dirijo el diseño y contacto de John Smith, pondré mi nombre y solo elegirá algo en algo.ing.com. Oye, veamos si este formulario funciona. Y correctamente debe ser apóstrofe. Voy a presentar la información. Y gracias por su presentación. Enfriar. Por ahora parece que va a funcionar. Entonces si vuelvo a Netlify y voy a formularios, hey, contacto le faltó presentación a las 1038 AM. Y Hayden, Hey, veamos si esto funciona. Tenga en cuenta que el nombre coincide con el nombre, el nombre. Tenga en cuenta que el apellido coincide con el apellido, dirección de correo electrónico y los comentarios. Eso es bastante rad. Si quieres llevarlo un paso más allá, lo que también puedes hacer es dentro de la visión general de tu sitio, si voy a Configuración del sitio, esto al principio se pone un poco confuso porque hay un botón Formularios aquí arriba y hay un Forms botón abajo en la parte inferior izquierda. Pero si quieres que te envíen por correo electrónico tu formulario, puedes configurar Notificaciones de Formulario para ir un cierto gancho web, una notificación por correo electrónico o una integración de Slack. En este caso, quisiera decir notificación por correo electrónico. Y puedo decir, Hey, puedo ser notificado vía email cuando alguien use ese formulario, ¿qué tan frio es eso? Al igual que Netlify rocas. Pero puedo llevarlo incluso un paso más allá. Porque si vuelvo al diseño de este formulario, y si entro al contacto, también hay una forma de prevenir el spam. Por lo que todas las misiones de formularios se filtran por spam usando un Kismet. Pero también puedo agregar un campo de miel para atrapar spam adicional en mi diseño. Y esta es probablemente la herramienta más poderosa de las formas Netlify que pasa desapercibida. Construyamos un campo de miel adicional a partir de mi diseño que ayudará al spam dentro de Netlify. 23. Agregar el honeypot a la forma a la forma de añadir la masa de honeypot: Volvamos a nuestra forma. Y lo que busco es 0 entre la página de éxito de contacto, eso no va a pasar. Ahí vamos. Para nuestra página de contacto, quiero agregar una pieza más debajo de la acción. Voy a decir datos, Netlify un honeypot para asegurarse de que identifique hay un nuevo campo aquí. Voy a decir que compró campo de dash desde aquí. Voy a añadir un campo completamente nuevo en este diseño. Entonces por debajo de estos datos, Netlify un honeypot, pero por encima de la clase div 12, voy a crear una entrada y decir que el tipo se va a ocultar. Este es un nuevo tipo de campo que no se va a mostrar, pero sólo cuando los boths intentan pasar por todas las entradas, entonces lo pueden ver vía el lado del código. Y el nombre se va a comprar campo, esencialmente diciendo que si alguien, él llena este campo oculto que una persona normal nunca vería, luego identificaría esto como spam. Y normalmente lo hago también es también hago una nota y digo para los bots por si acaso vuelvo y averiguo por qué hice esto. Entonces, ¿por qué pusiste una nota que dice para los bots y luego para los boths, solo para que pueda tener una identificación como campo oculto. Ahora de nuevo, si guardo esto, no deberías poder verlo en tu página de contacto. Hasta ahora se ve bien. Subiremos este proyecto y veamos si Netlify identifica este pero campo también. Voy a traer de vuelta ahí está. Mis formularios y visión general del sitio, la producción se despliega. Voy a volver con el padre. Y si me desplazo hacia abajo por la página, déjame traer proyecto nuevo a esta nueva subida. Y de nuevo, no cambia de subir a publicar. Entonces lo que tengo que hacer es refrescar la página y se publica. Ahora lo que debo ver en mi sección de formularios, si entro en contacto, perfecta prevención de spam extra habilitada a través de un campo de miel. Por lo que solo agrega una capa extra de prevención de spam dentro de Netlify ya. 24. Un poco más limpieza adicional: Entonces si miramos nuestra página, sólo voy a esconder Safari otra vez, que todo está bastante bien. Pero lo único que sí me molesto un poco que sí vi a través de mi diseño es que diseños de John Smith está sangrada solo un poco en relación para contactarme, no es realmente notable en la primera página o en la página sobre, pero lo haremos llegar a la Cartera y al Contacto. Se nota. Entonces lo voy a hacer es que quería un poco de limpieza extra. Y así voy a abrir todos mis archivos e ir a Project New. Y en sobre éxito de contacto, índice de contactos y cartera. Yo solo quiero sacar el relleno en los lados izquierdo y derecho de mi diseño. Por lo que busco está en el contenedor para la barra de navegación. Lo que quiero hacer es que voy a decir Px 0. Y estoy en la página sobre. Vuelve a echar un vistazo a ese. Entonces si guardo el sobre, lo, solo saca el espacio en los lados izquierdo y derecho. Yo sí duplico esto en todas las páginas. Por lo que volveré a contactar con éxito. En la parte superior. Agrega el px 0. En mi contacto. Lo que busco es contenedor y PXE en el índice. Vuelve a la cima. No te marees, o casi ahí. Px y portafolio en la parte superior también. Estamos buscando es el contenedor y P 0. Ahora cuando paso página por página, todo está alineado de esa manera. Además, me quedé hola mundo y deberían decir diseños de John Smith. Entonces lo que voy a hacer es cambiar helloworld por diseños de John Smith. En el diseño web, es importante poner primero el nombre real, el portafolio, o el nombre de la página, y el título general segundo. Entonces tengo que duplicar esto una vez más. Pero como estamos justo al lado ahí, 0 índice aún tiene Hola Mundo. Yo no arreglé eso. Oh no. Entonces vamos a agarrar todo el asunto. Agarremos ese diseño en el índice. Y diremos, es todo diseño y haz que tu casa luzca increíble. Tan solo para añadir algo en la parte superior. O también podríamos decir, en este caso, el diseño de interiores. Diseño y decoración de interiores. Perfecto. Y también podemos cambiar helloworld a ordenado que subió para que coincida con diseño de interiores y la decoración en mi página de índice. Vamos aquí abajo. Cadena al mundo bajo. Sólo para que se vea un poco más fuerte. Ahí vamos al fondo. Por lo que para continuar a lo largo de todos esos títulos, un poco de última limpieza para tener. Voy a tomar los diseños de John Smith y sólo ir directo al contacto. Cambiar ese contacto éxito. Podemos decir en lugar de contactarme, podemos decir la presentación exitosa. Y la página sobre tomará el HelloWorld. Y John Smith diseña. Subiremos esto una vez más y echemos un vistazo y asegurémonos de que todo funcione con éxito. Bajo formularios, visión general del sitio, despliega la producción. Desplácese hacia abajo por la página y proyecte nuevo. Déjalo caer. Nuevamente, espere unos 510 segundos para mi InDesign, solo que no es tan grande de un archivo. 3.4 megabytes, refresca la página y se publica. Si hago clic en este enlace o en este caso, refrescaré la página. Ahora lo que consigo es ese relleno sacado, diseño de interiores y decoración, diseños de John Smith. Y sobre no nos hemos visto bastante bien. Debe fluir. Mira en grande. Se ve realmente bien. Yo creo. Vuelve a nuestro portafolio. Tenemos nuestra columna de tres a dos columnas, diseño de 21 columnas se ve bastante fuerte. Y tenemos una página de contacto. Puedo decir John Smith, algo en diseños de John Smith. Esto es sólo una prueba si estimo la información. Whoa, Ahí vamos. Gracias por su presentación. Y he aquí, si vuelvo a las formas, última sumisión ocurrió a los 1050 soy. Y John, esto es sólo una prueba y funciona. Tenemos todo funcionando y está configurado y diseñado usando Bootstrap 5. 25. Un pie sticky: Al estar mirando por encima de todo este sitio web, se veía bastante bien excepto por un pequeño detalle en la sección sobre. No lo notamos porque nos estamos desplazando hacia arriba y hacia abajo. Pero cuando llegamos a la página de contacto, ten en cuenta que el pie de página sube y toca casi la parte superior del formulario. Lo que quiero hacer es que quiero que ese pie de página se atasque en la parte inferior son crear un pie de página pegajoso. Podemos hacer eso con flex. Tenemos que entrar en nuestro CSS para lograr eso. Dentro de mi CSS personalizado en la parte superior está vamos a poner esto es justo después. En realidad nos dicen antes de la cabecera, pensando antes y después, tengo que añadir un par de cosas. Voy a decir HTML coma body. Y después de esto, quiero decir que la altura es igual al 100%. Tenemos que dedicar esta información a decir, hagamos de esta altura un 100 por ciento, que ya es traer en el flex. Cuando voy a hacer es voy a decir body display y luego flex para hacer el flujo corporal. Yo quiero convertir los hijos del cuerpo o los divs, la red eléctrica y los pies en columnas. Entonces voy a decir dirección flex. Y vamos a decir columna. Después de eso, puedo entonces convertir el principal en flujo. Entonces voy a decir main flex 1, 0 y luego auto haciendo de esto un 100 por ciento tanto como pueda estar empujando el pie de página hacia abajo. Ahora el truco es después de la principal, voy a decir pie de página. Y luego gira el pie de página a flex, contrae a 0. Y lo que eso va a hacer es ir habilitada esta parte media, si pensamos que tienen tres columnas, el encabezado y el pie de página, esto se va a expandir a ancho completo menos el pie de página en la parte inferior. Refresco la página. Ah, estoy en realidad en el nombre de dominio real. Volvamos a Proyecto Nuevo. Y levantaremos el archivo índice y la página de contacto. Ahora lo que ves es este pie de página inferior pegado al mismo fondo. Y por último, tenemos que hacer es abrir Netlify. Ahí vamos. Y volveré a mi sitio. Panorama general. Producción despliega y sube esto una vez más para asegurarse de que funcione. Déjame ir a buscar el drag and drop y esperar a que se cargue. Dale unos cinco segundos. Voy a refrescar la página y dice publicado. Ahora cuando vuelva a la página de contacto que está en la temp de John Smith Netlify, refresca la página. Ahora el pie de página se pega en la parte inferior. Si tienes una pequeña página de contacto, te recomiendo hacer esto. Por lo que sostienes el espacio para el pie de página pegajoso en la parte inferior. 26. En conclusión: Muchas gracias por tomarse el tiempo para ver este curso en Bootstrap 5, realmente quería hacer un proyecto concreto. Podríamos usar la mayoría de las herramientas dentro de Bootstrap 5. Para toda más información sobre Bootstrap, eres bienvenido a volver a los docs y encontrarlos todos. Y Firmin que compró el curso avanzado, puedes usar esas herramientas adicionales como código fuente para confiar y revisar nuevamente tu trabajo también. Como siempre, me golpean en UPS y pensando mucho por comprar el curso bootstrap bootcamp.