Sitio web de portafolio con proyecto HTML CSS

1. Introducción al proyecto de sitio web de portafolio: Bienvenidos a todos al curso completo del sitio web de portafolio usando HTML y CSS. Por lo que este curso consta de dos módulos. En el primer modelo, vamos a ver cómo diseñar nuestro sitio web de portafolio usando HH TML y CSS con diferentes secciones como sección home, sección A y sección de contacto En el segundo modelo, vamos a ver cómo implementar nuestro proyecto utilizando el sitio web de Netfi Entonces este curso es muy, muy, muy útil para los principiantes que están tratando de crear un sitio web de portafolio usando HTML y CSS por primera vez. Además, tienes que familiarizarte con Netlify para implementar sitios web front-end Entonces comencemos. 2. Clase de portafolio 1: introducción a HTML CSS: Vengan, todos, antes de ir al proyecto, vamos a discutir sobre lo que es HHTML y CSS Primero, vamos a discutir sobre el HHDML. Entonces necesitas saber sobre el formulario completo para HTML. Entonces la forma completa no es más que lenguaje de marcado de hipertexto Por lo que HHTML es un lenguaje estándar que puede ser útil para crear la estructura del sitio web Entonces, si queremos crear algún sitio web, primero, necesitas entender HTML. Y entonces los principiantes pueden entender fácilmente HTML porque la sintaxis es muy, muy simple en comparación con otros lenguajes de programación. Entonces ese es el tercer punto. Entonces después de dominar HTML, entonces puedes estudiar sobre CSS y JavaScript para crear tu proyecto. Entonces esa es la simple introducción a HHTML. Entonces después de eso, vamos a discutir sobre la sintaxis HTML. Entonces HTML contiene elementos y etiquetas. Entonces los elementos no son más que la cabeza, el cuerpo, el HTML. Entonces estos son todos los elementos. Y luego las etiquetas no son más que abrir etiqueta y luego cerrar etiqueta. Entonces esta es la sintaxis para abrir la etiqueta. Entonces esta es la sintaxis para cerrar la etiqueta. Entonces HTML contiene elementos y etiquetas. Entonces esta es la sintaxis simple para HHTML. Primero, debes crear una etiqueta HTML. Entonces deberías escribir etiqueta de cabeza. Dentro de la etiqueta de la cabeza, tienes que escribir el título de tu sitio web. Así puedo escribir tutorial HTML. Puede escribir su propio nombre de sitio web. Después de eso, deberías cerrar la etiqueta de la cabeza. Entonces tienes que abrir la etiqueta corporal. Dentro de la etiqueta body, podemos escribir nuestro propio contenido. Entonces después de eso, tienes que cerrar la etiqueta body, y luego tienes que cerrar la etiqueta HTML. Entonces esta es la sintaxis simple para HTML. Entonces los atributos no son nada, pero es como unas propiedades. Entonces, por ejemplo, image contiene las propiedades como height y width. Entonces esos son los atributos. Entonces los atributos no son nada, pero es una información adicional sobre el elemento. Entonces el elemento no tiene más que párrafo, cuerpo, cabeza. Entonces estos son todos los elementos. Entonces después de eso, vamos a discutir sobre los elementos y etiquetas de Hah DML Hay muchas etiquetas en HTML, pero vamos a discutir sobre etiquetas importantes. Entonces el primero estará encabezando etiqueta. Por lo que hay seis etiquetas de rumbo como Hatch uno, escotilla, dos, escotilla tres, escotilla cuatro, escotilla cinco, escotilla seis, así que habrá seis etiquetas de rumbo. Los tamaños serán diferentes en cada encabezado. Después de eso, se puede ver el párrafo. Entonces, si quieres crear algún párrafo, cualquier oración, puedes usar la etiqueta de párrafo. Y luego se puede ver la etiqueta de imagen. Entonces imagen, si desea insertar alguna imagen de fondo de imagen para su sitio web, puede usar la etiqueta de imagen. Y luego podrás ver la etiqueta Link. Entonces, si quieres vincular algún sitio web en tu propio sitio web, puedes usar la etiqueta Link. Entonces estas son todas las etiquetas importantes. Entonces hay muchas etiquetas, que entender eso. Entonces ahora vamos a discutir sobre lo que es CSS. Entonces CSS significa hoja de estilo en cascada. Entonces, si quieres crear la estructura del sitio web, debes usar HHTML Si quieres crear el diseño del sitio web, debes usar CSS. Así que el diseño puede ser ligero cambiando el color de fondo o cambiando el color de fuente o cambiando el tamaño de fuente. Ese será el diseño del sitio web. Entonces hay tres tipos de CSS, CSS en línea, CSS externo y luego CSS interno. Para nuestro proyecto, vamos a usar CSS externo. Entonces ahora vamos a discutir sobre la sintaxis CSS y cómo crear CSS externo e incluir el CSS externo dentro de nuestro archivo HTML. Entonces para eso, hay que crear el archivo HTML. Puede escribir su propio nombre de archivo HTML. Después de eso, hay que escribir los elementos básicos en el HTML. Entonces tienes que escribir etiqueta HTML, etiqueta cabeza, y luego tienes que cerrar la etiqueta de cabeza, y luego tienes que crear la etiqueta de párrafo de la etiqueta body y cerrar la etiqueta body y luego la etiqueta HTML. Entonces, si quieres incluir tu archivo CSS externo dentro del HTML, debes usar el enlace así dentro de la etiqueta head, tienes que escribir etiqueta de enlace. Y luego hay que escribir los atributos como relés e iguales al estilo st y luego hacer referencia igual. Y luego hay que atar el nombre del archivo CSS externo. Así estilo punto CSS será nuestro CSS externo. Entonces esta es la sintaxis para incluir el CSS externo dentro de nuestro HTML. Entonces después de eso, hay que crear el archivo CSS externo. Entonces hay que crear un nuevo archivo, y luego hay que escribir el nombre mismo nombre, hay que escribir el mismo nombre. Eso es mosaico punto CSS. Y luego dentro de eso, puedes escribir los estilos. Si quieres cambiar el color de fondo o si quieres cambiar el alto y ancho del video de la imagen, puedes escribir tu propio estilo en el CSS externo. Entonces esta es la sintaxis. Entonces después de eso, vamos a discutir sobre algunas de las propiedades de CSS. Entonces el primero será el estilo de fuente. Entonces, si quieres cambiar tu familia de fuentes o tamaño de fuente o peso de fuente, ya sea que pueda ser negrita cursiva, esos pueden ser los estilos de fuente. Y entonces se puede ver la segunda propiedad, ese es el color. Entonces, si quieres cambiar tu color de fondo o color de imagen o color de borde, así puedes usar las propiedades de color. Y entonces se puede ver la tercera opción, que es el layout. Entonces, si quieres cambiar la fusión de los paddings en los bordes para tu sitio web, puedes usar las propiedades de diseño Entonces estas son las propiedades simples en CSS, pero hay muchas propiedades debes entender eso. Entonces ahora vamos a discutir sobre cuáles son todas las oportunidades laborales que puedes hacer cuando aprendes HTML y CSS. Entonces, si aprendes HTML y CSS, puedes convertirte en un desarrollador front-end o diseñador rex. Así que hay muchas oportunidades laborales cuando aprendes HTML y CSS. Así que eso es todo chicos hemos completado con éxito nuestra introducción a HTML y CSS. Ahora podemos crear nuestro sitio web de portafolio. 3. Clase de portafolio 2: ejecuta HTML CSS en VScode: Bienvenidos, todos a la primera clase. En la clase de hoy, vamos a discutir sobre cómo crear un sitio web de portafolio usando HTML, CSS y Netlifi Para el primero, tenemos que crear una carpeta para nuestro proyecto. Entonces, después de crear la carpeta para el sitio web de tu portafolio, tienes que abrir esa carpeta usando el código VS o cualquier otro IDE para HTML y CSS. Para lo básico, tenemos que usar el código VS para nuestro sitio web de cartera. Entonces después de abrir tu código VS, tienes que crear un nuevo archivo para el HHTML Entonces para crear el nuevo archivo, hay que seleccionar Control final creando el nuevo archivo, hay que seleccionar el idioma. Entonces vamos a escribir HTML. Entonces tienes que escribir HTML. Entonces después de eso, tienes que guardar tu archivo, tienes que escribir Control. Y luego puedes escribir tu propio nombre de archivo. Voy a escribir index dot HTML. Para lo básico, vamos a escribir index dot HTML. Así que hay que guardar el archivo, y luego se puede ver el índice punto HTML archivo creado. Entonces después de eso, vamos a crear archivo CSS también. Entonces y luego hay que escribir el nombre del archivo CSS. Así que vamos a escribir estilo punto CSS. Así que hemos creado dos archivos HTML y CSS. Entonces HHTML es muy, muy útil para el cuerpo y la estructura del sitio web, y luego CSS se diseña aún más Entonces, para nuestro sitio web de portafolio, tenemos que copiar nuestra foto de perfil y luego pegarla en la carpeta de nuestro sitio web de cartera. Entonces para eso, he creado mi foto de perfil para mi sitio web de portafolio, y luego voy a copiar y pegar en mi portafolio. Carpeta de proyecto. Y luego puedes renombrar tu PNG R JPG, lo que quieras. Entonces tienes que copiar y pegar tu imagen. Entonces vamos a usar íconos para nuestro proyecto. Para eso, vamos a usar iconos de caja. Entonces hay que abrir el enlace. Así que los iconos de caja contienen todos los iconos para nuestro proyecto, como Facebook, YouTube, Instagram, todos los iconos se generarán en los iconos de caja. Entonces hay que seleccionar el UCH así que para nuestro HTML y CSS, tenemos que seleccionar USHe y luego puedes ver el código para el uso de HHTML así que tienes que desplazarte hacia abajo Entonces tienes que copiar este enlace para tu proyecto. Entonces tienes que copiar ese enlace, y después tienes que pegar ese enlace en tu HHTML Entonces vamos a copiar eso. Entonces antes de copiar y pegar nuestros iconos de caja, vamos a escribir los elementos básicos de HTML. Entonces primero, vamos a escribir tipo HTML. Entonces ese es lo común en HTML, hay que escribir doc type. Entonces esa es la etiqueta, y luego puedes escribir idioma inglés. El lenguaje HTML será el inglés. Puedes escribir ruso. Si quieres ruso, puedes usar el ruso también o cualquier otro idioma. Voy a usar el inglés. Y luego etiqueta de cabeza. Entonces dentro del tipo de cabeza, voy a escribir el título para mi proyecto. Entonces hay que usar la etiqueta del título. Entonces tienes que escribir título así dentro de eso, tienes que escribir tu cartera. Para que puedas escribir tu propio nombre. Entonces voy a escribir cartera. Entonces después de eso, hay que copiar y pegar ese enlace. Entonces hay que copiar y pegar el enlace CSS. Entonces hay que copiar y pegar dentro de la etiqueta de la cabeza. Entonces hay que recordar que hay que copiar y pegar dentro de la etiqueta de la cabeza. Entonces después de eso, voy a escribir mi archivo CSS. Entonces voy a vincular mi archivo CSS para ese tipo oto. Relación de enlace igual a hoja de estilo. Así atributo será la hoja de estilo de relación. Y luego hay que teclear la referencia. Por lo que la referencia será estilo punto CSS. Ese es tu nombre de archivo CSS. Así que estos son todos los enlaces que se pueden utilizar para nuestro proyecto de cartera. Entonces, eso es todo. En la clase de hoy, se nos discute sobre los conceptos básicos de HTML y CSSI para nuestro sitio web de cartera. En la próxima clase, vamos a diseñar nuestro sitio web de cartera como la página de inicio, la página Acerca de y la página de contacto. Entonces veamos en la siguiente clase. 4. Clase de portafolio 3: crea la barra de navegación: Bienvenidos, todos. En la clase de hoy, vamos a discutir sobre cómo crear la barra de navegación para nuestro sitio web de portafolio usando HTML y CSS. Entonces antes de eso, vamos a ver un ejemplo de cómo ejecutar nuestro proyecto en la página web. Y después hay que seleccionar Abrir con Live Server. Para que veas que tu servidor se inicia en el puerto 5,500 y además podrás ver el host Local y luego tu archivo HTML, index dot HTML Entonces esa es la forma de ejecutar nuestra salida en el sitio web. Entonces para eso, hay que descargar una extensión, por lo que hay que escribir Servidor en vivo en código VS. Entonces tienes que escribir Servidor en vivo, y luego tienes que seleccionar el primer enlace así que hay muchos enlaces debes seleccionar primero el enlace. Y luego tienes que instalar el servidor en vivo para tu código VS HTML. Entonces después de eso solo, podrás ver tu salida en el sitio web. Entonces para eso, hay que seleccionar abrir con servidor en vivo. Entonces ese es el concepto de ejecutar nuestro proyecto en el sitio web. Entonces después de eso, vamos a crear nuestros elementos de cuerpo para nuestro HTML. Entonces hay que escribir body tag. Dentro de la etiqueta body, vamos a crear una nueva sección o clase de encabezado. Tienes que escribir head there tag, y luego vamos a crear una clase. Entonces dentro de la cita, hay que escribir el nombre de la clase, headdre y luego hay que cerrar la etiqueta Hay que recordar la etiqueta de cierre y la etiqueta de apertura. Entonces dentro de eso, vamos a crear una etiqueta de anclaje. Por lo que el ancla se utiliza para el enlace. Entonces HadufHDof no es más que relación o referencia. Y entonces vamos a crear una clase que sea logo. Logo para nuestro portafolio. Y luego vamos a crear una etiqueta span para el nombre del logotipo. Entonces para el nombre, voy a usar mi nombre completo Run. Entonces voy a usar mi nombre Run. Entonces después de eso, voy a crear una barra de navegación para mi cartera. Para eso, hay que crear un Nav y luego el nombre de la clase será barra de navegación. Entonces dentro de la barra de navegación, vamos a crear una etiqueta de anclaje. Así que Hutufy tiene para la misma clase de página igual clase activa activa para nuestra barra de navegación de cartera. Entonces voy a escribir cartera. Por lo que la cartera estará activa. Y luego voy a crear otra etiqueta de anclaje para los enlaces como sección home, sección A, proyecto, contacto. Para lo básico, voy a crear solo cuatro secciones. Si quieres más, puedes usar más opciones. Entonces voy a escribir A y luego voy a escribir contacto. Entonces estas son las tres secciones que vamos a diseñar para nuestro sitio web de portafolio. Entonces si quieres más sección, también puedes diseñar eso. Entonces, además, puedes usar proyecto, educación, certificaciones, o cualquier otro portafolio que puedas usar. Por lo que la barra de navegación está terminada. Vamos a crear un botón para el contacto. Por lo que tenemos que teclear HatuFPAS será contacto. Vamos a crear un contacto contactame. Por lo que se considerará como un botón de contacto. Entonces, si ejecuto el código, puedes ver automáticamente generado en tu sitio web HTML. Entonces vamos a diseñar nuestro HTML usando el estilo punto CSS, así que Hach t es para la estructura, CSS es para el diseño Entonces por defecto para escribir este código, y también hay que recordar la sintaxis. Primero, el margen será cero, y también el relleno será cero. No habrá margen ni relleno, y el tamaño de la caja será caja de borde. Y entonces la familia de fuentes será SNSerif pop ins. También puedes usar tu fuente. Habrá tiempos nuevos Roman Aerial SnserSi muchas otras familias de fuentes, puedes usar tu propia Y luego la decoración de texto será Nne. Entonces decoración de texto como subrayado cruz, no habrá decoración de texto. Y entonces el estilo de lista tampoco es ninguno. Así estilo de lista como subrayado. Entonces si tecleo ninguno, automáticamente elimina todo el estilo de lista. Por lo que se puede ver subrayado se eliminan. Entonces estos son todos los predeterminados. Entonces después de eso, vamos a crear un diseño para cada clase. Entonces primero vamos a crear una clase para ir ahí. Entonces dentro de eso, hay que teclear. Punto de cabeza ahí. Entonces la sintaxis es para la clase es punto de cabeza ahí. Entonces el nombre de la clase dirígete ahí. Y luego los corchetes. Dentro de eso, hay que escribir la posición será fija porque la barra de navegación será fija. Así que la cabeza ahí está terminada. Entonces dentro de la cabeza ahí, podemos ver los elementos como etiqueta ancla, clase nav, y luego botón. Entonces vamos a diseñar uno por uno. Entonces tienes que volver a abrir la clase CSS. Vamos a escribir top será cero y luego a la izquierda será cero. Y luego ancho. Por lo que el ancho será del 100 por ciento. El relleno será de 35 píxeles 12 por ciento, arriba e abajo a la derecha e izquierda. Y luego color de fondo. Entonces vamos a crear color con RGBA, así que rojo, verde, azul, y Alpha Hay que escribir el valor para cuatro elementos. Entonces primero, voy al tiempo cero, cero, para el verde, también, voy al tiempo cero. Entonces voy a necesitar la ayuda del color negro para eso solo R cero. Si tiempo 0.2, se considerará como color negro. Y entonces vamos a necesitar la ayuda de filtro de gota de bolsa. Es borroso. Vamos a necesitar la opción de desenfoque. Entonces dentro del soporte, hay que escribir el píxel diez píxeles. Y entonces vamos a necesitar la ayuda de display display será inline block o flux. Lo que quieras, puedes usar eso. Voy a necesitar la ayuda del flujo. Para flex, hay que escribir, justificar el contenido será centro. Un espacio entre. Si quieres espacio entre tus elementos, puedes escribir espacio entre ellos. Entonces voy a escribir espacio entre. Entonces espacio entre portafolio sobre proyecto y contacto. Alinear los elementos serán el centro. Por lo que todos los artículos estarán en la posición central. Entonces el índice East es como pila de los elementos. Entonces 100. Entonces estos son todos los diseños para nuestra sección de cabecera. Entonces, si ejecuto este código, puedes ver que nuestro diseño se genera automáticamente para nuestro HTML. Entonces este es el diseño de nuestra barra de navegación. Entonces después de eso, vamos a diseñar nuestra clase de logotipo para que eso escriba logo de punto. Y luego vamos a teclear los diseños del logo. Entonces primero, vamos a usar el tamaño de fuente. Para que puedas escribir tu propio tamaño de fuente. Voy a usar 25 píxeles y luego color. Entonces el color será blanco. Entonces voy a usar el color blanco Así que después de eso, voy a usar el peso de la fuente. Ya sea negrita o cursiva, puede usar el peso de la fuente 600 serán considerados como opción en negrita. Para que puedas ver el grosor de tu fuente y luego las transiciones. Por lo que es una de las opciones gráficas. Entonces voy a escribir tres punto es E. Así que hay que recordar qué es E, qué es E adentro, y luego lo que está dentro y fuera. Entonces tengo que recordar el concepto de E para que puedas ver los gráficos como Run, puedes ver en el elemento Run, puedes ver la transición 0.3 es Es. Entonces Es no es más que opción de mo lento. Entonces el movimiento será lento. Entonces hemos completado nuestro logo, así que ese es el Run. Entonces logo no es más que Run. Entonces después de eso, vamos a diseñar el logo con el Hover Entonces Ella no es más que una pseudo clase. Hay que recordar cuál es la pseudo clase. Entonces Ella no es nada, pero si tocamos el elemento, va a generar un nuevo diseño. Entonces ese es el uso de Hover. Primero, voy a escribir el color. Entonces, si cambio el color a R asegurado, entonces el blanco se cambiará a R insided. Si muevo mi cursor hacia el Run, el color blanco se cambiará a R incred Y luego texto Sombra. Para que puedas usar dos sombras. El primero es el texto Sado y luego el segundo será la sombra de caja. Para el RN, es un texto. Para eso solo estamos usando el texto sado. Así podemos escribir cero, cero, 25 píxeles, R y Crate. La sombra de mi texto será roja. Entonces después de eso, vamos a usar transform como usar la opción scale también. Entonces hay que escribir dentro del corchete, hay que escribir el valor que es 1.1. Entonces para los principiantes, que entender que la opción de escalado no es más que acercar y alejar opsons como acercar y alejar. Para que puedas ver el Su diseño se genera en nuestro HTML. Entonces el blanco se cambia a Ngute y también con la opción de escalado 1.1 Para que veas le da más bonito a nuestro proyecto. Entonces ese es el uso de Hover. Entonces, si no la quieres, también puedes eliminar eso. Entonces Texas Sado también Net. Se puede ver el Sado de Run así con el pixel y luego transformar. Entonces ese es el uso de H. Entonces después de eso, vamos a diseñar. Entonces después de eso, voy a diseñar la etiqueta span, así que etiqueta span. Entonces dentro de la etiqueta span, voy a usar mi nombre completo con ICL, entonces RLRS Entonces esa es mi ICL, así que voy a insertar ese RS en la etiqueta span Entonces voy a colorear mi etiqueta span con rojo RN o puedes escribir blanco o negro, lo que quieras. Para que puedas ver RnRg con blanco. Entonces ese es el uso de la etiqueta Span. Así que el color se cambia para mi inicial y también mi nombre completo. Entonces eso es que se completó la etiqueta span. Después de eso, vamos a diseñar para nuestra barra de navegación, que puedas ver la barra de navegación de clase. Entonces vamos a diseñar eso para que dentro de eso, se puedan ver los enlaces. También podemos vamos a diseñar eso. Entonces primero, vamos a usar la barra de navegación. Entonces N bar es una clase. Tienes que usar la barra de punto N, y luego A será el enlace. Entonces ese es el enlace A, y luego vamos a diseñar para nuestros enlaces. Entonces primero, para que puedas ver el código VS está sugiriendo el código. Por lo que también puedes confiar en el código VS. Entonces voy a cambiar el pixel. Bien, está bien. Voy a cambiarlo a las 15. Bien. No está mal. Entonces voy a cambiar el tamaño de fuente a 15 píxeles, y luego el color será blanco, o puedes escribir tus propios colores. Voy a escribir blanco. Se puede ver el cambio del color, y luego se puede decir, el peso de la fuente, así se puede ver el grosor de la fuente. Así que hay muchas opciones de peso de fuente. Se puede elegir cualquiera de ellos, 500, 600 negrita cursiva Puedes escribir tu propio peso de fuente. Voy a escribir opción Margen. Para que puedas escribir arriba abajo, izquierda y derecha. O dos opciones OptonSt no es más que arriba e inferior derecha e izquierda Para que se pueda ver la brecha entre los elementos. Entonces así da un futuro más elegante para nuestro proyecto. Después de eso, vamos a escribir bot o bottom. Entonces tenemos que escribir tres píxeles, sólidos, transparentes. Estamos terminados el fondo fronterizo para nuestro proyecto, y luego vamos a usar la transición. De nuevo, voy a usar los segundos tres puntos segundos es. Para que puedas ver la transición mi elemento. Entonces, si guardo y ejecuto el proyecto, puedes ver la transición. Entonces eso es todo. Y entonces vamos a teclear O para mi barra de navegación. Entonces si toco eso, se puede ver algún diseño. Entonces para eso sólo vamos a usar los cuatro. Entonces vamos a usar O para elementos activos, y luego elementos no activos también. Para eso solamente, vamos a usar un punto encima y luego y luego N bar A punto activo. Entonces dentro de eso, vamos a diseñar. Entonces voy a escribir el color naranja rojo. Y luego borde inferior otra vez, voy a atar tres píxeles o dos píxeles que puedes atar. Voy a atar tres píxeles sólido naranja rojo. Para que puedas ver que el color del elemento activo se cambia a portafolio de blanco a rojo anaranjado. Así que la cartera es mi elemento activo en la barra de navegación. que puedas ver el subrayado para mis cuatro propiedades, también puedes cambiar el color de blanco a rojo anaranjado Entonces estamos terminados nuestro diseño para la barra N A. Así que después de eso, vamos a diseñar para el contacto. Entonces eso también pertenece a la sección de encabezado. Entonces voy a teclear contacto punto contacto. Entonces esa es la clase. Entonces voy a teclear el diseño para mi contacto. Voy a crear un botón como contacto. Entonces para el botón como contacto, hay que escribir el relleno primero, diez píxeles, 20 píxeles, arriba e abajo derecha e izquierda. Y luego color de fondo. Entonces voy a escribir blanco. Entonces parece un botón. Entonces por eso hay que usar el color de fondo. Después de eso, tienes que usar el radio del borde para poder escribir el radio del borde o el color para la fuente. Entonces, si escribe negro, entonces la fuente se cambiará a negra. Para que veas, contáctame es fuente de color cambiada a negra. Y luego voy a escribir borde de dos píxeles sólido transparente. Entonces después de eso, voy a escribir el tamaño de fuente. Para que puedas escribir tu propio tamaño de fuente. Entonces voy a escribir diez o 16 píxeles. Y luego voy a teclear radio fronterizo. Entonces voy a escribir ocho píxeles, 20 píxeles. Si tecleo 20 pixel, puedes ver más cur Entonces, si tecleo diez píxeles, se puede ver menos cantidad de curva. Entonces, basado en tu propio diseño, puedes escribir el radio del borde. Si quieres más val Spar circle, tienes que aumentar el pixel Si quieres cuadrado o rectángulo, tienes que escribir menos cantidad de píxeles. Y luego espaciado entre letras entre cada letra C espacio O espacio NT espacio. Entonces ese es el uso del espaciado entre letras. Entonces, para escribir el píxel en menor cantidad. Si escribe 20 píxeles, entonces C estará en la izquierda, y luego O estará en la derecha. Entonces es por eso que hay que escribir menos cantidad de píxeles. Entonces un pixel es suficiente para que me contacten. Y entonces el peso de la fuente será negrita. Entonces, si quieres más atrevido, tienes que escribir 600. Para que veas, contáctame, se cambia el grosor. Entonces después de eso, voy a usar la transisión. Entonces, si quieres alguna otra transición, tienes que usar eso. Entonces voy a volver a usar la opción as. Si guardo la ejecución el código, se puede ver la transición. Entonces estos son todos los diseños de contacto. Entonces después de eso, voy a usar nuevo la opción Her para el contacto. Entonces voy a teclear contacto. Entonces el contacto es la clase, y luego Ella es una pseudo clase, primero voy a escribir el color de fondo Por lo que el color de fondo se cambiará a rojo anaranjado, y luego sombra de caja. Entonces la sección anterior le dije que hay dos tipos de tono de SadofS es el texto sado y luego la segunda es la caja Entonces contáctame está en caja, así que por eso estamos usando la caja sado. Entonces Sado será naranja y luego el color de la fuente será blanco. Para que puedas ver el cambio de diseño en mi contactame buttal. Entonces, si quieres cualquier otro color, puedes usar eso. Entonces basado en mi cartera, estoy usando naranja rojo y blanco. Si quieres morado, puedes usar morado. Entonces eso es todo, chicos. En la clase de hoy, se nos discute sobre cómo diseñar la barra de navegación para nuestro sitio web de cartera. Entonces en próxima clase, vamos a diseñar nuestras secciones del sitio web de portafolio sobre contacto. Entonces veamos en la siguiente clase. 5. Clase 4 de portafolio: página de inicio: Bienvenidos, todos. En la clase de hoy, vamos a discutir sobre cómo diseñar nuestra sección de inicio para nuestro sitio web de portafolio. Para ello, vamos a crear una nueva sección dentro de la casa de clase. Entonces esa será nuestra sección de inicio para nuestro sitio web de portafolio. Entonces, cómo abrir y cerrar la etiqueta de la sección. Entonces dentro de eso, vamos a escribir los elementos HTML para nuestra sección de inicio. Entonces primero, vamos a crear un contenido de inicio de clase. Entonces ese es el atajo para crear el DV así que tienes que escribir punto class name home content. Entonces nuestra clase será de contenido de espuma. Entonces después de eso, vamos a crear una etiqueta HH three que se encabeza, así que voy a escribir Hi u o puedes escribir tu propio encabezado. Entonces voy a escribir mi nombre. Entonces para eso, voy a usar la etiqueta H one. Entonces tienes que escribir IM voy a escribir IM puedes escribir tus propias palabras. Entonces entonces voy a usar la etiqueta span. RN RS. Entonces ese es mi nombre completo. Entonces voy a escribir Spantank como mi nombre completo. Y luego romper. Si quieres romper, puedes usar la opción de descanso. Entonces y luego voy a escribir mi profesión, que puedas escribir tu propia profesión en la página web de tu portafolio. Entonces voy a escribir Analista de ciberseguridad. Entonces después de eso, voy a escribir el párrafo. Para el párrafo común, hay que usar el um bajo. Entonces, si escribe um bajo, automáticamente genera algún párrafo en el código VS. Por lo que este será nuestro párrafo predeterminado para nuestra sección de biografía. Entonces si quieres tienes que escribir tu propio párrafo para tu biografía. Entonces voy a escribir el párrafo común así que voy a crear un nuevo botón, curriculum vitae o archivo CV. Entonces voy a crear un botón para descargar mi CV o currículum. Entonces, para la cartera, debe contener un currículum. Entonces por eso sólo, voy a crear botón para descargar mi currículum. Y la clase de botón será el botón uno. Entonces será en la sección de un div. Entonces y luego voy a crear nuevas clases para mi proyecto. Voy a escribir imagen. Así que la imagen es para mi sitio web de cartera. Así que tienes que introducir tu imagen en tu carpeta de proyectos. Y luego voy a insertar mi imagen en el HTML. Entonces hay que recordar esa etiqueta que es fuente de imagen, y luego hay que escribir el nombre de la imagen home dot PNG. Por lo que contiene mi foto de cartera. Para que puedas ver que tu foto se genera en tu sitio web. Y luego se puede ver, también el botón de descarga del archivo CV. Entonces estos son todos los factores que vamos a necesitar para nuestra sección Com. Y luego después de eso, vamos a discutir sobre cómo diseñar nuestra sección Com para nuestro sitio web de portafolio usando el CSS. Entonces hay que abrir el CSS, vamos a diseñar uno por uno. Así espuma. Entonces esa es la clase. Entonces la clase de salida para nuestro hogar. Entonces para eso, vamos a diseñar uno por uno. Entonces voy a escribir ancho será 100 por ciento, y luego alto. Entonces, si quieres altura, puedes usar altura o altura mínima. Voy a usar la altura mínima será de 100 VH. Cada vez que tienes que guardar tu archivo, así que tienes que guardar tu archivo cada vez. Después de eso, voy a cambiar mi fondo, hay que escribir el RGB. No voy a usar RGBA, voy a usar RGB Entonces habrá tres valores. Entonces y luego voy a usar la opción de visualización, flujo pueda ver todos los cambios y luego alinear los elementos. Entonces centro, voy a alinear todos los elementos en el centro y luego voy a brecha entre los elementos, así que hay que escribir el valor o EM o EM. Voy a usar EM, que puedas ver la brecha entre los elementos. Y luego padding, entonces padding, voy a escribir arriba e abajo con un pixel tatty, izquierda y derecha con un porcentaje total Por lo que se completa el relleno. Entonces eso es todo. Entonces eso es todo. Estamos completados el código para nuestra sección de inicio. Entonces después de eso, vamos a crear un diseño para los contenidos del hogar. Entonces los contenidos serán como Hutch tres, Hach un párrafo. Entonces estos son todos los contenidos entre nuestra clase de casa. Entonces vamos a ver que cómo diseñar los contenidos para nuestra página web de portafolio. Entonces tienes que escribir contenido home y luego max como t el ancho de tus contenidos, 800 pixel. Entonces vamos a crear diseños para elementos de contenido para el hogar. Entonces el primero será de tres etiqueta, así que encabezando tres. Entonces, ¿cómo a ese tres elemento? Tienes que escribir el tamaño de fuente para tu elemento. Si quieres más tamaño de discutición de alto, puedes tocar más tamaño de bicker Así se puede ver así que no es adecuado para mi proyecto. Si quieres talla grande, puedes usar eso. Y luego contenido casero H uno. Entonces Hach uno será yo soy mi nombre de usuario y luego mi profesión Entonces, si quieres cambiar el tamaño de fuente, tienes que escribir tamaño de fuente. Por lo que no es adecuado. Entonces voy a cambiar. Entonces es uno de los más grandes, así que voy a cambiar a uno más pequeño. Entonces voy a teclear 32. Para que veas que es adecuado para mi portafolio. Por lo que Hutch uno y Hach tres están terminados. Entonces, si quieres líneas altas, también puedes usar altura de línea 1.2. Entonces Hach uno y tres están terminados. Entonces después de eso, vamos a diseñar el párrafo para el contenido de nuestro hogar. Entonces voy a escribir el tamaño de fuente. El tamaño de la fuente será de 18 píxeles. Entonces está bien. Y luego si quieres familia de fuentes o peso de fuente, también puedes usar eso. Entonces margen entre los elementos para eso, hay que usar el margen para la comodidad del párrafo arriba y abajo a la izquierda. Para que veas que es más elegante para nuestro proyecto. Entonces voy a usar el peso de la fuente. Si quieres más grosor, puedes usar el peso de la fuente. Entonces voy a teclear 500 o 600. Para que no tengas que teclear los píxeles. Por lo que el peso de la fuente no tiene ninguna unidad. Por lo que el ancho será de 345 píxeles de visualización será flujo. Y entonces gap serán dos em Así que después de eso, vamos a diseñar el botón CV. Entonces tenemos que abrir el CSS. Tenemos que escribir el código para el botón. Entonces botón uno. Entonces esa es la clase. Así que vamos a cambiar el color, tamaño de fuente, familia de fuentes, Ella todas las demás opciones para nuestro archivo CV. Entonces voy a escribir padding 15 pixel, 20 pixel. Así arriba y abajo izquierda y derecha. Así que los acolchados tienen cuatro elementos, arriba abajo, derecha, izquierda. Por lo que va en sentido horario, primero, arriba, segundo, derecho, tercero, abajo, último quedará a la izquierda. Entonces hay que recordar el concepto también. El margen también es lo mismo que el relleno superior, inferior, derecha, izquierda. El borde también es lo mismo que el relleno superior, inferior, derecha, izquierda en sentido horario. Entonces, si escribe código de una sola línea también o código de varias líneas también. Por lo que el código multilínea será considerado como padding top, padding bottom, padding right, padding left. Para que puedas escribir una sola línea. Entonces, una sola línea no es más que 15 píxeles y 28 píxeles. Entonces radio de borde, si quieres más curva, puedes usar más píxel. Si quieres cuadrado o rectángulo, puedes usar menos cantidad de píxeles. Entonces voy a escribir el tamaño de fuente. Por lo que la fuente seis será de 18 píxeles. Para que veas que nuestro botón está listo para que nuestra sección de chom descargue nuestro currículum Y luego el espaciado entre letras, si quieres espaciado entre letras entre elementos, así puedes usar menos cantidad de píxeles. No es necesario escribir diez píxeles o 100 píxeles. No será conveniente para nuestro botón. Así que diseñamos nuestro botón casi terminado. Entonces voy a aumentar el grosor de mi botón, para que podamos ver el grosor 600. Y además, voy a usar gráficos que es transición 3.3 es 3 segundos, es decir y luego el cursor será puntero. Entonces, si haces clic en eso, puedes ver que el cursor es puntero. Por lo que hemos completado nuestro diseño para el botón. Entonces después de eso, voy a escribir hover. Entonces hover no es más que una pseudo clase. Entonces voy a atar el color de fondo, así que blanco. Y entonces el color será negro. Entonces el color de fondo es para el fondo. El color es para la fuente. Así que bordea dos píxeles sólidos y transparentes. Bien, mira los cuatro gráficos. Entonces se cambian los colores y las fuentes. Entonces ese es el cuatro para nuestro botón. Después de eso, voy a cambiar el botón por debajo del párrafo. Entonces para eso, hay que cambiar la suma de los códigos, así que hay que quitar ese dado. Entonces voy a quitar esa de, que veas que el botón está debajo del párrafo. Por lo que será más hermoso para mi sitio web de cartera. Entonces si está en el centro, no es muy bonito. Por eso solo he cambiado el código. Para que veas que es más bonito para mi sitio web de portafolio. Por lo que nuestra sección com está terminada. Entonces después de eso, vamos a diseñar para nuestra imagen. Entonces vamos a crear un diseño para la imagen. Tienes que escribir la imagen del cuadro de imagen de nombre de clase. Ese es el elemento, elemento HTML. Entonces y luego tienes que escribir radio de borde para más forma de vocal, tienes que escribir más porcentaje Para que puedas ver val shape de tu foto de portafolio. Y luego con 550 pixeles. No, no, es muy grande para mi cartera. Entonces, cómo cambiar los píxeles. Entonces voy a escribir 450 o 350. Entonces voy a teclear 400. Entonces 400 no es también 300. Bien, 300 es adecuado para mi cartera. Entonces también, voy a cambiar el radio fronterizo. Por lo que el radio fronterizo será de 30 por ciento. Entonces es más bueno para mi cartera. Entonces después de eso, terminamos la imagen. Vamos a crear la opción de desplazamiento para nuestro sitio web Para eso, hay que usar el desplazador web tit. Entonces ese es uno de los elementos en CSS. Vamos a cambiar el ancho de nuestro desplazador 25 píxeles Para que veas que nuestra opción de desplazamiento se cambia. Voy a usar la segunda opción que es pulgar. Vamos a cambiar el color de nuestro pergamino, así que voy a cambiar al rojo anaranjado. Para que veas que el blanco se cambia a rojo anaranjado. Y luego voy a usar de nuevo el desplazador látigo palo. Voy a usar la opción de rastreo. Voy a cambiar el color. El color de fondo será negro o cualquier otro color gris. Y luego voy a cambiar el ancho de mi pergamino. Píxel graso. Para que puedas ver Fatty pixel es adecuado para la opción de desplazamiento Si quieres, también puedes aumentar y disminuir. Entonces eso es todo. En la clase de hoy, discutiremos sobre el diseño de nuestra sección home. En la próxima clase, vamos a diseñar nuestra sección A. Entonces veamos en la siguiente clase. 6. Clase de portafolio 5: página acerca de: Bienvenidos, todos. En la clase de hoy, vamos a diseñar nuestra sección Acerca de. Entonces, para nuestro sitio web de portafolio, vamos a necesitar la sección A para nuestros biodtails como dirección de correo electrónico o cualquier otro detalle de nuestra Entonces vamos a usar la imagen para el portafolio, sección A, SanguoType dot Image, guión, y luego voy a usar Home o A voy a usar la imagen para el About Entonces si tecleas, automáticamente genera una inmersión en el código VS. Entonces esa es la especialidad del código VS. Y luego voy a usar la etiqueta de imagen para insertar la imagen. Tienes que escribir el atributo source, y después tienes que escribir el nombre de la imagen que es png, home dot PNG. Entonces después de eso, voy a necesitar algo del párrafo y luego algunos de los elementos para mi sobre exón Entonces para eso, voy a crear una próxima clase que esté contenta de mi acerca. Entonces dentro de eso, voy a crear algunos de los contenidos. Primero, voy a crear un encabezado para mi contenido sobre. Entonces también voy a usar la etiqueta span para mí sobre mí. Entonces se completa la calefacción, y después vamos a usar la etiqueta H tres para mi nombre o mi professon puedes usar Professon o nombre, lo que quieras en tu sección anterior Voy a escribir mi profesión en etiqueta H tres. Entonces hay que recordar el concepto de H uno, Hh dos, H tres, H cuatro, Hach cinco y H seis Por lo que la única diferencia es el tamaño de los encabezamientos será diferente Y entonces voy a usar el párrafo, el párrafo por defecto Lam Epsm dos así que ese es el párrafo por defecto Si escribe um bajo en código VS, automáticamente genera otras oraciones. Entonces dentro de eso, voy a usar el enlace para mi sección anterior. Voy a crear el botón de clases. Entonces voy a crear un botón para mi clase. Entonces dentro de la cita, solo hay que escribir el nombre del botón o el botón de nombre de clase Leer más. Entonces voy a crear un nuevo botón para Leer más. Para que puedas ver todos los elementos de acerca de la sección se completa. Entonces vamos a diseñar nuestra sección Acerca de. Para que los elementos estén terminados ahora, vamos a diseñar eso. Entonces para eso, hay que abrir el CSS. Tienes que escribir el nombre de la clase sobre punto dentro que voy a escribir la pantalla. Así que la pantalla será flex. Para que podamos ver todo cambiado. Y luego justificar el centro de contenido. Si quieres centro, puedes usar centro. Si quieres espacio entre el espacio alrededor, también puedes usar eso basado en tu propia elección. Alinea los artículos al centro, si quieres centro, puedes usar el centro, o puedes usar o puedes usar a la izquierda o a la derecha. Relleno acolchado se le dirá porcentaje. Ocho por ciento, arriba y abajo derecha e izquierda. Brecha entre los elementos. Entonces hay que cronometrar la brecha 10:00 A.M. Para que puedas ver la brecha entre los elementos. Y luego color de fondo de mi sección sobre. Negro Así se completa una sección, vamos a crear los elementos para el contenido en la sección A. Entonces tenemos que escribir imagen sobre. Entonces primero, vamos a diseñar la imagen en la A. Así que tenemos que escribir el mismo concepto que nos utilizan en la sección de formulario. La posición será relativa y luego ancho 400 pixel Y luego box shadow, será cero, cero, 26 pixel. Para la imagen, también, hay que usar la caja sombra naranja. Si quieres eso, puedes usar radio de borde. Entonces voy a usar 40 por ciento o 37 por ciento. Por lo que va a ser bueno para mi foto de portafolio. Entonces nuestra imagen está terminada. Después de eso, vamos a diseñar el Hatch one, Hach tres párrafos, y otros elementos Así que vamos a utilizar acerca clase de contenido con elementos como Hutch uno o H dos Entonces H dos, tamaño de fuente o texto, alinea al centro o a la izquierda. Y luego tenemos que teclear el color también. El color será blanco. Para que puedas ver el color blanco. Tamaño de fuente, si quieres aumentar, tienes que escribir 43 píxeles. Entonces 43 píxeles es de mayor tamaño, creo. Entonces, si quieres más, puedes usar eso. Y entonces vamos a teclear H tres para el PreferenEl tamaño de la fuente será de 50 píxeles, y luego hay que escribir el color también Entonces el color también es lo mismo que el blanco. Entonces, si quieres cualquier otro color, puedes usar diferentes colores. Entonces 20 píxeles es muy, muy pequeño. Entonces tatty pixel también es bueno para mi H three. Entonces después de eso, vamos a crear un diseño para párrafo. Entonces el color será blanco. Y luego el tamaño de la fuente será 20 Pixari Margen, arriba abajo, 2:00 A.M. Cero, 3:00 A.M. Arriba abajo a la derecha Entonces puedo ver la brecha entre los elementos. Entonces es muy bueno para mi párrafo. Entonces voy a escribir clase para mi botón que es modo de lectura para contacto. Para que ese diseño se convierta a ese botón de modo de lectura. Entonces ese es el uso de la clase. Así que la clase será utilizada por todos los elementos. Idntifier puede ser utilizado por un solo elemento, pero la clase puede ser utilizada por Para que el diseño se aplique al botón Léeme. Así que anterior creamos la sección home, ahora estamos creados sobre sección. Entonces en la siguiente clase, vamos a diseñar nuestra sección de contacto. Entonces veamos en la siguiente. 7. Clase de portafolio 6: página de contacto: Sin embargo, todos. En la clase de hoy, vamos a diseñar nuestra sección de contacto para nuestra página web de portafolio. Entonces para el contacto, hay que recordar la etiqueta del formulario en HTML. Entonces vamos a ver eso. Entonces primero, vamos a crear una nueva sección, y con clase eso es contacto. Entonces formulario de contacto. Primero, vamos a crear la clase H dos para el rubro, contáctame. Así que contáctame. Entonces forma, acción será identificador como misma sección. Será en la misma sección. Es por eso que estamos usando como para la acción y luego la clase box de entrada. Entonces tenemos que escribir la entrada para nuestras clases como nombre de usuario, contraseña, o correo electrónico, número de teléfono. Entonces esos son los contactos. Entonces primero, vamos a escribir el texto para el nombre, y luego tenemos que escribir el marcador de posición, ingresar nombre o nombre Entonces la primera entrada será el nombre de usuario. Entonces hay que escribir tipo de entrada Texto ecltico. El texto será ABCD. O también puedes escribir número si tecleas el número uno, dos, tres. O también puedes escribir correo electrónico. Para el correo electrónico, debe escribir en símbolo. Por lo que si no escribes en n se considerará como error. Entonces por eso hay que escribir t. Y luego vamos a usar la entrada para los botones. Entonces voy a escribir la clase otra vez, y luego voy a usar el botón y luego el área de texto y luego el número de teléfono. Por lo que también puedes usar cualquier otra entrada para tu contacto. Entonces voy a escribir el número de teléfono. Entonces, si escribes número, se considerarán como valores de número. Entonces y luego voy a escribir el tema. Entonces sujeto de tu contacto. Y luego tenemos que escribir el área de texto. Entonces área de texto, nombre, ID, y luego fila y columna. Columna será 30, y después Fila diez. Marcador de posición, Enter ever command o Enter ever subject or any other you want or Enter message Entonces ese es el uso del área de texto. Entonces después de eso, vamos a crear un tipo de insumo para la cumbre. Entonces no tenemos que crear un botón. Tenemos que crear una opción de cumbre usando la entrada, por lo que hay que escribir tipo de entrada igual a cumbre y luego valorar enviar mensaje. Por lo que se considerará botón clase BTN guión uno. Por lo que será la misma clase que se crearon en la sección anterior. Ese diseño se aplicará a nuestro botón de enviar mensaje. Por lo que se puede ver Haobson también se aplica. Así que hemos completado nuestros elementos usando el HTML. Vamos a ver sobre el diseño de nuestro contacto. Así que vamos a abrir el estilo punto CSS para el diseño. Entonces tienes que cronometrar el formulario de contacto de clase, formulario, y luego tienes que escribir el ancho máximo 15:00 A.M. Y luego marge en un RM automáticamente, tus cambios Y luego text align será center automáticamente cambia tu texto al centro, y luego el baño de margen será a las 3:00 A.M. Así se completa el formulario. Vamos a utilizar los elementos en el formulario input. Entonces primero, vamos a usar el Hatch dos. Después de eso, estamos usando la entrada. Así que la alineación de texto será el centro. Contáctame en el centro. Y luego margen entre el arriba y abajo y luego a la izquierda y a la derecha. Primero, estamos usando el top porque top no es lo mismo para eso solamente, estamos usando top y luego margin bottom uno EM. Por lo que nuestro contacto conmigo h dos está terminado. Entonces después de eso, estamos usando la entrada de formulario, diseño, o eso solo usando el cuadro de entrada o entrada. Flujo de visualización justificar el centro de contenido. Si usas flex, debes usar justificar contenido. Y luego alinear los artículos son flex wrap wrap. Por lo que se completa la entrada. La caja de entrada está terminada. Vamos a usar input. A continuación le envío un mensaje de texto al área. Entonces el ancho será del 100 por ciento, y luego el relleno. 1.5 am. Y luego tamaño de fuente 118 píxeles. Y luego color negro color de fondo, RCB 241241, 241, color RCB 241241, 241, Y luego radio fronterizo 0.8 REM. Y luego margen. El margen entre los elementos de entrada será un RM cero. Y luego cambiar el tamaño de Nan para que ninguno. Entonces después de eso, puedes ver que tus elementos están cambiados. Entonces hay que escribir uno REM. Entonces después de eso, se puede ver. Por lo que la sección de contacto es casi Phoenix. Para que puedas escribir el nombre. Entonces nombre de usuario, el primero será el nombre de usuario y luego correo electrónico y luego número de teléfono. Y luego sujeto, puedes escribir tu propio tema. Si envías enviar mensaje, puedes verlo en símbolo debe estar presente en el correo electrónico. Entonces tienes que escribir en el gmail.com, o cualquier otro. Entonces, eso es todo. Estamos completados nuestra sección de miss de contacto. Entonces en la próxima clase, vamos a diseñar nuestra sección de pie de página. Entonces en el pie de página, podemos ver nuestros contactos de redes sociales. Así que vamos a ver en la próxima 8. Clase de portafolio 7: página de pie: Bienvenidos, a todos. En la clase de hoy, vamos a discutir nuestra sección de pie para nuestro sitio web de cartera. En el footer segen vamos a ver sobre los enlaces de redes sociales como Instagram, YouTube Para eso, vamos a ver la sección de pie de página, por lo que hay que crear una sección de pie de página en el HTML con una clase Pie de página. Entonces dentro de eso, vamos a crear el texto para nuestras Potas Entonces vamos a crear los elementos, DT elementos sociales sociales. Entonces para lo social, vamos a crear enlaces para enlaces, vamos a usar la etiqueta ancla, Ashraf Y luego vamos a escribir primero, vamos a copiar más de cinco veces y pasadas las cinco veces. Entonces dentro de eso, puedes escribir tus propios enlaces de redes sociales, YouTube, Instagram, Facebook, lo que quieras, puedes escribir. Entonces después de eso, vamos a crear un enlace bajo clase Links será List LA star f. vamos a crear List así dentro de eso, vamos a usar la etiqueta de anclaje nuevamente para el enlace. Así que tenemos que escribir la lista de nombres como política de privacidad o copyright o costando respuesta, y luego servicios, y luego proyectos de cartera de casa, lo que quieras, tienes que escribir el enlace Entonces después de eso, vamos a crear un párrafo para nuestro pie de página. Entonces informaciones de copyright para eso vamos a crear una clase para el párrafo RRS copyright Por lo que casi hemos completado nuestros elementos de pie. Entonces tenemos que abrir los iconos de caja para los íconos de Fore como los íconos de las redes sociales. Tienes que copiar y pegar uno por uno en tu clase. Entonces primero, vamos a buscar el Facebook así que tienes que escribir Facebook. Para que puedas usar el icono de Facebook. Hay que seleccionar la opción de fuente en el icono de la caja. Y entonces tienes que copiar esa etiqueta, esa es la etiqueta I, tienes que copiarla, y luego tienes que pegar dentro de tu debido social. Y luego hay que copiar uno por uno. Entonces, sea cual sea la red social que quieras, tienes que copiar y pegar dentro la etiqueta de anclaje con elementos I. Para que puedas ver que se generan todos los elementos. Por lo que nuestra sección está casi terminada. Vamos a diseñar nuestra sección de pie de página. Entonces tenemos que escribir el nombre de la clase pie de página, y luego la posición será relativa y luego inferior cero con cien por ciento. Relleno, 40 color de fondo, negro Pie , social, así que vamos a diseñar los elementos sociales como Link en Facebook. La alineación de texto será central. Fondo acolchado, 24 píxeles. El color será blanco. Y entonces vamos a diseñar para los elementos de anclaje el tamaño de la forma será de 24 píxeles y luego el color será blanco. Para que puedas ver que los elementos de los iconos se cambian a color blanco. Y entonces el borde será de dos píxeles sólidos, rojo anaranjado. Después de eso, vamos a usar el radio de borde para más opción de círculo. Antes de eso, vamos a usar el ancho para el píxel con altura altura de línea altura línea será de 35 píxeles, y luego mostrar bloque en línea. Mira. Si quieres relleno, también puedes usar relleno. Voy a usar radio fronterizo 30 por ciento. 50 por ciento será más círculo. Porcentaje, 45 porcentaje será adecuado para nuestro proyecto. Si quieres más círculo, puedes escribir 50 porcentaje 60 porcentaje. Entonces, si cambias la altura de línea, puedes ver la posición central de los elementos. Por lo que nuestros elementos sociales están casi terminados. Entonces si quieres sado también puedes usar Sado para tus elementos. Entonces voy a usar el sado 0010 pixel o insert. Para que veas, tu opción sado está disponible para tus elementos. Y entonces vamos a utilizar de nuevo la transición, opción Es dentro de 0.3 segundos. Por lo que nuestros elementos sociales se completan. Entonces vamos a cronometrar la Ella para nuestro proyecto, así que hover gráficos para nuestros elementos sociales Entonces vamos a usar Hover. Entonces hay que usar Su opsonF vamos a transformar esa es la opción Zoom, escala de 1.2 traducir OEAXs Vaxis no es más que topson erguidos. Y entonces el color será naranja. Brer será de dos píxeles, rojo naranja sólido. Entonces después de eso, vamos a ver el pie de página para lista. Entonces primero, vamos a usar la pestaña marging será cero, y luego padding, padding será cero Y luego el tamaño de la fuente el tamaño será de 18 píxeles. La altura de la línea será 1.6. Margen, fondo. Cero. Texto, la línea será el centro. Para que puedas ver la posición central. Por lo que bajo lista se completa. Vamos a diseñar para debajo lista con lista. Entonces tenemos que escribir el color blanco, y luego el borde inferior será de tres píxeles, sólido, transparente. Y luego transitar de nuevo 0.3 usos después de eso, vamos a diseñar para la lista. visualización de la lista será bloque en línea, y luego relleno 015 píxeles Por fin, vamos a completar nuestra sección de fotos con el diseño de párrafo. Entonces el primero será el margen. El margen será de 15 píxeles. Esa es la cima. Y luego la alineación de texto será el centro. Necesita opción de centro. El color, vamos a colorear para nuestro párrafo. Antes de eso, voy a escribir la herramienta de tamaño de fuente pixel. Y luego color para mi fuente que sea blanca. Para que puedas ver el color de la fuente. Si quieres más tamaño de fuente, puedes aumentarlo. Por lo que nuestro párrafo se completa el copyright. Por lo que hemos completado nuestra sección de pie de página. Por lo que nuestro proyecto está casi terminado. Antes de completar nuestro proyecto, vamos a necesitar la ayuda de cómo cambiar nuestra sección de una sección a otra sección. Si hago clic en Contacto, irá a la página de contacto. Si hago clic en Acerca de la página, irá a la sección anterior. Entonces para eso vamos a ver el ejemplo. Primero, tenemos que crear una identificación. Entonces ID será de la forma uno, y luego hay que escribir el nombre del ID en esa opción. Y luego vamos a crear ID para la sección A sobre uno, y luego hay que escribir el nombre sobre uno en los elementos Nab A, elementos de anclaje Y luego vamos a crear el contacto uno, por lo que hay que escribir ID en el contacto uno. Entonces, después de crear solo el ID, puede navegar por los elementos NaBR Navegación, hay que usar ID. Entonces, si hago clic en A, navegará a la sección A. Si hago clic en cartera, navegará hasta la cartera. Si hago clic en un contacto, navegará a la sección de contacto. Para que también puedas copiar el enlace para tus redes sociales. Entonces, si tienes algún canal de YouTube, tienes que copiar ese enlace de canal de YouTube y luego pegar dentro de la etiqueta de anclaje. Entonces ese es el uso de la etiqueta de anclaje dentro del enlace para tus redes sociales. Entonces voy a copiar el enlace de redes sociales de mi Gitub y luego voy a pegar ese enlace en mi ícono de redes sociales Entonces hay que navegar por eso. Entonces hay que pegar ese enlace. Dentro de la etiqueta de anclaje. Entonces voy a pegar el enlace de Git up. Tienes que quitar el símbolo HTIC. Entonces si tecleo levántate, puedes ver mi página de Gu. Entonces ese es el uso de la etiqueta de anclaje. Si tecleo Elemento de destino, ese es el atributo de destino. En blanco, va a la página siguiente o página nueva. Entonces ese es el uso del blank. Si selecciono Github, se abrirá en nueva página. Si tecleo self, se generará en la misma página. Entonces esa es la diferencia entre objetivo propio y el blanco en blanco. Entonces eso es todo, chicos. En la clase de hoy, discutimos sobre el diseño de nuestra foto shen, y también discutimos sobre cómo insertar el enlace de nuestras redes sociales. En la próxima clase, vamos a completar nuestro proyecto con el despliegue de nuestro sitio web de portafolio usando Netlify Así que vamos a ver en el próximo 9. Clase de portafolio 8: sitio web: mí, a todos. En la clase de hoy, vamos a discutir sobre cómo implementar nuestro sitio web de portafolio usando Netlify Para eso, tienes que escribir la opción de arrastrar y soltar de Netlify en Google Y luego hay que abrir la primera opción en el Google. Entonces hay que seleccionar eso. Así que tienes que arrastrar y soltar tu carpeta. Esa es la carpeta del sitio web de cartera con el archivo HH TML y CSS Así que tienes que arrastrar y soltar tu sitio web de portafolio en Netlify Puede ver que su cartera está desplegada usando el sitio web de Netlify Por lo que también puedes copiar el enlace y pegar en el Google. Puedes ver el sitio web de tu portafolio. Entonces antes de eso, tienes que crear una cuenta en el Netlify usando tu Github o Entonces después de crear solo, puedes ver el enlace de tu sitio web de portafolio. Entonces después de crear la cuenta, puedes ver el enlace del sitio web de tu portafolio. Si hace clic en ese enlace, podrá ver que su cartera está desplegada en el sitio web. Para que puedas ver tu página de inicio, contacta todas las opciones que se despliegan en tu sitio web. Entonces, si selecciona contacto, entonces todo se generará en el sitio web utilizando el sitio web de Netlify Entonces ese es el uso de Netlify. Puede implementar su sitio web front-end usando eso. Entonces eso es todo. En la clase de hoy se discutió sobre cómo implementar nuestro sitio web de portafolio usando Netlify. Entonces eso es todo, chicos. Hemos completado nuestro sitio web de portafolio usando HTML, CSS y Netlif Entonces, si aprendes algo de este curso, pon revisión positiva en la sección de comando. Entonces, supongamos el siguiente curso impartido por mí. Gracias.