Transcripciones
1. Introducción: Hola chicos, Mi nombre es Peter y bienvenidos al curso en el que vamos a construir un moderno sitio web de portafolio responsive y este Presidente convertir al mundo digital. Es realmente importante destacar entre la multitud y ser único. Si estás solicitando un trabajo o acercándote inclinado, debes tener algo que sea único o distintivo, que se ajuste a tu bot. Con eso dicho, tener una página web de portafolio que exhiba quién eres, cuáles son las diferentes habilidades que procesas esto plagando los diferentes proyectos
que tienen que todas estas cosas pueden crear una mejor impresión de ti. Muy bien, ahora hablando de este curso en particular, este curso está curado para principiantes. Pero va a ser mejor si ustedes tienen un conocimiento básico de HTML y CSS. Y ahora hablemos de la estructura del curso. Entonces, antes que nada, les voy a dar un resumen básico de nuestra página web. Explicarlo está diseñado y funcionalidades que ustedes chicos puedan tener una mejor comprensión de lo que vamos a construir. En segundo lugar, voy a compartir algunas mejores prácticas que puedes implementar mientras aprendes, sobre todo mientras aprendes a codificar, que
pueda obtener el máximo potencial de este dioses en particular. Después de eso, nos metemos debajo de la parte principal. Por lo que en primer lugar, estaremos montando el proyecto. Y bajo el proyecto creamos los diferentes archivos y carpetas requeridos. El seleccionar o escoger los diferentes colores que estamos utilizando este sitio web en particular. Y también importamos todas las mayores necesarias a un proyecto. Después de eso, comenzamos a codificar un sitio web. Por lo que estaremos codificando la página web sección por sección y RB empezaremos con la sección héroe,
seguida de la sección abortar, la sección de habilidades, la sección de
proyecto, la sección de blog, y la sección de contactos. Y una vez que codificamos completamente la página web, ahora es el momento de que hagamos nuestro sitio web sensible. Y como sabemos hoy en día, casi todos los usuarios están navegando por Internet a través de su smartphone. Por lo que es realmente importante tener un sitio web que pueda adaptarse a diferentes ratios de pantalla. Por lo que tenemos dos videos diferentes en los que voy
paso a paso y les expliqué cómo podemos hacer que un sitio web sensible. Entonces eso se trata de la estructura del curso. Y como ya dije, este es significativamente curso en el que hablo las cosas básicas así como de la parte de desarrollo de la manera más sencilla posible. Entonces eso es todo chicos, muchas gracias por ver y yo realmente, realmente espero verlos chicos en la siguiente lección.
2. Descripción del sitio web: Hola chicos, bienvenidos al video. Y en este video en particular, les
voy a dar la visión básica de nuestra página web. Y ahora mismo qué es lo que estás viendo fácilmente producto final. Y ahora mismo estamos en la sección de héroes. Y en la parte superior aquí puedes ver esta barra de navegación ESR. Y dentro de la barra de navegación tenemos un logo, diferentes enlaces, y un botón. Y estos enlaces son completamente funcionales. Entonces por ejemplo, si quería volver a ir a la sección de blog, haga clic en la sección de blog y muere quiere llevarnos directamente a la sección de blog con una animación suave. Y aquí en la sección de héroes, en la segunda sección tenemos tau, la imagen del héroe, como con el último texto junto con el botón. Y la parte inferior, tenemos una estructura afilada. Por lo que esta estructura se hace usando clip-path, y también hemos definido la curvatura usando la función poligonal. Entonces chicos, si no entienden estos términos, no se preocupen, he explicado todas estas cosas a fondo en las próximas secciones. Entonces si no entiendes estos términos, no te preocupes, al final de cada sección, todo quedará completamente claro. Ahora pasemos a la sección sobre. Entonces en la sección de pizarra tenemos una imagen, y en el lado derecho tenemos una sección de texto la cual está teniendo un hit una pequeña introducción. Y aquí tenemos nuestros iconos de redes sociales. Y estos iconos tienen una llamada a la acción. Entonces si hago click en alguno de estos, estos, quiero llevarnos al alcista respectivo y ahora pasemos a la sección de habilidades. Entonces en la sección de habilidades otra vez, tenemos la curvatura aquí. Tenemos el rumbo como último un polígrafo. Y esta es la sección de autos. Por lo que tenemos un total de seis cartas diferentes y cada carta está teniendo un efecto hover. Por lo que básicamente hicimos uso de rejillas CSS para lograr esta estructura de dios. Entonces ese video en el que vamos a construir la sección de habilidades es paquete de valor comenzó a aprender sobre las cuadrículas CSS, cómo podemos definir una cuadrícula, cómo podemos proporcionar brecha entre dioses y mucho más. Por lo que cada guardia está teniendo una imagen y una información de texto. Y eso es todo. Todo esto se trata de la sección de habilidades. Ahora pasemos a la sección de proyectos. Por lo que esta es la sección del proyecto. Tenemos un rumbo y aquí tenemos un slider. Por lo que este encendedores básicamente hizo usando una biblioteca JavaScript externa conocida como slick slide it. Entonces en este video en particular, aprenderemos cómo podemos usar una biblioteca externa, cómo podemos acceder a propiedades específicas de la biblioteca y más. Y aquí se puede ver que esto ya sea consiste en una imagen y un párrafo. Y en la parte inferior, se
puede ver que tenemos puertas atrapadas y estos puntos indican el tobogán actual. Entonces vas a ver que un ahora estamos en la primera diapositiva, por lo que el color de la pantalla y es más pesado, poco más ancho. Ahora si voy a la segunda, la segunda está básicamente resaltada con un color diferente y un ancho más amplio. Entonces todo esto se trata de la sección de proyectos. Y ahora pasemos a la sección de bloques. Entonces esta es la sección de blog, y tenemos un Biógrafo Hibbing, un fondo oscuro, y tres cartas diferentes. Y dentro de cada tarjeta tenemos imagen y la información de texto. Por lo que tintes o laboratorio o a la sección de bloques. Y ahora pasemos a la última sección que es la parte media trasera del maíz. Entonces aquí tenemos un rumbo. Tenemos dos tarjetas diferentes. Y dentro de cada tarjeta tenemos una imagen y alguna información de texto. Y la parte inferior hemos llegado a la sección de entrada donde tenemos la entrada de nombre de usuario, correo electrónico tanto en el mensaje de asunto como en un botón. Entonces todo esto se trata de eso. El apartado de conducta Me y la sección de pie de página, sólo
tenemos un logotipo como vimos por última vez, un par de información. Por lo que este es el escritorio básico o vista de nuestro sitio web. Y este alcista regular es completamente receptivo. Entonces si me subo a la herramienta desarrollador aquí, se
puede ver eso y disminuyo el ancho de la ventanilla. Se puede ver que esta barra de navegación en particular se deshabilita. Y en cambio tenemos un menú de hamburguesas. Y si hago clic en él, tenemos al final nefasto menú aquí. Por lo que de nuevo, puedo hacer clic en cualquier disección en particular y las cosas funcionan perfectamente bien. Y el menú de hamburguesas está bien dispuesto. Tenemos todos los enlaces como icono de cláusula elástica. Y ahora mismo estamos en un poco de 1988 para 1949. Entonces voy a ir al iPhone 678. Entonces así es como se va a ver nuestra página web en un teléfono móvil. Se ve bastante bien. Las cosas están bien dispuestas, las cosas son legibles. Y sitio web es completamente sponsee para una vista móvil. Eso también es bueno para una vista de iPad. Y como se puede ver aquí también, el alcista está bien presentado. Y para casi todos los ratios de pantalla, nuestro sitio web se va a adaptar en función de la relación de pantalla. Por lo que podemos concluir que nuestra página web es completamente receptiva y tenemos un video en profundidad de dos partes viertas en las que voy a ir paso y
explicar cada uno y cada uno de los pasos de hacer una aspirina responsive de un sitio web. Y fuera de eso, también
tenemos un prototipo. Por lo que he hecho este prototipo en particular en Figma, y mientras
construimos el sitio web, estaremos tomando como referencia este prototipo en particular. Entonces eso es todo chicos, esto es saudita resumen básico de nuestra página web. Y espero que ustedes chicos tengan una idea básica de lo que vamos a construir en este video en particular. Entonces eso es todo, chicos, gracias por verlo, y los veré en los próximos videos.
3. Las mejores prácticas de aprendizaje: Hola chicos. En este video voy a compartir algunas mejores prácticas que puedes implementar mientras aprendes para que pueda sacar al máximo potencial de este curso en particular. Y los consejos que estoy a punto de compartir se han implementado en mi propio proceso de aprendizaje. Y creo que vale la pena compartir. En primer lugar, como ustedes saben, este curso en particular se divide en múltiples secciones y necesita sección. Básicamente construimos una parte particular de la página web. Y lo que les sugeriría que hagan es empezar, antes que nada, deberían ver una sección por completo. Y las mentiras, por qué estamos construyendo, observan la estructura del curso y el enfoque de resolución de problemas. Y una vez que completes tu acción de relojes, entonces deberías intentar construir un sitio web por tu cuenta. Cuando estás tratando de construir un sitio web sobre Irán en lugar de simplemente replicar lo que está haciendo el instructor. Estás pensando habilidades, tus habilidades para resolver problemas, todo va a crecer de una manera mucho mejor. Entonces esto es lo
que quiero sugerir, es ver esto en realidad completamente y luego trató de construir un sitio web por su cuenta. En segundo lugar, los usuarios establecieron metas pequeñas y me
preguntaron saber hoy en día mucho del curso de mezcla Duolingo, pero solo hay una pequeña fracción de personas que completan el curso. Por lo que con el fin de completar el curso con éxito se establecieron metas pequeñas. En nuestro caso, básicamente puedes establecer un objetivo de, quiero completar una sección cada día. Y si pudieras lograr consistentemente este pequeño objetivo en particular o tu objetivo más grande, es
decir, completar todo el curso, te hinchas con gran facilidad. Y por último, es hora de que eliminemos todo tipo de distracciones. Y estudios han demostrado que incluso unos segundos de destrucción, si puede ser una notificación en un smartphone, puede arruinar por completo tu concentración principal. Entonces cuando estás estudiando, es realmente importante evitar todo Destruction Set o si puede ser un teléfono inteligente o cualquier otra cosa, debes tratar de evitar todo tipo de distracciones y concentrarte completamente en el proceso de estudio. Por lo que estos son algunos pequeños cambios que diquen e implementan en tu proceso de aprendizaje, cuales tendrás un impacto mucho mejor en tu proceso de aprendizaje, que puede hacerlo más eficiente y efectivo. Entonces eso es todo, chicos. Muchas gracias por ver y los veré en el siguiente video.
4. Configurar el proyecto: Hola chicos. En este video vamos a montar nuestro proyecto en VSCode. Por lo que Visual Studio
Code son los datos de textura que voy a usar en esta compilación web en particular. Y ustedes pueden usar cualquiera de su editor de texto preferido. Entonces lo primero que voy a hacer es que voy a estar creando una nueva carpeta en mi escritorio. Y voy a nombrar a esta carpeta en particular como portafolio. Después de eso, voy a abrir VS Code. Y voy a arrastrar en la carpeta de portafolio recién creada en el VS Code. Y ahora hemos captado que la carpeta de portafolio se abrió aquí mismo. Y el ahora vamos a crear todos los archivos básicos que se requieren. Por lo que voy a dar clic en un botón Nuevo Archivo aquí mismo. Y el primer archivo que vamos a crear ISA, el archivo index.html. Muy bien, ahora vamos a crear otra carpeta, y quiero nombrar a esta carpeta en particular como CSS. Y dentro de esta carpeta en particular, creemos nuestro archivo style.css. De acuerdo, ahora vamos a crear otra carpeta para almacenar todas nuestras imágenes. Y por último, vamos a crear un archivo para ello. Nuestro JavaScript. O los chicos Lai saben que hemos creado todos los archivos básicos para callar. Y ahora vayamos a nuestro archivo index.html y generemos un boilerplate básico. Por eso soy un NDR, el signo de exclamación y seguido del grifo. Y esto genera la calderilla básica. Entonces lo primero que quiero hacer es que quiero
cambiar el nombre del alcista a portafolio. Y después de eso, quiero vincular el HTML y CSS juntos. Para ello, quiero escribir en link. Y dentro del tiempo extra, voy a Enter dot slash, seleccionar la carpeta CSS. Dentro de eso quiero elegir este archivo CSS de Tyler para confirmar si el archivo HTML y CSS está vinculado entre sí, no
iré al archivo CSS. Y quiero decir como el cuerpo de nuestra página web y quiero cambiar el fondo a rojo. Yo lo voy a guardar. Después de eso, voy a hacer clic derecho en el archivo index.html y hacer clic en abrir con el servidor en vivo. Y como se puede ver que el sitio web está funcionando perfectamente bien. Tanto del archivo HTML como CSS se vincula perfectamente bien. Entonces ahora terminamos con la tarea básica de configurar el proyecto. Ahora pasemos a la segunda etapa, chicos, ahora mismo vamos a escoger todos los datos de diferentes colores que estaremos utilizando en esta web en particular. Y estaremos almacenando en estos colores como variables. Por lo que mientras construye el lado DevOps, el proceso de selección de color va a ser mucho más fácil y nos puede ayudar a ahorrar mucho tiempo. Entonces ahora mismo vayamos a nuestro prototipo. Y aquí mismo, he enumerado todos los diferentes colores que estaremos usando. Es decir, estaremos usando tres colores diferentes. Y vamos a seleccionar el primer color. Seleccionemos el color de la opción de campo y copiemos el código hexadecimal. Y de vuelta a VS Code. Vayamos al archivo CSS. Y para básicamente inicializar estos colores como variables, usemos la función raíz. Y ahora mismo vamos a introducir el nombre de la variable. Entonces para el primer color, lo voy a nombrar como primario, seguido de colon. Y el hashtag que voy a pegar en el código hexadecimal. Entonces ese es el primer color. Ahora vamos a copiar el código hexadecimal para el segundo color. Y quiero nombrar a este color en particular como puro. Y voy a pegar el código hexadecimal aquí mismo. Y el siguiente color se nombra como oscuro. Y vamos a copiar el código hexadecimal y pegarlo aquí mismo. Por lo que estos son colores bastante diferentes que son, ganamos un año desde web webgl inicializando estos cursos disponibles. Por lo que podemos recordar fácilmente el nombre del color y se aplican
directamente el color especificando el nombre de la variable. Y de hecho puede ahorrar mucho tiempo y es mucho más fácil recordar kilobytes, por lo que el nombre de la variable en lugar del código hexadecimal. Y ahora terminamos con el proceso de recolección de color. Y ahora pasemos a la siguiente etapa en la que no somos básicamente lo que todas las diferentes imágenes y otros activos en el Código VS. Muy bien chicos, ahora es momento de que importemos todas las diferentes imágenes e iconos a nuestro proyecto. Entonces antes de eso, permítanme mostrarles los diferentes iconos e imágenes que estaremos utilizando en este sitio web en particular. Entonces ahora mismo estoy en el prototipo que he hecho en Figma. Y como pueden ver, aquí tenemos la imagen de héroe. Y si me desplazo aquí abajo, tenemos todos los diferentes iconos de las redes sociales. Bajando aquí vas a ver todos los diferentes iconos. En la sección de habilidades. Tenemos acceso a los iconos del proyecto, imágenes
del proyecto, las diferentes imágenes del blog. No les gusto, iconos y mucho más. Por lo que estas son las diferentes imágenes e iconos que estaremos utilizando en este sitio web en particular. Y aprendan donde ustedes chicos, tengo todas estas en la sección de recursos y puedo descargar todas estas bien desde ahí. Entonces ahora importemos básicamente todos estos a nuestro proyecto. A eso. Tengo todas estas imágenes aquí mismo, y la voy a copiar. Entonces después de eso, voy a ir a la carpeta de portafolio que hemos creado. Y como puedes ver, hemos llegado a la carpeta de imágenes para luego abrirla. Y los voy a pegar a todos aquí mismo. Ahora bien, si vuelvo al VS Code Editor y dentro de las mayores, como pueden ver, tenemos todas las diferentes imágenes listas para ser usadas. Por lo que ahora finalmente terminamos con las imágenes y la parte del icono. Yo sudo. Y ahora tenemos el proyecto completamente configurado ya para ser codificado. Entonces eso es todo, chicos. Estamos hechos con la configuración básica del proyecto. Y los veré próximo video donde vamos a empezar a construir nuestra página web.
5. Codificar la sección de el héroe: Hola chicos. En este video, vamos a construir la sección de héroes de nuestra página web. Y en el video anterior, básicamente
hemos creado o protegido junto con todos los diferentes archivos. Hemos escogido todos los diferentes colores que vamos a utilizar este sitio web en particular. Y también hemos importado todas las imágenes diferentes a un proyecto. Entonces ahora mismo vamos a nuestro prototipo aquí mismo. Y como se puede ver, esta disección final se nombra principalmente como la sección de héroes. Y esto es lo que vamos a construir en este video en particular. Entonces dividamos básicamente la sección de héroes en dos partes diferentes. Entonces, en primer lugar, construyamos la sección de navegación. Entonces esta es la barra de navegación. Y puedes considerar esta barra de navegación como una caja. Y dentro de esta caja tenemos diferentes elementos como el logo son diferentes enlaces y el botón Atrás. Entonces, en primer lugar, vamos a crear la estructura básica de caja. Para ello, volvamos al archivo de índice y dentro del archivo body, o creemos un encabezado. Y dentro del encabezado, voy a crear una etiqueta de navegación. Entonces volviendo al prototipo, vas a ver que hemos creado la caja. Y dentro de la caja tenemos nuestros diferentes elementos. Entonces voy a clasificar estos elementos como parte izquierda y la parte derecha. Por lo que en la parte izquierda tenemos el logo y los diferentes enlaces. Y la parte correcta tenemos el botón de retroceso de la moneda. Entonces vamos a crear un div para la parte izquierda. Y le voy a dar clase como izquierda. Así como así, voy a crear otro div. Y voy a nombrar a este div en particular con la clase como derecho? Muy bien, ahora bajemos a la parte izquierda. Entonces aquí verás que en la parte izquierda, tenemos a Dao, el logo como el último, el elemento diferente. Por lo que necesitamos tener por separado debido por el logotipo y por todos estos diferentes enlaces. Entonces quiero crear un div y le voy a dar una clase llamada como branding. Y dentro de este div en particular, voy a abrir la etiqueta de imagen. Y en la fuente voy a entrar a la slash org. Vamos a la carpeta de imágenes y terminaré el logo. Por lo que nav dashed logo es el logo que vamos a usar. Y vamos a crear otro div para los diferentes enlaces. Entonces para eso vamos a usar etiqueta ancla. Entonces voy a deshacer una y presionar Tab. Entonces voy a terminar el hash justo aquí. Por lo que tenemos a casa un barco habilidades proyectos y bloque. Entonces, entremos primero a casa. Y ahora lo que voy a hacer es que voy a seleccionar el tintorero final, Dyer aquí mismo. Y presiono Alt, Shift y flecha abajo por cuatro veces más. Entonces eso va a duplicar exactamente lo mismo. Y después de casa tenemos alrededor de cuatro o por habilidades, proyectos y bloque. Muy bien, ahora hemos creado todos estos impuestos angulares diferentes. Entonces ahora pasemos a la parte correcta. Entonces como se puede ver en la parte derecha, tenemos un botón llamado como contacto. Entonces solo voy a crear una etiqueta de botón y un nombre. Sí conducta. Está bien, Ahora ya terminamos, pero la barra de navegación, hemos creado una caja y dentro de la caja tenemos dos partes diferentes. En la parte izquierda, tenemos el logo. Hay diferentes enlaces y en la parte derecha tenemos el botón. Entonces vamos a guardarlo, y ahora vamos a darle estilo a este encabezado en particular. Para ello, quiero ir a este archivo de Tyler CSS. Y aquí mismo voy a seleccionar el encabezado. Y voy a cambiar el fondo demasiado oscuro. Por lo que para acceder a la variable, voy a terminar la guerra dentro de corchete redondo. Voy a entrar a doble guión. Entonces ahora vamos a guardarlo. Y, básicamente, echemos un vistazo a nuestra página web. Y como puedes ver que está aquí. Y si notas en la parte superior derecha y en la parte superior, tenemos un poco de espaciado. Es por la hoja de estilo predeterminada del navegador web. Entonces volvamos a nuestro archivo CSS y aquí empecemos. Por lo que estrella indica toda la selección, por lo que selecciona todo el elemento. Y tecleemos en el margen 0. Y relleno 0. Y caja-dimensionamiento, border-box. De acuerdo, ahora, si vuelves, puedes ver que no hay espacios en blanco en ninguno fuera de la esquina. Está perfectamente al ras con punto-punto parte del navegador. Entonces chicos, si es un corporativo o tipo aquí, se
puede ver que eso no nav bar está básicamente ubicado en el centro del beat. Por lo que para llevar nuestra barra de navegación al centro de la página, necesitamos crear un contenedor. Entonces voy a volver a nuestro archivo style.css. Y aquí voy a crear una clase llamada como la contienen. Y en esta clase en particular, voy a dar un espíritu Mac de 11 52 pixel. Y episódico para arriba e abajo va a ser 0, y para izquierda y derecha va a ser de 15 pixel. Y además voy a dar un margen de arriba e abajo de 0 y para hacer lo no diagnosticado previo al remitente, la izquierda y la derecha deben ser auto. Entonces si lo guardo y si venimos a nuestro portafolio aquí, se
puede ver que básicamente no ha pasado nada. Eso se debe a que no hemos aplicado este particular vidrio recién creado en nuestro HTML. Entonces simplemente voy a copiar el nombre de la clase aquí mismo. Vamos a nuestro archivo HTML y escribamos un tanto el nav atrás o justo debajo de la etiqueta de encabezado. Voy a crear un div con un nombre de clase de contenedor. Y coloquemos la etiqueta div final justo debajo de la etiqueta glossing nav y vamos a guardar. Entonces déjame arreglarlo rápidamente ahora o guardarlo. Y si vengo a revisar, se
puede ver que está en el centro ahora mismo. Ahora, vamos a cambiar básicamente el color de todos estos diferentes enlaces. Por lo que los enlaces obviamente ubicados justo dentro del div izquierdo. Y así BIPAP, podemos decir que es cabecera, el nav, y luego el Div izquierdo dentro que podemos acceder básicamente a la etiqueta de anclaje. Entonces voy a ir a darle estilo a nuestro CSS. Aquí. Voy a terminar el encabezado, nav dot a la izquierda y la etiqueta de anclaje. Entonces aquí voy a cambiar el color a tu, digamos que después llevamos un perro, podemos ver que el color se ha cambiado a blanco o puro. Y ahora hay quitar todos estos subrayados. Entonces tecleemos en decoración de texto, ninguna. Y eso básicamente va a eliminar todos los subrayados. Entonces básicamente hemos traído la barra de navegación
al remitente y el color de estos enlaces al blanco, así
como hemos eliminado su subyacente. Entonces chicos, si revisamos nuestro prototipo aquí, se
puede ver que la barra de navegación está básicamente alineada en una sola línea. Es decir, tenemos ahora el logo, los diferentes enlaces seguidos del botón. Pero lo alcista es básicamente tener todos estos diferentes elementos están dispuestos de manera vertical. Entonces con el fin de hacerlos de manera
alineada o en línea cuando utilizan la propiedad flex. Y estaremos haciendo uso
del lote flexbox o D evolucionado en este sitio web en particular construido. Por lo que es mejor crear básicamente una clase de utilidad para que nos pueda ahorrar mucho tiempo en el futuro. Entonces para hacer eso, vamos a nuestro código y nuestro dentro de la carpeta CSS, voy a crear otro archivo. Y quiero nombrarlo como Udemy distorsionar CSS y abajo y copiar el nombre del archivo. Y sólo terminemos. Entonces, antes de seguir adelante, vamos a nuestro archivo style.css. Y antes que nada, embarquemos en nuestra nueva clase de utilidades aquí mismo. Por lo que quiero importar seguido de dos acordes simples. Y vamos a introducir el nombre del archivo dot css y un dos puntos. Por lo que ahora hemos importado la clase de utilidades. Ahora vamos al archivo de utilidades y creemos una clase llamada Flex. Y aquí vamos a bajo display flex. De acuerdo, así que ahora mismo en una copia el nombre de la clase aquí mismo. Pasemos a nuestro archivo de índice y escribamos dentro de nuestro Nasdaq. Voy a crear una clase y voy a pegar el nombre de nuestra clase de utilidad flex. Y vamos a guardarlo. Y si reviso el sitio web aquí, se
puede ver que el botón de contacto se ha movido hacia la derecha. Entonces si una base la misma clase flex dentro de nuestra clase div izquierda y guárdela. Vas a ver que los
enlaces extremos nefastos y el botón de conducta se ha dispuesto de la manera ligera. Entonces chicos, si revisan aquí mismo, pueden
ver que los enlaces y el botón me gusta no están alineados con el logotipo. Estos son un poco extraviados. Entonces para hacerlos en una sola línea, creemos otra clase de utilidad. Y lo voy a nombrar como remitente de artículo. Y vamos a poner otro remitente de línea de ítem y vidas. Simplemente copia el nombre de la clase. Y en primer lugar, pongámoslo dentro de la clase nav. Guardémoslo y comprobémoslo. Y se puede ver que el botón de retroceso de la moneda y el logotipo están en una sola línea ahora. Y vamos a aplicar la misma fórmula sobre div izquierdo. Vamos a pegarlo. Y tenemos todos estos en una sola línea. Ahora la siguiente tarea es tener un video basado en dosis más baja cuando estos son elementos diferentes para que, eso se vea bien. Entonces para hacer eso, quiero crear otra clase de utilidad y lo nombraré como espacio entre. Hagamos justificar contenido, espacio entre. Vamos a guardarlo. Entonces vamos a copiar el nombre de la clase. Vamos al archivo índice y vamos a pegarlo dentro de la clase nav, guárdelo. Y como puedes ver que el botón de retroceso de la moneda ha ido todo el camino a la izquierda del contenedor. Y ahora vamos a añadir un poco de espacio entre este logotipo como Alaska en medio de estos enlaces. Entonces chicos, si tomamos nuestros prototipos, comienzan a ver que en realidad hay un poco de espacio por encima de la barra de navegación. Por lo que hay una especie de separación entre la parte superior del debate, la diarrea final, barra nav, bar bar caso Dinah. No tenemos suficiente espacio entre la parte superior de la página y la barra de navegación. Entonces para hacer eso, vayamos a este archivo CSS de Tyler. Y aquí voy a seleccionar básicamente el encabezado y el nav. Y básicamente voy a proporcionar un poco de relleno. Por lo que desde arriba y abajo se les van a dar. Y para izquierda y derecha va a ser 0. Entonces si lo guardo, se puede ver que
en realidad hay suficiente cantidad de espacio entre la parte superior y la inferior. Por lo que ahora quiero dar un poco de espaciado entre el logo y el enlace. Entonces para hacer eso, nuevo, podemos seleccionar el encabezado y el nav. Y si voy a mi archivo index.html, tenemos un nombre de clase que es branding dentro del cual reside nuestro logo. Por lo que básicamente puedo seleccionar el cristal de branding. Y puedo dar un margen, ¿verdad? Mueva diez gramo. A ver. Está bien, Es una especie del centro. Y ahora agreguemos también un poco de espaciado entre todos estos diferentes enlaces. Por lo que ya hemos seleccionado nuestro enlace aquí mismo, esa es la etiqueta de anclaje. Por lo que en realidad puedo proporcionar la montaña justo aquí. Entonces veamos con Durham. Sí, se ve bien, así que cuando le agreguemos un poco más de estilo va a quedar aún mejor. Entonces por ahora, tenemos básicamente alinear el extremo dire nav bar en una línea, el número de sub-región de espaciado. Ahora pasemos a la siguiente etapa. Entonces chicos, ahora mismo cambiemos básicamente el teléfono que estamos usando. Actualmente estamos usando el teléfono básico de nuestro navegador. Pero en nuestro prototipo aquí se puede ver que
básicamente estamos haciendo uso de la fuente Poppins. Por lo que básicamente hicieron uso del teléfono de Google para extraer esta forma en particular. Entonces vamos a Google Fonts. Y vamos, Así que es para Poppins justo aquí. Seleccionemos aquí. Y vamos a ver luz en regular 400 así como semi negrita 600. Y simplemente copiemos el enlace desde aquí. Vamos a nuestro archivo de índice y vamos a pegarlo justo debajo del título. Vamos a guardarlo. Vámonos a nuestro style.css. Y voy a seleccionar a la familia Barbie y extranjera. Va a haber Poppins. Y si Poppins no funciona por algún motivo, usaremos sensibles. Entonces si revisas nuestra página web, podemos ver que la falla ha sido cambiada y eso se ve mucho mejor ahora. Y también voy a convertir estos a mayúsculas. Entonces para dy, Vamos a desplazarnos hacia abajo y dentro de la etiqueta, tecleemos en texto transformar mayúsculas. Por lo que ahora tenemos todos estos diferentes enlaces en mayúsculas, y como que se ve mucho mejor que tenerlos en minúsculas. Entonces arroz, ahora mismo agreguemos un estado de palabra entero a todos estos diferentes botones de enlace. Entonces cuando pasamos por encima de ellos, el color cambia. Entonces a través de eso, Vamos a ir a un archivo de estilo y vamos a copiar todo
el enlace desde aquí y alertas un pasillo de dos puntos y mecanografía. Entonces lo que tenemos que hacer es que necesitamos cambiar el color. Y el color es básicamente el color primario. Entonces si lo revisas aquí, puedes ver que cuando pasé por encima de estos diferentes enlaces, el color cambia a color primario. Pero es un poco rápido tener básicamente un efecto de desvanecimiento suave y de desvanecerse. Volvamos al archivo de estilo y dentro de nuestro encabezado y nav etiqueta ancla izquierda, voy a añadir una transición. Transición. Para todos los elementos 0.3 milisegundos y es 0s. Entonces ahora si me cierro sobre ellos, se
puede ver que está teniendo un desvanecido suave dentro y se desvanece fuera de él. Y eso se ve un poco bien. Por lo que ahora tenemos o bien el efecto de orden a todos estos diferentes enlaces también. Entonces chicos, ahora mismo vamos a darle estilo a nuestro botón y nodo derecho, pero se ve bastante básico. Entonces si cada cuenta, nuestro prototipo aquí, se
puede ver que nuestro botón de aquí está bastante estilizado. Y tenemos dos botones diferentes, uno justo aquí y otro justo aquí. Por lo que es hora de que volvamos a hacer uso de la clase de utilidad. Entonces volvamos a nuestro código. Y blanco aquí en el archivo index.html en la sección de botones, voy a crear una clase. Entonces estaré teniendo dos clases diferentes aquí mismo, es
decir btn, btn-primary. Entonces la razón por la que estoy teniendo dos clases diferentes aquí mismo es que, por lo que la primera clase, esa es la clase btn, tendrá las propiedades básicas o las comunes. Entonces si revisas estos dos botones, estos dos violines tienen el mismo ancho, el mismo relleno. Por lo que estas propiedades básicas serán con detenidas en la clase btn. Y si lo miras esta zona en particular, pero está teniendo propiedades diferentes como un fondo sólido. Y éste está teniendo un transmisor, Baikonur. Por lo que estas propiedades serán con la ordenada en la clase btn-primaria para la primera carga. Y crearemos otra clase que sea secundaria mediana para esta clase en particular. Por lo que el vaso batiente tendrá todas las propiedades básicas y para personalizar o para tener propiedades individuales, estarás agregando las clases como btn-primary y btn secondary. Y espero que ustedes tengan una comprensión básica de por qué tener dos líneas diferentes. Entonces vamos a ir a ti durante esta clase y vamos a crear primero la clase btn. Por lo que estará teniendo un relleno de 0.8 corridas de arriba e abajo y tres ron de izquierda y derecha. Entonces, pues déjame guardar el archivo index.html. Y como pueden ver que tenemos punto a de,
de arriba y abajo y 3 ellos de izquierda y derecha. Entonces, también cambiemos el peso de la fuente a 600. Sí. Y también cambiemos el tamaño de la fuente a una habitación. Y también estaremos teniendo un borde que va a ser de dos píxeles, sólido, transparente. Entonces la razón por la que estamos teniendo un trasfondo transparente esto porque segundo, pero esto va a tener una frontera, pero la primera no la va a tener. Pero como estas están teniendo las mismas propiedades, vamos a tener un borde, pero va a ser tiempo que pase por defecto. Y también cambiemos el cursor para señalarlo. Entonces cuando acerques tu cursor al botón, va a cambiar al cursor del puntero. Y ahora apuntemos básicamente a la clase primaria BTN específica. Y cambiemos el fondo al color primario. Muy bien, ahora tenemos listo el primer patrón. Y voy a disminuir ligeramente la espera telefónica porque creo que está un poco demasiado oscuro. Pongámoslo como 400. Están ahora está predefinido y además voy a cambiar el texto a mayúsculas. Entonces eso es transformar texto mayúscula. Así que ten en cuenta que se ve bastante bien. Entonces ahora vamos a aplicar básicamente un estado de flotación de este botón en particular también. Entonces cuando básicamente Harvard o este botón en particular, este botón en particular debería verse básicamente como éste. Cuando pase el rato sobre éste, éste debería parecerse a éste. Entonces para hacer eso, básicamente
copiemos el botón primario aquí mismo. Y vamos a aplicar un pasillo. Entonces ahora cambiemos el fondo a transparente. Y vamos a aplicar un color de borde de primaria. Guardémoslo y comprobémoslo. Sí, cambiemos también el color del texto a puro. Está bien, y también hagámoslo un poco más suave. Entonces para hacer eso, vamos a primaria y ya sea transición de todos los ítems, es
decir 0.3 segundos es sí, eso se ve mucho mejor. Por lo que ahora hemos sumado todo un exceso de estado o conducta mezquindad. Ya lo vamos a hacer básicamente con la barra de navegación de nuestra página web. Por lo que echando un vistazo a nuestro prototipo, tenemos la segunda botella para sección de héroes, que incluye la imagen del héroe como vimos por última vez ese texto, el lado derecho. Por lo que básicamente podemos tener dos divs diferentes. Uno puede sostener la imagen y el otro puede contener todo este texto y el botón. Entonces volvamos a nuestro archivo de índice. Y justo debajo de la etiqueta de cierre del nav, Vamos a crear otro div con un nombre de clase de héroe. Y dentro de este div en particular, Vamos básicamente a tener dos diff diferentes, una bonita llamada como zurdo, la otra se llama como derecha. Entonces div, el nombre de clase de izquierda. Y otro div, un nombre de clase de derecho. De acuerdo, ahora bajemos al div izquierdo. Y dentro del div izquierdo, tenemos esta imagen en particular. Abramos una etiqueta de imagen. Y dentro de la fuente voy a Entrar barra de puntos. Y vayamos a la carpeta de imágenes y dejadme bajo héroe hombre. Muy bien, ahora tenemos la sección principal. Y ahora pasemos al div correcto. Y a la derecha, tenemos dos textos diferentes. En primer lugar se compone del nombre, así que vamos a copiar eso. Y yo voy a abrirme y son seis aquí. Y voy a pegar el nombre. Y en segundo lugar, tenemos títulos de desarrolladores creativos de AMA, así que ese es un título principal. Entonces déjame copiarlo y vamos a crear una etiqueta H1 y vamos a pegarla dentro. Perdón, no he copiado y soy dueño. Por lo que soy desarrollador creador. Y si te das cuenta, puedes ver que desarrollar por palabra es básicamente tener un color diferente. Por lo que necesitamos colocar eso dentro de un lapso. Entonces déjame copiarlo y el interior de la bolsa, y vamos a crear un span y pegar en la palabra desarrollador. Muy bien, ahora vamos a echar un vistazo a nuestra página web. De acuerdo, Podemos ver la imagen aquí mismo. Eso es lo que permite el, soy director creativo por título. Y como pueden ver, también
necesitamos un botón. Entonces volvamos a nuestro Código VS. Y dentro del div derecho, Vamos a crear otro div, que todo el botón. Y el botón se nombra como descarga CB. Guardémoslo y echemos un vistazo a la página web. Sí, tenemos el botón justo aquí también. Entonces ahora vamos a revisar nuestro prototipo. Y como se puede ver que todo el texto y el botón está hacia la derecha de los compañeros y también el texto y el botón se encuentra exactamente en el centro vertical de la imagen. Y como pueden ver, tenemos todo el texto y el botón en la parte inferior de la imagen. Entonces para hacer el texto y el botón hacia la derecha de los compañeros y volvamos a nuestro archivo índice. Y como ya tenemos una clase de utilidad, todo lo que tengo que hacer son datos dentro de la clase Héroe. Solo necesito poner en la clase de utilidad flex. Vamos a guardarlo. Y luego volvemos a revisar. Justo así. Tenemos el texto de dieta final hacia la derecha de las carnes. Y para hacerlo en el centro vertical de la imagen, de nuevo, tenemos otra clase de utilidad que es ítems descender. Apliquemos esta clase en particular. Y dentro de un lapso nosotros contra eso, tenemos el texto de la dieta final en el lado derecho así como en el centro vertical de la imagen. Entonces esta es la belleza de tener una clase de utilidad. Nos ayudó a ahorrar mucho tiempo. Y ahora básicamente hay modificar nuestra imagen también. Por lo que revisando el camino de la
imagen, la imagen se encuentra en hero dentro del div izquierdo. Entonces vamos a nuestro archivo de estilo y target o imagen que es Dodd hero dot left y la imagen. Entonces, básicamente vamos a dar un poco de 100 píxeles y un radio de borde de 500 píxeles. Guardémoslo y revisemos la página web. Y como se puede ver que la imagen es lo suficientemente grande. Y también tenemos una ligera curvatura en la parte inferior de la imagen, así como eso apagado o prototipo. Ahora vamos básicamente a darle estilo a nuestro texto y al botón y también tener suficiente número de espaciado entre la imagen y diferentes textos, así
como BDB en el texto también. Entonces, en primer lugar, vamos a morir el texto completo aquí mismo. Entonces si revisamos nuestra página web, se
puede ver que al final por Texas básicamente en color negro. Entonces cambiemos eso en primer lugar. Y como sabemos que el Inditex se encuentra en el div derecho de la clase héroe. Entonces vayamos a nuestro archivo de estilo, y voy a dot hero dot right. Y dentro del div derecho, voy a cambiar el color de todos los elementos a blanco o puro. Vamos a guardarlo. Y como puedes ver que el color se ha vuelto blanco. Ahora vamos básicamente más definido el nombre. Por lo que de nuevo, el nombre es una etiqueta H6 ubicada a la derecha de la clase de héroe. Entonces volvamos a copiar dot hero dot, ¿verdad? Y vamos a apuntar a la pila. Y voy a cambiar el tamaño de la fuente a 1.6 habitación. Vamos a guardarlo. Sí, se ve perfectamente bien. Y también ahora vamos a modificar la etiqueta H1 aquí mismo. Por lo que de nuevo, se encuentra en el div derecho de la clase héroe, por lo que se copia. Orientar la etiqueta H1, cambiar el tamaño de fuente a 4 rem, Veamos. Y también cambiemos el peso de la fuente a un 100. Vamos a guardarlo. Sí. Eso nos está viendo bien contra ti que hay mucho espacio entre la primera y la segunda línea. Entonces eso se debe a una mayor altura de línea. Por lo tanto, disminuyamos también la altura de la línea a 1.5. A ver, 1.2. Sí, eso se ve perfectamente bien. Por lo que ahora tenemos una cantidad suficiente de espacio entre la primera, segunda línea. Ahora, si cada uno ocurre por vez, podemos ver que la palabra del desarrollador Dalit está en otro color. Entonces como sabemos, hemos hecho un lapso específico para el desarrollador. Entonces vamos a apuntar a eso. Entonces eso está de nuevo en el div correcto. Y vamos a apuntar al lapso. Y voy a cambiar el color a primario. Sí. Y también voy a añadir un poco de margen inferior para que, eso, esa es una buena separación entre el botón y este particular, soy un creado un pervertido. Y yo puedo hacer eso en el punto héroe escribir X1. Tan margin-fondo. Demos un tambor. Sí, ahora somos separación organizada y también quiero proporcionar un gramo de margen entre el nombre y la palabra de desarrollador Hammerklavier. Entonces para eso, vayamos al 86 y proporcionemos un margen inferior de un rem. Sí, ahora está funcionando perfectamente bien. Entonces ahora pasemos a la siguiente etapa en la que vamos a darle estilo a nuestro botón. Entonces si revisas nuestro prototipo, podemos ver que el botón básicamente está teniendo un fondo transparente y un borde sólido. Entonces volvamos a nuestro archivo de índice. Y ya hemos creado una clase de utilidad para unos botones básicos. Entonces agreguemos una clase al botón. Entonces va a ser btn. Y también deberíamos tener otro último específico para este botón en particular, y eso va a ser btn secundario. Por lo que btn secundaria. Entonces vamos a guardarlo y vamos a revisar el sitio web. Sí, ahora tenemos que básicamente botón. Ahora necesitamos personalizarlo. Y la forma en que queremos. Entonces para hacer eso, vamos a nuestra clase de utilidades y básicamente creemos una clase secundaria aquí mismo, eso es PTEN dash secundario. Entonces aquí necesitamos que el fondo sea transparente, y necesitamos que el color sea primario. Y también necesitamos la frontera. Por lo que ya hemos creado la frontera, como pueden ver. Pero para el primer caso, lo
hemos hecho transparente. Pero aquí podemos proporcionar un color para que sea frontera. El color Dash es, de nuevo, hacer que el color sea primario. Guardémoslo y chequeemos tu sitio. Sí, se ve bastante bien. Ahora también necesitamos proporcionar un estado anfitrión. Entonces cuando pasemos el cursor sobre
él, debería parecerse a este botón en particular aquí mismo. Por lo que es bonito símbolo. Copiemos aquí la cláusula secundaria completa del fin de semana. Y brindemos un flotador. Entonces necesitamos que el fondo sea primario, y necesitamos un color del texto para que sea oscuro. Guardémoslo y veamos. Y también brindemos un retraso de transición. Entonces vamos a nuestros aceites secundarios btn. Simplemente copiemos este código en particular desde aquí y peguémoslo justo aquí. Y sí, ahora se ve predefinido. Por lo que ahora terminamos con la sección derecha del NDI. Por lo que tenemos nuestro diseño, el texto de acusación así el botón del año pasado. Ahora es el momento de que ajustemos todo el diseño y hagamos que la sección de héroes salga. Por lo que los chicos necesitan cuatro beats o el prototipo, puede ver que en realidad hay suficiente cantidad de espacio entre la imagen y el texto. Pero en nuestra página web no tenemos eso. Entonces para hacer eso, volvamos a nuestro archivo de índice. Y justo dentro de la clase Héroe, voy a añadir una de nuestras clases de utilidad previamente creadas que es el espacio entre. Vamos a guardarlo, y vamos de ida y vuelta. Ahora nada ha pasado y ha terminado. Lo que puedes notar es que muñeca que escriben y las imágenes en realidad no toman. Igual cantidad de espacio. Ese texto básicamente está tomando mucho más espacio que la imagen. Y tenemos que igualarlos bajo el espacio tomado por la imagen y el texto. Tan cierto que tau indica otra clase de utilidad. Y la clase se puede aplicar a la izquierda Div. Y el nombre de la clase es flex dash one. Déjame copiarlo y también necesitamos aplicarlo en el dispositivo correcto. Bueno, vamos a guardarlo y vamos a ir a una clase de utilidad y básicamente crear esta clase en particular que se imparte flex one. Y todo lo que hacemos es aplicar un flujo de uno. Vamos a guardarlo. Vamos a una página web. Y se puede ver que ahora tanto la imagen como el texto está tomando la misma cantidad de espacio. Y otra cosa que se puede ver que la imagen debe estar ligeramente hacia la derecha. Básicamente las imágenes notan en la posición central de su contenedor, como ustedes saben, la imagen y el texto está dentro de su respectivo div, pero él hizo no está en el centro de su div. Entonces para hacer eso, volvamos a nuestro archivo index.html. Y justo dentro de la izquierda, Dave, vamos a crear otra clase de utilidad que sea sólo diferir,
remitente, remitente de cenizas justificado. Déjame copiar el nombre aquí. Vamos a la clase de utilidades y vamos a pegarla. Y todo lo que tenemos que hacer es justificar el centro de contenido. Vamos a guardarlo. Y además vamos a guardar el archivo índice. Y ahora tenemos ligeramente la imagen hacia la derecha, que la hace hacia el centro de su propia perspectiva div. Por lo que ahora tenemos otra sección de héroes dispuestas. Y la otra cosa que deshace que voy a proporcionar un poco más de margen entre este particular, soy un desarrollo creativo y el botón. Parece que está mucho más cerca de la palabra. Entonces vamos al archivo style.css. Y aquí mismo tenemos la etiqueta H1. Voy a proporcionar un margen de fondo de turismo. Sí, ahora tenemos una buena separación entre todo el texto diferente. Entonces chicos, ahora es el momento de bajar a la parte interesante donde vamos
a hacer este diseño de tienda en particular en la parte inferior de nuestra página web. Entonces para que esto suceda, se necesita tener una comprensión básica del polígono. Ahora bien, si miras un sitio web, puedes ver que la parte superior, este es el primer sitio. Este es el segundo lado, el tercer lado, el cuarto sitio, y el quinto tobogán. Entonces este punto en particular, este es el primero, estaremos teniendo la combinación de coordenadas x e y. Aquí. X e y serán 0. Y cuando viajé de aquí todo el camino a la derecha aquí, x va a ser un 100 y y y va a ser 0. El motivo por el
que x es un 100, es porque X ha viajado horizontalmente desde este punto hasta este punto. Entonces es un 100 e y cambia cuando hay un movimiento vertical, pero hasta ahora no hay movimiento vertical, por lo que y es 0. Ahora bien, si me muevo de arriba a abajo todo el camino hasta aquí, y en este punto en particular, x va a ser un 100 y y y va a ser también un 100 porque hay tanto un movimiento horizontal, bien menos vertical. Por lo que tanto de la coordenada x como y serán un 100 nervios básicamente cordón hasta este punto. Entonces volvamos a nuestro archivo de estilo y desplázate
hasta que encontremos la etiqueta de cabecera donde hemos aplicado la bolsa aquí abajo, voy a entrar en una ruta de clip. Y vamos a seleccionar polígono. Entonces en la primera etapa, el punto inicial donde hemos llegado tanto a x como y como 0, por lo que es 00. Y en el segundo, x ha llegado a este punto en particular donde x es un 100 e y y es 0. Entonces x va a ser un 100 por ciento cada uno, y y va a ser 0. Y en la siguiente etapa, X va a viajar desde aquí todo el camino hasta el fondo donde x e y, ambos van a ser un 100 por ciento necesita un 100 por ciento, d es un 100 por ciento cada uno. Entonces, Entonces en este punto en particular, los chicos orgánicos para adivinar cuál será el porcentaje de x e y. entonces x va a viajar de aquí a aquí. Entonces hasta aquí va a ser un 100 por ciento fechas. Entonces si es para contar hasta este punto, va a ser alrededor del 70 por ciento cada uno. Y para el caso de y, va a viajar desde aquí todo el camino hasta el fondo. Si llega hasta aquí, va a ser un 100 por ciento H. Y si va a llegar hasta aquí, va a ser alrededor del 80 por ciento cada uno. Entonces vamos a escribir ese valor aquí mismo, eso es casi 70 por ciento cada uno para x y 80 por ciento H para y. y luego x e y está en este punto en particular, x va a ser 0 e y va a ser un 100 porque X no tiene cualquier movimiento horizontal, pero ¿por qué ha conseguido unos movimientos verticales? Entonces x es 0 e y va a ser un 100 por ciento H, es
decir 0 coma 100 por ciento cada uno. Guardémoslo y echemos un vistazo a la página web. Sí, como pueden ver que tenemos tau, ocurren lo especificado que aquí mismo. Pero necesitamos hacer alguna ligera modificación. Es decir, la propagación de los bordes afilados demasiado altos. Entonces disminuyámoslo y que podamos hacer eso ajustando el valor y. Entonces aumentemos la y a 87 y veamos. Sí, ahora se ha vuelto un poco abajo y también ligeramente hacia la derecha. Ahora hagamos también alguna ligera modificación para que sea un poco mejor. Entonces chicos, en realidad podemos tener un poco
más de espacio entre el contenido del héroe NDI y el corazón. Es tan cierto que básicamente seleccionamos al héroe, todo
el héroe div. Y básicamente proporcionemos un término comprado patty de 5 ellos. Perdón. Vamos a guardarlo. Ahora tenemos una cantidad suficiente de espaciado entre el contenido del héroe n nefasto y el más agudo. Y además veamos qué va a pasar si intentas mover el final, los tecnicos de la
dieta pueden alertar un poco a la cima. Entonces para hacer eso, seleccionemos al último héroe nefasto, ¿verdad? Entonces aquí tenemos el NDA aquí o bien, y brindemos un margen, top. Entonces si quieres que sí lo traiga a la cima, es
necesario proporcionar un valor negativo. Probemos con orina menos phi. Sí. Ahora se ha vuelto ligeramente al sitio superior y se ve bien. Por lo que ahora hemos llamado tau, el texto final Dyer y la imagen alineada perfectamente. Y también tenemos una curvatura D afilada y en general la sección de héroes se ve bastante bonita. Entonces chicos, finalmente terminamos con la sección de héroes de nuestra página web. Y nuestra sección de héroes se ve bastante similar a la de nuestro prototipo. Y así el ácido. Y realmente espero que ustedes entendieran el desarrollo
básico Tarde que he hecho en este video en particular. Y los chicos de la NASA en el siguiente video, vamos a construir la sección de héroes. Y los veré ahí chicos.
6. Diseñar la sección de la sección sobre la sección sobre la: Hola chicos, bienvenidos a otro video. Y en este video en particular vamos a crear la sección Acerca de nuestra página web. Por lo que en el video anterior, hemos construido por completo la sección de héroes, que incluye la barra de navegación y la sección condensada de héroe nefasto final. Entonces ahora construyamos la sección abortar. Y como pueden ver que tenemos una caja. Y dentro de la caja tenemos dos elementos diferentes que está del lado izquierdo tenemos la imagen, y del lado derecho tenemos el texto completo, que incluye el encabezado, el contenido principal, como un último diferente iconos de redes sociales. Entonces deberíamos estar teniendo dos divs diferentes. Un grado va a sostener la carne y el otro se ha ido. Escuché todos estos diferentes elementos de textos. Entonces vamos a nuestro archivo index.html. Y déjame acercar. Entonces justo después de la etiqueta final del encabezado, voy a crear una nueva sección con una clase de sobre. Y dentro de esta sección necesitamos crear una caja. Entonces voy a crear un div con una clase de contenedor. Y dentro de la caja, como se puede ver, estará teniendo dos elementos diferentes,
el elemento de imagen y el elemento de texto. Entonces vamos a crear la primera en vivo. Y voy a dar una clase de derecho. Y tendré el segundo div, que va a tener la clase de izquierda. Entonces voy a colocar el div izquierdo en la parte superior. Entonces dentro de la izquierda, si tenemos la pila de imágenes, así que vamos a abrir eso y dentro de la fuente, vamos a navegar a la carpeta de imágenes. Y voy a usar al hombre héroe. Significa exactamente la misma imagen que usamos en la sección de héroes. Entonces estamos hechos con la parte correcta, esa es la parte de la imagen. Ahora pasemos al siguiente lugar. Entonces, en primer lugar, tenemos el H1, que es la carne del teclado y la palabra me es en realidad de un color diferente. Por lo que necesitamos usar un lapso. Entonces volvamos atrás y vamos a entrar al div correcto. En primer lugar, estaremos teniendo la etiqueta H1, que va a tener el sobre. Y dentro del lapso, estaremos teniendo la palabra yo. Y después de eso tenemos la introducción. Entonces vamos a copiar eso. Entonces vamos a encerrar eso en una etiqueta h3, y vamos a pegarlo aquí mismo. Y después de eso tenemos un poco de texto aleatorio lleno de texto. Entonces, básicamente creemos aquí un párrafo. Perdón. Y vamos a ender Lauren 10, sólo por algún texto lleno. O en este momento, es el momento de que
sumemos todos estos diferentes iconos de redes sociales. Y hagámoslo. Entonces chicos, para encerrar todos estos diferentes iconos de redes sociales, voy a crear otro div justo dentro la Div derecha y no le están dando una clase como social. Y dentro de ese div, vamos a usar la etiqueta de anclaje para sostener todos estos iconos diferentes porque todos estos iconos tienen un llamado a la acción. Entonces cuando lo presiono, en realidad debería llevarnos a otro sitio web. Por lo que es mejor usar una etiqueta de ancla. Entonces voy a crear una etiqueta de anclaje y la superficie va a quedar nula ahora. Y perspicacia daga, daga va a colocar una imagen. Entonces vamos a la carpeta de imágenes. Y lo primero de todo, tenemos el logotipo del sitio web, ese es el mundial, pero dash B y G. Así que en realidad vamos a copiar el excita una etiqueta manga por cuatro veces más. Entonces, vamos a seleccionarlo. Y mientras presionan y sostienen Alt y Shift, voy a presionar la flecha hacia abajo cuatro veces más. Y esto nos puede ayudar a copiar fácilmente el texto en particular que queremos. Y ahora elijamos la segunda imagen, y ese es el logotipo. Después tenemos el de Instagram , LinkedIn, y GitHub. Ahora mismo tenemos lo que todas las mayores en su lugar. Guardémoslo y déjame abrirla y vivir servidor una vez más. Y como pueden ver, tenemos toda la imagen y todos los diferentes iconos, e introduciré alguna ligera modificación para hacerla más pequeña. Muy bien, Así que antes de seguir adelante, voy a proporcionar un poco de un espaciado entre la parte superior, esa es la parte de héroe debajo de la parte abort, ya que puedes ver que está bastante cerca. Entonces para hacer eso, básicamente seleccionemos esta sección aquí mismo, porque todo el código está encerrado en la sección sobre. Entonces vamos al estilo. Y voy a mandar de vuelta la clase sobre. Y voy a dar un relleno de tres años vienen de arriba y de abajo es 0 de izquierda y derecha. Sí, ahora tenemos rumbo oficialmente monospace desde arriba. Y ahora vamos básicamente a reducir tamaño y hacerlos alineados en el bebé no lo hará. Entonces lo primero que quiero hacer es empezar dentro de la clase social. Ya tenemos la clase de utilidad flex y aplicar muerto aquí mismo. Vamos a guardarlo. Y como puedes ver, ahora todo está alineado en una sola línea. Y ahora, básicamente, hagámoslo un poco más pequeño. Por lo que se encuentra en la sección sobre dentro de la clase correcta. Esa es la división correcta. Y tenemos otro div dentro de él conocido asocial. Entonces vayamos a nuestro archivo de estilo y voy a apuntar a la sección Acerca. Y dentro de eso tenemos lo social. Nuestro div. Y dentro de eso tenemos la etiqueta de ancla y las imágenes y brillo dentro de la etiqueta de ancla. Entonces vamos a seleccionar la imagen. Y básicamente voy a cambiar la altura, 250 pixel. El 25 debe verse bien. Sí, sin embargo, básicamente hazlo más pequeño y WWL lo estilo más tarde. Y entonces también proporcionar un margen, ¿verdad? Margen derecho de 10 pixel. Ahora tenemos la sierra de logo en mi talla más pequeña y además tenemos suficiente cantidad de espaciado entre ellos. Y me siento como un prototipo. Podemos ver que el texto sazona el derecho de la imagen. Entonces para hacer eso, volvamos a nuestro index.html. Y justo en el contenedor, voy a volver a jugar la clase de utilidad flex y bug destacado. Podemos ver que la textura no es el derecho de la imagen. Y también hagámoslo el centro vertical. Por lo que hemos atrapado otra clase de utilidad que son artículos que lo envío y ahora no es descendiente. Y también vamos a aplicar el flex dash uno a la izquierda y la derecha def, para que la imagen y el texto Basilea tomen igual cantidad de espacio. Entonces vamos a aplicar flex dash uno sobre la izquierda si impecable para el diff derecho. Sí, Ahora estos dos están tomando la misma cantidad de espacio. Y ahora hagamos alguna ligera modificación para que se vean mejor. Entonces chicos, ahora mismo cambiemos básicamente el tamaño de nuestra imagen. Este tipo de aspecto un poco pequeño. Entonces, básicamente seleccionemos la imagen. Por lo que la imagen se ubica en la clase izquierda, esa es la división izquierda. Entonces vamos a un archivo de estilo y vamos a apuntar a la sección sobre. Hemos cogido al Div izquierdo dentro de la izquierda si tenemos la imagen, y voy a cambiar la altura a 500 pixel. Además, quiero cambiar el radio de la frontera. Borde-radio a 1000 pixel. Vamos a guardarlo. Y vamos a ver. Sí, ahora se ve mucho mejor. Y también conocido como hacer algunas ligeras modificaciones a nuestra imagen. Entonces ahora alteremos básicamente el About Me y aplicamos el color que es color específico a la palabra
me, así como eso en nuestro prototipo. Entonces el sobre mí donde se encuentra dentro de la división derecha de la clase. Entonces punto, punto, punto, derecha. Y me abortan es una etiqueta H1. Y cambiemos el tamaño de la fuente, 250 pixel. Y también cambiemos el color a primario, ese es el lapso. Entonces cambiemos el color a primaria variable. Vamos a revisar la página web. Sí. Ahora el aborto me ha sido alterado. Ahora vamos a apuntar al H3. Esa es la introducción. Déjame copiarlo. Entonces cambiemos el tamaño de fuente a 20 píxeles. Y también hay agregar line-altura de tres. Vamos a guardarlo. Sí, Ahora se ve bastante mejor. Y también van a agregar un par de párrafos o
oraciones más a esta área de introducción en particular porque es una especie de MD de aspecto. Entonces vayamos a nuestro index.html. Y aquí mismo voy a sumar mucho Dundee. Vamos a guardarlo. Y obviamente tener suficiente cantidad de espacio por encima de este logotipo en particular. Entonces vamos a darle estilo a nuestro CSS. Ya tienes el logo seleccionado aquí mismo. Entonces vamos a sumar un margen. Arriba de una rem. Sí. Por supuesto, cantidad suficiente de espaciado entre el logo así como el extremo diastólico suficiente. Entonces chicos, ahora mismo voy a aumentar el tamaño de nuestro párrafo porque siento que es un poco difícil de leer. Entonces vamos a entrar en nuestro style.css. Nuevamente, permítanme seleccionar el sobre y las divisiones correctas. Y voy a apuntar al polígrafo y quiero aumentar el tamaño del teléfono a 20 pixel. Sí, ahora es mucho legible y también
quiero aumentar ligeramente en tamaño de estos iconos. Por lo que ya hemos seleccionado los diferentes iconos de redes sociales, y voy a aumentar su altura a 30 píxeles. Vamos a guardarlo. Sí, ahora se ve mucho mejor. Entonces chicos, ya terminamos con la sección directiva también. Y se ve bastante similar a la de nuestro prototipo. Y en esta particular curvatura
básicamente lograremos yo dub y BR en que estás trabajando,
Vamos a matar sección porque tiene que ser fácil
alterar la parte superior de la sección de habilidades en tierra, la parte inferior de la sobre mi sección. Entonces lo haremos en el próximo video cuando estemos construyendo la sección de habilidades. Entonces eso es todo chicos con sección Libor, hemos completado con éxito la construcción. Y los veré próximo video chicos. Gracias.
7. Codificar la sección de habilidades: Hola chicos, bienvenidos a otro video. Y en este video en particular vamos a construir la sección de habilidades de nuestra página web. Por lo que en los videos anteriores, hemos construido la sección de héroes así como el abort como en. Y ahora hay tiempo para que lleguemos a la tercera parte en la que vamos a construir la sección de habilidades. Entonces hablando de nuestro proceso de diseño, en
primer lugar, estaremos creando la etiqueta H1. Después de eso, w0 estará teniendo un párrafo adelante por todos estos dioses diferentes. Entonces tenemos nuestras seis tarjetas diferentes aquí mismo, y cada dios tiene un par de información dentro de ella, como un logotipo, encabezamiento inteligente, y un párrafo. Y estaremos usando rejillas CSS para lograr este look de tarjeta. Entonces este va a ser un video realmente informativo. Y ahora mismo, Vamos a saltar a nuestro archivo índice. Entonces lo primero que quiero hacer es que quiero limpiar ligeramente nuestro código. Esa es nuestra puntuación de índice. Y como se puede ver que en realidad está mirando grandes datos recopilados y voy a estar actual realmente identificar una sección que fácilmente. Entonces lo que voy a hacer es que este extremo extremo extremo extremo sección aquí es básicamente nuestra sección de héroes. Entonces escribe un balón, nuestro encabezado. Voy a crear un comentario que es un comentario de archivo índice. Entonces para hacer eso, voy a abrir una etiqueta MD seguida de un signo de exclamación y dos guiones. Entonces esto va a crear una etiqueta vacía, y esto básicamente se llama como comentario. Y lo que sea que escribas dentro de un desgastado común se ejecutan. Entonces aquí voy a escribir en arranques de sección de héroes y la voy a copiar. Y el espacio de plomo al final del encabezado, y quiero renombrarlo. ¿ Se termina la sección de héroe. Hagamos lo mismo para la sección de abortos. Vamos a pegarlo aquí y déjame renombrarlo a Acerca de la sección. Y déjame copiarlo. Y peguemos lo mismo al final de nuestra sección de abortar también. Entonces al hacer esto, nuestro código se ve mucho más limpio. Y también si en el futuro, si estás bajo depuración o Dios, podemos identificar fácilmente las diferentes secciones del archivo índice también. Por lo que ahora mismo vamos a bajar a nuestra sección de habilidades. Entonces otra vez, voy a crear un die aquí mismo. Y quiero nombrarlo como empieza la sección de habilidades. Entonces antes que nada aquí y voy a crear una sección. Entonces déjame acercar. Vamos a crear una sección con una clase de habilidades. Y dentro de esta sección estaré teniendo un div con un contenedor de clase para que
podamos colocar todos los elementos en el centro del contenedor de página. Por lo que dentro de este contenedor en particular estará teniendo un encabezamiento y el párrafo. Por lo que el rubro consta de dos partes diferentes. La parte principal y el spot de habilidad. Y spot de habilidad está en un color diferente, por lo que necesitamos terminar golpes que dentro de un lapso. Así que vamos a crear una etiqueta H1 aquí mismo, y ratones y habilidades de escucha dentro del lapso. Seguido de tenemos un párrafo, así que voy bajo algún texto de relleno. Muy bien, ahora tenemos el rubro así como el párrafo. Entonces ahora si revisamos la sección de tarjetas, como pueden ver que estamos teniendo seis guías diferentes y como ya dije, estaremos usando rejillas CSS. Por lo que realmente necesitamos una caja y dentro de la caja estará teniendo todas estas tarjetas diferentes. Entonces vamos a crear un envoltorio o una caja. Entonces déjame crearlo aquí mismo. Pero una clase de envoltorio de tarjetas, guarda envoltura discontinua. Dentro de este envoltorio en particular, estaremos teniendo nuestra sola tarjeta. Entonces vamos a crear un div con la clase de tarjeta. Entonces con el fin de abrir la tarjeta, y como se puede ver que dentro de la guardia VR hyping un logo. Entonces vamos a crear una etiqueta de imagen aquí mismo. Por lo que dentro de la fuente voy a hacer slash de puntos. Vamos a nuestra carpeta de imágenes y vamos a seleccionar imagen de código. Por lo que ahora tenemos el logo en su lugar. Entonces necesitamos un bateo para poder usar una etiqueta H2. Y voy a estar en desarrollo. Y tenemos un gráfico de tarta. Cuando entre lorem, no d por algunos se llene a continuación. Por lo que ahora tenemos todos los elementos básicos que están dentro de un auto. Entonces chicos, antes de seguir adelante, hagamos rápidamente un poco de estilo ligero a nuestra habilidad, estilo espacial. Nuestro rubro tiene elástico, poligonal, y además vamos a marcar es de tarjeta única para
que podamos copiar lo mismo para todas las demás tarjetas diferentes. Entonces vamos a nuestro archivo de índice. Y lo primero que quiero hacer es que quiero dar una clase a nuestra etiqueta H1. Ese es el rumbo de habilidades porque no hemos dado una antes. Entonces lo voy a nombrar como seccion dash doliendo. Yo quiero guardarlo. Vayamos a nuestro style.css. Entonces lo primero que voy a hacer es empatar potenciando este fondo oscuro en particular. Entonces como puedes ver que tenemos todas estas habilidades clase para esta sección. Entonces voy a apuntar a eso, eso son habilidades almacenadas. Y quiero dar un fondo de color oscuro que es punto. Vamos a guardarlo. Y ahora vamos básicamente el estilo se dirigen, por lo que encabezar como CTO, diferentes partes. Entonces, básicamente apuntemos al rumbo. Por lo que hemos dado una clase de guión de sección. Vamos a copiar. Y voy a entrar habilidades y luego sección guión rumbo. Entonces, en primer lugar, cambiemos el color a puro. Ese es el color blanco. Y nos deja básicamente cambiar el tamaño del teléfono 2, 3 habitación. Y también hagamos el texto en el centro de la página proporcionando un centro de alineación de texto. Y vamos a guardarlo y ver cómo se va a ver en el navegador. Sí, se ve predefinido. Y además proporcionemos un poco de margen inferior para que esté bien separado del párrafo. Por lo que un margen fondo de maravilla, debería hacer bien. De acuerdo, sin habilidades. El rumbo se ve bien. Y también cambiemos el color de la palabra de habilidades porque aquí la tenemos en verde. Por lo que ya hemos aplicado un lapso a la habilidad
general para que podamos acceder fácilmente a ella a través de nuestra sección ese derramamiento. Entonces vamos a copiarlo. Y apuntemos el lapso y cambiemos el color a primario. Sí. Bastante bien. Entonces chicos, ahora mismo empatemos nuestro párrafo. Es decir, cambiemos su color a blanco y subirlo hacia el centro de la página. Entonces lo que voy a hacer, dijo que voy a copiar este guión de sección rumbo justo por aquí. Entonces voy a hacer plus v. Así que lo genial
de CSS es que WEF consiguió este encabezado de guión de sección, que es básicamente una clase para esta etiqueta H1 en particular. Y al especificar plus b, significa que quiero decir como no lo hizo el siguiente elemento. Y el siguiente elemento que quiero seleccionar es básicamente un párrafo. Entonces al especificar plus p, significa que quiero seleccionar el siguiente elemento después de esta etiqueta S1 en particular. Y eso es básicamente epígrafe. Por lo que dentro de este párrafo en particular, quiero cambiar el color a blanco que estos alimentan. Y también quiero hacerlo en el centro de la base, por lo que remitente de línea extra. Por lo que también quiero un margen de fondo de ocho habitaciones. Por lo que el párrafo y los artículos están bien separados. Guardémoslo y veamos. Y sí me veo perfectamente bien. Entonces si nos desplazamos hacia abajo, se
puede ver que al final esa sección de autos es una morsa. Y ahora tratemos de arreglar eso. Entonces chicos, ahora empecemos nuestro proceso de estilismo de guardia. Entonces saltemos en la puerta HTML. Y como pueden ver que están dentro de nuestro envoltorio de Dios, sean cuatro. Ahora sólo tenemos una sola tarjeta. Qué, como se puede ver en el diseño, básicamente
necesitan seis tarjetas. Entonces ahora vamos a crear seis de ellos. Entonces voy a seleccionar toda la tarjeta aquí mismo. Y mientras presionan y mantienen presionadas las teclas Alt y Shift, voy a presionar la tecla de flecha hacia abajo cinco veces más. Y eso básicamente hizo un total de seis cartas diferentes. Guardémoslo y digamos acantilados ahora. Y como pueden ver que nos tenemos seis tarjetas diferentes. Entonces ahora vamos a entrar en el proceso de peinado. Y antes de eso, permítanme disminuir rápidamente el tamaño de este icono en particular para que se vea mejor durante el proceso de diseño. Entonces, simplemente apuntemos el envoltorio de tarjetas y las imágenes dentro de ella. Entonces vamos a un archivo de estilo. Y aquí voy bajo papel de tarjeta de punto y todas las mayores dentro de este div en particular. Y voy a cambiar su altura a 100 píxeles. Vamos a guardarlo. Sí, ahora solo nos quedamos bien y vamos a modificarlo más durante el proceso de diseño. Entonces ahora lo que voy a hacer es esa muñeca, es básicamente una envoltura de tarjetas seleccionada. Por lo que el guardia Bradbury específicamente dentro de las habilidades. Y vamos a seleccionar el envoltorio de tarjetas. Entonces aquí voy a teclear en exhibición. Consíguelo. Entonces como ya dije, ustedes van a estar usando una grilla para lograr que el carrito se vea tan bien. Se trata de una herramienta absolutamente poderosa y te puedo ayudar a lograr cualquier tipo de diseño complejo de la forma que quieras. Entonces si lo guardo y vamos a nuestra página web, se
puede ver que nada ha pasado básicamente. Es porque no hemos definido la cuadrícula. Entonces introducimos, definimos el gremio, ah, cuántas filas o columnas quiere Dhabi. Por lo que aquí en nuestro prototipo podemos ver que tenemos dos filas diferentes y en tres columnas diferentes. Por lo que necesitamos especificar el número de columnas justo aquí. Por lo que voy a escribir en columnas de plantilla de cuadrícula. Y aquí voy a escribir en un espacio FR, un espacio FR, uno FR. Entonces si cada entrenamiento, como se puede ver. Tengo tres columnas diferentes y cada columna tenemos dos elementos diferentes. Y esta es la magia de la inacción de la cuadrícula. Y ahora vamos a darle más estilo a estas tarjetas. Entonces los chicos vieron saber si decía pre-prototipo, se
puede ver que la tarjeta básicamente está teniendo un fondo blanco. Y ahora vamos a cambiar básicamente la tarjeta de oferta de fondo. Entonces antes de eso, como ya dije, es necesario especificar o definir una cuadrícula. Y hemos especificado la cuadrícula escribiendo en 1543 veces. Por lo que tenemos tres columnas diferentes. Pero va a ser un proceso largo. Y si tenemos más de cinco o seis columnas diferentes. Entonces, en realidad hay otra forma en la que se puede hacer eso. Es decir, simplemente puedes especificar una repetición. El ritmo. Y el primer parámetro va a ser cuántas veces ese empate quiere repetir un elemento en particular. Entonces en nuestro caso son tres. Y el siguiente parámetro es ¿qué quieres repetir por tres veces? En nuestro caso, es un F5. Y si lo guardo y si revisas nuestra página web y lo refrescas, puedes ver que no ha pasado nada. Eso significa que la función de repetición está funcionando perfectamente bien. Y ahora cambiemos el color de fondo del auto. Y como sabemos que Dios se encuentra básicamente dentro de la envoltura de tarjetas. Entonces vamos a copiar entonces ese núcleo de aquí y pegarlo aquí. Y además agreguemos una tarjeta de puntos y cambiemos el fondo a blanco. Por lo que volver nota a puro. Guardémoslo y veamos cómo se ha cambiado el diagrama. Y como puedes ver que todas estas cartas están congestionadas juntas. Por lo que necesitamos tener suficiente cantidad de espacio entre ellos, así como eso en nuestro prototipo. Entonces ya que estamos usando grid, Es un proceso fácil, es un proceso sencillo. O tenemos que hacer es que necesitamos especificar el hueco, es
decir rejilla, dash, columna dash gap. Precisemos un espacio de Turín. Vamos a guardarlo. Y como puedes ver que tenemos espacio remoto F2 entre todas estas tarjetas. Y como se puede ver, también necesitamos un poco de espacio en la parte inferior, pero en esta parte en particular. Entonces, especifiquemos un hueco de fila. Ahora hemos especificado un hueco de columna. Ahora vamos a copiarlo. Y voy a cambiar la columna a remar. Y brindemos brecha de flecha de 67. Vamos a guardarlo. Y como ves eso, ahora tenemos supuesto cantidad suficiente de espacio entre estas tarjetas. Y como se puede ver que el, todos estos elementos dentro de la tarjeta Sartre congestionados. Y si revisas tu prototipo, puedes ver que todo lo está teniendo así entre ellos o no hay espacio desde la frontera de la guardia. Por lo tanto, proporcionemos un poco de relleno al carrito. Entonces vayamos a nuestra tarjeta aquí y proporcionemos un relleno de libertad desde arriba e abajo y dos habitaciones desde izquierda y derecha. Vamos a guardarlo. Y como ves eso, sé que nuestra tarjeta se ve bastante bien. Tenemos curso cantidad suficiente de relleno y cantidad de
envío de espaciado entre las tarjetas. Ahora como básicamente caminar dentro de la tarjeta y hacer estos elementos en su posición respectiva. Entonces chicos, si tomamos nuestro prototipo, se
puede ver que el logotipo está flotando en la parte superior de la tarjeta. Y ahora es el momento de que logremos este tipo de look. Entonces si revisamos el archivo índice, podemos ver que el amaze básicamente se encuentra dentro de la tarjeta. Dios está completamente envuelto alrededor de la división del envoltorio de tarjetas. Entonces si vamos al archivo de estilo, entonces lo primero que quiero hacer es que básicamente quiero cortar el selector de imagen por mero, porque anteriormente hemos cambiado la altura de la imagen. Y lo he pegado aquí mismo para que podamos relacionarnos fácilmente entre la imagen y el guardia. Entonces lo primero que quiero hacer es que voy a cambiar la posición de la imagen a absoluta. Y quiero cambiar la posición de la tarjeta para relacionarla. Vamos a guardarlo. Y ahora podemos ver que la imagen está básicamente dentro de la tarjeta. Y al especificar div absoluto y retrasado, significa que el dios básicamente va a actuar como el padre y la imagen va a actuar como un tipo. Entonces por ejemplo, dentro de lo increíble, si especifico top 0, se
puede ver que anunciaron las mayores van a la parte superior de la tarjeta. Por ejemplo, si quiero especificar izquierda 0. Ahora se puede ver que la imagen se fue todo el camino a la izquierda del auto, no a la izquierda de la página. Ahora, el guardia va a actuar como el padre y las imágenes pueden actuar como el niño. Ahora bien, si es como el protón puede ver que las imágenes en realidad están flotando encima de la tarjeta. Por lo que necesitamos sacar la imagen de los guardias, por lo que necesitamos usar valor negativo. Entonces lo que voy a hacer es que voy a cambiar el top a menos 3.5 M. Y vamos a guardarlo. Y si revisas el revés en tu contra que ahora es autista fuera. Y ahora tenemos que llevarlo hacia el centro de este automóvil en particular. Para ello, cambiemos la izquierda. Por lo que ahora a la izquierda es 0. Por eso las imágenes todo el camino a la izquierda del intestino. Entonces si lo traigo hasta 50 por ciento de fecha. Ahora el principal debe estar en el centro, pero no está en el remitente de la guardia. Es porque el borde izquierdo puede ver que el borde izquierdo está básicamente en el centro de la tarjeta. El NOR descendiente de las imágenes al 50 por ciento de la tarjeta, el extremo izquierdo de esta imagen en particular está en D 50 por ciento de la tarjeta. Ahora necesitamos traer el remitente del mate
hacia el centro o el 50 por ciento de la tarjeta. Entonces para hacer eso, volvamos a nuestra imagen otra vez. Y vamos a utilizar el sólido Tiempo de Transformación. Por lo que el tiempo selecto se utiliza básicamente para mover el mayor en línea para el
eje x , eje y, como de nuevo, moverlo horizontalmente,
verticalmente de la forma que quieras. Ahora sólo usamos Traducir X porque queremos mover la imagen en el camino horizontal. Entonces si simplemente pongo entonces 50 por ciento va a mover la imagen hacia la derecha. Pero queremos mover la masa hacia la izquierda porque necesitamos
llevar esto a parte de las criadas en este final en la tarjeta. Entonces pongamos un menos 50%. Y si lo guardo, se puede ver que ahora la imagen está en el centro exacto o el 50 por ciento de la copa, 50% del auto y el 50 por ciento de la imagen está exactamente alineada en el borde horizontal superior de la columna. Entonces así es como logramos este tipo de look flotante para el ícono. Y ahora el apartado de autos se ve predefinido. Y como pueden ver que tenemos espacio de orden de trabajo entre los párrafos y un Dios, voy a disminuir ligeramente el margen inferior de nuestra bolsa. Entonces si nos desplazamos hacia arriba, podemos ver la etiqueta p y vamos a disminuirla a seis de ellos. Y veamos cómo se va a ver. Ahora en realidad se ve mucho mejor. Ahora pasemos a la siguiente parte. Entonces chicos, ahora mismo vamos estilo detecta dentro de la tarjeta. Entonces, antes que nada, vayamos a nuestro styles.css. Y dentro de las tarjetas voy a hacer la línea extra como remitente. Entonces escribir texto está básicamente alineado en el centro. En segundo lugar, también quiero dejar un espacio entre ambos y el párrafo. Entonces otra vez, vamos a copiar luego sección de tarjeta directa desde aquí. Vamos a pegarlo aquí y vamos a seleccionar la etiqueta H2. Y voy a dar un margen de fondo de un tambor. Vamos a guardarlo. Sí, no, se ve predefinido. Entonces, por último, añadamos también un estado estacionario. Entonces cuando todo yo, en esta carta en particular, básicamente
conseguimos que papá juegue con el color. Entonces volvamos a seleccionar la sección de tarjetas desde aquí, y la voy a pegar por aquí. Demos una hora entera. Y quiero que el fondo esté jugando con el color. Tan bueno de ver. Sí, lo es. Podemos definir también necesitamos que se desvanezca suave y se desvanezca o defecto. Entonces vamos de nuevo a nuestra tarjeta justo aquí y proporcionemos una transición de todos los elementos, 0.3 milisegundos. Y lo es, sí, se ve bastante bien ahora. Ahora vamos a cambiar todos estos iconos diferentes aquí también. Es bastante fácil cambiarlos. Y vayamos a nuestro index.html. Entonces cambiemos la segunda tarjeta. Entonces ésta es la postal. Y ahora vamos al segundo jardín, cambiemos la imagen. Entonces tenemos Dui, Yu x, luego tenemos iPhone, supongo, luego videografía. Y finalmente tenemos un GitHub. Entonces si lo guardo, Vamos a ver nuestra página web. Como puedes ver que todos los diferentes iconos están en su lugar y se ve bastante bien. Entonces lo último que tenemos que hacer es esta particular curvatura por aquí. Por lo que ya lo hicimos en el video anterior, un asaltante les pide
que sólo prueben si pueden lograrlo por su cuenta porque ya lo hicimos en la sección anterior, solo radios elefante. A ver si podemos averiguar cómo podemos ahora hacer esta época particular curvatura aguda YO HACO aquí. Por lo que renuncian a buscar minuto y tratan de resolverlo tú mismo. Entonces espero que ustedes lo hayan probado. Y si no pudiste averiguar cómo podemos hacer eso, por favor sí mira el video anterior en el que he explicado en profundidad el proceso de diseño. Por lo que ahora mismo intentemos básicamente lograr esta curvatura en particular en nuestra página web. Entonces vamos a nuestro archivo de índice. Y como puedes ver que toda la sección de habilidades reside dentro de esta sección en particular, que está teniendo una clase de habilidades. Entonces si volvemos a ir al archivo de estilo en la parte del perro, ver la parte de habilidades donde hemos aplicado el fondo. Entonces aquí mismo voy a escribir en Clip path polygon. Y ya he probado varios valores. Y dy finalmente salió con un par de valores y lo voy a pegar. Yo voy aquí y vamos a guardarlo. Entonces si revisamos nuestra página web, se
puede ver que tenemos una ligera curvatura. Pero se puede ver que nuestro logotipo ha sido anulado por esta particular curvatura. Entonces hicimos un poco de relleno en la parte superior de nuestra cabeza. Entonces aquí tenemos nuestro contenedor. Por lo que dentro del contenedor tenemos todas las demás cosas. Entonces si pudieras proporcionar un poco de relleno en la parte superior del contenedor, BOB podrá bajar este rubro en particular. Entonces voy a ir a un archivo de estilo y justo debajo como mata, voy de nuevo objetivo o habilidades y el contenedor. Y voy a dar una parte superior acolchada de un píxel de 100. Y eso básicamente baja luego disección EBIT hacia abajo, y ahora todo es claramente visible. Y también pudimos lograr esta particular curvatura según nuestro prototipo. Entonces eso es todo chicos. Por lo que aprendimos bastante en este video en particular. Estar completamente construido el, la sección de habilidades. Y eso es todo. Espero que ustedes entendieran lo básico que tenemos deuda en este video en particular. Entonces eso es todo, chicos. En el siguiente video, pasemos a la siguiente parte de nuestra página web.
8. Crea la sección sección de proyectos: Hola chicos, bienvenidos al video. Y en este video en particular, v van a construir la sección de proyectos de nuestra página web. Entonces en los videos anteriores, tenemos que construir la sección de héroes, la sección Acerca, y la sección de habilidades. Y ahora es el momento de que saltemos a la sección de proyectos. Y si analizas una sección de proyecto, puedes ver que tenemos un encabezado principal justo por aquí. Y debajo del encabezamiento aquí se puede ver la imagen. Esta es básicamente la imagen del proyecto. Y también tenemos un pequeño párrafo que va a definir cuál es el proyecto. Y aquí se pueden ver diferentes puntos. Por lo que estas puertas dependen del número de diapositivas que tenga. Y este punto verde justo aquí indica la diapositiva actual que ya tú. Entonces básicamente tenemos un rumbo. Y la segunda parte es este deslizamiento aparte. Por lo que básicamente podemos clasificar la diapositiva aparte en dos secciones diferentes. Por lo que la primera sección puede ser la imagen y Biograph, y la segunda sección puede ser este particular puntos diferentes. Entonces todo eso se trata de participación. Y ahora es el momento de que codificemos y llevemos la sección de productos sobre tu vida. Entonces arroz, ¿verdad? No, Vamos a nuestro archivo de índice y eso es otra vez, ver esta sección de habilidades E sub. Entonces si nos desplazamos hacia abajo justo debajo de la etiqueta de cierre de nuestra sección, voy a colocar un comentario que indique que nuestra sección de piel ha terminado y la línea media. Y aquí no creo otro comentario que indique que la sección del proyecto ha comenzado. Y aquí, voy a acercarme. Y vamos a crear una sección con una clase de proyectos. Y dentro de la sección quiero crear otro div con una clase de contenedor dentro de este div en particular. En primer lugar, tenemos una pulgada que tiene el nombre de proyectos. Entonces finjamos que es uno, y tecleemos los proyectos. Muy bien, ahora tenemos la etiqueta H1 en su lugar. Ahora bajemos al tobogán principal aparte. Entonces chicos, básicamente necesitamos un envoltorio para sostener todas las diferentes diapositivas que vamos a crear para que el envoltorio encienda todas las diferentes diapositivas. Entonces vamos a crear 1 primero. Entonces para hacer eso, vamos a nuestro archivo de índice. Y justo debajo de nuestra etiqueta H1, voy a crear otro div con una clase de slider. Y dentro de esta diapositiva en particular, una división estaremos creando nuestra primera diapositiva. Entonces de nuevo, voy a crear otro div con una clase de diapositiva. Por lo que dentro de la diapositiva, como se puede ver, tenemos una imagen primero. Entonces vamos a crear una etiqueta de imagen. Y dentro de la fuente voy a entrar dorsolateral. Vamos a la carpeta de imágenes. Y he creado una imagen con un nombre de visualización de datos. Entonces vamos a seleccionar el primero. Y en segundo lugar, también tenemos aquí un párrafo. Entonces vamos a crear una etiqueta de párrafo y voy a introducir algún texto. Vamos a guardarlo. Por lo que ahora tenemos la imagen como párrafo de velocidad en sus respectivas posiciones. Entonces chicos, a partir de ahora tenemos la ralladura es de una sola diapositiva, pero en realidad necesitamos un par de diapositivas más. Entonces para hacer eso, quiero seleccionar nuestra luz de solteros. Y mientras presionas y mantenidas en Alt y Shift en mi teclado, voy a presionar la flecha hacia abajo por tres veces más. Y eso básicamente crea un total de cuatro diapositivas diferentes. Entonces vamos a guardarlo y revisar nuestra página web. Y como pueden ver que ahora tenemos cuatro imágenes diferentes y para diferentes párrafos. Entonces lo primero que quiero hacer es que quiero reducir el tamaño de la imagen. Entonces para hacer eso, vamos a nuestro archivo de índice. Por lo que básicamente los mayores ubicados en esta división líder, dentro de esta división de diapositivas, pueden acceder al mate. Entonces vamos al archivo style.css. Aquí, voy a seleccionar el deslizador. Por lo que en el slider celular podemos acceder a esta diapositiva, la visión, y en satisfacer división además de nuestra imagen. Entonces vamos a seleccionar la imagen y voy a proporcionar un ancho de 500 píxeles y una altura de alrededor de 280 píxeles. Está bien, ahora este hielo está mucho mejor. Entonces en este momento es el momento de que caminemos sobre nuestro slider, porque ahora sólo tenemos una imagen y un párrafo. Entonces ahora hagámoslo. Entonces chicos, para crear nuestro slider, estaremos usando una biblioteca conocida como un deslizador lijado. Entonces para conseguirlo, vayamos a Google y busquemos slider sick. Y vamos a elegir la primera opción aquí mismo. Y vamos a navegar a la sección de uso. Y si te desplazas hasta aquí, puedes ver el guión. Entonces vamos a copiar entonces muere clip de aquí. Y después de eso, vamos a nuestro archivo de índice. Y justo encima de la etiqueta de cierre de su cuerpo, coloquemos todo el marcador. Permítanme alinearlo. Y vamos a guardarlo. Entonces ahora tenemos un JavaScript, pero también necesitamos el CSS para nuestro slider. Entonces para conseguir eso, volvamos al sitio web y pinchemos en la opción Get it now aquí mismo. Y vamos a copiar el CSS. Por lo que básicamente es un CDN. Está copiado. Volvamos a nuestro archivo de índice y desplázate hasta la parte superior y escribamos un bot, nuestro enlace CSS, coloquemos esta diapositiva en particular es CSS, y vamos a guardarla. Entonces si revisamos nuestro sitio web ahora mismo, se
puede ver que nada ha pasado básicamente. Es porque no hemos definido el control deslizante y ahora hagámoslo. Entonces chicos, antes de pasar sobre ti para hacer una ligera modificación. Así que digamos en abierto estos slicks sitio web de la biblioteca, Vamos a ese sitio web y hagamos click en la opción Get it now aquí mismo. Entonces vamos a copiar el JavaScript aquí es porque estamos usando un CD y CSS. Por lo que también necesitamos usar un JavaScript CDN. Entonces vamos a copiarlo desde aquí. Volvamos a nuestro archivo index.html. Y si te desplazas todo el camino hacia abajo, así es así el código que hemos copiado previamente del deslizador de punta al revés. Entonces vamos a reemplazar la última línea de código desde aquí y pegar el nuevo código. Y vamos a guardarlo. Y como saben, ya
creamos el archivo app.js durante el primer video donde configuramos el proyecto. Por lo que también necesitamos vincular nuestro índice o archivo HTML a JavaScript. Aquí voy a renderizar fuente de punto de guión, y en lugar de fuente, voy bajo barra de puntos. Y vamos a seleccionar el archivo app.js. Por lo que ahora tenemos vinculado o el archivo innecesario. Entonces ahora mismo vayamos a nuestro archivo app.js. Entonces aquí voy a usar jQuery. Entonces déjame entrar dólar y B van a seleccionar el documento. Y voy a elegir puerta lista. Y aquí dentro de soporte redondo, voy a crear una función de devolución de llamada. Y este código en particular significa que document.ready indica que cuando las páginas básicamente cargadas, no
voy a ejecutar el código dentro de esta función en particular. Entonces, por eso significa este código en particular. Por lo que aquí necesitamos seleccionar el envoltorio de nuestra diapositiva. Por lo que aquí se puede ver que el archivo index.html, el contenedor se nombra como diapositiva lo. Entonces déjame copiar eso y volvamos a nuestro archivo JavaScript. Por lo que en jQuery Biao va a seleccionar un elemento usando el signo del dólar, seguido del nombre de la clase. Entonces voy a entrar punto seguido del nombre de la clase ese deslizador. Entonces aquí voy a entrar a punto slick. Abramos un corchete abierto y abrimos esta función esbelta. Entonces cuando quería guardarlo. Y si revisamos la página web aquí, se
puede ver que ahora tenemos una diapositiva ella, pero ahora no tenemos mucho estilo. Pero como se puede ver que las funcionalidades básicas se aplican como tenemos qué botón siguiente que básicamente satélites a la siguiente diapositiva. También tienes un botón anterior aquí mismo. Entonces en este momento estamos teniendo un look bastante básico para un slide it. Y ahora diseñamos para que modifiquemos y personalicemos slided y lo hagamos de la manera que queramos. Entonces chicos, antes de peinar nuestra luz solar
nos deja hacer algunas cosas básicas como peinar el proyecto. Y también quiero un poco de relleno de fondo a nuestra sección para que el carrito esté tan bien separado de este fondo blanco en particular. Por lo tanto, completemos primero estas tareas básicas. Entonces lo primero que quiero hacer, dijo que voy a ir al style.css. Y si revisas el archivo índice, podemos ver que la sección de habilidades tiene una sección de habilidades. Entonces, básicamente proporcionemos un fondo de relleno a la sección de habilidades. Entonces vamos al archivo de estilo. Y si te desplazas hasta aquí, puedes ver que ya hemos seleccionado las habilidades y la clase de contenedor. Por lo tanto, vamos a proporcionar un fondo de relleno de un 100 pixeles. Guárdalo. Y te pregunta que ahora tenemos que volver en viejo y la parte inferior de la tarjeta y la página siguiente o la siguiente sección no está chocando. Ahora, eso se ve bien. Ahora vamos Tyler proyectos rumbo. Entonces si revisamos el archivo índice, se
puede ver que el H1 está básicamente dentro de la sección del proyecto. Entonces vamos a nuestro archivo CSS. Aquí voy a terminar en proyectos DOT. Y quiero seleccionar la etiqueta H1. En primer lugar, voy a cambiar el tamaño de fuente a tres rem, quiero llevar el texto al centro de la página. Entonces tecleemos text-align center, y también proporcionemos un margen. Arriba de una rem. Y vamos a guardarlo. Muy bien, ahora el encabezado del proyecto está en el centro de la página. Y ahora terminamos con eso. Ahora bajemos a este propósito de azulejado o para slider, lo primero que quiero hacer es que voy a proporcionar un poco de espacio en la parte inferior y la parte superior de la imagen para que se vea igual a la de nuestro prototipo. Entonces para ello, vayamos a nuestro style.css y ya hemos seleccionado los medios. Entonces aquí quiero dar un margen top de tres rem, y un margen inferior de 38, yo también estoy. Vamos a guardarlo. Y ahora si vas a nuestra página web, puedes ver que hay suficiente monoespacio. El de arriba y el de abajo. Y si revisas el prototipo, puedes ver que toda la imagen y el párrafo se encuentra en el centro de esta sección en particular. Entonces para hacer eso, seleccionemos o un deslizador. Y dentro del slider tenemos las diapositivas. Y en primer lugar, proporcionemos text-align center. Entonces si lo guardas, y si revisas el sitio web, puedes ver que el texto está básicamente en el remitente. Y ahora necesitamos llevar la imagen al remitente. Para ello, voy a proporcionar un flex de pantalla. Ahora tenemos entonces elemento die de manera horizontal. Ahora vamos a proporcionar artículos de alineación, centro, líneas de pedido, remitente. Por lo que ahora este texto en particular está en el centro vertical de la imagen. Ahora podemos proporcionar una columna de dirección flex para sacarla de
esta bolsa en particular en la parte inferior de la imagen. Por lo que aquí vamos a proporcionar una dirección flex de columna. Ahora si lo guardo, verás que ahora este párrafo en particular está en las botellas inferiores para la imagen. Y quiero disminuir ligeramente el margen inferior de la imagen. Y lo voy a llevar a dos o m Ahora se ve bien. Por lo que hemos hecho alguna ligera modificación a nuestra imagen, y también hemos llevado el laberinto y párrafos al centro de esta sección de proyectos en particular. Entonces como ahora, quitemos estos botones. Entonces para quitar estos botones, Vamos a nuestro archivo app.js. Y aquí dentro de nuestra función selecta, voy a escribir flechas, colon falso. Yo lo voy a guardar. Entonces ahora si revisamos el sitio web y vemos que los botones ya no son visibles, pero en realidad necesitamos puntos, igual que el de nuestro prototipo. Entonces como primer paso o una indebida es que aquí voy a teclear puntos según verdadero. Y si lo guardas aquí, puedes ver que ahora tenemos los puntos básicos, pero estos no son los puntos que realmente queremos. Por lo que estos son lista desordenada. Por lo que para crear un punto personalizado, en realidad
necesitas crear una división personalizada. Entonces vamos a nuestro archivo index.html, aquí mismo, justo debajo del final de nuestro slider. Para que veas que aquí es donde termina nuestra división de deslizadores. Aquí, voy a crear otro div con una clase de slider dash dot. Entonces ahora hemos creado un div vacío. Pero a partir de ahora, nuestro JavaScript no sabe que realmente necesitamos un punto personalizado, por lo que necesitamos seleccionar este punto en particular. Entonces voy a copiar el nombre de la clase. Guardémoslo, y vayamos a nuestro archivo JavaScript. Y aquí voy a crear puntos anexados, seguidos de colon, crear una sola cita dentro de ella. Voy a seleccionar nuestro slider dash dot. Así que asegúrate de colocarlo en un perro antes de eso. Y coloquemos el nombre de la clase que es Slider dash dot. Ahora tenemos básicamente creado o punto personalizado. Y si lo guardas, entonces comprueba DFE. A partir de ahora no podemos ver muchos genes. Ahora, necesitamos hacer alguna modificación más para hacerla de la manera que queramos. Entonces chicos, lo siguiente que voy a hacer es empezar. Modiquemos esta particular sección de control extremo nefasto. Entonces cuando haces que se vea igual a la de un prototipo. Entonces lo primero que quiero hacer es que el Hylton vea todos estos puntos diferentes. Y como ya dije, estas puertas son lista desordenada. Por lo que ahora mismo vamos a crear una clase personalizada para todos estos diferentes puntos. Y al usar esa clase personalizada, básicamente
podemos modificar entonces sistema de dieta justo aquí. Entonces, para hacer eso, vamos una vez más a nuestro archivo JavaScript. Y aquí vamos a utilizar otra propiedad que es clase puertas. Y queremos crear una clase llamada como puntos y asegurarnos de que no añades un punto. Eso es porque no estamos seleccionando un elemento, simplemente
estamos declarando una clase. Entonces voy a teclear puntos y vamos a guardarlo. Ahora bien, si vuelves a la página web, no
habrá ningún cambio. Entonces por qué no, y se abren las herramientas de desarrollador de Chrome. Por lo que para abrirlo, haga clic derecho y haga clic en la opción Inspeccionar aquí mismo. Y si me desplaza hacia abajo y al hacer clic en opción de selección y peleo, elige nuestra lista desordenada aquí mismo. Aquí puedes ver que la lista desordenada en este momento va a tener la clase de puntos que especificamos en nuestro archivo JavaScript. Y aquí puedes ver a todos los diferentes aliados. Por lo que estos son todos los diferentes listados. Entonces lo que vamos a hacer es que w0, quiero aplicar un flex a este punto en particular para
que todos estos diferentes controles vayan a venir en una sola línea, así como eso queremos en nuestro prototipo. Y también podemos desactivar estos puntos. Entonces eso es lo que vamos a hacer ahora mismo. Entonces para hacer eso, volvamos a nuestro style.css. Entonces aquí voy a seleccionar los proyectos. En cambio los proyectos tenemos el guión
Slider, punto. Y ahora también seleccionemos nuestra clase de puntos personalizados. Y lo primero que quiero hacer es que voy a desactivar este punto negro en particular aquí mismo. Entonces para hacer eso, Vamos a escribir en lista, estilo, tipo, y cambiemos eso a ninguno. Si lo guardo. Para que veas que los puntos negros han desaparecido. Y ahora hagámoslo en una sola línea. Ahora se apila uno ni el otro que está en posición vertical. Ahora tenemos que hacerlo horizontal. Para ello, simplemente aplicemos un flex de visualización. Display flex. Y si lo guardo aquí, vas a ver que nada ha pasado básicamente. Es por, es realmente difícil anular o la diapositiva lisa es un código. Entonces para hacer eso, necesitamos ingresar un signo de exclamación y escribir en importante. Ahora si lo guardo, se
puede ver que ahora lo tenemos en una sola línea. Entonces chicos, así es como podemos alterar un elemento en particular de la forma que quieran. Entonces en nuestro caso, hemos creado una clase personalizada. Usted viendo esta diapositiva es propiedad. Entonces usando esa clase, hemos modificado nuestro sistema de control aquí mismo. Ahora vamos a modificar todo este sistema. Por lo que para convertirlo en el centro de nuestra sección, voy a aplicar justify-content center. Y ahora tenemos un descendiente. Ahora vamos a seguir estilos particulares sistema de control. Entonces chicos, si revisamos nuestro prototipo aquí, se
puede ver que este controlador en particular o este controlador de diapositivas, básicamente
se muestra en términos de puntos. Pero actualmente de nuestro lado estamos teniendo número dentro de estos diferentes puntos. Entonces si hago clic derecho y abro nuestras herramientas para desarrolladores de Chrome. Y si seleccionamos nuestros puntos desde aquí, se
puede ver que esta es la lista desordenada. Por lo que la lista desordenada consiste en todas las diferentes diapositivas. Y si abrí la lista desordenada, se
puede ver a los cuatro aliados diferentes. Entonces si me muevo hacia abajo por estos aliados en la parte superior otra vez, vea la selección. Por lo que estos cuatro aliados indican las cuatro diapositivas diferentes que tenemos. Y ahora si abro uno de estos aliados, sí, se
puede ver un botón y el botón básicamente está teniendo un valor de uno. Por lo que ahora necesito quitar este valor en particular. Entonces hagámoslo. Entonces volvamos a nuestro style.css. Y aquí voy a copiar este código en particular desde aquí. Ahora básicamente hemos seleccionado la envoltura de que es slider dash dot. Por lo que este envoltorio consiste en todas las diferentes diapositivas. Por lo que voy a seleccionarlo botón de todas las diferentes diapositivas. Y voy a cambiar el tamaño de la fuente a 0. Entonces si cambio el tamaño de fuente a 0, los elementos, esta placa será ninguna. No serán visibles los elementos. Entonces voy a cambiar el tamaño de fuente a 0. Ahora si lo guardo, realidad no se
puede ver el elemento. Déjame acercar un poco. En realidad podríamos ver una pequeña marca del elemento, pero todavía están presentes aquí mismo. Ahora vamos a modificar aún más estos diferentes botones. Entonces lo primero que voy a hacer es que voy a proporcionar algo de ancho y altura a nuestros puntos. Por lo que voy a proporcionar un ancho de casi ocho píxeles y una altura de 50 píxeles. Vamos a guardarlo. Y ahora estos son ligeramente visibles. Y lo siguiente que voy a hacer es que no estoy brindando un poco de espacio entre estos diferentes puntos. Entonces brindemos un margen, a la derecha, de cinco píxeles. Vamos a guardarlo. Ahora tienen opción de curso número de espacio entre ellos. Ahora quitemos su frontera y contorno. Entonces voy a proporcionar una frontera de ninguno. Y nuestra línea de hombres también. Vamos a guardarlo. Y ahora son elementos llanos. Entonces cambiemos su fondo, colorearlo, así que retrocedamos. Y voy a pegar en el código hexadecimal. Vamos a guardarlo y vamos a revisar. Sí, se ha aplicado el color de fondo. Y voy a proporcionar un radio fronterizo para que estos look en ocurrieron hombre, igual
que el de nuestro prototipo. Por lo tanto, proporcionemos un radio de borde de 50 píxeles. Y ahora tienen un look curvo. Y también voy a cambiar el cursor para apuntarlo puntero del cursor. Entonces cuando llevamos nuestro cursor encima de estos agravios, cambiaron al punto de que se ven, y estos puntos en realidad funcionaron perfectamente bien. Ahora necesitamos hacer alguna ligera modificación a estos puntos para que R, esta muestre un color verde en la diapositiva actual está sentado. Ahora hagámoslo. Entonces lo que necesitábamos hacer en este momento es que necesito diferenciar la diapositiva activa. Por lo que aquí se puede ver que la luz está teniendo un color diferente como un poco más ancho. Tan bien, No, Vamos a nuestro sitio web y
voy a hacer clic derecho y dar clic en Inspeccionar opción aquí mismo. Ahora si me desplaza hacia abajo y si seleccionamos puntos justo
aquí, aquí, voy a abrir toda la lista. Y una cosa que quiero que ustedes noten es esta clase activa en particular. El selecto clase activa sólo está presente en el 1er plazo. Ahora quiero seleccionar al segundo vivo. Y se puede ver que eso es slick clase activa se ha movido a la segunda luz. Ahora lo voy a seleccionar tercero y ligero, y ha pasado a la tercera lista. Por lo que este particular activista de puntería aplicó dinámicamente
al punto actual o a la lista actual que estamos seleccionando. Por lo que utiliza particular clase activa slick. Básicamente podemos alterar nuestro punto actual. Entonces ahora hagámoslo. Déjame cerrar la herramienta de desarrollador y volvamos a nuestro style.css. Aquí, voy a seleccionar los proyectos. Dentro de los proyectos tenemos los puntos. Y ahora voy a seleccionar al aliado. Y ellos vivos que quiero seleccionar estos. Por lo que el activo y la luz que es slick dash activo. Y lo que quiero alterar es el botón. Y lo que quería cambiar que voy a cambiar el fondo era 24. Y el patrón que quiero aplicar es el color primario. Vamos a guardarlo y vamos a comprobarlo. Como puedes ver ahora estamos teniendo un color verde para la diapositiva actual o la diapositiva activa. Permítanme pasar al primero. Sí, el colorista de pie perfectamente bien. Y también quiero que se aumente el ancho para el punto activo. Por lo que quiero aumentar el ancho a casi 16 pixel. Vamos a guardarlo. Sí, el punto actual está teniendo una palabra más alta y el color también se está cambiando. Entonces permítanme aumentar rápidamente el margen inferior de nuestros proyectos. Entonces simplemente voy a seleccionar la sección del proyecto y el contenedor dentro de ella. Y voy a proporcionar un margen inferior de un 100 pixeles. Vamos a guardarlo. Por lo que ahora tenemos recepción colocando la parte inferior y se pueden ver claramente las diferentes puertas. Por lo que según nuestro tipo de pareja, estamos teniendo los puntos. Y también para el punto activo, estamos teniendo un diferenciador que es de color diferente y una toma más ancha. Entonces todo lo que hicimos aquí es que básicamente hemos seleccionado la lista actual o la lista activa. Estás teniendo una clase activa de deslizamiento dash. Y simplemente estamos alterando las propiedades de ese particular vivo que actualmente está activo. Entonces eso es todo chicos. Hemos construido completamente la sección de proyectos. Es decir, tenemos un final pronto y totalmente funcional deslizarlo y ustedes pueden ver fácilmente estas imágenes. Entonces si vas al archivo de índice, simplemente
podemos cambiar la imagen aquí mismo. Y el otro lo voy a vender directamente en esta diapositiva en particular también. Por lo que ahora también podemos hacer clic en estos diferentes botones para navegar por la diapositiva la misma. Y también tenemos independientemente párrafo para cada diapositiva también. Entonces eso es todo chicos. Y realmente espero que ustedes entendieran el concepto básico de slided y cómo podemos acceder a unas propiedades diferentes de una biblioteca y más. Entonces gracias por ver y los veré chicos en el siguiente video.
9. Crea la sección del blog: Hola chicos, bienvenidos de nuevo al video. Y en este video en particular, vamos a construir la sección MyBlock de nuestra página web. Y Eva, analizamos esta sección en particular. Se puede ver que tenemos un encabezado mi blog y un párrafo. Y en la barra inferior, tenemos tres cartas diferentes. Y dentro de cada guardia tenemos un par de información, como una imagen, un rumbo. Tenemos la fecha que el contenido principal y leer más texto. Por lo que estos otros diferentes se condensan dentro de la tarjeta. Entonces básicamente tenemos la parte de encabezamiento como Alaska a tres dioses diferentes. Y ahora vamos a golpear hacer nuestro archivo de índice y empezar a construir la sección de mi blog. Entonces en el archivo índice, en primer lugar, déjame copiar este comentario en particular y peguémoslo justo debajo del cierre de la sección y cambiemos el nombre sí protege los extremos de sección. Y de nuevo, voy a abrir otro comentario que indica que ha comenzado la sección MyBlock. Y aquí, básicamente voy a acercarme y vamos a crear una sección con una clase de mi bloque. Y dentro de esta sección en particular, Vamos a crear otra división con la clase de contenedor. Y dentro de este contenedor en particular, básicamente
tenemos nuestro rubro y el párrafo. Entonces voy a crear un H1 y quiero dárnoslo, mi blog. Y como verás que la palabra del blog está en un color diferente. Por lo que Ventana y encierra eso en un lapso. Y peguémoslo dentro del lapso. Está bien, y después de que asuman que tenemos donde el párrafo, así que pongamos algún texto aleatorio dentro de él. Muy bien, ahora hemos creado la H pronto como párrafo elástico. Y ahora es momento de que bajemos a la sección de cartas. Entonces básicamente necesitamos un envoltorio de tarjetas. Por lo que dentro del envoltorio de tarjetas reside todas nuestras tarjetas. Entonces, en primer lugar, bien,
debajo de la etiqueta de párrafo, no
creo otro div con una clase de guión de tarjeta para APA. Por lo que dentro de esta envoltura de tarjetas en particular, tenemos nuestras tarjetas. Por lo que quiero crear nuestro primer Dios. Entonces para eso, vamos a crear un div con una clase de tarjeta y dentro tarjeta particular. En primer lugar, tenemos nuestra imagen. Entonces para la imagen, quiero crear otra división con una clase de envoltura de guión de imagen. Por lo que dentro de su particular envoltura de imagen, tenemos nuestra imagen. Entonces voy a abrir una etiqueta de imagen y dentro de la fuente quiero entrar barra de puntos. Y vamos a hacer ya mayores. Y aquí he captado artículo pH una foto y quiero seleccionar eso. Y eso es para la sección de imágenes aquí mismo. Ahora bajemos a la sección de contenido. Entonces para el contenido, voy a crear otra división aquí mismo con una clase de contenido de guión de tarjeta. Y dentro de este dios particular dash coordine la División B tendrá todos los diferentes materiales de textos. Entonces, en primer lugar, tenemos nuestro H1. Entonces voy a crear un electrón aquí mismo. Y aquí. A partir de aquí voy a copiar este pegajoso en particular. Y lo voy a pegar justo por aquí. Vamos a guardarlo. Y por debajo de la H1 tenemos la fecha como contra C. Así que quiero terminar brilla una fecha en un lapso. Y déjame copiar la fecha desde aquí. Y peguémoslo aquí mismo. Y después de eso ya nos hemos metido lo suficientemente profundo. Entonces déjame crear una etiqueta p para algún texto de relleno. Y por último, también tenemos un texto de leer más. Entonces esta esquina particular de Texas, tengo un llamado a la acción, así que voy a encerrar eso dentro de una etiqueta de ancla y quiero nombrarlo como leída. Vamos a guardarlo, y vamos a revisar nuestra página web. Entonces en la barra inferior tenemos el encabezado, el párrafo que Dios imagina y los diferentes materiales. Entonces ahora vamos a darle estilo a todos estos. Entonces chicos, si tomamos nuestro prototipo, se
puede ver que hemos aprendido tres cartas diferentes. Y para duplicar esta tarjeta en particular, Dos veces más, vamos a nuestro index.html. Y como saben, esta particular División N dy consiste en una sola tarjeta. Por lo que mientras presionas y mantenidas en Alt y Shift, voy a presionar la flecha hacia abajo
dos veces más para crear un total de tres cartas diferentes. Vamos a guardarlo. Y si revisamos la página web, se
puede ver que ahora tenemos un total de tres tarjetas diferentes. En el prototipo. Se puede ver que la, mi sección de blog está teniendo un fondo oscuro. Entonces digamos en segundo plano también. Y aquí puedes ver que al final nefasto, mi sección de blog reside dentro de esta sección en particular con una clase de mi blog. Entonces vamos a copiar eso. Vámonos a nuestro style.css aquí. Yo quiero. Ender punto mi blog y cambiar el fondo demasiado oscuro. Guardémoslo y veamos si es Eclipse IDE. Se puede ver que el fondo se ha oscurecido. Y ahora vamos básicamente a darle estilo a nuestro rubro y al párrafo. Por lo que voló eso. Vamos a nuestro archivo de índice. Y quiero dar clase a nuestro H1. Entonces lo voy a nombrar Us sección guión encabezado, guárdelo, y luego también copiar el nombre de la clase y aquí, pero quiero inter dot myBlock cabecera de sección puerta. Y voy a cambiar el color a puro. Entonces si revisas el alcista otra vez, mira que el color blanco se haya aplicado no sólo al colindante, sino también a nuestro párrafo y también la zona H y el párrafo ha sido automáticamente el alineado al centro de el apartado. ¿ Pueden adivinar por qué sucedió esto? Entonces la razón por la que esto sucedió es que Dhabi tiene k1, la sección de nombre de clase, rumbo
holandés hacer nuestra zona como se muestra en mi sección de blog. Y si recuerdas, le dimos el mismo nombre a nuestro s1 en esta sección de habilidades, como puedes ver. Entonces es por eso que este encabezado de guión de sección se ha convertido en realidad en una clase de utilidad. Entonces cuando aplicamos el mismo nombre a nuestra sección de mi blog, las propiedades que están se activan a este párrafo en particular lo escribo. Por lo que nuestro trabajo en realidad se volvió un poco más fácil. Ahora vamos a cambiar básicamente el color de este blog en particular. Entonces como sabes, ya
tienes un lapso. Entonces seleccionemos, luego cosas nefastas de aquí. Pegarlo, y apuntar el lapso y cambiar el fondo. Perdón, cambia el color a primario. Vamos a guardarlo. Y ahí tienes. Tenemos el ETC1 y el párrafo todo establecido. Entonces ahora hagamos estas cartas en una sola línea así como en nuestro prototipo. Entonces como, ya sabes, podemos hacer uso de rejillas CSS para lograr ese look. Entonces vayamos a nuestro style.css. Y aquí mismo voy a seleccionar el envoltorio de tarjetas. Así que punto mi blog space dot card wrapper. Seleccionemos eso y voy a aplicar una cuadrícula de visualización. Y ahora redefinimos la cuadrícula como una buena plantilla de guión, columnas de Nash. Entonces usemos la función de repetición. Quiero repetir esto por tres veces y parámetro es maravilloso. Entonces si lo guardo, se puede ver que ahora tenemos todas estas tres cartas en una sola línea. Y como se puede ver, todos estos guardias se juntan. Necesitamos un espacio entre ellos. Entonces volvamos atrás. Y aquí mismo, voy a mencionar la columna de guión Gap. Columna dash gap de 30 teorema. Vamos a guardarlo. Y ahora tenemos un espacio de tres lemmas entre todas estas diferentes cartas. Y si revisamos el protocolo, podemos ver que la sección condensada,
la sección de condón del salpicadero del auto básicamente está teniendo una bolsa blanca abajo. Y ahora hagámoslo. Entonces aquí voy a copiar este código desde aquí. Y ahora vamos a seleccionar también la tarjeta kanban dash condensado. Y aquí cambiemos el fondo a puro. Guárdalo. Como pueden ver que estamos teniendo una pequeña división justo por aquí es porque acabamos de aplicar al fondo a nuestro salpicadero de autos condenado, pero sí aplicamos la bolsa hasta el final directo a Dios, así que eso es mi mal. Entonces volvamos aquí y déjame copiar todo el núcleo desde aquí. Vamos a pegarlo. Y también apuntemos luego tarjeta directa y cambiemos el fondo a puro. Y si lo guardamos, se
puede ver que ahora por el fondo se extiende todo el camino hasta la imagen y hasta la parte inferior de la tarjeta. Por lo que ahora vamos a proporcionar un poco de relleno. Como se puede ver, todo el texto está abarrotado en su interior. Por lo que ahora ya hemos seleccionado el salpicadero de autos condenado. Entonces déjenme proporcionar un relleno de 20 de este diagrama se aplicará tanto a arriba como abajo e izquierda y derecha. Entonces vamos a guardarlo. Y como puedes ver que ahora tenemos suficiente cantidad de espaciado dentro de la tarjeta también. Entonces chicos, en primer lugar, brindemos un poco de
margen de fondo a este pegajoso en particular aquí mismo. Entonces volvamos a nuestro style.css y los admins acercan un poco. Y justo aquí, voy a seleccionar nuestra sección mi, mi blog. Y dentro de mi sección de libros, tenemos que dejar que el contenido del guión de tarjeta y dentro del salpicadero del auto Condon, tenemos la etiqueta H1. Entonces voy a seleccionar eso y voy a proporcionar un margen inferior de un rem. Vamos a guardarlo. Y como pueden ver, hemos escuchado un margen fondo de maravilla. Y a continuación, básicamente podemos darle estilo a este párrafo en particular. De nuevo, voy a copiar este código en particular desde aquí. Vamos a pegarlo. Y en lugar de H1, apuntemos párrafo. Y voy a proporcionar un margen superior de un rem y un margen inferior de un rem también. Por lo que ahora tenemos la cantidad suficiente de espacio en la parte superior del párrafo y en la parte inferior del párrafo. Y ahora atemos esta particular etiqueta de ancla. Entonces de nuevo, voy a copiar este código en particular desde aquí. Y apuntemos a la etiqueta de anclaje. Y voy a cambiar el color a básicamente nuestro color oscuro. Y también quitemos la decoración del texto. Decoración de texto ninguno. Y eso se ve bastante bien. Por lo que ahora básicamente terminamos con nuestra sección de guardia. Por lo que si te das cuenta puedes ver a los demás mucha brecha en esta área en particular. Y es porque estamos teniendo mucho margen de fondo a nuestro párrafo. Entonces aquí mismo voy a seleccionar la sección de mi blog y la sección de mi libro. Tenemos nuestro H1. Por lo que el H1 está teniendo una clase de guión de sección. Entonces déjame copiar eso. Y aquí vamos a establecer objetivos sección hace sombreado. Y después de este guión de sección, tenemos los párrafos. Entonces, simplemente usemos plus, plus b. Y cualquier código que voy a escribir dentro este bloque en particular va a sobrescribir cualquier código ahí dentro, un encabezado de guión de sección. Entonces voy a proporcionar un margen inferior de 30. Si lo guardo. Como se puede ver ahora, tenemos el margen adecuado y Moldavia inferior dos son muy párrafo y no había también proporcionar un poco de relleno al fondo de este particular mi sección de blog. Desplazemos todo el camino hasta la parte superior. Aquí puedes ver la sección de mi blog. Aquí, voy a proporcionar un fondo de relleno de un píxel de 100. Por lo que ahora tenemos el espacio de
envío número 2 del curso en la parte inferior de nuestra sección de mi blog. Y si te desplazas hacia arriba, puedes ver que el encabezado, mi blog está realmente cerca de nuestra sección de proyectos. Entonces vamos a dar un poco de relleno top. Entonces aquí voy a copiar básicamente el guión de mi sección de blog golpeando porque esta sección ahora sombreado es una clase para tu H1. Entonces aquí voy a proporcionar una parte superior acolchada de un rem. Y si lo guardamos, y ahora tenemos nuestra solución cantidad de espacio y vamos a ver con el turismo. Sí. ve bastante bien ahora. Entonces eso es todo, chicos. Terminamos con la sección de mi blog y fue bastante fácil porque ya teníamos el conocimiento de las rejillas. Y tenemos el golpear el párrafo y las diferentes tarjetas y pueden cambiar fácilmente estas imágenes en particular desde el archivo índice. Y también tenemos una función de leer más que por ahora nos lleva a ninguna parte. Y eso es todo. Y realmente espero que ustedes chicos y destruyan este video en particular también. Y gracias por ver, y los veré en el próximo video.
10. Codificar la sección de contacto: Hola chicos, bienvenidos al video. Y en este video en particular, vamos a construir la sección de contacto de nuestra página web. Y si analizamos hace la disección, se
puede ver que tenemos un rumbo aquí mismo. Y por debajo de eso tenemos dos dioses diferentes. Y dentro de cada Dios tenemos algún medio, un encabezamiento y un texto informativo. Entonces, antes que nada, construyamos la primera parte aquí mismo. Entonces vamos a nuestro archivo de índice. Y lo primero que voy a hacer es que quiero
copiar a este Coleman en particular desde aquí. Y lo voy a pegar aquí mismo al final de una sección, y lo voy a nombrar como termina mi sección de blog. Otra vez aquí voy a abrir otro comentario y lo voy a nombrar como inicia la sección de contacto. Y aquí voy a abrir una sección con clase de conducta. Y bajemos a la sección. Y antes de eso, déjame acercar un poco. Y aquí voy a crear una división con una clase de contenedor. Y dentro de este contenedor, en
primer lugar, tenemos nuestro rumbo. Eso es conducirme y la palabra me está en otro color. Entonces déjame copiarlo. Por lo que aquí en una etiqueta abierta y H1 e insertada vio a Dios Dao la conducta. Y dentro del lapso tenemos la palabra. Entonces eso es todo para la sequía, la parte de cabecera. Y ahora pasemos a la sección de cartas. Por lo que básicamente comenzó a crear un envoltorio de tarjetas. Y dentro de la envoltura de tarjetas básicamente podemos almacenar estas dos tarjetas. Entonces voy a crear otro div con una clase de salpicadero de autos, arpa. Y dentro de esta envoltura de tarjetas en particular, básicamente
tenemos todas nuestras tarjetas. Entonces voy a crear otra división con una clase de Dios. Entonces dentro del Dios, primer lugar, tenemos la imagen. Entonces voy a abrir una etiqueta de imagen y dentro de fuente voy a hacer barra de puntos. Y vayamos a la carpeta de imágenes. Y busquemos el iPhone. Y esta es la imagen. Entonces básicamente por debajo de la imagen no tenemos rumbo. Por lo que voy a encerrar la carne fría x dentro de un H2. Entonces abramos una etiqueta H2 y déjame pegar el texto aquí. Y por debajo de eso tenemos una información numérica. Entonces déjame copiar eso y lo voy a pegar dentro y H4. Está bien, ahora tenemos eso, toda
la sección de cartas lista. Y como pueden ver, tenemos dos cartas diferentes. Y a partir de ahora sólo tenemos un solo auto. Entonces voy a copiar esta división en particular aquí mismo, y vamos a pegarla una vez más. Y ahora tenemos 12 dioses diferentes. Entonces vamos a guardarlo y revisar nuestra página web. Y si te desplazas todo el camino hasta la parte inferior, ahora tenemos dos cartas diferentes, pero su respectiva información extra. Entonces aquí mismo voy a cambiar la imagen del segundo Dios a mí. Y también vamos a copiar esta información en particular desde aquí y pegarla aquí mismo. Guardémoslo y consultemos nuestra página web una vez más. Muy bien, ahora pasemos a la mayor simplificación de todas estas cartas diferentes. Y también arreglemos el diseño también. Entonces chicos, como primer paso, marquemos aquí nuestro H1. Entonces volvamos a nuestro archivo de índice y escribamos dentro de nuestra etiqueta H1. Yo quiero dar una clase de sección guión encabezado. Y vamos a guardarlo. Y si revisas el sitio web, pueden ver que podemos dirigirme donde realmente falta. Pero en realidad falta. Todavía está aquí. Entonces si no lo saben en el video anterior les
dije chicos que la disección, que el sombreado es una clase de utilidad. Y por defecto, clases de utilidad que tienen un color de un puro o blanco. Entonces necesitamos alterar ese color. Entonces hay que ir a index.html. Y aquí voy a llamar a P el encabezamiento de guión de sección, nombre de clase. Y ahora estoy en style.css. Entonces vamos a seleccionar la sección de conducta también, sección de
activos, tablero de encabezamiento de vidrio. Y voy a cambiar el color a oscuro. Vamos a guardarlo. Y también cambiemos el color de nuestra, MI palabra, esa es esta sartén. Y cambiar su color al color primario. Entonces vamos a guardarlo. Y cuando volvemos a revender, se
puede ver que ahora el rubro se ve perfectamente bien. Entonces ahora vamos básicamente a conseguir, no hagas nuestras tarjetas. Entonces lo primero que voy a hacer es que voy a proporcionar rejilla de visualización. Entonces como se puede ver, que Dios está básicamente alineado de manera horizontal. Entonces hagamos uso de para rejilla de visualización. Y aquí voy a seleccionar la sección de conductas. Dentro de la disección del cono. Tenemos hasta el envoltorio del salpicadero del auto. Y aquí voy a proporcionar nuestra cuadrícula de exhibición. Y ahora definamos la cuadrícula, es
decir, plantilla de guión, columnas de guión. Entonces aquí voy a usar la función de repetición. Y quiero que esto se repita por dos veces. Y el segundo parámetro es maravilloso. Y si lo guardas, y si volvemos a la página web, se
puede ver que estos dos están alineados de manera horizontal. Y ahora vamos a subirnos a la tarjeta de la puerta y alterar el tamaño de nuestros iconos. Y también vamos a darle estilo a nuestro contenido de texto dentro de la tarjeta también. Entonces chicos, lo primero que voy a hacer es que
nos permita reducir el tamaño de estos iconos. Entonces volvamos a nuestro style.css. Y si puedes ver las imágenes básicamente ubicadas dentro de la división de autos, que básicamente está dentro de la envoltura de tablero de cartas. Entonces cuando nuestros copaguen código particular desde aquí, y vamos a pegarlo y vamos a seleccionar la tarjeta y lo inmediato dentro de ella. Y voy a proporcionarle un TOEFL alto, casi un píxel de 100. Y también brindemos un margen. Abajo 04 más una habitación. Y vamos a guardarlo. Y si cada sitio activo, y se puede ver que el tamaño es básicamente abogado y el texto no está básicamente en el centro. Como se puede ver, está fuera de lugar. Por lo que para traer las texturas y Dulles volver al style.css. Y aquí voy a seleccionar la tarjeta. Por lo que dentro de la tarjeta tenemos el texto y vamos a alinearlo con el remitente. Y ahora hemos pasado por todo el contenido hasta el centro de la pantalla. Y también tenemos el texto también alineado centro dentro del auto también. Y como pueden ver, no tenemos mucho espacio por debajo de nuestra zona H. Estas tarjetas están demasiado cerca de nuestro int1, así que necesitamos un poco de relleno de fondo y justo aquí en el encabezado de sección, voy a proporcionar un relleno más termo ante todo para rem, guardarlo. Y ahora tenemos una cantidad suficiente de espacio. Y como pueden ver, no tenemos mucho espacio para esta sección trasera de cono en particular. Por lo que también proporcionemos un poco de relleno. Entonces aquí voy a seleccionar la conducta como último el contenedor. Y proporcionemos un fondo de relleno de casi 100 píxeles. Déjame salvarlo. Y esos me dejan alinearlo. Y ahora siendo por supuesto opciones basadas en el fondo también. Por lo que ahora tenemos el final nefasto primera parte de la sección de contactarme. Ese es el dios así como la información en su lugar. Y ahora es el momento de que construyamos la sección de formulario o la sección de entrada. Y ahora lleguemos a eso. Entonces chicos, en el prototipo se puede ver que esta disección final se conoce como la sección de entrada. Por lo que en la primera línea tenemos dos entradas diferentes. Y la segunda línea, en nombre de dios y otra entrada. Y en la tercera línea tenemos un área de texto seguido de un botón de envío. Por lo que esta disección final es nuestra sección de entrada. Entonces ahora mismo vayamos a nuestro archivo de índice y diseñemos la estructura de la sección de entrada. Entonces aquí mismo en la etiqueta de cierre de nuestra envoltura de tarjetas, que está justo por aquí. Voy a crear un formulario. Y dentro del formulario, voy a crear una división con una clase de envoltura de tablero de entrada. Por lo que en esta división de agarre de tablero de entrada estará teniendo las dos primeras entradas, los medios
solares, la primera entrada justo aquí. Déjame borrar las cosas. Por lo que tenemos para el texto tipográfico y también necesitamos un tenedor de lugar. Y ese va a ser tu nombre. Déjame copiarlo y pegarlo aquí mismo. Entonces déjame copiar este código en particular. Y lo voy a pegar aquí mismo. Y en segundo lugar, tenemos la entrada de correo electrónico. Entonces, permítanme copiar el texto del Marcador de Posición desde aquí. Y aquí mismo voy a reemplazar nuestro placeholder por tu email, y voy a cambiar el tipo a email también. Entonces esa es nuestra primera en Bootstrap. Ahora tenemos estos dos insumos y quiero encerrar datos en otra división. Por lo que I2 y yo queremos crear nuestra segunda división con una clase de entrada wrap dash T2. Y dentro de esta división en particular estaré teniendo otra entrada, que va a tener el tipo como texto y el tenedor del lugar como sujeto. Y por último, también tenemos datos x aquí mismo. Y déjame copiar el positor. Y aquí voy a abrir un área de texto. Y voy a proporcionar un lugar titular de su mensaje. Y por último, también tenemos un botón. Y para el botón, voy a crear otra división justo debajo del director de cierre de nuestra entrada, dash rad dos. Y dentro de esta división en particular, estaremos teniendo nuestro botón. Y el botón se nombra como centavo. Déjame copiarlo y vamos a pegarlo. Por lo que ya tenemos un botón de clase de utilidad por ahora. Entonces abramos una etiqueta de cristal y btn y btn primaria. Entonces vamos a guardarlo y vamos a revisar nuestra página web. Entonces como puedes ver ahora tenemos todos los elementos definidos como el yourname tanto en el URI millón, pero la sección de mensajes, este objeto tiene el botón Enviar más grande. Ahora es tiempo primer estilo, toda
la sección de entrada. Entonces, como primer paso, volvamos a nuestro archivo de índice. Y aquí mismo voy a llamar a P la entrada, el nombre de clase de agarrar Azure, y vamos a nuestro CSS. Y aquí voy a seleccionar la clase de conducta, así
como cómo el rapero de tablero de entrada. Y voy a proporcionar una cuadrícula de exhibición. Y la plantilla de cuadrícula es columna. Y quiero que se repita cuatro veces y tú lo guardas. Y si revisas el sitio web y puedes ver que el nombre y tu correo electrónico está en una sola línea y también necesitas un poco de espacio entre ellos. Para ello, proporcionemos una brecha de cuadrícula de casi a habitación. Vamos a guardarlo. Y ahora tenemos bastante espacio entre ellos y también se necesita espacio en la parte inferior, Bartlesville. Entonces aquí voy a proporcionar un margen. Fondo de un tambor. Vamos a guardarlo. Ahora tenemos sumisión pero los ISP en la parte inferior también. Y como se puede ver que el sujeto y los mensajes en una sola línea, pero en el prototipo podemos ver que estos son en dos líneas diferentes. Entonces para hacer eso, lo que voy a hacer es que voy a seleccionar la segunda app de VR de entrada, que básicamente encierra la segunda en Bután, la siguiente idea. Y aquí de nuevo, voy a seleccionar sección de conducta así como en Burdash R2. Y voy a proporcionar un flex de pantalla. Entonces ahora si lo guardo, se
puede ver que estos dos están en la misma línea. Ahora necesito cambiar la dirección del flex a la columna. Por lo tanto flexión columna de dirección. Y ahora tenemos a estos dos en dos líneas separadas. Y ahora necesitamos los ILD más lejanos en Boots. Entonces si revisamos la frontera, se
puede ver que la entrada básicamente está teniendo mucho relleno en el interior. Pero nuestro, cualquiera no está teniendo lo mismo. Los posicionadores están realmente cerca del borde de la entrada. Y ahora arreglemos eso. Entonces para hacer eso, volvamos a nuestro style.css y blanco aquí, voy a seleccionar nuestro maíz atrás y dentro del conductor y seleccionar todas las etiquetas de entrada. Y voy a proporcionar un relleno de casi un sueño tanto para arriba, abajo e izquierda y derecha. Y ahora tenemos un número suficiente de relleno en la parte superior,
inferior, e izquierda, justo fuera de nuestra entrada. Y aquí se puede ver que el barco de asunto y la entrada de mensajes o el texto del mensaje UDL realmente cerca uno del otro. Y ahora es proporcionar un poco de margen inferior a nuestro tema o realmente puede proporcionar margen top dos son MRSA también. Entonces aquí voy a hacer frente a este acorde en particular. Y quiero seleccionar la entrada. Y brindemos un margen inferior de casi una habitación. Y ahora tenemos curso qué números pieza. Y también se puede ver que wor message place order está realmente cerca de la frontera. Y aunque escriba algo que está realmente cerca de la frontera, así que necesitamos un poco de relleno dentro del área de texto también. Entonces aquí otra vez, voy a copiar este código en particular. Y apuntemos a nuestro ADR y proporcionemos un relleno de casi una llanta. Y también sí proporciona un margen inferior de uno o tal vez dos de ellos, para que los datos de texto y las baterías estén bien separados. Y ahora se ve perfectamente bien. Por lo que también necesitamos proporcionar un poco de margen de fondo a estas tarjetas. Como se puede ver, el bacalao y el en budista realmente cerca uno del otro o liberan. Podemos proporcionar un poco de margen dopado con esta ley en particular en Bootstrap posible. Entonces vamos, voy a hacer es voy a copiar este código en particular desde aquí. Y peguémoslo aquí y seleccionemos la entrada y proporcionemos un margen. Arriba de ellos. O tal vez tres de ellos deberían verse bien. Sí, ahora tenemos núcleo buena separación de lo que las cartas también. Y ahora sobre sección invertida está buscando predefinido deseleccionar la de nuestro prototipo. Y ahora hagamos algo de textura más fina para que se vea aún mejor. Y si te das cuenta, puedes ver que el patrón está básicamente extraviado. Y en el prototipo tenemos el botón en el centro. Por lo que para traer a esto, NLS, vuelve a nuestro archivo de índice. Y para la división aquí mismo, proporcionemos una clase de btn dash Harappa. Y déjame copiar este nombre de clase en particular. Vamos a guardarlo. Entonces déjame ir a nuestro style.css. Y aquí voy a seleccionar la conducta, así
como nuestro tablero de botones Rapa. Y proporcionemos text-align center. Entonces si lo guardo, se puede ver que el patrón ahora está en el centro. Pero hay un pequeño tema que cuando volví a
rondar sobre él y ver que toma esto ni visible. Por lo que en el archivo índice se puede ver que he dado una propiedad de BTN primaria. Por lo que en las utilidades nuevamente veamos que estamos teniendo la playa y dados clase primaria. Y en el pasillo o efecto, básicamente
cambiamos el color de nuestro texto a puro. Y voy a cambiar ligeramente eso a primaria. Yo lo guardo. Ahora podemos ver que el texto es claramente visible y también hay un cambio. Por lo que aquí, anteriormente esta doctrina regular del maíz era blanca cuando pasamos por encima de ella ahora ha cambiado o verde Asbell. Y siento que esto se ve mucho mejor que el texto de punto de conducta blanca cuando el salón donde se aplica. Por lo que tampoco se arregló diabetes. Puedo ver que la sección Conducta Me está realmente bien. Y también necesitamos un poco de relleno de parte superior al encabezado también. Entonces hagámoslo. Entonces vamos a nuestro styles.css. Y aquí mismo voy a proporcionar un relleno, top off casi un rem. Y aumentemos eso a los romanos. Ver cuál es la diferencia. Y ahora tenemos una buena separación. Entonces chicos, eso es todo. Por fin hemos construido también la sección Conducta Me, y se ve igual a la de nuestro prototipo. Y de nuevo, espero que ustedes entendieran el desarrollo básico que hicimos en este video en particular. Entonces eso es todo, chicos, gracias por verlo y los veré en el próximo video.
11. Diseñar el pie: Hola chicos, bienvenidos al video. Y en este video en particular, v van a construir día predeterminado fuera de nuestro sitio web. Por lo que finalmente hemos llegado a la parte inferior de nuestra página web. Entonces si analizas la frontera, puedes ver que B sí tiene un logo y ápice aquí mismo. Y también tenemos un fondo oscuro a nuestra carpeta. Entonces vamos a nuestro archivo de índice y déjame hacer clic Abrir este texto en particular desde aquí, y peguémoslo al final de nuestra sección de conducta. Y otra vez aquí voy a abrir otro Coleman lo que indica
que ha comenzado la sección de pie de página. Aquí. Déjame acercar y abrimos una etiqueta de pie de página. Y dentro de esta etiqueta en particular, primer lugar, tenemos el logo. Entonces voy a abrir una etiqueta de imagen. Y dentro del medius, hemos cogido que los chicos nav logo abajo y seleccionamos eso. En segundo lugar, tenemos esta x particular aquí mismo. Entonces déjame copiarlo. Y aquí voy a abrir otra división que una clase de texto guión de pie de página. Y dentro de esta división simplemente podemos pegar en el código. Y vamos a guardarlo. Visitemos nuestra página web. Y aquí se puede ver que tenemos el logo así como el texto aquí mismo. Por lo que ahora necesitamos proporcionar un fondo oscuro. Entonces vamos a style.css. Y aquí voy a seleccionar todo el pie de página. Y proporcionemos un fondo de oscuridad. Y también necesitamos que el SQL local viera por última vez el texto para estar en el centro del pie de página. Por lo que también hay proporcionar línea extra centrada. Ahora, si guardo y vuelvo a la página web, se
puede ver que tenemos logo trimestral así como la X aquí mismo. Por lo que ahora proporcionemos el relleno así como cambiemos el color de nuestros pies de página. Entonces para hacer eso, volvamos a nuestro style.css primero permitirse aquí, voy a seleccionar la imagen. Y brindemos un margen superior de casi la orina. Y la barbilla los compró de casi un tambor. Y aquí vas a ver que ahora tenemos nuestro espacio de solución en la parte superior e inferior. Y voy a reducir ligeramente la parte superior del margen porque es un poco demasiado alta. Y ahora está mirando predefinido. Y también cambiemos el color de nuestro texto aquí mismo. Entonces aquí voy a copiar el pie de página. Entonces vamos a apuntar al texto del pie de página. Y dentro de eso tenemos nuestro texto de pie de página. Entonces voy a cambiar el color a puro. Vamos a guardarlo. Sí. Y se puede ver que no tenemos mucho relleno inferior dos sobre x criterios. Está realmente cerca de la parte inferior de esta carpeta en particular. Entonces vamos a proporcionar un fondo acolchado de casi a la habitación para que haya separación de luz. Ahora tenemos bastante buena separación para leer textos también. Entonces eso es todo chicos. Ahora el fotón está funcionando predefinido, igual que el de nuestro prototipo. Gracias por ver, y los veré en el siguiente video.
12. Asigne la animación de Scroll: Hola chicos, bienvenidos al video. Y en este video en particular vamos a proporcionar animación de desplazamiento a nuestra página web. Por lo que aquí mismo en la barra de navegación se puede ver que hemos proporcionado diferentes enlaces. Y a partir de ahora, si presionas en algún enlace, puedes ver que nada pasa básicamente. Pero después de proporcionar animación de desplazamiento, cuando presionas alguna de estas cargas, te
va a llevar a la ubicación respectiva. Entonces por ejemplo, si hago clic en una pizarra, me
va a llevar al bordo 16 automáticamente. Y si presiono en la sección de proyectos, me
va a llevar automáticamente a la sección de proyectos. Eso es lo que es la animación de subrayado. Y ahora aplicemos scroll y dimension a nuestro sitio web. Entonces vamos a nuestro archivo de índice. Y en primer lugar, permítanme copiar este comentario y cerremos también nuestro comentario de pie de página. Y ahora, si vamos todo el camino hasta la cima hasta nuestra sección de héroes. En la sección de héroes vuelve a ver todos los enlaces que hemos especificado y dentro de su arrastre Shift, se
puede ver que hemos proporcionado un hash y no hay ninguna ubicación ni pote especificada. Entonces ahora mismo vayamos a nuestra sección de un perno y básicamente hagamos alguna alteración. Por lo que ahora mismo estamos en la sección de la junta y dentro de esta sección en particular, voy a proporcionar una identificación. Por lo que ID es básicamente una palabra clave única. Entonces por ejemplo, en esta sección en particular, voy a dar una idea de sobre. Esto significa que puedo crear otro ID con una identificación de un barco en cualquier otro lugar de este archivo en particular. Por lo que los identificadores son elementos únicos. Por lo que como puedes ver, hemos creado un ID para nuestra sección Acerca. Y voy a copiar esta identificación en particular. Y aquí mismo dentro de la etiqueta de anclaje, dentro de esta gráfica en particular, voy a pegar la identificación a bout. Por lo que tenemos hash y el nombre de la ID que es un bot. Entonces ahora si guardo y yo, si volvemos a su página web y si hago clic en el enlace sobre aquí mismo o la etiqueta de ancla de un barco y ver eso arriba en tomadores a la sección sobre. Pero como se puede ver que no hay animación. Por lo que proporcionar animación es bonito símbolo. Entonces la animación del programa, vamos a nuestro archivo CSS. Y si me desplaza todo el camino hasta la parte superior del archivo CSS justo aquí, voy a seleccionar el HTML y voy a proporcionar un comportamiento de desplazamiento de suave si lo guardo. Y si hago clic en la etiqueta Acerca de ancla una vez más, se
puede ver que ahora tenemos una animación de desplazamiento suave. Entonces todo esto se trata de proporcionar una animación de desplazamiento a nuestro sitio web. Y ahora hagamos lo mismo por todos estos otros enlaces. Y vayamos a nuestro archivo de índice. Y aquí dentro de nuestra cabeza sí voy a proporcionar una identificación de casa. Copiémoslo y peguémoslo aquí mismo en la etiqueta de anclaje. Y vayamos a nuestra sección de habilidades. Dentro de esa sección, voy a proporcionar otra identificación con habilidades como nombre. Y vayamos también a la sección de productos y hagamos lo mismo. La diversidad de proyectos. Y por último, también es ir a o a mi sección de libros y proporcionar una identificación de mi blog. Y hagamos lo mismo por la disección de maíz también con una identificación de conducta. Entonces eso es todo. Ahora, volvamos a nuestra etiqueta de anclaje y especifiquemos aquí también la identificación. Ahora tenemos habilidades adquiridas. Para tu sección de habilidades. Ponga seis para la sección de proyectos y mi blog para la sección de blog. Y vamos a guardarlo y vamos a revisar nuestra página web. Entonces en nuestros proyectos personales. Y nos va a llevar a la sección de proyectos. Si presiono en un blog, es uno. Llévenos a la sección de blog. Qué barco. Sí, todo está funcionando perfectamente bien. Entonces así es como podemos proporcionarnos crecer nuestra animación a nuestro sitio web. Por lo que cualquier persona que esté con el nuevo sitio web puede acudir directamente a cualquiera de estas respectivas secciones con tan solo un clic. Y son tratados con una animación suave. Entonces eso es todo por este robo, los chicos. En el siguiente video, vamos a hacer que nuestra página web completamente receptiva para todo tipo de tamaños de pantalla. Y eso es todo. Nos vemos chicos próximo video. Gracias por ver.
13. Sitio web responsivo - navegación Menú menú menú parte-1: Hola chicos, bienvenidos al video. Y en este video en particular, vamos a hacer que nuestra página web sea receptiva. Entonces esta es la primera parte de la misma. Y en este video en particular, vamos a construir una navegación móvil. Entonces antes de
subirme al video, quería darles una comprensión básica de una palabra que vamos a hacer en este video en particular. Entonces para hacer eso, voy a hacer clic derecho y vamos a abrir la herramienta desarrollador. Entonces así es como la herramienta desarrollador, y como puedes ver, esta disección final se conoce como la sección de puerto de vista. Y básicamente podemos yo sólo el ancho y la altura de la ventana gráfica también. Entonces ahora mismo voy a disminuir el bit en sí, la ventanilla. Y como se puede ver que cuando voy todo el camino hasta la izquierda otra vez,
mira, luego bucea hacia arriba Cíclopses. Podemos ver muchos espacios en blanco. Y si te das cuenta de la barra de navegación, tenemos enlaces godaddy en diferentes líneas y en realidad se ve bastante mal. Entonces si una persona inicia sesión en tu sitio web con este tipo de ratio de pantalla como 9018949. Esto es lo que van a ver. Entonces necesitamos hacer el arreglo todo esto para arriba. Por lo que se puede ver que cuando leemos alrededor de 998, se
puede ver que la barra de navegación o los enlaces se dividieron en dos. Por lo que necesitamos arreglar eso. Y en lugar de este diagnóstico final en particular, Barbie va a crear un menú de navegación. Por lo que para un tamaño de pantalla pequeño, desactivaremos la barra de navegación. En cambio, proporcionaremos una hamburguesa. Por lo que cuando el usuario haga clic en hamburguesa, el final murió barra de navegación se mostrará. Entonces esto es lo que vamos a hacer en este video en particular. Entonces va a ser realmente interesante. Vamos a aprender mucho sobre cómo hacer que un sitio web receptivo porque nuestra versión de escritorio se ve bastante impresionante. Pero como dicen las tendencias actuales, casi todos los usos van a usar un smartphone y van a visitar tu sitio web a través de un smartphone. Entonces nuestro smart for viewpoint se ve bastante mal y ahora es hora de que lo arreglemos. Entonces, empecemos. Entonces chicos, si notan voy a disminuir el tamaño de la ventanilla. Ese es el ancho de la ventanilla. Y en este punto en particular, cuando los paréntesis alrededor de 988 vuelven a ver que los enlaces se han dividido en dos líneas diferentes. Y lo que necesitamos es que en esta etapa en particular, los
enlaces se van a dividir en dos diferentes más saludables desactivar todo el nav consiguió. Entonces para que eso suceda, vamos a usar consulta de medios. Entonces la consulta de medios, vamos a especificar un break-even, o en nuestro caso, es un ancho de la ventana gráfica. Entonces cuando ese break-even Como llegó v, quiero desactivar la barra de navegación. Y vas a ver que NOSOTROS hemos escuchado muchos espacios en blanco y vamos a mover eso. Entonces estoy ahora mismo en el archivo CSS y blanco aquí, voy a seleccionar HTML y el cuerpo. Y voy a proporcionar desbordamiento x como oculto. Ahora si lo guardo, se puede ver que el espacio y se ha ido. Y ahora identifiquemos el break-even o el ancho en el que queremos que se deshabilite la barra de navegación. Entonces de nuevo, voy a disminuir el ancho de la ventanilla. Y aquí vas a ver que alrededor de este punto en particular, alrededor de 1988 es donde la sección de enlaces se divide en dos partes. No voy a tomarlo hasta este punto en particular porque se puede ver que la conducta y los vínculos son bastante cercanos. Y voy a ir con el valor seguro de nuestros más alrededor de los que son 204. Y el tema de tomarlo todo línea liberal 88 es que si una persona con este tipo de eje de ventanilla, estás molestando y ves que la conducta y los enlaces de dieta final son bastante cercanos. Y no se ve tan genial. Entonces si es 1024, es una especie de aspecto bonito incluso en este tipo de anchura y altura de la ventana gráfica. Entonces lo que vamos a hacer es que vayamos a nuestro styles.css. Y me voy a desplazar todo el camino hasta el fondo. Y aquí, la consulta de medios de Estados Unidos voy a entrar al ritmo de los medios. Y la perspicacia sobre
corchete, quiero especificar el ancho, eso es ancho máximo. Y como hemos comentado, incluso
vamos con 1024 pixel. Y aquí voy a abrir el cuerpo. Entonces lo que sea que voy a especificar en este bloque en particular
será aplicable cuando el vértice aquí mismo cruce 1024. Por lo que aquí desactivemos la barra de navegación. Entonces vamos al archivo índice. Y dentro del nav, voy a proporcionar una identificación de guión principal f. Déjame copiar eso y vamos a guardarlo. Volvamos a style.css. Y aquí seleccionemos nuestra barra de navegación. Entonces eso está dentro del encabezado, vamos a seleccionar la barra de navegación. Por lo que vamos a seleccionar la barra de navegación a través de la identificación. Por lo que necesitamos proporcionar hashtag para seleccionar el ID. Y aquí voy a mostrar ninguno. Ahora si lo guardo, y se puede ver que falta la barra de navegación. Entonces permítanme demostrar eso. Por lo que ahora la riqueza actual es casi 1054. Y ustedes pueden comprobar este valor en particular cuando es casi de 10 a cuatro. Cuando cruza 10 a cuatro, se
puede ver que la barra de navegación está desactivada. Entonces esto es lo que quise decir con break-even. Entonces cuando se alcanza el break-even de 1024, en este punto en particular, nuestro código dentro de nuestra consulta de medios con Ebert 0, se activa
nuestro código dentro de nuestra consulta de medios con Ebert 0,
1, 0 a cuatro píxeles. Y dentro de la consulta de medios, deshabilitamos la barra de navegación, y eso básicamente sucedió. Entonces chicos, lo primero que voy a hacer es que necesitamos construir nuestra hamburguesa. Entonces estamos en un lugar o hamburguesas en algún lugar justo por aquí. Entonces para hacer eso, vamos a nuestro archivo de índice y vamos a copiar todo el código dentro del cuerpo. Por lo que vamos a seleccionar las secciones completas. Entonces déjame disminuir el tamaño y la deseleccionar todo el código que está dentro del cuerpo todo el camino hasta la foto. Entonces vamos a cortarlo. Entonces si estás en Windows, puedes controlar y x, y si eres un Mac, puedes recomendar y x. Así que ahora déjame acercar un poco. Y aquí dentro del cuerpo, voy a crear una división con una clase de guión de sitio, dash Harappa. Y dentro de esta división en particular, peguemos el código. Entonces todo lo que hicimos fue que básicamente creamos una nueva división que se nombra como nuestro sitio dash main dash wrapper. Y dentro de este particular Rapa, hemos pegado todo el código que está en cuerpo nefasto. Y ahora permítanme alinearlo. De acuerdo, lo siguiente que voy a hacer es que dentro de nuestros dados laterales significan eso es envoltorio. Vamos a crear otra división con una clase de hamburguesa. Y dentro de esta división en particular, quiero crear un botón. Y este botón va a tener una imagen que se nombra como hamburguesa dot SVG. Ahora si lo guardo y si vas a nuestra página web, aquí en la parte superior otra vez, mira nuestra hamburguesa dudo aquí. Y ahora necesitamos darle estilo y necesitamos cambiar su posición y necesitamos transportarlo a algún lugar justo por aquí. Entonces para hacer eso, básicamente seleccionemos nuestro sitio dash, dash wrapper. Vayamos a nuestro style.css. Y aquí, digamos así,
corrido Mendes wrapper y cambio su posición para relacionar dv. Y ahora seleccionemos nuestra hamburguesa. Por lo que la hamburguesa está dentro de nuestro sitio dash Mendes wrapper. Entonces primero seleccionemos eso, seguido de nuestra chica de hamburguesas. Y aquí voy a cambiar su posición a absoluta. Y seré nuevo en localizarme en algún lugar por aquí. Entonces, proporcionémosle una parte superior de casi 40 píxeles. Y justo otra vez alrededor de 40 pixel. Y si lo guardo, y se puede ver que ahora falta la hamburguesa por radio por aquí, pero detrás de la bolsa hacia fuera. Ahora tenemos que traerlo delante de la bolsa hacia abajo. Para ello, proporcionemos un índice de inserción de 11. Si lo guardo. Aquí, se puede ver que ahora tenemos un ícono de hamburguesa por aquí. Por lo que la hamburguesa es básicamente una encerrada dentro de un botón. Entonces por defecto va a tener un fondo que he alineado y un borde. Y ahora vamos a hacer por el estilete. Entonces aquí mismo en el style.css, voy a copiar todo el código desde aquí, que selecciona la división de hamburguesas. Por lo que dentro de la división de hamburguesas tenemos el botón. Entonces aquí voy a dar un trasfondo en cuanto a ninguno. Ahora, si lo guardo, van a ver que el fondo son básicamente los discapacitados, pero de nuevo, ver la frontera aquí mismo. Entonces lo que yo solo proporciono una frontera, ninguno. Ahora si lo guardo, la frontera está básicamente desactivada. Pero si hago clic en él, básicamente va a proporcionar un esquema sobre él. Por lo que también brindemos un esbozo de ninguno. Ahora si lo guardo, la hamburguesa se ha ido y se ve perfectamente bien. Por lo que también hay un poco en Grecia del tamaño de la hamburguesa. Entonces para hacer eso, vamos a copiar luego puerto directo desde aquí. Vamos a pegarlo y seleccionar la imagen. Y vamos a proporcionar una muy dura casi 30 píxeles. Vamos a guardarlo. Y ahora se puede ver que la hamburguesa es claramente visible y eso también es cambiar el cursor para apuntar el botón plegable y guardarlo. Ahora la hamburguesa está completamente bien. Cerremos la herramienta de desarrollador. Y ahora se puede ver que la hamburguesa es básicamente visible en la vista normal también. Y tenemos que arreglarlo, y eso lo hará en un segundo. Y aquí se puede ver que todas las demás propiedades de la hamburguesa está funcionando perfectamente bien. Eso está en la posición correcta y también se ve bastante bien. Ahora bajemos a posponer la personalización de la hamburguesa. Entonces chicos, ahora mismo estoy en mi sección Herramientas de Desarrollador. Y aquí puedes ver que no tenemos eso el menú de hamburguesas justo por aquí. Y creo en mí presionarlo. Necesitamos un menú para salir y que Meno debería mostrar todos los enlaces como casa sobre habilidades y no. Entonces eso es lo que vamos a construir ahora mismo. Entonces vamos a nuestro archivo de índice. Entonces aquí mismo, esta es nuestra división de hamburguesas, y justo debajo de que quiero crear otra división, pero un vaso de móvil, bonito nav. Y luego decidir esta división en particular, voy a crear una lista desordenada. Entonces dentro de esta lista desordenada particular, voy a crear otra lista. Y esta lista consiste en una etiqueta de ancla. Entonces básicamente, cuando presionamos en casa o en una pizarra, es para llevarnos a esa sección superior,
derecha, así que necesitamos una etiqueta de anclaje para eso. Y aquí voy a nombrar a esta etiqueta de ancla como casa, igual que la de nuestra barra de navegación. Y necesitamos un total de cuatro enlaces más diferentes. Entonces voy a copiar esto por cuatro veces más. Y voy a renombrar eso. Entonces aquí voy a copiar de la sección de héroes y vamos a pegarlo aquí. Esta copiosa mata y pega aquí. Proyectos. Y finalmente la cuadra. Y ahora vamos a guardarlo. Y si revisamos nuestra página web aquí en la parte del perro otra vez, ver el final de la diarrea. Móvil muere nunca división con todos los diferentes enlaces. Y ahora vamos a marcarlo. Entonces chicos, ahora mismo, nuestra hamburguesa puede hacer es en realidad ocupar espacio de un sitio web. Como se puede ver esto mostrado en la parte superior de nuestro sitio web, lo que realmente necesitamos estos datos, esta sección en particular debe estar oculta en el lado izquierdo. Y luego hacemos click en el menú de hamburguesas. Esto y la disección deben salir y mostrar todos estos menús. Y el menú de hamburguesas también debe ocupar todo el ancho y alto de la pantalla. Entonces este es nuestro requisito básico, y ahora empecemos a construir eso. Entonces antes de eso, déjame ir al archivo index.html. Y aquí se puede ver que la palabra móvil está mal escrita. Entonces voy a renombrarlo a alelo MOBI y vamos a guardarlo. Y también puede copiar este nombre de clase en particular desde aquí. Después de eso es ir a nuestro style.css. Y aquí seleccionemos la clase de navegación móvil. Entonces, en primer lugar, voy a dar posición como fija. Y voy a dar un top de 0 y una izquierda de 0 también. Por lo que va a ser lo más dejado a la pantalla posible. Ahora si lo guardo aquí, se
puede ver que el menú de hamburguesas ahora no es visible. Es porque no hemos proporcionado ningún índice conjunto. Ahora está detrás de nuestra página web. Ahora tenemos que traerlo al frente. Por lo que aquí proporcionemos un índice. Por lo que necesitamos proporcionar un valor más alto, por ejemplo, en un 1001. Y vamos a ver. Y ahora podemos ver que nuestro menú de hamburguesas es visible. Por lo tanto, démoslo volver a hacerlo. Por lo que hay proporcionar un fondo de puro. Vamos a guardarlo. Y como puedes ver ahora, el menú de hamburguesas es visible. Y ya dije que el menú de hamburguesas debería ocupar toda la pantalla. Por lo que necesitamos proporcionar un ancho del 100 por ciento así como una altura del 100 por ciento. Ahora si lo guardo aquí, se puede ver que la hamburguesa está retomando toda la pantalla. Ya que le proporcionamos un valor de índice más alto, está encima de todas las diferentes capas y secciones de la página web. Y ahora aquí se puede ver que al final, los eslabones
nefastos están realmente cerca de la frontera. Por lo tanto, proporcionemos un relleno de dos rems a izquierda, derecha, y superior e inferior. Perdón. Guardémoslo por ahora hemos proporcionado un relleno de dos REM. Entonces chicos, a partir de ahora no tenemos nada para cerrar nuestro menú de hamburguesas. Nosotros lo hemos abierto, pero también necesitamos cerrarlo, ¿no? Entonces necesitamos crear un cuervo que puedo escribir aquí a la derecha para que Darwin le demos click, el menú de hamburguesas desaparece y va al lado izquierdo. Entonces para hacer eso como volver a nuestro archivo de índice y escribir dentro de nuestra división de dash nav móvil. Voy a abrir un botón con una clase de tiempos. Y dentro de este botón en particular voy a abrir una imagen y vamos bajo slash de puntos, ir a carpeta Imágenes y seleccionar una imagen con el nombre de veces 30 SVT. Vamos a guardarlo. Y si vuelves a ir al revés aquí, ves que tenemos un icono de cruz, pero necesitamos que esto esté en el lado derecho. Entonces para hacer eso, básicamente
copiemos el nombre de la clase desde aquí, vaya a style.css. Y aquí vamos a seleccionar esta división en particular. Y en primer lugar, voy a dar posición como fija. Y también proporcionemos top como 30 pixels. Y llevemos todo el camino a la derecha. Eso es correcto. Para la mayoría un píxel de 100. Entonces si lo guardo, vas a ver que ahora el icono está casi a la derecha. Y esto es básicamente un botón. Por lo que por defecto va a tener un contorno de fondo y un borde. Y desactivemos todas esas cosas. Entonces aquí voy a proporcionar un fondo de ninguno, lo siento, conocido como proporcionar un contorno de ninguno como frontera. Ninguno. Ahora si lo guardo, se puede ver un icono de cruz de avión. Y también brindemos cursor como punto arriba para que NOSOTROS traigamos nuestras bocas. Se va a ver como el de un cursor. Y ahora tenemos un ícono de cláusula aquí también. Por lo que chicos aquí se puede ver que nuestro icono de cruz es
mucho más pequeño y rescatar grasa limpia de su tamaño. Entonces para hacer eso, voy a copiar la clase del tiempo. Y aquí voy a seleccionar la imagen y vamos a cambiarla a 1.5 m Déjame guardarla. Y como puedes ver ahora es lo suficientemente grande y despreciable. Ahora marquemos todos estos enlaces diferentes. Entonces para hacer eso, voy a seleccionar nuestra división
More pi, dash NADPH. Y vamos a seleccionar toda la lista desordenada en primer lugar, y se puede ver que tenemos ¿qué? Puntos aquí mismo. Desactivemos eso. Tan cierto que no escribo en el estilo de guión de lista, tipo de
guión como ninguno. Ahora si lo guardo, se puede ver que los puntos ya no son visibles. En segundo lugar, también diseñemos estos diferentes enlaces también. Entonces el texto. Entonces aquí voy a seleccionar la lista desordenada, la lista y
la etiqueta de anclaje dentro de ella. Entonces, en primer lugar, voy a cambiar su color a oscuro. Entonces ahora tenemos color oscuro aquí mismo. Y se puede ver que tenemos lo que subraya. Entonces desactivemos eso especificando la decoración del texto. Ninguno. Ahora no tenemos subrayados así como voy a aumentar su tamaño de teléfono a ellos para que sean claramente visibles. Ahora tenemos los enlaces con estilo, y como puedes ver, estos anillos están realmente cerca uno del otro, por lo que necesitamos proporcionar un poco de margen inferior. Entonces para eso voy a copiar el enlace. Ese es el alineamiento. Y les voy a proporcionar un margen inferior de o la mayoría. Ahora tenemos una brecha de percepción entre ellos. Por lo que aquí se puede ver que la lista de Enlil está realmente cerca de la parte superior de la página. Por lo que eso es proporcionar un poco de relleno. Entonces para hacer eso, vayamos a nuestro navegador móvil. Y aquí voy a proporcionar un relleno top de cinco rem. Y ahora tenemos opciones de curso basadas en la parte superior. Y además voy a llevar esto en lista nefasta al centro de la página. Por lo que aquí proporcionemos text-align center. Ahora tenemos el tema ascendente Inditex. Entonces chicos, ahora terminamos con la navegación básica puede saber diseño. Y ahora proporcionemos las funcionalidades básicas a nuestro menú de navegación. Al igual que cuando hacemos clic en el botón Cerrar, esta navegación en particular debería cerrarse y luego hacemos clic en el icono de la hamburguesa. Debe abrirse la ventana de navegación vertical. Y ahora brindemos estas funcionalidades básicas. Entonces para eso, vamos a usar nuestro app.js para proporcionar la funcionalidad. Antes de eso, vayamos a nuestro archivo índice y demos una clase a nuestro botón, que es el botón de hamburguesa. Entonces déjame copiar el nombre de aquí. Y brindemos una clase de hamburguesa Dash button. Y aquí voy a copiar este nombre de clase particular asfalto, y vamos a guardarlo. Ahora vamos a nuestro app.js. Y aquí mismo, voy a crear una variable. Por lo que podemos crear una variable usando plomo, watt o conos. Y voy a dar un nombre variable de hamburguesa. Entonces aquí mismo voy a volver a seleccionar, eso es documento dot QuerySelector. Y dentro del corchete redondo, voy a especificar la clase del limón que quiero seleccionar. Por lo que en nuestro caso, queremos seleccionar el botón. Por lo que necesitamos especificar el proveedor de clase al botón, es
decir, hamburguesa Dash button. Y no olvides proporcionar el punto ya que VR básicamente accediendo al elemento. Por lo que ahora hemos seleccionado el botón de hamburguesa y también necesitamos seleccionar el icono de cruz también. Entonces aquí voy a crear otra variable con el nombre del tiempo. Y aquí de nuevo, voy a documentar y seleccionar sobre icono de cruz. Y si no me equivoco, hemos dado una clase de tiempos. Entonces vamos a verificarlo. Entonces aquí tenemos un dado una clase tiempos a nuestro botón. Entonces vamos a copiarlo y vamos a pegarlo. Entonces chicos, ahora hemos seleccionado estos dos elementos, y en este momento es el momento de que proporcionemos un oyente de eventos. Por lo que hemos seleccionado el botón, y ahora necesitamos decirle al botón qué hacer cuando hacemos click en él. Entonces para hacer eso, voy a copiar desde aquí el nombre de la variable hamburguesa. Y vamos a añadir un oyente de eventos. Y el premio en caso de que el oyente del evento escuche, eso es básicamente un click. Y cuando una persona hace clic en el icono de la hamburguesa, esta función en particular, se va a ejecutar esta función en particular. Entonces resumiendo el código, cuando alguien hace clic en el icono de la hamburguesa, esta función en particular se activa y se ejecuta el código dentro de ella. Entonces ese es el fundamental básico detrás de este particular oyente de eventos. Y necesitamos lo mismo para nuestros tiempos yo o el botón Times también. Entonces voy a duplicar el código y quiero cambiar el nombre de la variable 2 veces 0. ¿ Verdad? Ahora solo especificamos qué debe pasar cuando vamos a dar clic en este icono de hamburguesa en particular. Entonces chicos, antes de seguir adelante, visitemos nuestra página web. Y como se puede ver que en el presente escenario cuando
la página web de BB Zeta, lo único que podemos ver menú de navegación oriental, pero por defecto, y cuando recibimos nuestra página web, debemos anotar ver el menú de navegación. Esto debe ser visible sólo cuando hacemos clic en el menú de hamburguesas. Por lo que necesitamos ocultar el menú de navegación. Entonces lo que vamos a hacer es que vamos a transportar el menú de navegación del NDI a la izquierda. Entonces cuando hacemos clic en el menú de hamburguesas, debería aparecer. Entonces para hacer eso, vamos a nuestro style.css. Y aquí mismo en el punto móvil, vamos a aplicar básicamente un traductor X. Así que para ello, voy a abrir transformada. Y aquí voy a precisar. Traducir X. Así que traducir X o traducir se utiliza básicamente para mover objetos. Y ya hemos usado translate en la sección de habilidades donde necesitamos llevar el logo y la tarjeta en el remitente y traducirlo especifica que necesitamos mover el elemento en el eje horizontal. Y si entro algún valor positivo, va a tomar el elemento diverso, ¿no? Pero ahora mismo no vamos a este menú de navegación en particular para estar a la izquierda. Por lo que necesitamos aportar valor negativo, y voy a proporcionar menos un 100 por ciento. Por lo que menos un 100 por ciento va a sacar el elemento de la pantalla. Entonces si lo guardo, el menú de navegación ya no es visible. En realidad no se ha ido. Está en algún lugar del lado derecho. Entonces si cambio el valor a casi 80 por ciento, se
puede ver la mitad del mismo. Por lo que en realidad está en el lado izquierdo, pero en realidad lo podemos ver. Entonces voy a traer eso de vuelta al 100 por ciento. O como ahora hemos hecho por defecto un menú de navegación oculto. Entonces lo siguiente que vamos a hacer es que Darwin me haga clic en el ícono de la hamburguesa aquí mismo. El menú de navegación debe volver a su posición original. Entonces para hacer eso aquí voy a crear otra clase que se llama US dot open. Y aquí voy a copiar este código en particular desde aquí. Vamos a pegarlo. Y aquí voy a especificar el translate x como 0. Por lo que al especificar translate x 0, va a traer de vuelta nuestro menú de navegación a su posición original. Entonces si lo guardo, y si vuelvo a nuestra página web aquí mismo, voy a aumentar el ancho de esta sección en particular. Y si selecciono nuestra hamburguesa. Y aquí vamos a ver la clase de navegación discontinua móvil y luego la abriremos. Y E Fi proporcionar la clase abierta aquí mismo. Por lo que aquí el abierto va a traer de vuelta nuestro menú de navegación a su posición original. Entonces si simplemente especifico abierto en la clase nav, vamos a ver que tenemos tau, el menú de navegación de vuelta a su posición. Y si lo quito, se
puede ver que está oculto. Entonces con la ayuda de JavaScript, necesitamos dinámicamente, localizo nuestra clase a este particular móvil discontinua NADPH. Por lo que es bastante fácil hacer eso. Volvamos a nuestro app.js. Y aquí en el archivo de índice se puede ver que este es el móvil Lord nav. En su interior es donde tenemos el menú de navegación de diarrea final. Entonces por eso vamos a sumar abierto aquí mismo en esta clase en particular. Entonces aquí voy a copiar el nombre de la clase. En primer lugar, necesitamos seleccionar nuestra clase de navegación móvil. Entonces aquí en el app.js, voy a crear otra variable conocida como nav. Y de nuevo, voy a copiar este código en particular. Y aquí voy a seleccionar nuestro nav móvil más 4, ¿verdad? Por lo que aquí básicamente hemos seleccionado nuestra clase de navegación móvil. Y ahora cuando hacemos clic en nuestro botón de hamburguesa, necesitamos que nuestro menú de navegación sea visible. Para ello, voy a escribir en nav móvil, lista de clases de
puntos, dot add. Y qué clase que necesitamos agregar, esa es la clase abierta. Por lo que incitando a la glucosa, voy a especificar abrirla y cerrarla. Por lo que este código en particular dice que cuando hacemos clic en el botón de hamburguesa, necesitamos que se ejecute esta función en particular. Por lo que el cuerpo de la función dice que cuando hacemos clic en el botón de hamburguesa, necesitamos agregar una clase en particular a nuestro navegador móvil plus, que estamos seleccionados aquí mismo. Entonces si volvemos a nuestro código y si hago clic en este icono particular de hamburguesa cruda, podemos ver que ahora tenemos nuestra ventana de navegación abierta. Y aquí se puede ver que el operando
se ha agregado automáticamente dinámicamente a la aplicación móvil. Entonces si me refresco de nuevo, y aquí se puede ver que ahora no tenemos clase abierta junto con el nav móvil. Pero el impulso, y voy a dar clic en el botón de hamburguesa aquí se puede ver que nuestro JavaScript agrega dinámicamente esta clase abierta en particular, eso es lista de clases dot add open hace este trabajo en particular. Entonces así es como básicamente logramos la funcionalidad de abrir el menú de navegación cuando hacemos clic en el icono de la hamburguesa. Por lo que ahora necesitamos también proporcionar funcionalidad a nuestra cláusula puedo, por lo que cuando hacemos clic en ella, necesitamos otros menú de navegación particular para ir al lado izquierdo. Entonces aquí se puede ver que en el momento en que quite la clase abierta, vamos a ver que dow, el menú de navegación está oculto. Por lo que al quitar el cristal del operando, básicamente
podemos quitar el menú de navegación. Entonces aquí ya hemos seleccionado nuestro icono de cruz, y aquí dentro de nuestro oyente de eventos para su icono de cruz. Y voy a copiar es particular para acorde desde aquí. Y lo voy a pegar. Y en lugar de agregar el vidrio abierto, voy a quitar el vidrio operativo. Eso es lista de clases dot remove open. Ahora si lo guardo y el otro, vuelves a la página web. Aquí quiero dar click en el menú de hamburguesas, que abre nuestro menú de navegación. Y aquí puedes ver ahora tenemos clase abierta en el tablero móvil Na plus, y voy a dar click en el icono de cruz que abrieron última vez se ha eliminado, y que escondes tienen un menú de navegación. Por lo que ahora básicamente hemos logrado las dos funcionalidades básicas. Es decir, cuando hacemos click en el botón de hamburguesa, tenemos abierto el menú de navegación y luego hacemos click en el icono de cruz. El menú de navegación ha sido deshabilitado u oculto. Entonces chicos, cuando hacemos clic en el botón de la hamburguesa, se
puede ver que en el menú de navegación sólo parpadea y se descarga. No hay animación suave a ella. Por lo que para proporcionar una animación deslizante, Volvamos a nuestro style.css y blanco dentro de nuestro punto móvil. Ahora, brindemos una transición para todos los elementos y va a ser de 0.5 segundos y es facilidad de entrada y salida. Ahora si lo guardo. Y ahora cuando hago clic en el botón de hamburguesa, se
puede ver que hay una animación suave de entrada y suavizar. Por lo que ahora tenemos el botón de hamburguesa como botón de cláusula
elástica y luego murió funcionalidad junto con animación, todo listo.
14. Sitio web responsivo Parte: Hola chicos, bienvenidos al video. Y en este video en particular vamos a hacer que nuestra página web sea completamente receptiva. Por lo que en el video anterior, como primer paso para hacer que nuestro sitio web respondiera, realmente
hicimos nuestro menú de navegación. Por lo que este es uno de los videos más importantes de nuestra página web. Porque hacer una respuesta de sitio web para usar realmente importante en esta etapa de persona en particular. Porque nuestro sitio web debe verse perfecto en casi todos los tamaños de pantalla. Entonces si yo bajo f, L en mi teclado, que va a abrir nuestra herramienta de desarrollador. Vas a ver que ahora estamos en casi 13, 25 bit por 949 altura. Y ahora si produzco una palabra, aquí, se puede ver que ahora tenemos nuestro menú de hamburguesas. El navbar ha sido deshabilitado. Pero ahora si selecciono una altura de 10 días de un giro de iPhone aquí puedes ver que nuestra página web está completamente rota. Las cosas no están buscando hallazgos o no visibles. Algunas de ellas se superponen y está completamente rota. Y ahora es el momento de que arreglemos todo este tema y hagamos que nuestro sitio web luzca perfecto en casi todos los tamaños de pantalla. Y empecemos. Entonces chicos, si revisamos nuestro style.css aquí podemos ver un contenedor. Por lo que esta condición tiene un experto en matemáticas, un relleno y el margen. Por lo que este contenedor es básicamente para nuestro escritorio. Por lo que este contenedor asegúrate de que nuestro alcista se vea bien en la versión de escritorio. Pero en realidad necesitamos mucha comodidad como esta para que nuestro sitio web se vea bien en radio o en tamaños de pantalla también. Entonces si nos desplazamos por aquí, se
puede ver que básicamente hemos aplicado una consulta de medios aquí mismo. Entonces voy a cortar eso y vamos a pegarlo al fondo. Y tengamos básicamente todas las consultas de medios al final del archivo. Por lo que aquí se puede ver que este medio en particular, se activa cuando las caídas por debajo de 1024 pixel. Y ahora, Por ahora sólo tenemos una sola modificación. Es decir, hacemos o desactivamos la visualización fuera de nuestra barra de navegación. Por lo que Eve característica acera ahora mismo, hagamos básicamente que la versión para iPad de nuestro sitio web responda. Pero ella está teniendo una factura AL 768 y altura de 1024. Entonces lo primero que voy a hacer es que no viste que la imagen y el texto aquí es bastante grande. Entonces disminuyamos básicamente su tamaño. Entonces aquí voy a dar clic en el selector de elementos, y voy a seleccionar la imagen. Permítanme aumentar ligeramente el ancho de la sección. Y lo genial es que aquí se puede ver que w0 están teniendo el camino hacia esta imagen en particular. No necesitamos ir índice de puerta por tierra encontrar manualmente la ubicación de nuestra imagen de época. El selector de imágenes proporciona automáticamente la parte de esta imagen en particular. Entonces simplemente voy a copiar este camino en particular desde aquí
y aquí mismo dentro de nuestra consulta de medios, pegarlo. Y voy a disminuir su ancho a 260 píxeles. Si lo guardo, se puede ver que el tamaño se ha reducido y ahora también hay cambio el tamaño de nuestra radiografía aquí. En realidad se ve bastante grande. Nuevamente, quiero seleccionar nuestro texto desde aquí. Y aquí se puede ver tenemos todo el camino hacia este texto de área en particular. Yo lo voy a copiar. Volvamos al style.css. Y aquí lo voy a pegar. Y voy a disminuir el tamaño de la fuente a casi a la habitación. Y si lo guardo aquí, se
puede ver que el tamaño del nodo se ve bastante divertido. Pero se puede ver que la imagen y el texto están realmente cerca de la parte superior de la página. Necesitamos proporcionar un B dice relleno superior, superior. Por lo que sabemos que este extremo particular extremos extremos extremos extremos extremos al interior de la sección de héroes. Por lo que de igual manera podemos proporcionar un poco de acolchado sección de héroe de puerta superior. Entonces aquí voy a seleccionar la sección de héroes y eso es proporcionar una parte superior acolchada de 10 rem. Vamos a guardarlo. Y ahora puedo ver que estamos teniendo suficiente cantidad de espacio en la parte superior de nuestra imagen y el texto. Entonces chicos, se puede ver que la imagen y el texto es cláusula 3D al borde izquierdo de nuestra página. Y también brindemos un poco de relleno que queda a nuestra sección de héroes para
que al menos dos elementos residan en el centro de esta página en particular. Entonces aquí voy a proporcionar un relleno. Izquierda casi lo despidió. Y si lo guardo, podemos ver que ahora la imagen
y el texto está en el remitente de la cama de esta sección en particular. Y ahora pasemos a la segunda sección que es así la sección Acerca de mí. Y aquí voy a reducir ligeramente el tamaño de la imagen. Entonces de nuevo, quiero seleccionar la imagen. Y aquí se puede ver entonces ese camino, voy a copiarlo. Entonces aquí mismo, peguemos aparte. Entonces aquí voy a reducir la altura a casi 400 pixel. Y quiero también traer levemente esta imagen en particular la derecha porque aquí hay mucho espacio libre. Por lo que voy a proporcionar un relleno que queda mañana. Sí. Ahora bien, si la imagen se ve perfectamente bien y el texto ya se ve bien, es legible y también está en la posición adecuada. Y terminamos con la sección abort, aspirina. Entonces chicos, ahora mismo pasemos a mi sección de habilidades aquí mismo. En la sección mata ratones, se
puede ver que estamos teniendo tres cartas en una sola fila, por lo que los guardias no están teniendo suficiente cantidad de espacio. Por lo que ahora intentemos hacer dos cartas en una sola línea. Entonces, antes que nada, quiero decir como el endocardio aquí. Y aquí, se puede ver que hemos proporcionado una cuadrícula y WAS especificó tres elementos en una sola fila. Y tratemos de usar eso también y veamos. Y como puedes ver ahora se ve bastante bien. Eso son dos cartas en una sola línea. Y aviso aplicar eso. Entonces vamos a copiar el código desde aquí, ese es el camino. Vamos a pegarlo aquí. Otra vez. Voy a copiar también las columnas de plantilla de cuadrícula,
y el espacio para guardarla. Sí. Ahora la sección de habilidades se ve una llave bien. Y ahora pasemos a la sección de proyectos. Para esta sección también se ve ambos igualmente bien. Ahora, si vuelves a la sección de blog, mira que básicamente teníamos tres cartas, pero ahora sólo dos cartas que son visibles. Nuevamente, voy a seleccionar a esta zona en particular guardias de aquí. Y voy a especificar las columnas de plantilla de cuadrícula como una. Porque realmente no tenemos tres cartas. Y si especifico uno va a estar teniendo un solo Dios en fila. Eso es otra vez, mira, así es como se ve ahora. Por lo que en realidad necesitamos hacer algunas ligeras modificaciones a esta área en particular, mi sección de blog. Entonces, en primer lugar, voy a llamar a P el camino desde aquí. Vamos a pegarla por aquí. Y eso también es copia. Se copia y pega la columna de plantilla. Y además proporcionemos una brecha de rejilla de casi cuatro rem. Vamos a guardarlo. Y como tiene los datos, la imagen en realidad no se está estirando hasta el final del pH. Por lo que necesitamos hacer alguna ligera modificación en nuestro CSS para lograr eso. Entonces chicos, ahora vamos a nuestro archivo CSS y déjame
desplazarme hasta la parte superior de la hoja encontrar mi sección de blog. Entonces aquí es donde comienza la sección MyBlock. Y si revisamos nuestro índice mientras se puede ver que la imagen se encuentra dentro del envoltorio del salpicadero del auto. Entonces déjame copiarlo. Y aquí quiero básicamente seleccionar mi bloque, el envoltorio de tarjetas, la tarjeta y la imagen dentro de ella. Y voy a proporcionar un ancho del 100 por ciento y un comedero alto 100 por ciento. Y si lo guardo aquí se puede ver que ahora el problema está arreglado. Tenemos la imagen estirándose todo el camino hasta el final de esta tarjeta en particular. Por lo que eso hace que la sección MyBlock también esté perfectamente bien. Ahora tenemos la sección de contactarme, que también es perfecta. Y los resultados por defecto se ven perfectamente bien. Por lo que ahora hemos completado el diseño responsive de nuestra ventana gráfica iPad, que está teniendo un poco de casi 768 y una altura de 12 a 24. Se ve perfectamente bien. El menú de navegación funciona perfectamente bien. Y en general, el sitio web se ve realmente bien en esta relación de aspecto en particular. Y ahora pasemos más a hacer que nuestras relaciones discretas respondan. Entonces chicos, ahora vayamos al diseño receptivo de nuestro dispositivo móvil. Aquí, voy a elegir iPhone 6, 7, y 8. Y aquí se puede ver que nuestra página web es de nuevo, un mito completo. Las cosas están por todas partes. Lado de guardia, extraviado. La mitad de los más duros, básicamente ni siquiera visibles. Y ahora vamos básicamente a darle estilo a este puerto de vista móvil en particular de nuestro sitio web. Entonces ahora mismo vamos a nuestro style.css. Y justo al final de nuestra primera consulta mediática. Y crearemos nuestra segunda consulta de medios, que va a tener un ancho máximo de casi 576 píxeles. Y vamos a abrir la consulta de medios. Entonces cada vez que nuestro puerto de vista llega a un burritos menos de 576, este acorde en particular se activa, así que vamos a guardarlo. Y si revisamos nuestra página web, se
puede ver que la imagen del héroe y el texto está en una sola línea. Y si selecciono la imagen aquí, se
puede ver que la división de héroes está teniendo aplicada una propiedad flex. Entonces si pudiéramos cambiar la dirección del flex a columna, podemos traer este texto en particular en la parte inferior de la imagen. Entonces lo que voy a hacer es que voy a seleccionar toda la sección de héroes. Y voy a proporcionar una dirección flex de columna. Ahora si lo guardo, ahora, el texto está en la parte inferior de la imagen. Y aquí se puede ver que en la parte del perro estamos teniendo mucho espacio libre. Llevemos ligeramente esta imagen un poco a la parte superior. Entonces voy a seleccionar la imagen. Por lo que aquí se ve que la imagen se encuentra en la división izquierda. Entonces nuestra copia, este código en particular de aquí, esta base sí lo hizo. Y quiero dar un margen top de casi menos cinco rem. Y si lo guardo aquí se puede ver que la imagen tiene ligeramente ser conocida por la parte superior. Y ahora vamos básicamente a darle estilo a este texto en particular. Entonces, en primer lugar, voy a seleccionar el texto. Por lo que aquí se puede ver que el texto está básicamente ubicado en la división correcta. Entonces voy a copiar el código desde aquí, y vamos a pegarlo. Entonces lo primero que quiero hacer es empezar. Vas a ver que el texto está realmente cerca de la imagen. Yo quiero dar un poco de relleno top. Por lo que voy a dar un darpa relleno ante todo, den drum. Ahora el texto está teniendo algún espacio entre la imagen. Y voy a alinear el texto en remitente para que se vea mucho mejor. En ese caso, se puede ver que el texto es suicidio y el fondo necesita del otro lado. Entonces si proporciono text-align center, en
realidad debería verse bien. Sí. Ahora para el texto y el botón está todo delineado en un minuto remitente con querer ni la totalidad de DC y la dire división se arrodillan hacia esa derecha de la pantalla. Y en realidad proporcionemos un poco de relleno derecho, para hacerlo en el centro de esta sección. Por lo que no se proporciona agregando el valor predeterminado correcto más para ejecutarse. Y si lo guardo, vas a ver ese nulo si el texto está en el centro de la sección. Y también se aplicó a una incrustación a la imagen también. Por lo que voy a proporcionar una luz guía hasta casi hasta RAM. Está bien, Ahora para la imagen y el texto es una especie de en el centro. Ahora aquí se puede ver que esta ruta de clip en particular, necesitamos bajar ligeramente el valor. Entonces si selecciono esta sección en particular, y si selecciono el encabezado aquí se puede ver este es el clip pot. Entonces vamos a probar básicamente tus diferentes valores. Entonces voy a aumentar este valor en particular. Entonces lo que vas a ver que 95 básicamente proporciona una buena curvatura. Entonces vamos a seleccionar el encabezado y voy a copiar este valor en particular. Por lo que aquí seleccionemos el encabezado y proporcionemos la ruta del clip. Si lo guardo. Ahora tenemos la curvatura perfecta. Por lo que ahora pasemos a la sección aeroportuaria. Entonces aquí se puede ver que de nuevo, estamos teniendo un flex y que la dirección flex es no crecer en son los genes que una columna. Por lo que de nuevo, voy a seleccionar esta sección en particular. Y aquí puedes ver tenemos un flex aplicado. Entonces cuando selecciono el contenedor desde aquí, volvamos a nuestro style.css. Y vamos a seleccionar el contenedor y vamos a cambiar la dirección del flex a columna. Guárdalo. Se puede ver que tenemos la imagen en
la parte superior y el aeropuerto puede texto y la parte inferior. Pero ahora debemos alinear estos textos en el centro. Entonces, vamos a seleccionarlo a partir de aquí. Por lo que el texto se ubica en la división derecha de lo anterior. Entonces voy a copiar este código en particular desde aquí. Y peguémoslo aquí. Y quiero nuestro centro de alineación de texto. Ahora si los textos deberían estar en el centro, sí. Ahora tenemos el texto en el centro. Y otra cosa a destacar es que tenemos estos iconos sociales hacia la izquierda. También deberíamos hacer eso en el centro. Ahora vamos a seleccionar eso. Y vas a ver que estamos teniendo una clase de social. Por lo que de nuevo, los íconos nefastos se encuentran en la división correcta. Entonces, simplemente copiemos desde aquí este código en particular, lo
peguemos, y también elijamos la aspirina de división social. Y vamos a proporcionar esto definir contenido centrado. Ahora, están centrados. De acuerdo, ahora si la sección Board Me está buscando cable de VM predefinido, la imagen, el texto z está hacia el centro. Los iconos también se ven bien. Ahora bajemos a la sección de Habilidades aquí mismo. Y lo primero que voy a hacer es sin duda arreglar esta curvatura en particular. Entonces de nuevo, quiero seleccionar las habilidades plus, y aquí de nuevo para ver el NDI clip-path. Y en primer lugar, vamos a copiar este código en particular desde aquí. Y vamos a seleccionar las habilidades. Entonces aquí, seleccionemos las habilidades y basándonos en, y ahora probemos algunos valores aquí y veamos cómo básicamente podemos alinear la curvatura. Entonces fascículo, quiero seleccionar el primer valor aquí. Esto básicamente lo disminuyen a 70. Y también cambiemos el segundo valor a casi dos. De acuerdo, No, esto no está funcionando perfectamente bien. Entonces eso es 70 N2 para los dos primeros valores, 70. Y para salvarlo, y la curvatura se ve perfectamente bien. Ahora en sección de habilidad, puedes ver que tenemos que hacer diferentes colores en una sola línea. Bartleby en realidad no puede ver al segundo Dios. Entonces lo que podemos hacer es que podemos seleccionar una tarjeta y si pudiéramos cambiar la plantilla de cuadrícula a una, en
realidad debería quedar bien. Probemos uno. Sí, Se ve perfectamente bien. Entonces de nuevo, seleccionemos esta parte en particular. Y aquí que el alcance sean las columnas de plantilla de cuadrícula. Y la repetición por tan solo un centavo. Entonces para salvarlo. Y eso también se ve perfectamente bien. Por lo que se hace la sección de habilidades. Ahora si vas al bloque, lo siento, la sección de proyecto, necesitamos básicamente redimensionar la imagen. Entonces de nuevo, voy a seleccionar la imagen. Por lo que la imagen se encuentra dentro de los deslizadores luz Y yo. Entonces, copiemos eso y peguémoslo aquí mismo. Entonces voy a cambiar la altura a 200 píxeles. Y cambiemos eso a 300 píxeles. Se lo guarda, y eso se ve bastante bien. Por lo que la sección de productos también se hace básicamente. Ahora vamos a la sección de mi blog. Que mi sección de blog también está predefinido ahora. Y que la moneda de vuelta media sección. Por lo que aquí es donde necesitamos hacer algunas ligeras modificaciones. Se puede ver que el correo electrónico no es ni completamente visible. Por lo que básicamente hemos proporcionado una gran fórmula. Todos estos dos soldados hicieron multas. Entonces déjame seleccionarlo. Y aquí van a ver que hemos proporcionado a FOR, es
decir, esto se va a repetir por dos veces. Y si elimino, y por lo tanto, ahora podemos ver que los datos URI Milhouse se ha ido a la segunda línea y hagamos alguna ligera modificación para arreglar aquí este vacío en particular. Entonces déjame copiar esto, péguelo por aquí. Y voy a copiar este código desde aquí así como pegado. Y también menos reducir la brecha de guión grupal a 0. Guárdalo. Y si selecciono el segundo elemento aquí mismo, se
puede ver que estamos teniendo un tope de margen de casi tres veces. Por lo que sólo tienes que copiar esta olla en particular pegada. Y reduzcamos el margen superior a un rem. Y si lo guardo, ahora tenemos acorde cantidad suficiente de espacio en nuestros chicos saben que básicamente
estamos terminados con la completa build responsive off nuestra versión móvil. Y eso en realidad se ve perfectamente bien en mi opinión. Por lo que ustedes también pueden hacer algunos ligeros retoques para que sea de la manera que quieran. Por lo que también puedes reducir el tamaño de estas imágenes puedes proporcionar puja. Podemos hacer muchas otras cosas para que sea aún mejor. Entonces depende de ti. Y eso es otra vez, ver lo alcista se ve bastante bien. Las cosas están en su lugar. Tenemos el peor número promedio de espaciado. Todo el texto puede ser fácilmente visible, n que se puede leer fácilmente. Y ojos que lucen bastante bien. Entonces si hago clic en la hamburguesa aquí mismo, se
puede ver que este icono en particular está mucho al lado izquierdo. Por lo que también ajustemos ligeramente su posición. Por lo que en nuestro seleccionado. Por lo que voy a seleccionar los tiempos solo un centavo almacenar la imagen. Entonces lo voy a mover a la derecha a casi 30 pixel. Yo lo guardo. Sí, ahora está en la posición perfecta, aunque chicos, en realidad se ve perfectamente bien. Ahora pasemos a la siguiente etapa. Entonces chicos, ahora mismo, estoy en la vista de escritorio de nuestra página web y se puede ver que tenemos visible el botón de hamburguesa, pero no debería estar aquí. Sé que el botón de hamburguesa debe estar desactivado o debe estar oculto por defecto, esto debe ser visible o lib y el ancho del viewport kurtosis 1024 pixel. Entonces para arreglar este error, vamos a style.css. Y justo dentro de nuestro sitio
dash, dash raper dot hamburguesa, voy a proporcionar display none. Ahora si lo guardo, vas a ver que todas las hamburguesas ya no son visibles. Y voy a copiar esta olla en particular. Vamos a nuestra consulta de medios donde el máximo es de 1024. Y aquí, peguemos aparte. Y eso cambia la pantalla a bloquear. Ahora si lo guardo y yo, si abro aquí la herramienta desarrollador, se
puede ver que el presupuesto actual es de 12 57 y el momento en que el 1024 más cercano. Y de nuevo ver que la hamburguesa pero luego es específica así y no será visible. Linda inhibe los datos entonces cuando 0 a cuatro píxeles. Así que tenga en cuenta que el bug también está arreglado y todo está funcionando perfectamente bien. Y lo siguiente que necesitamos arreglar, Está atado. Cuando abrimos el menú Navegación, entonces hacemos clic en cualquiera de estos enlaces. Nada está pasando básicamente. Ahora sede el vellón, este tema en particular también. Tan bien, No, Vayamos a index.html. Y aquí se puede ver que se trata de los menús de navegación, enlaces. Y no tienes ninguna ubicación en nuestro HF. Y si te desplazas aquí abajo, puedes ver esto son los enlaces de barras de navegación. Y si recuerdas, hemos proporcionado ID aunque estas diferentes secciones. Y simplemente copiemos estos ID a este enlace en particular en la aspirina del menú de navegación. Entonces déjame copiarlo. Vamos a guardarlo. Y ahora si vamos a nuestra página web y si abro el menú Navegación y si hago clic en habilidades, básicamente
no ha pasado nada. Pero si cierro esta ventana de navegación en particular, se
puede ver que estamos en la sección de habilidades. Y este es en realidad un pequeño tema. Es decir, cuando hago clic en alguno de estos enlaces que navegan alcaldes ni cerrando por su cuenta, pero ese alcista en realidad nos lleva a la ubicación deseada. Ahora arreglemos este tema en particular también. Por lo que para arreglar este zapato regular, haga uso de las carreras de JavaScript de nuevo. Entonces antes de eso, demos una clase a todos estos diferentes enlaces para que podamos seleccionar estos diferentes enlaces, ángulos
Euler, etiquetas, forma que JavaScript. Entonces aquí voy a dar un vaso de click. Y ahora segundo, en este particular y obtener datos, voy a dar una copa de Glick dash uno. Déjame copiarlo. Hagamos lo mismo para el tercer nombre de clase DAG hambre del click dash T2 para la etiqueta enredada con la clase de Glick dash tres, y la última etiqueta de anclaje con la clase de clics dashboard. Ahora vamos a guardarlo, y ahora vamos a nuestro JavaScript y seleccionar todas y cada una de las etiquetas de anclaje. Entonces vamos a app.js. Y aquí mismo, voy a crear un underbelly por debajo de cuatro click. Y vamos a documentar y QuerySelector. Vamos a seleccionar nuestra clase era caer. Y en segundo lugar, voy a crear otra variable para nuestra segunda etiqueta de ancla para siempre segunda. Entonces vamos a colocarlo abajo, él, renombrarlo hacia abajo. Por lo que voy a dar clic en dash T2 para tal vez haga clic en dash one. Y quieren reemplazar el vaso aquí mismo. Y voy a hacer exactamente lo mismo para todos estos diferentes enlaces. Por lo que aquí hemos hecho un pequeño error tipográfico. Voy a renombrar esta clase tiene click dashboard. Y ahora vamos a guardarlo. Guarda el JavaScript como sabemos, déjame llevar esto a esta área en particular. Y aquí lo que queremos hacer es que cuando hacemos clic en este enlace en particular, queremos que este menú de navegación en particular luzca. Y tenemos una ponderada azul, la misma lámina exacta, Alberta bruta por década también. Es entonces cuando hacemos clic en el botón cruzado, básicamente
estamos quitando el cristal abierto de la lista móvil ahora de clase oscura. Entonces hay equilibrio, el mismo concepto a todas estas camarillas diferentes. Entonces voy a copiar este código en particular desde aquí. Vamos a pegarlo. Y voy a seleccionar el primer elemento. Vamos a pegarlo ahí, consiguiendo una copia el código. Tan venial amor 1234 más Bueno. Por lo que están seleccionados y mientras presionan y sostienen y todo turno de tiempo demo, Placido no se permite cuatro veces más. Y ahora simplemente cambiemos. El nombre de la variable. Se hace clic en dash uno. Ahora tenemos que hacer click para escoger tres y la semana cuatro. Ahora si lo guardo, volvamos a nuestra página web y luego abramos el menú Navegación. Y si voy a dar click en proyectos, se
puede ver que la ventana de navegación
se cierra automáticamente y estamos en la sección de proyectos. Hagamos eso para nuestra sección de blog. Y está funcionando perfectamente bien. Entonces eso es todo, chicos. Por fin hemos completado nuestra página web. Es completamente sensible para cualquier tipo de tamaños de pantalla, y básicamente pueden agregar más consulta de medios y personalizar este sitio web también. Tengo fórmula fechada básicamente dos condiciones diferentes. Ahora, la altura del puerto ADB es menor a 1024 píxeles y menor que de ISMB, seis píxeles. Entonces si tienes alguna bota específica, básicamente
pueden implementar el mismo concepto. Y puedes personalizar tu alcista y en última instancia, hacer que tu sitio web responda a cualquier tipo de ratios de pantalla. Básicamente les he dado una idea básica de cómo pueden
hacer que sus aplicaciones respondan o un ancho de ventana gráfica particular. Entonces eso es todo, chicos. Gracias por ver y los veré en el siguiente video.
15. Cómo hacer que el botón Descarga con CV: Hola chicos, bienvenidos al video. En este video vamos a hacer que nuestro
botón Descargar funcione. Para que como se puede ver
eso en este momento, si hacemos clic en el botón Descargar, básicamente no pasa nada. Pero en este
video en particular vamos a añadir funcionalidad a nuestro
botón descendente para que un número de débito, hacemos clic en él, voy a reanudar, se
descargue automáticamente. Es básicamente un símbolo pulsos. Entonces lo primero que
voy a hacer es que básicamente
voy a
agregar mi currículum la frecuencia de mi proyecto que este es
básicamente mi proyecto. Hemos llamado el
archivo de índice, imágenes de archivos CSS, JavaScript y todo eso. Lo que voy a hacer es
que quiero simplemente arrastrar y soltar mi reanudación. Se trata básicamente de un
archivo PDF en mi proyecto. En este momento tengo mi
currículum o mi proyecto, y puedo
redefinirlo aquí mismo. Tenemos aquí mi decimetro
PDF. Ahora estamos en nuestro fichero de índice. Ahora, si echas un vistazo, estamos ahora mismo en nuestra
sección de héroes y la baja fiscal. Dentro de nuestra división correcta, tenemos nuestro botón de
descarga CPE. Vamos a hacer que
nuestro proceso de descarga sucediera con la ayuda
de la etiqueta de un ancla. Entonces lo que voy a hacer es
empezar dentro de la división, quiero crear una etiqueta ancla. Entonces voy a entrar a una y
presionar pestaña dentro del extra, voy a proporcionar el nombre de mi archivo PDF porque está
en el mismo directorio. Por lo que sólo necesito especificar
el nombre del archivo. Entonces el nombre de mi
PDF es mi dirección. Usted puede PDF. Por lo que ya he
conseguido sedición, por lo que un 100% de mi cuerpo hace mi
expediente ha sido seleccionado. Entonces lo siguiente que
voy a hacer es que quiero usar una etiqueta de descarga de diagnóstico,
lo siento, etiqueta de descarga. Así que la etiqueta de descarga es
básicamente una etiqueta HTML5. Lo que especifico dentro del
dólar die será el nombre se muestra a la
descarga del archivo, por ejemplo, y renderiza asumiendo cada
vez que haga clic en el botón dólar, el nombre del
archivo que este WOW, estamos asumiendo la de esta
semana se hace más claro cuando se ve la implementación
práctica de la misma. Ahora dentro de nuestra
etiqueta de anclaje y voy a pegar nuestro botón w dot cv. Vamos a quitar el
espacio en blanco y guardarlo. Por lo que ahora si vuelvo a
la página web y hago doble clic
en un botón de pedido, se
puede ver que nuestro archivo
ha sido sobrecargado. Y como ya dije, hemos dado el
nombre de descarga como reanudación. Por lo que el nombre del archivo
descargable se vuelva a enviar o PDF. Es tan simple como esta función de botón de
descarga de dominio. Así que esos son los chicos, gracias por mirarlos y
los veré en el siguiente video.
16. Conclusión: Hola chicos. Muchas gracias por afinar en orden hasta el final. Si no te has topado con todos estos videos a este video final en particular, muestra tu dedicación y tu pasión por la tecnología es encomiable. Y lo primero de todo, realmente espero que ustedes hayan disfrutado de este curso en particular. Y más que eso, pensé que era capaz de entregar el valor deseado. Entonces una vez más, muchas gracias por ver, y de verdad espero verlos chicos en otro video bajo el acelerado Onsen fichaje.
Peter Johnson, Software Engineer
