Transcripciones
1. ¿Qué aprenderás en este curso?: Oigan, chicos, aquí
abajo. De vuelta con otro curso para ti, Este. Vamos a estar construyendo una sencilla plantilla de perfil freelancer de una página. Entonces déjame pasar y mostrarte algunas de las cosas de esto que podrían interesarte. Te podría interesar tomar este curso, así que empieza justo en la parte superior. Tengo, ah, uno de estos pequeños y bonitos menús de vuelo como este usando algunas transiciones CSS aquí. Entonces eso es algo por lo que vamos a pasar. Ah, en esto nos desplazamos hacia abajo por este curso, solo
tenemos el tipo general de diseño y aspecto y tacto HTML y así fuerza, hablaremos de eso y algunas de las cosas. Ah, eso sí escuché que creo que hizo que esto se viera mucho mejor. También contamos con una sección de portafolio con pop up. Ya verás aquí que en realidad podemos pasar y especie de desplazamiento por estos. Tan seguro que tenías que hacer eso y luego bajará hasta el fondo. En realidad tenemos un formulario de contacto conmigo. Y si llenamos esto y voy a poner un poco de texano ficticio aquí hit Obtener cotización. Esto en realidad va a enviar este formulario vía Ajax y luego darnos un responsable
mostrará un mensaje. Ah, éxito o fracaso basado en lo que recuperemos. Entonces sólo para subir un poco al código, eso es una especie de front-end. Por supuesto que vas a aprender una tonelada de HTML. También vamos a estar construyendo un sistema de cuadrícula que puedes arrastrar y soltar en diferentes proyectos. Y esto está usando la cuadrícula CSS. Entonces vamos a pasar por ese multi voy a mostrarte cómo construí ese menú. Ah, usando la transición CSS. Entonces tenemos eso. También entraremos en algunas de las JavaScript para manejar algunas cosas diferentes con el menú . Además, te muestras algunas opciones para diferentes formas en las que puedes manejar el menú también. Por supuesto, tenemos el manejador de formularios Ah, para la forma que estamos construyendo vía Ajax. Y entonces tenemos aquí nuestro script PHP con el fin de manejar esa solicitud. Ah, manda el correo electrónico y demás y luego dennos nuestra respuesta de vuelta. Así que de nuevo, un montón de html ah, mucho CSS algún script ah decente de Java y algo de PHP así todo tipo de juntarse en este curso basado en proyectos para construir esta plantilla freelancer. Entonces si eso es algo que te interesa que te inscribas en el curso, y espero verte en la clase.
2. Cómo aprovechar el máximo de este curso: Oye, tan rápido de verdad Antes de sumergirnos en las tuercas y pernos de este curso, solo
quiero hacer algo muy rápido sobre cómo sacar el máximo provecho de este curso antes de que me en ese verdadero rapido a medida que avanzas por el curso. Si te gusta el curso, verdad, verdad agradecería que me dejaras, Ah, revisión del curso. Eso ayuda una tonelada. Entonces si pudieras hacer eso, verdad
te lo agradecería. Además, asegúrate de revisar mi perfil y sígueme por allá si quieres que te notifiquen por parte de
habilidad. Cuando subo algún nuevo curso, trato de subir con bastante regularidad. Entonces si quieres que te notifiquen cuando se suban nuevos cursos, solo asegúrate de seguirme en mi perfil. No obstante, eso fuera del camino, hablemos de cómo sacar el máximo provecho de este curso. Entonces una cosa que quiero dejar algo claro sobre esto es que se trata de un curso basado en proyectos, Así que en este curso, vamos a movernos bastante calientes y pesados a través de cómo construir este sitio web, y no vamos a pasar demasiado tiempo en una especie de entrar en explicar cómo funciona un lenguaje
como HTML CSS o PHP o JavaScript. De acuerdo, así que realmente soy este tipo de asume. Ah, un poco de base de conocimiento, de familiaridad, al
menos con estos lenguajes. Y entonces solo te voy a mostrar cómo hacer estas cosas. Y así sólo quiero hacer esa distinción de esto. Es mostrarte cómo hacer algo específico con el idioma, no necesariamente enseñarte esa lengua en profundidad misma. Si tú eso es algo que quieres hacer. Si eso es más lo que buscas, entonces realmente quieres echar un vistazo Ah, curso específico de
idioma donde ellos donde alguien se mete profundamente en explicar qué idiomas . Entonces un ejemplo. En realidad puedo ir a mi perfil muy rápido. Tengo esta guía para principiantes PHP que es una en profundidad. Son ocho horas solo entrando en PHP y tratando de explicar todo lo que querrías saber sobre PHP. Guía para principiantes de PHP. Eso son unas 3.5 horas. Hace html uh, 3.5 horas Eso hace exactamente el mismo tipo de cosas. Incluso estos cursos de programación orientados a objetos van específicamente a la programación
orientada a objetos , que es una forma de hacer código PHP y así sucesivamente. Entonces solo quiero asegurarme y hacer esa distinción entre un curso basado en proyecto y un curso específico de
idioma, porque un curso basado en proyectos como este se va a mover un poco caliente
y pesado, y es una especie de cosa tuya llenar el brechas. Ah, eso puede que tengas con un lenguaje en particular a medida que avanzas. Entonces si estás encontrando que te estás tropezando con brechas, esa es una especie de forma de resolverlo. Ah, y de nuevo, este curso es sólo para mostrarte cómo armar ciertas cosas de cierta manera. Entonces así es como sacar el máximo provecho de este curso. Mi sugerencia. Si te encuentras con un muy grande a gap, yo iría y llenaría ese vacío antes de que sigas adelante, porque es realmente va a ser. Todo tipo de construcción se basa en lo que tiene ante sí. Por lo que va a ser difícil para ti continuar con el curso si tienes esta gran brecha de conocimiento ahí dentro. Y esa es también una de las cosas bonitas de los cursos basados en proyectos. ¿ Es una especie de ayudaron a exponer ese tipo de cosas. Eso puede sentirse como un negativo, pero en realidad es un positivo. Ayuda a exponer dónde puedes tener retenciones porque estamos reuniendo HTML, CSS, JavaScript y PHP. Ya
sabes, puede que nunca hayas hecho todas esas cosas juntos antes, y estamos haciendo, ya
sabes, Ajax y estamos haciendo transiciones CSS y traduciendo y algunas cosas que quizás no hayas hecho antes. Y así de nuevo
, sólo ayuda a exponer esos agujeros. Entonces ahora ya lo sabes, y luego puedes ir y llenar esos vacíos. De acuerdo, así que ese es el valor de un curso como este. Eso no te espantes de eso. No te preocupes por eso. Justo cuando golpeas esos agujeros yendo tratando de llenar esos vacíos a medida que avanzas. Entonces de nuevo, así es como sacar el máximo provecho de este curso. Ojalá, eso te ayude a medida que avanzas por esto
3. Construir el sistema de cuadrícula responsiva con la cuadrícula de CSS: lo primero que quiero hacer aquí es realmente construir el sistema de rejilla porque realmente
lo necesitamos antes de poder hacer cualquier otra cosa con su sitio. Pero tengo que firmarlo, tipo de poner aquí el proyecto. Entonces voy a entrar en mi estructura de carpetas aquí. Y bajo esta plantilla una, solo
voy a crear una nueva carpeta llamada Trabajando el pliegue de Eso. Soy yo construí esto en Previamente es Freelancer Ah, 001 es por lo que lo estoy llamando por ahora. Pero voy a usar esta carpeta de trabajo para lo que vamos a hacer aquí, y luego voy a dentro de esto crear un nuevo archivo llamado index dot html y porque estamos usando Ajax, donde estamos sometiendo a un script PHP, pero porque estamos haciendo eso por Ajax, no
necesitamos hacer esto en archivo html. Algunas personas a menudo me preguntan por eso, así que voy a hacer esto. Uno es un archivo HTML, solo para que pueda especie de ver eso. Y entonces vamos a abrir este archivo y cerraré esto por ahora. Y quiero hacer una vista previa del archivo life y así no lo hacemos No hay nada en él, así que no lo hacemos No está mostrando nada aquí, pero ahora en realidad podemos abrir esta espalda y vamos a seguir adelante y crear una nueva carpeta llamada CSS y por dentro que sigamos adelante y creemos un nuevo archivo llamado grid dot CSS. Ahora, estoy poniendo esta grilla. Voy a poner la cuadrícula y el menú en realidad en sus propios archivos CSS. El motivo por el que estoy haciendo eso es porque estos están destinados a ser una especie de arrastrar y soltar archivos que no
tienes que reescribir constantemente para cada proyecto lo puedes arrastrar a un nuevo proyecto. Y está ahí listo para que vayas en tu buen sistema que quieres construir. Una vez que lo construyes, cómo lo quieres, puedes de nuevo. Simplemente vas a usar eso. Entonces se convierte en algo así como tu propio muchos bootstrap en ese sentido. De acuerdo, así que sigamos adelante y abrimos que este punto de cuadrícula CSS arriba. Y ahora podemos cerrar esto. Y así vamos a estar usando la grilla CSS. Aquí, déjame seguir adelante y sólo ah comentario. Esto se marcan esta correctamente titulo esto y así es como tiendo a hacerlo. Es decir, puedes hacerlo como quieras, pero está bien, entonces hay esencialmente tres cosas principales que necesitamos aquí. Si estás familiarizado con las rejillas, necesitamos un contenedor. Necesitamos una fila, y necesitamos columnas. De acuerdo, así que empecemos con el contenedor. Es bastante sencillo. Y todo lo que vamos a hacer aquí es que vamos a hacer margen izquierda, auto y margen, derecha, auto. Y esencialmente, lo que esto va a hacer es simplemente centrarlo para nosotros. Y luego he hecho de palmaditas a la izquierda de 15 píxeles. Simplemente me gusta la forma en que se ve. Se puede jugar con eso, pero para que eso dependa de ti. Um, pero ese es esencialmente el contenedor. Todo lo que realmente hacer es sólo una especie de centrado. Ah, el elemento contenedor. Te mostraré aquí en un minuto, cómo se va a ver eso en un segundo, pero ah, y luego dándole un poco de relleno. Por lo que parece así que realmente no tiene nada a un licenciado en CSS. Eso es solo conseguir que nuestro contenedor funcione aquí. Está bien. Y luego vamos a hacer Ah, vamos a hacer nuestra fila. Y aquí es donde empezamos con el CSS. Cosas buenas. Entonces para la grilla CSS, necesitamos hacer cuadrícula de visualización. Entonces eso dice esencialmente, Hey, vamos a usar CSS cred. Y luego para esto hay muchas maneras diferentes que puedes usar CSS genial. Y se puede obtener un diseños realmente complejos y así sucesivamente, pero un sistema de rejilla en realidad bastante sencillo. Entonces vamos a hacer plantilla de cuadrícula, uh, columnas
de plantilla. Y luego vamos a usar la función de repetición aquí, y vamos a hacer 12 y luego un fr. De acuerdo, Entonces, esencialmente, lo que esto está diciendo es que esta es nuestra plantilla para nuestras columnas. Y entonces lo que estamos diciendo es que queremos tener 12 1 fr. Columna. Entonces el fr es una especie de esta flexible, Uh, esta unidad flexible que va a llenar el espacio restante esencialmente, lo que esto nos da es que nos da 12 columnas como estás acostumbrado en un sistema de cuadrícula desde bootstrap o lo que sea, y luego voy a hacer brecha de cuadrícula 20 píxeles como este. Entonces esa es sólo la brecha. Ah, eso va a ser entre las diferentes columnas. De acuerdo, Ahora que tenemos
eso, es todo lo que tenemos que hacer. para una fila. ¿ Vas a ver qué? Cuadrícula CSS. Esto es realmente bastante sencillo. Ahora sólo tenemos que hacer nuestra columna, así que les mostraré un ejemplo de uno, y luego sólo vamos a caer en el resto. Entonces llama a uno. Y así esto va a ser una columna de una con columna, y vamos a hacer grilla. Llámalo y luego abarca uno. Vale, Ahora estás viendo todos estos aires por aquí, porque podría aparentemente mi mi i d aquí no reconoce todas estas nuevas cosas buenas de CSS. Pero este año es bastante sencillo para una columna de una con Call him. Acabamos de establecer la columna de la cuadrícula para que abarque uno. Y como podría haber adivinado para un dos, llámalo con columna. Entonces configuramos la llamada de cuadrícula, um, para que se amplíe para que así. De acuerdo, entonces es bastante sencillo. Voy a En lugar de tener como que me vigiles teclear el resto de esto, sólo
voy a caer en el resto de la misma. Por lo que de tres a 12 aquí. Por lo que se puede ver de nuevo Columna Juan span Juan columna a lapso para calmar tres lapso tres. Excepto que estás bajando la línea al 12. Entonces eso nos da nuestro ingenio de 12 columnas. Esto es ordenar otra vez. Tipo de lo que solías a Bootstrap. Ahora solo lo estamos haciendo, uh, con grilla CSS. A continuación, voy a crear una especie de clase de utilidad aquí, que no es canaleta. Entonces esto es si queremos no tener una canaleta, vamos a usar esto en la sección de portafolio. Entonces vamos a hacer grilla, llamarlo brecha, y pondremos eso a cero, que
eso se deshaga del espacio es el espacio entre las columnas y luego solo necesitamos hacer nuestra consulta de medios. Entonces tenemos tres bastante fáciles que iban a hacer en Media y vamos a hacer hombres con 999 o 92 píxeles. Vamos a apuntar a ese punto de ruptura, y vamos a ah, sólo cambiar el tamaño de nuestro contenedor y vamos a hacer con nueve cientos, 70 píxeles. Entonces eso es simplemente encoger el contenedor. Esta es una especie de la cuadrícula fija estándar. Ah, acercamiento. Cuando estamos en 992 nos encogemos el contenedor. Entonces todo lo que hay dentro se encoge con él, ¿de acuerdo? Y vamos a hacer lo mismo para arriba de 1200. Entonces en medios y vamos a hacer hombres con 1200 píxeles como este y luego contenedor, y pondremos eso en un ancho de 1140 píxeles como ese. De acuerdo, Entonces, dependiendo de lo grande que sea la pantalla, solo
vamos a encogernos o expandir nuestro contenedor. Cosas bastante sencillas ahí. Este es un poco más largo. Esto es para que me voy a soltar este, y esto es un poco más largo, pero esto es para las columnas. Entonces si llegamos por debajo de siete o 786 768 píxeles o bajamos todas las columnas, vamos a cambiar el lapso de cuadrícula 2 12 Entonces lo que eso hace es que esencialmente los hace por debajo 768 píxeles. Se va a ir cualquier cosa que lado a lado como Así que tienes tres cajas. Yo decido que va a apretar esos para estar encima el uno del otro, que es una especie de lo que esperas de, ah, sensible. Genial Aquí. Entonces eso es todo. Ese es nuestro sistema de red. Con la grilla CSS, puedes ver que es mucho más fácil y mucho más sencillo por las herramientas
que ahora tenemos en CSS cred. Entonces, vengamos aquí y coja a Doc y hagamos esto. Y luego sigamos adelante e incluimos nuestro archivo CSS por un segundo aquí para que podamos echar un vistazo a esto. Entonces vamos a hacer Leak limpiará esto aquí en un segundo, pero vamos a hacer hoja de estilo como esta, y luego vamos a hacer un treff y vamos a hacer iguales y luego podemos usar a CSS slash grid dot como este. De acuerdo, entonces eso debería caer en nuestro sistema de grilla y luego podemos hacer muchas veces la forma en que esto se hace como vas a hacer sección y luego dentro de eso vas a hacer contenedor. Uh, clase
div es igual a contenedor. Día de clases debe parecer familiar desde alguna vez trabajado con fila bootstrap y luego decir div um , clase igual y hará llamada. Simplemente haremos llamar a tres así y diremos uno y luego nos meteremos en unos cuantos de estos así. OK, entonces esto es una especie de lo estándar que verás. Um, déjame hacer un poco de estilo rápido para que podamos ver esto. Ah estilo. Haré sección que hará números de fondo es cero. Está bien. Y vamos a hacer sólo color número f y luego para nuestras columnas Productiva llame tres. Simplemente lo mantendremos fácil como eso hará color. Simplemente vamos a leer algo así. Ah, y hagamos fondo, no color. Está bien. Está bien. Para que puedas tener alguna idea aquí de lo que está pasando. Tenemos nuestro son una especie de, um tenemos nuestro contenedor. Tenemos nuestra fila. Tenemos nuestras columnas dentro de eso. En realidad, eso sólo suma nueve. Hagamos por por poco darte una mejor idea. De acuerdo, entonces, uh, en realidad cambia para llamar a cuatro. Está bien. Para que puedas ver nuestra cuadrícula tipo de tramos por aquí. Tiene el hueco de columna de rejilla entre aquí, como lo pusimos. Y así tienes un bonito sistema de cuadrícula con el que podemos trabajar, y no sé por sí, Así que puedes ver aquí. Una vez que llegamos por debajo de 780 68 píxeles, cae en la parte superior de abajo allí. Por lo que de nuevo, acaba de empezar una especie de cuadrícula receptiva estándar que esperarías ver hecho con
cuadrícula CSS . Y esto es algo que puedes llevar esto aquí y puedes especie de modificarlo, cómo lo quieres y luego crear y mantener ese archivo CSS para que puedas dejarlo caer en proyectos. Por supuesto, si quiere enmendar, si yo y todo eso, en algún momento podrá combinar todos los expedientes sobre así sucesivamente. Pero te da un archivo que puedes mantener constantemente en uso para proyectos. Ah, medida que avanza. Entonces ese es el sistema de rejilla. Tenemos que hacer eso primero antes de que pudiéramos entrar realmente en construir aquí el sitio web.
4. Construir el menú del encabezado: Ahora lo que quiero hacer es construir nuestro encabezado y nuestro menú. Pero todavía hay un poco de configuración que necesito hacer aquí, algunos tratando de una especie de trabajo que en como nosotros ah como vamos aquí. Entonces voy a hacer algo de eso ahora, lo primero, y voy a tratar de hacer esto rápido, así que voy a hacer un poco de caer aquí. Pero, ah, lo primero que queremos hacer es que queremos nuestras fuentes. Entonces vamos a estar usando Ah, varias fuentes e iconos diferentes. Voy a dejar caer el's adentro. Probablemente estés familiarizado con este tipo de cosas. Si no eres esencialmente lo que es esto es estas son fuentes de Google. Entonces si vas a ponerte bien, solo fuentes de Google como esta, creo que es divertido. Inicia google dot com, pero no Google fall fonts y haz clic a través de eso, puedes buscar todas estas diferentes fuentes y así sucesivamente. Y vamos a seguir adelante y añadir este aquí y luego,
Ah, Ah, cuando quieras usar uno, entonces verás que te dará un enlace como este, acuerdo? Y tú puedes entonces tomar eso aquí y puedes dejarlo caer y dejarme que me quede corto de encogerlo un poquito por un segundo para que puedas dejarlo aquí y puedas ver que eso es lo que he hecho. Tengo esta fuente Roboto y he conseguido todos los diferentes pesos que tiene, y eso he caído como enlace. Tengo Yellowtail, que sólo tiene un peso. Y luego la otra cosa que traje en esta fuente Awesome. Entonces si vas a, si buscas fuente impresionante, entonces puedes ver que nos divertimos impresionante aquí y en realidad cómo usar. Y de nuevo
, te da un enlace en el que puedes caer. Entonces ese es el tercer enlace que me tiré aquí. Entonces solo para ahorrar un poco de tiempo escribiendo todas esas cosas hacia fuera. Esencialmente ahí es donde conseguiste esos. Ni siquiera voy a escribir cantidad yo mismo. Simplemente lo agarro de esos lugares y los dejo caer. Entonces eso es lo ah, lo primero que hacemos. Tenemos algunas otras cosas que vamos a necesitar de dedo más adelante, pero nos preocuparemos por eso. En ese punto. Y así entonces sólo voy a limpiar esto y marcar esto como thes. Van a ser una especie de nuestras hojas de estilo personalizado solo calmarán las hojas de estilo. Piensa en ese caso. Tenemos nuestra grilla. Ah, y luego vamos a crear uno para nuestro menú, como ya hablé así de nuevo creará nuestro enlace aquí, y crearemos estos aquí en tan solo un segundo. Pero ya que estoy aquí, quiero a Adam. Entonces vamos a ponerlo en nuestro archivo CSS tendrá uno llamado menú como este, y luego tendremos uno que es va a ser una especie de nuestra general ah, hoja de estilo
del sitio. Entonces otra vez, estoy haciendo esto porque voy al menú y la grilla van a ser una especie de dragón caído para diferentes proyectos. Esta hoja de estilo aquí mismo va a ser específica para sólo este proyecto. Y de nuevo, probablemente para la producción. Ustedes seguirían adelante, hombres, si yo éstos y demás. Ah, y eso lo haría funcionar mejor y así sucesivamente. Pero está bien, así que sigamos adelante y luego retrocedamos esto. Desde ahora, como
que sabemos cuáles son esos y vamos a cambiar nuestro título a Joe Freelancer. Deshaznos de esta sección de estilo. Ya no necesitamos eso. Y vamos a deshacernos de esta sección aquí. Yo sólo iba a mostrarte esas cosas. De acuerdo, entonces ahora que estamos tenemos una especie de algunas de estas cosas configuradas, aún no
crearemos esos archivos CSS. En realidad vamos a hacer nuestro HTML primero. Y así vamos a tomar crear un elemento llamado Encabezado y le daremos un
encabezado de clase de vista como este. Y estamos usando esto en lugar de una sección, ya
sabes, en otras partes del sitio usará sección, pero debido a que este es un encabezado estaban usando cabecera. Y luego vamos a usar nuestra grilla aquí. Entonces vamos a div Clase igual contenedor. Uh, y luego la clase Div es igual a fila, y luego la clase div es igual y vamos a hacer la llamada cuatro, y esto va a ser para un logo. Entonces queremos tener esa clase a la que podamos apuntar específicamente a huir si queremos. Y luego dentro de esto, vamos a tener cada una clase igual a marca. Puedes especie de nombrar estas cosas lo que quieras. Yo solo, ya
sabes que he usado bastante bootstrap,
y esta es una especie de la forma en que lo hacen. Entonces, sólo me resulta familiar. Entonces vamos a un borrador igual a nada por ahora. Y vamos a decir Joe Freelancer, Así que eso va a crear. Ah, eso va a crear una especie de nuestro pequeño título de nuestro sitio, por así decirlo. De acuerdo, así que esa es la sección de marca. Y entonces la otra sección que tenemos que hacer aquí es para nuestro menú, así que vamos, uh, clase
div igual a llamar ocho. Por lo que sí llamamos antes. Siempre necesitamos sumar hasta 12. Vamos a hacer llamar a ocho y luego dentro de eso. Aquí es donde vamos a empezar a poner nuestro menú. Entonces lo primero que necesitamos es a nuestros pequeños. Vamos a hacer div clase igual menu toggle como esto es darme son botón de toggle, y luego vamos a dentro de eso Do I clase igual f a f menos. Entonces esto es de fuente Awesome y nada dentro de eso. Y entonces solo necesitamos esencialmente tres de estos, así que solo seguiré adelante y copiaré eso, y está bien, para que veas eso nos da tres líneas aquí. Todavía no hemos peinado nada de esto, así que va a parecer realmente incómodo. Um, así que ese es nuestro toggle de menú. Pero también entonces necesitamos nuestro menú. Entonces vamos a hacer, Knave clase igual último menú igual, y vamos a dar esto y yo d. porque podrías tener múltiples menús en el mismo sitio. Entonces tenemos una clase de menú que va a hacer la mayor parte de nuestro estilo. También le vamos a dar una idea en caso de que queramos apuntar específicamente a éste. Por lo que parte se denominó Curso de Menú Primaria. Llámalo como quieras. Um, y luego lo haremos en una clase de lista ni lo hizo igual menú naff. Entonces esta es la navegación real, um, menú. Y luego dentro de eso, déjame solo dejar caer el's adentro. No tiene sentido estos aire. Bastante sencillo. Sin cita. Mírame tipear un montón de estos fuera. Por lo que estos son elementos de lista, y así tenemos elemento de lista. Les damos a cada uno una clase de hombres. Te habrás artículo que estamos usando. Yo estaba usando anclas porque todo esto va a enlazar dentro del mismo sitio. Um, sobre habilidades, cartera de clientes y contacto. Esos iban a ser los diferentes apartados. Y así cuando creamos una nueva sección solo para explicar eso aquí mismo, bueno, hacer algo como esto Hará sección y haremos clase igual sección. Hablaremos de eso. Pero entonces lo haremos d igual sobre así. Bueno, eso ahora crea para este ancla. Al hacer clic en este enlace, se vinculará a la sección's Cuando le des algo un I D. Después
puedes crear un ancla Tony a que yo d Así que eso es lo que estamos haciendo aquí. Yo iré. No había dejado esa sección ahí dentro porque vamos a usar eso en algún momento de todos modos . Está bien, así que ese es el HTML. Ah, eso es bastante sencillo. Lo siguiente que tenemos que hacer entonces es que necesitamos meternos en el C. S y hay algunas cosas aquí dentro que necesitamos hacerlo. Como dije, todavía
tengo un poco de montada aquí. Vamos a seguir adelante y crear un archivo y vamos a llamar a este menú dot CSS y luego vamos a crear otro y vamos a llamar a eso los ceros freelancer Ahí uno realmente responde de cero. Hay un caso de Ruanda CSS de esos son de nuevo los dos archivos que incluimos aquí arriba, y creo que todo se deletrea bien. De acuerdo, entonces esos dos archivos deberían incluirse ahora. Y en realidad, el 1er 1 en el que vamos a entrar es este freelancer. Voy a abrirlos a los dos. Entonces tenemos. Pero entonces voy a entrar en este freelancer aquí porque necesitamos hacer algunas cosas con el cuerpo, solo dedo del pie. Una especie de sacarlo del camino. Entonces haremos cuerpo hacer nuestra marca aquí. No, no
me voy a poner demasiado exigente al respecto para el video. Muy bien, así que vamos al cuerpo HTML, y vamos a deshacernos del margen del relleno del navegador. Eso es. Por lo general son tan margen cero relleno cero. Um, vamos a hacer los antecedentes. Hago esto en esto porque te darás cuenta otra vez en la mía. Tiene una especie de color grisáceo, y simplemente no me gusta mirarlo cuando vas a. En realidad, cuando vaya a poner realmente esto en el sitio, no
va a hacer eso. Pero por mi bien, simplemente no
me gusta mirarlo así y entonces vamos a establecer la fuente en general para el cuerpo a este color. De acuerdo, entonces eso nos da deshacernos de algunas de esas cosas. Um, ¿cuál es el aire aquí? ¿ Ahora? Pongo un punto y coma de colon. Está bien, así que a continuación vamos a hacer Ah, familia
de fuentes. Entonces vamos a hacer cuerpo. Vamos a hacer P el etiquetador P en el área de texto de selección de entrada. Probablemente haya otros aquí. Todo esto es cosa. Um, cualquier cosa que no sea Quieres apuntar a cambiar la fuente para que no tienes en términos de solo etiquetas básicas y así sucesivamente, cuerpo debería atrapar la mayoría de las cosas, pero algunas cosas, como etiquetas de párrafo y entradas y así sucesivamente que no va a que no siempre va a coger. Entonces estos son los que usamos, y vamos a usar en este particular,
um, um, en este sitio en particular. Entonces esos son los que estoy apuntando. Entonces vamos a la familia de fuentes, y vamos a ponerle eso a Roboto y luego un respaldo de Sand Saref así. De acuerdo, um , de
nuevo, esto es sólo una especie de cosas de configuración que necesitamos hacer esa necesidad para salir de los residuos. Vamos a imagenarlo a Maxwell al 100% para que eso asegure que las imágenes se encojan. Eso es sólo una especie de respuesta general a la imagen que debilita a Dio. Ah. Entonces vamos a hacer cuerpo P H uno H dos H tres h para H cinco h seis,
entrada, entrada, selección y área de texto nuevamente. Y vamos a poner la fuente de espera a 300. Está bien. Y casi hecho Aquí. Vamos a hacer texto de punto y área de texto de punto. Estableceremos la caja dimensionando la caja de borde y bien, con borde 100%, un píxel sólido. Y luego C C c es el color do Paddington pixels. 15 píxeles. Ah, vamos a hacer tamaño de fuente 16 píxeles. ¿ Qué? Tamaño uno redondo. Está bien. Y yo hago eso, así que ah, probablemente ya no necesites hacer esto. El tamaño de fuente doble aquí. Toda la idea detrás de eso es que algún navegador no soporta carneros. Tendrá por defecto el dedo del pie atrás el tamaño de píxel. Aquí. Es este algún hábito en el que me he metido en el que probablemente necesito romper, pero ,
uh, por
eso hago eso. Entonces, altura giré 40 pixeles. De acuerdo, entonces ese aire, como dije, esas eran sólo algunas cosas que necesitábamos para salir del camino. Y luego también necesitamos hacer después nuestra sección de encabezado del sitio. Por lo que esto aplica a nuestro menú. Entonces creamos por aquí. Ah, cabecera con cabecera de sitio Clase. Ahora necesitamos darle estilo a eso un poco. Entonces hagámoslo, uh, encabezado. Y como que recuerdas, puede
que no te hayas dado cuenta de esto, pero si volvemos y es Oh, míralo, en realidad aquí está justo aquí. Eso podría jalarnos aquí abajo si recuerdas los encabezados del sitio realmente arreglados con. Y tiene esa transparencia a la misma. Entonces eso es algo de lo que vamos a hacer aquí mismo. De acuerdo, Entonces por eso tenemos que meternos un poco con esto antes de que podamos entrar al menú en sí. Muy bien, Así que vamos a hacer vamos a apuntar a esa clase, uh, cabecera
del sitio. Y vamos a hacer posición fija. Eso es lo que lo hace así que se queda en la parte superior incluso cuando se desplaza. Cuándo hacer borde fondo de un píxel sólido, y vamos a hacer e para así, y luego vamos a hacer con de 100% y vamos a hacer fondo. Esto le va a dar su transparencia. Entonces vamos a trasfondo. Pero en lugar de un color hexadecimal, vamos a hacer rgb a Así que es rojo, verde, azul Y luego el héroe de opacidad Pacenti Así 2 55 2 55 2 55 Eso le da el color Así que
va a ser blanco, y luego estamos va a darle una pastie A de 0.9. Entonces eso lo va a hacer para que cuando te
desplaces hacia abajo, tenga ese poquito de un pasaje e ahí. Entonces, solo actualicemos esto y veamos si asegurarnos de que los archivos CSS y así sucesivamente. Entonces estamos consiguiendo algo aquí. Um, ya
sabes, tenemos algunos cambios aquí, así que nuestros archivos CSS parecen estar pateando por aquí, Así que eso está bien. Ahora vengamos aquí y vamos a echar un punto Brand. Voy a hacer altura de línea y vamos a establecer ese dedo del pie uno y tamaño de fuente 28 píxeles. Tamaño de fuente 1.75 Ram así. Está bien. Y se podía ver el tamaño de la fuente cambiando ahí arriba y así sucesivamente. Entonces otra vez, eso es ah, buena señal. Y luego haremos marca a y nos desharemos del texto decoración dijo eso a ninguno. Uh, y luego le pondremos el color a 333 Ok, que veas que estamos empezando a conseguir un poquito de algo aquí. Tenemos una especie de esta sección de marca aquí que se ha actualizado. Um, y eso es realmente todo lo que tenemos que hacer por ahora mismo. Ah, en nuestro archivo freelancer. Ahora podemos entrar en el archivo de menú y empezar a meternos con eso. Entonces hay una cantidad decente a esto. Tenemos que hacer tanto el toggle, y luego sí tenemos que hacer el menú por sí mismo. Entonces empezaremos con Ah, no, empezaremos con el toggle. Entonces sigamos adelante y hagamos ahora. Ah, hacer guión de menú, toggle. Y vamos a posicionar este absoluto lo han posicionado absoluto principalmente
porque es ah, es mucho más simple. Lo va a poner arriba arriba en la parte superior, ¿verdad? Uh, y lo verás aquí. Muévete en solo un segundo, pero lo va a poner en la parte superior, ¿
verdad? No importa dónde te desplazas o lo que sea y con lo fijo, um, con el menú fijo y todas esas cosas simplemente mucho más fácil posicionarlo de esta manera porque estamos haciendo un menú móvil desde el principio en lugar de tener un menú horizontal que a un menú móvil. Entonces haremos Z Index pondrá eso en tres puntero del cursor, y luego vamos a hacer con y vamos a establecer ese dedo auto. Correcto, Así que eso va a posicionarse. Ya ves, se acabó en la parte superior ahora mismo, y luego hacer menu toggle y luego dot FAA Esto va a apuntar realmente al ícono. Entonces lo hacen display block, y ya ves, ahora están encima uno de otro cuarto, due line, altura, cero, um, margen 008 pixels y solo tienes que especie de juego alrededor sin un poco para ver qué te gusta con eso, y haremos tamaño de fuente 28 pixels. De acuerdo, entonces puedes ver ahora cuando miras eso, es similar, o es idéntico a lo que tenemos aquí. De acuerdo, entonces estamos empezando a llegar a algún lugar un poco con esto. También vamos a sumar en esta transición. Por lo que para CSS las transiciones iban a hacer todos los 800 milisegundos y aligerar. Entonces esto nos va a poner una especie de trampa por poder hacer las transiciones que queremos dio . De acuerdo, entonces tenemos que agregar eso al ícono aquí. Ah, para poder hacer eso. Entonces voy a volver y hacer todas estas transiciones aquí. No voy a hacer todo eso. Ah, en este punto todavía. Entonces quiero llegar al menú y hacerlo primero antes de meterme en eso. Entonces vamos a saltar hacia abajo, y vamos a ir al menú y en realidad vamos a agregar un poco de espacio aquí. Tendremos que añadir esos estilos de nuevo aquí, pero haremos menú. Vamos a hacer posición fija. Entonces eso es Ah, vamos a arreglarlo aquí. Vamos a hacer el top zero, y lo vamos a hacer, ¿ verdad? Cero. De acuerdo, Entonces eso va a posicionar nuestro menú por aquí, porque si recuerdas, nuestro menú se desliza por un lado así. De acuerdo, así que eso es lo que Ah, eso es lo que estamos montando aquí. Está bien, así que voy a hacer un ancho en esto del 30%. Ves esa clase de aguijón aquí y luego por defecto, va a estar escondido. ¿ No voy a hacer eso todavía? Porque quiero que lo vea, pero vamos a volver y vamos a hacer visibilidad y vamos a hacer oculto. Um, sólo
voy a hacer visible por ahora para que podamos verlo, pero quiero eso como marcador de posición. De acuerdo, entonces vamos a volver a hacer antecedentes, y vamos a hacer Ah, transparencia en esto. Entonces vamos a hacer rgb a y a 35 a 2 55 2 55 Y luego otra vez, 0.9 así. Y luego queremos que el, uh queremos que esto estire toda la altura. Entonces vamos a la altura y vamos a hacer 100 VH. Um, VH es una especie de esta cosa nueva que puedes usar y hace que hacer cosas como esta sea realmente fácil. Entonces si quieres que algo sea, ah 100% altura vertical Ah, eso es lo que dio Así palmaditas 50 píxeles en esto. Por lo que quería un poco de relleno agradable en él. Tamaño de caja Indu. Ah, caja
fronteriza. Y cuando hacer frontera dejó un píxel sólido y quieren hacer forzar, y luego volveremos y haremos las transiciones. No voy a hacer las transiciones. Ah, en este punto todavía. De acuerdo, así que tenemos eso, uh, tenemos que sumar. Todo agregado aquí menu dot dot show. No lo hemos hecho aún no lo hemos hecho. Entonces, um, otra vez, voy a volver y hacer esa parte de ello. Pero por ahora, solo
quisiera hacer el estilo para que podamos verlo antes de empezar a ocultarlo en todas esas cosas. De lo contrario, se pone un poco difícil trabajar con. Entonces ahora quieres hacer menu dash knave así, y vamos a hacer margen cero relleno,
cero en el estilo de lista tipo none. Está bien. Y parece que yo dos semi colones de llamar aquí. ¿ Verdad? Por lo que eso nos pone configurados para el estilo del dedo del pie. El menú un poco. Sí. Deshazte de eso. Está bien. Cómo vamos a hacer dot menu, dash, nab a, y podemos apuntar a los enlaces reales dentro de aquí. Entonces vamos a mostrar bloque, y vamos a hacer relleno de siete píxeles. 08 pixels. Cero. Entonces eso es sólo una especie de lo que me di cuenta. Se puede una especie de lío sin un poquito. Yo quiero que la decoración del texto sea ninguna. Tratando de desplazarse aquí un poco y vamos a hacer el tamaño de fuente. Estoy haciendo 28 pixeles aquí. A mí me gusta soy una especie de lindo y grande así. Yo sólo, como, especie de la forma en que se ve. OK, así que ahora puedes ver aquí. Tenemos muy, muy similar a lo que tenemos con nuestra Nuestra caja aquí especie de pergaminos fuera así. Um, hablaremos del ancho aquí en tan solo un segundo, pero, ya
sabes, nuevo, es Tenemos un dedo del pie de estilo muy parecido a lo que teníamos aquí antes. Entonces esta va a ser una lección bastante larga. Uh, tenemos el menú construido, Lo
tenemos con estilo, que especie de consiguió la factura de cabecera y así sucesivamente. Y sólo tenemos que volver y necesitamos hacer algunas de las transiciones y así sucesivamente, y eso va a requerir algún javascript y tal. Entonces no quiero que esto se convierta en ah, 40 o 50 minutos lecciones, Así que voy a cortar esta de aquí, y luego volveremos en la siguiente lección y haremos todo el enganche en cuanto al script Java y el girando y todo ese tipo de cosas.
5. Animar el menú de la cabeza: De acuerdo, así que sigamos con este menú. Lo primero que voy a hacer aquí, sólo sacar esto de camino es entrar en esta carpeta de trabajo Soy y crear un nuevo un nuevo archivo, una nueva carpeta llamada Js para nuestro script Java. Simplemente arrastraré este aparecerá y luego cambiaremos el nombre de esto a que solo estoy llamando a este freelancer. Ah, Wanda gs así. Tan misma idea. Adelante y abre eso. Entonces está abierto, y luego necesitamos volver a nuestro índice de punto html y necesitamos incluir eso aquí ahora. Ah, con el JavaScript tanto como puedas. Quieres intentar ponerte estas cosas en tu pie o no necesariamente tenemos un pie o aún , pero vamos a seguir adelante y sólo vamos a sumar esto aquí abajo. Eso hará guiones, y vamos a estar usando a Jake cansado. Por lo que necesitamos incluir consulta J. Justo como dije antes. Ah, con el con las fuentes y la caída impresionante y así sucesivamente, literalmente
puedes simplemente Google J consulta Cdn y obtendrás ah link como este esencialmente y solo pegas eso aquí que va a incluir Ah j consulta. Entonces probablemente te resulte familiar. Probablemente hecho eso a la vez o dos. También lo hacen las fuentes de script iguales. Y ahora vamos a hacer nuestro archivo JavaScript desde nuestros sitios. Vamos a ir a freelancer. 01 puntos Js como este. Y eso va a incluir ese archivo Js que acabamos de crear. Entonces ahora tenemos G query, que vamos a usar. Entonces tenemos, um ¿tenemos nuestro, uh, archivo
javascript que vamos a usar aquí? De acuerdo, Entonces para nuestro menú, lo que esencialmente vamos a hacer es con el fin de hacer este toggle ing, vamos a usar Java script toe, agregar algún anuncio y quitarle algunas clases. Pero entonces realmente vamos a usar CSS para,
um, um, para manejar la animación y el escondite y mostrar y así sucesivamente. Entonces, ¿el JavaScript que quieres usar una especie de su luz de tacto lo más posible? No necesariamente Hacer todo en Ah, el javascript aquí. Entonces eso es lo que vamos a hacer aquí. Entonces vamos a hacer que Jake se
canse, y vamos a hacer documento enseñado, listo, y vamos a hacer función, y luego dentro de eso pondrá nuestros signos de dólar para que podamos usar eso. Y entonces este tipo de envuelve esto en, Ah, esta función anónima para que mantenga todo fuera del espacio global y evite que se desordene y entre en conflicto y así sucesivamente. Entonces lo primero que vamos a hacer es cambiar tenemos que varias cosas que
vamos a hacer aquí. Haremos esto por etapas, pero vamos a alternar el menú del TLCAN en el botón Click. OK, ahora voy a poner algunas variables. El 1er 1 es raíz Rex. Voy a usar eso más tarde. Pero lo voy a poner ahora porque sé que lo necesitamos. Y la ruta sólo va a ser HTML y cuerpo así. Entonces esto va a ser algo que necesitará un poco más tarde. Pero lo estableceremos para ahora mismo, y luego vamos a hacer el toggle de menú. Este va a ser el niño al que vamos a apuntar, y pondremos eso a nuestro menú clase de tacos. Entonces, esencialmente, lo que hemos hecho es que hemos creado una variable que esas referencias son menu toggle class, que es nuestro niño aquí que creamos para que eso sea realmente solo una
cosa de performance . Si vas a usar estas múltiples veces, quieres que quieras probar y hacer eso para que no seas constante volviendo al dom,
lo que duele el rendimiento. De acuerdo, así que una vez que tengamos esa configuración, entonces podemos hacer referencia a ese modificador de menú variable, y vamos a usar el método on así que
punten, ah, menu toggle dot on y luego vamos a hacer click. Entonces eso está en Click. Vamos a ejecutar esta función, y esta es una función anónima que estamos creando aquí y lo que vamos a hacer. Lo primero que vamos a hacer es crear una variable llamada esta. Entonces lo que sea que se haga clic ahora se ajustará a este ese elemento, uh, otra vez, esto es un hacer estableciendo esta cosa de variables o rendimiento, ¿
verdad? Entonces eso va a apuntar a lo que sea que se haya hecho clic. Entonces ah, eso es con lo que queremos meternos primero. Y así vamos a hacer esta clase de alternancia de puntos. Por lo que este es un método de consulta J y debilitar las clases de toggle. Entonces, cuando se haga clic, agregará la clase cuando se vuelva a hacer clic con el fin de eliminarla. Cuando volvió a hacer clic, Will agregó simplemente alterna eso de ida y vuelta en función de los clics. Entonces vamos a agregar y quitar la clase llamada Close Game usará esto en nuestro CSS aquí en tan solo un minuto. Y luego vamos a entrar a nuestro Dom y vamos a encontrar menú. Ah, menú knave. Ah, menú hombres, Tienes artículo que recuerdas. Estas son todas las clases que usamos cuando estamos construyendo nuestra clase, ¿de acuerdo? Y vamos a alternar la clase llamada Mostrar así. De acuerdo, entonces esto es lo principal que vamos a hacer para el toggle ing de esto y la idea. Aquí, déjame jalar esto. En realidad, déjame subir aquí y solo mostrarte en este. Es un poco más fácil, pero la idea aquí es si inspeccionamos esto y miramos nuestra caja de menú, tenemos nuestro toggle de menú. Está abierto nuestro menú aquí. Y hombres, hay
que ver aquí nuestros artículos de lista cuando hago clic en esto. ves, ahora todo esto obtiene el ítem que obtiene la clase de show y así eso nos permite apuntar eso con CSS. Y luego nuestro menu toggle consigue la clase de ropa. De acuerdo, entonces eso es importante. Eso es lo que vamos a usar en nuestro CSS para poder alternar Onda objetivo a todas estas cosas. De acuerdo, entonces es un poco difícil para mí hacer el inspector dentro de Ah, el yo d la nube. A mí me gustaría esto. Por eso yo ah, estoy usando este otro ejemplo aquí. Pero es el ST Esto es exactamente lo mismo que estamos haciendo aquí. De acuerdo, Entonces lo que debería pasar es que cuando hacemos clic en
esto, debería cambiar esas clases como esperábamos. Déjame ver si puedo. En realidad, probablemente
necesitaré usar ver la fuente del marco. Déjame ver si puedo conseguir que esto surja para que solo podamos comprobarlo dos veces. No fue lo que buscaba. Ah, eso mejor que podemos hacer es inspeccionarlo, y en realidad no nos da lo que buscamos aquí. De acuerdo, Entonces puedes ver que nos acercamos aquí. Y si bajamos aquí, menú tiene show. Ah, menú knave tiene show y todos los artículos tienen show aquí. De acuerdo, entonces estamos consiguiendo lo que necesitábamos. El JavaScript está agregando la clase Está agregando cerca del toggle, y está agregando show tow el menú y todos sus elementos. Entonces eso nos da lo que tenemos que hacer entonces para CSS para que podamos volver al menú para nuestro CSS aquí y ahora podemos empezar Ah, metiendo con algunas de esas cosas y escondiendo y mostrando y así sucesivamente. Entonces para el show, lo que queremos En realidad, ahora lo que podemos hacer es ir al menú, recuerda que teníamos esto ¿Es visible la visibilidad? Podemos cambiar esto por oculto así. Y así ahora el ah, el menú está oculto. Déjame refrescar está bien. Eso lo arreglaremos aquí en tan solo un segundo. En realidad no importa, porque cuando hagamos la transición, es ah, va a estar bien. Entonces de todos modos, podemos ir al menú, luego mostrar y podemos hacer visibilidad y podemos hacer visible. Entonces esta es una especie de la clase básica de toggle ing aquí, ¿
verdad? Entonces es que está escondido. Y luego cuando hacemos clic en él y agregamos esa clase show, vuelve así. Entonces esa es la idea básica aquí. Ah, es que esto es supongo que la sombra era de mí apuntando a este menú así. Eso fue lo que fue. Eso es lo que me está echando de todos modos. Ah, esto es una especie de escondite básico y muestra del menú. De acuerdo, así que esa es la idea básica. Y entonces esencialmente, lo que hacemos es simplemente añadirle algunas transiciones para que funcione un poco mejor. Entonces aquí arriba bajo el menú, entonces lo que vamos a hacer es cuando empieces y vamos a, um, hacer transformaciones así y vamos a hacer traducir tres d y vamos a hacer ah, 100 por ciento y vamos a hacer 00 Entonces, esencialmente, lo que hace esto es que se lo quita de la pantalla, ¿
verdad? Esta es una traducción de tres d. Entonces si miras un traductor tres d así y vamos aquí al final vacío No, te muestra que es una Es una especie de modelo tres D aquí. Y lo lindo de aquí es que puedes jugar con estos números para que puedas hacer,
como, como, 20 y te mostraré lo que hace, verdad? Por lo que para el 1er 1 son las salidas el movimiento de lado a lado. De acuerdo, entonces estamos configurando eso al 100% para que eso es esencialmente quitárselo de su fuera de la pantalla y luego los otros dos para arriba y abajo y adentro y afuera, Sólo
estamos estableciendo cero. No nos estamos metiendo con esos. No nos importan esos. De acuerdo, entonces eso es lo que hace la transformación es sacar ese menú de la pantalla para empezar, y luego crearemos una transición aquí. Entonces vamos a hacer transición, y vamos a hacer todos los 600 m s y él está fuera. De acuerdo, entonces eso se lo quita de la pantalla. Y luego cuando vengamos aquí para mostrar, vamos a hacer transformación y vamos a hacer traducir tres D y fueron 2000 Ok, entonces lo que eso hace es cuando la clase de show no está en su va a usar esta transformación, vale, y eso lo va a quitar de la página. Pero cuando le agregamos la clase show, ahora
se va a establecer en lugar del 100%. Se va a poner ese 20 que ser lo trae de vuelta a la página. Entonces así es como obtenemos ese efecto de deslizamiento y deslizamos hacia fuera de esto y otra vez, solo
estamos usando transiciones de CSS de tratamiento. Se puede ver la transición. Aquí especificamos. 600 milisegundos se alientan. De acuerdo, así es como conseguimos ese específico. Ah, transición ahí. También tenemos el menú. El caso de Toggle vendrá aquí. Haremos las cosas de alternar menú aquí abajo. Entonces vamos a hacer talk menu toggle, y hacemos f ah dot f Lo siento, ropa
doc y luego punto f a. Entonces es cuando eso clases de cierre aplicaron a esto. Entonces vamos a transformarnos, y vamos a hacer rotar y 180 grados. De acuerdo, entonces y luego Ah, vamos a Esto va a causar una rotación. De acuerdo, así que recibe. Se pega aquí. Se puede ver cómo todos giran así. De acuerdo, así que ese es el inicio. Nosotros los queremos a todos término, pero queremos que todos luego aterricen en una posición específica. Porque si recuerdas, lo que terminamos es con esta X Vale, entonces todos giran, pero terminamos con esta X. Así que tenemos la parte de giro. Ya tenemos la parte giratoria. Tenemos que, um Ahora necesitamos conseguir la construcción, la X esencialmente. Entonces vamos a hacer menu toggle. Ya vamos a cerrar. Vamos a apuntar a la FAA, pero ahora vamos a hacer cualquier niño, y vamos a hacer uno. Entonces vamos a estar apuntando a ese mismo top en el primer hijo. Y así vamos a hacer transformación, y vamos a hacer rotar, y vamos a hacer 45 grados y vamos a traducir, y vamos a hacer cinco píxeles. Cinco píxeles. De acuerdo, entonces lo que esto va a hacer, y ahora es en lugar de éste girando 180 grados va a tomar carretera 45 grados y luego va a traducir va a especie de va a cambiar la dirección en su lugar, sólo volteando todo el camino. Ya lo puedes ver. Se aterriza en cierto ángulo como este. Está bien. Y de nuevo, puedes ir al MGM y mirar traducir de nuevo y especie de hacerse una idea de cómo funciona esto. De verdad solo tienes que jugar con esto jugando con esto para conseguir esto exactamente donde lo
quieres. De acuerdo, así que ese es el 1er 1 Es una especie de la misma idea para los otros dos. Entonces solo copia y pega esto aquí y así para fin niño a este es el medio. Recuerda, vamos a una siguiente. Éste en realidad desaparece. El 2do 1 el medio. Entonces, en realidad, lo que vamos a hacer con este es que vamos a poner la opacidad a cero que va a hacerla desaparecer. Entonces si buscamos aquí arriba, haga clic fuera de eso. ves, ahora ese medio se ha ido y tengo estos dos tipo de lado a lado así, y luego para el último, sólo
necesitamos cambiar de dirección. Entonces es tipo cruza la otra y se ve como una S X. Así que vamos a hacer 45 grados negativos. Entonces ahora empezamos a tener el principio de un hacha, y luego simplemente tienes una especie de ah ah ah, Tienes que moverlo ahí hasta que se vea sobre derechos. Vamos a siete píxeles y seis píxeles negativos. Está bien. Y eso es solo por mucho juicio y aire, imaginando que cómo ah, simplemente
te metiste un lío con él. hasta que aterrice donde quieras. De acuerdo, entonces ahora tenemos un hacha, hacemos clic en la X, y gira de nuevo a nuestro ta go. Volvemos a hacer clic en él. Ahora tenemos nuestro tipo de efecto de alternancia aquí que buscamos. Todo está hecho con transiciones CSS. Entonces esta no es una clase de transiciones CSS, Así que estoy pasando por esto rápido. Si quieres aprender más sobre eso, recomiendo meterte en buscar una clase de transiciones CSS o tutoriales o algo que realmente
pueda indagar en eso. Pero eso te muestra cómo hicimos este aquí. Lo último que entonces vamos a hacer es que sólo vamos a hacer algo de respuesta. Porque si encogemos esto, es que montó un 30% ahora mismo. Y ya ves, se empieza a ir todo torpe aquí. En realidad queremos mawr de Queremos ver más de ella cuando tenemos tanto espacio. Entonces solo vamos a hacer alguna consulta de medios así en medios y haremos Max con de 1200 píxeles, y aquí vamos a establecer el menú en un ancho del 40 por ciento. De acuerdo, así que eso lo hace un poco más blanco. Y luego bajamos aquí, en realidad, así que esa es la idea básica. Déjame mostrarte aquí los diferentes. No creo que haya sentido y mírame tipear todo esto. Entonces entonces apuntamos 9 92 y lo dijimos al 50%. eso estamos justo aquí. Entonces puedes ver que ocupa la mitad de la pantalla y luego, ah, a las 7 68 va a ir lleno con. Entonces si nos ponemos súper, no
sé si podemos. Súper ancho, ves que vuelve a entrar. Ya lo ves porque agregamos esa transición, recuerda, aparecen en el menú. Tenemos esta transición aquí mismo que agregamos. Por eso se desliza así en lugar de simplemente chasquear. De acuerdo, eso es lo que crea ese efecto para que si nos desplazamos hacia abajo en un punto, se deslice hacia fuera al 50% y luego finalmente se va al 100% así. De acuerdo, así es Ah, así es como se hace. Es así como el menú tipo de la mosca fuera la rotación de las estas cosas y todo. Ese es todo el tipo de muchas cosas, excepto unas cuantas cosas cuando empezamos a agregar secciones y en realidad empiezas a hacer clic en éstas , um vamos a hacer un desplazamiento suave. Tenemos que hacer algún manejo de este menú en particular. Ah, tienes la opción de si puedes ocultarte automáticamente y así sucesivamente. Entonces hay un poco más que hacer aquí dentro. Pero mucho de eso va a ser yo creo que todo eso en realidad sólo va a estar en el
script Java . Entonces cruzaremos ese puente cuando lleguemos a él. Tenemos un montón, otras secciones que tenemos que crear aquí. Entonces ese es el menú. Esas son las transiciones, etcétera, Um, y cómo hicimos todo eso.
6. Construir la sección de Acerca: justo Ahora que tenemos el menú, tenemos construido nuestro sistema de rejilla. Podemos una especie de meternos en empezar a construir algunas de las secciones en el sitio aquí. Por lo que habíamos empezado a construir esto sobre sección aquí. Al menos construimos la sección aquí, así que sigamos adelante y Ah, remate esto. Entonces tengo nuestra sección aquí. Hablaremos de por qué hacemos eso en un segundo. Entonces haremos clase div igual y haremos nuestro contenedor. Y luego dentro de eso, por
supuesto, hará una fila. Y luego vamos a hacer ah div clase iguales iban a hacer dos columnas llamar a seis y como tú solo haces dos de esas. Así lo hacen la clase activa igual a llamada seis. Está bien. Y en eso estamos trabajando aquí sólo para arrastrar esto hasta aquí. ¿ Es esto justo aquí? Entonces va a tener ah, la imagen de la izquierda y luego este texto de la derecha y vinculado para obtener una cita aquí. Ahora una de las razones por las que hacemos este apartado y luego ponemos el contenedor dentro del tramo. Si recuerdas desde nuestra cuadrícula CSS nuestro contenedor cambia ese tamaño en función del ancho de la pantalla. Entonces cuando queremos hacer una especie de estos llenos con fondos como ves,
como, como, digamos esto aquí mismo cómo esto estira el ancho completo del navegador aquí, no importa lo grande que vayamos aquí. Pero queremos tener estas cosas dentro de ella ser un poco una especie de centrado y no lleno con así. El apartado en realidad le damos el color de fondo también. Y luego ponemos nuestro contenedor dentro de eso para crear donde está una especie de centrado aquí. De acuerdo, entonces por eso tenemos la sección así. Um es poder hacer eso. Por lo que envolvemos todo dentro de una sección y luego no debilitar estilo el fondo de la sección para ir lleno con. De acuerdo, Entonces lo que vamos a hacer aquí es que en realidad necesitamos venir aquí a nuestra
carpeta de trabajo , y necesitamos crear una nueva carpeta, y necesitamos llamar a eso imágenes. Entonces vamos a hacer imágenes, y en realidad sólo voy a subir aquí. Ah, de este de aquí y agarra esa imagen. Entonces, um, veamos a Joe aquí mismo y a Kim o si hacemos Zhou o Zhou Developers Joe Developer. Entonces solo copiaremos esto y bajaremos aquí y lo trozaremos aquí. Hablaremos del portafolio en los testimonios y todo eso un poco más tarde. De acuerdo, entonces eso nos da nuestra foto ahora. Ah, esa imagen cree que en realidad es cuadrada. Veamos ser una apertura y mírala. Y así es en realidad un cuadro cuadrado. Pero si recuerdas en nuestro sitio aquí tenemos una imagen circular. Entonces en realidad vamos a hacer eso a través de CSS. Entonces por supuesto que no necesitas hacer eso. Si no quieres Teoh, recomiendo que en lugar de hacer circular la imagen ah, en lo real como photoshop o lo que sea haciéndolo en CSS. Entonces si quieres cambiar más tarde, es algo que es fácil de cambiar. Entonces aquí vamos a caer en esa imagen. Vamos a nuestra imagen, y vamos a hacer iguales de clase. Yo estoy G rodeado. Hablar de eso. En un segundo, d igual a avatar, y luego vamos a hacer fuente igual y vamos a hacer imágenes y luego Joe Dash, desarrollador ah dot y J Peg. Y sigamos adelante y recorremos todo esto solo un segundo y lo haremos. Ault es igual a Joe. Ah, supongo que los freelancers realmente lo que es, ya
sabes, mezclar y emparejar esos. De acuerdo, entonces eso nos da nuestra imagen ahí. Si tiramos esto hacia atrás, podemos ver. Ahora tenemos esa imagen. Es ah, una especie de centro ahí y así sucesivamente. Está bien, vamos a acercarnos. Esto así que eso nos da eso. Y luego aquí dentro, vamos a crear Ah, vamos a hacer el texto real. Entonces esta es una de las cosas con HTML, especialmente el marcado semántico Samantha que realmente vamos a hacer cuando crees una sección, Ya
sabes, el mdn dice que realmente siempre debes tener un encabezado dentro de cada sección que tenga el título para esa sección. Entonces eso es lo que realmente vamos a hacer aquí. Vamos a crear una etiqueta de encabezado y vamos a darle a eso una clase de encabezado de sección, ¿de acuerdo? Y eso nos permitirá apuntar a esos encabezados de sección. Y luego dentro de eso, tenemos nuestra h one, y en realidad, vamos a darle a eso una clase de título de sección, y luego estamos agregando algo Ah, estamos agregando algunas otras clases aquí. Vamos a citar título porque es un título de sección. Pero también es el título del sitio y vamos a enviar un texto a la izquierda. Muchas de estas clases aún no existen, así que vamos a hacer estas. Pero entonces vamos a hacer lo alto. Yo soy Joe parte aquí, ¿de acuerdo? Y luego vamos a tirar de esto hacia atrás, y luego vamos a hacer el texto del párrafo real, así que voy a dejar esto dentro. Es un poco más fácil. Aquí hay unas cuantas filas, Um, no necesariamente vale la pena escribir todo esto. Pero déjame dejarme caer esto. Y lo grande aquí es que los estamos poniendo en una etiqueta de párrafo que tiene una clase de plomo. Entonces, ya
sabes, dice
que he sido intérprete mundial freelance 14 años. Tienes que tener algunos lugares donde hago énfasis aquí. Um, pero en realidad son solo etiquetas de párrafo con la clase de plomo, acuerdo. Y luego lo último que ponemos aquí es que vamos a poner en nuestro botón get quote, así que vamos a hacer una clase igual y íbamos a tener y luego vamos a hacer tener
primaria y luego vamos a hacer un borrador igual y vamos a enlazar a contacto que aún no hemos creado. Pero lo haremos el hombre sí va a conseguir cotización así. De acuerdo, así que ese es el HTML. Te darás cuenta de que tenemos contra varias diferentes Ah, varias clases CSS diferentes que en realidad aún no hemos creado. Entonces vamos a tener que ir a través y crear algunos de esos y luego ah, lidiar con algunos de los estilos específicos de esto sobre la sección Ah también. Entonces una de las cosas que hago si vamos a nuestro archivo CSS aquí, ¿notaste que empecé con cuerpo y luego especie de aquí abajo tengo la sección de encabezado , pero en realidad después del cuerpo porque pienso que el cuerpo es una especie de un reinicio. Entonces hago lo que llamo estilos globales y estilos globales no son algo que se
relega a una sección en particular hay cosas que se pueden utilizar en cualquier sección y así, como nuestra imagen redondeó nuestra risa de texto. Ese tipo de cosas son lo que yo consideraría estilos globales. Y así ah, estas son las cosas con las que vamos a trabajar aquí. Por lo que el 1er 1 es una sección. Por lo que creamos la sección. Ahora queremos dar la sección Ah, poco de estilo. Aquí, déjame jalar, tratar de tirar de esto por sólo dedo del pie. Entonces ahí lo conseguimos un poquito. De acuerdo, entonces vamos a hacer esta sección, y luego queremos tener relleno y vamos a hacer 60 pixeles. 20 pixeles como este. Yo sólo como que tú puedes jugar alrededor de eso. Esa es sólo una especie de la forma en que me gustó que se viera. Y esto va a sumar esto a cada sección. De acuerdo, así que no sólo esta, porque vamos a dar a cada sección una clase de sección sólida y hacer F one F one f orm. De acuerdo, así que ahí está y luego vamos a hacer Ah, el título de la sección. Entonces título de sección y vamos a hacer tamaño de fuente. Y vamos a hacer 48 píxeles,
hacer la altura de línea de uno y textualizar el centro de línea y luego el margen. Ahora el centro de línea de texto. En realidad vamos a anular en esta sección, y se siente como si algo estuviera apagado aquí. A lo mejor me perdí algo aquí con esto porque la h one me etiqueta refresco esto. De acuerdo, así que ahí está nuestra h one tachuela. En realidad vamos a volver a cambiar eso, porque ya verás aquí arriba. Eso en realidad no está centrado aquí arriba, pero para la mayoría de nuestras secciones son títulos de sección van a ir justo al otro lado de la parte superior aquí, y vamos a querer que se centren. Entonces de nuevo, este es el estilo global que estamos haciendo aquí Volverá a entrar y anular eso Ah, cuando lleguemos a la sección real aquí. De acuerdo, entonces ahora tenemos nuestros leads iban a puntar y vamos a hacer una altura de línea de 1.25 Y vamos a hacer tamaño de fuente encendido, y vamos a hacer 1.3 ram, y vamos a hacer texto el centro de línea, y de nuevo, vamos a anular eso en esta sección en particular. Pero para todas nuestras otras secciones, vamos a quedárnoslo. Envía ese margen inferior 35 pixels. De acuerdo, entonces eso nos da a la sección el título de la sección de título, la etiqueta de plomo que hemos agregado. Entonces tenemos ah, estos tres tipos de modificadores aquí y todo. Simplemente voy a dejar caer el's en porque son bastante simples de entender. Por lo que Tech Center va a establecer la línea de texto a senador. Texto a la izquierda. No está texturizado de centroizquierda, senador. Correcto. Entonces eso es ah, cosa
bastante sencilla. Otra que teníamos era imagen a su alrededor. Y tenemos algunos más que me voy de aquí porque en realidad no los estamos usando todavía . A medida que los
usamos, los añadiremos en, pero imagen redondeada. Y la forma en que conseguimos eso es, vamos a establecer el radio de frontera al 100% para que eso nos dé nuestra imagen redondeada. Y luego teníamos nuestros botones. Entonces vamos a tener primero fuera nuestra clase de botones así, y lo haremos, uh aquí es donde vamos a hacer una especie de la forma y el color predeterminado y así sucesivamente. Entonces vamos a hacer el dimensionamiento de cajas. Nos vamos a cuadro fronterizo y luego dijo la decoración del texto a no mostrar en línea. Queremos que sea una cuadra oops, bloque. Y entonces bueno, por defecto hará un fondo de C
c, C así, y haremos un color de negro así. Entonces esa es una especie de va a ser los colores de botones por defecto. Y luego haremos una palmadita de 15 píxeles y 20 píxeles para que puedas ver el botón tipo de cambio por ahí. Hacer frontera ninguno. Y haremos una espera de fuente de negrita. De acuerdo, así que eso es otra vez. Ese es el defecto. Busca los botones. Y luego, um, vamos a hacer botón primario. De acuerdo, entonces eso nos va a dar nuestro color. Recuerda, agregamos eso a este botón, así que vamos al botón primario, y vamos a hacer un color de fondo, y este es solo uno que tipo de escogí. Puedes elegir lo que quieras, pero es una especie de ese color púrpura. Por lo que 890 b d d resulta ser el color. Y luego ponemos el color de la fuente en blanco. De acuerdo, así que eso nos hace ver algo parecido a lo que estamos tratando aquí. Aquí se puede ver. Todavía hay algunas cosas que están un poco fuera de aquí. Ah, con
eso tenemos que meternos. Y así que muchas de esas cosas van a bajar a la sección real, uh, uh,
la de aquí. Entonces después de que tenemos, tenemos una especie de nuestro cuerpo tipo de cosa tipo reset ish. Tenemos nuestros estilos globales. Después entramos en nuestra sección cosas específicas. Entonces tenemos cabecera. Ahora estamos en la sección sobre así que vamos a hacer al respecto sólo voy a dejar eso ahí. No me voy a preocupar demasiado por eso. Podemos limpiar todas esas cosas. Ah, después. Entonces para la sección sobre, entonces estamos recordando dijimos un yo d para la sección sobre lo estaban apuntando específicamente. Entonces vamos a usar eso yo d Estamos haciendo relleno top de 120 pixels principalmente para alejarnos de ese menú. Porque ese menú es un fijo. Es menú fijo. Está posicionado fijo. Está bien. Para título del sitio, recuerde, El título de la sección para esta sección es también el título del sitio. Entonces vamos a hacer algún título de vista, y estamos haciendo tamaño de fuente para RAM. Por lo que habíamos peinado los tamaños de sección normales. Pero éste es diferente, su único. Por eso lo estamos anulando. Vamos a hacer color,
hacer ese color púrpura otra vez. 890 b d. D. Así. Y luego vamos a hacer ah familia peleada y vamos a hacer Yellowtail. Recuerda, agregamos Yellowtail de antes. Es por ello que agregamos Yellowtail. Y luego haremos una copia de seguridad de San serif cursivo. Cualquiera que sea el derecho. Entonces eso es lo que nos da nuestro texto. Eso parece que esto es sólo cambiarlo a eso. Ah, ese aficionado a Yellowtail en este momento vamos a darle estilo específicamente a los párrafos principales en nuestra sección
sobre. Entonces haz sobre I d clase lead, donde en su lugar, el tamaño de fuente el ram 1.35 Cuando fije la altura de la línea, vamos a poner eso en 1.3 y luego vamos a darle estilo al propio avatar. Recuerda, le
dimos esto Ah! Ah. Uh, esta imagen aquí idea de Avatar. Entonces vamos a darle estilo específicamente y le vamos a dar un ancho de 400 píxeles como este. Ese tipo de lo vuelve a alinear con lo que queremos. Altura, Auto. A pesar de que eso realmente no debería importar. Vamos a mostrar bloque para que podamos centrarnos y luego vamos al margen cero auto , ese tipo de centros en un poco. Y entonces podemos hacer posición relativa, y podemos hacer top y podemos hacer 50 por ciento. Eso va a empezar a centrarlo verticalmente, y luego sí nos transformamos. Recuerda Fran transformarse de antes. Este es un pequeño tipo de truco para conseguir centrado vertical, pero traducir ¿por qué? Y vamos a hacer negativo 50% y eso nos pone centrados en el medio. Entonces si haces esos juntos posición relativa superior 50% transformado traducir. Blanco negativo. 50%. Eso te da otra vez un pequeño truco para conseguir estos, uh, centrados aquí, así que Ah. Parece una última cosa que tengo que hacer aquí. Ah, es volver a Ah, aquí. Todos estos que tienen Vamos a ver. Eso es justo aquí. Creo que, Ah, creo que puedo simplemente debería poder poder En lugar de añadir texto dejado todos estos, solo
debería poder ir a aquí y hacer texto que queda ahora. Pensé que aquí no funciona. Déjame a mí. Ah, sólo
refrescamos mi memoria Exactamente lo que hice aquí. De acuerdo, bueno, lo
mantendremos simple aquí, y solo volveremos al CSS aquí sobre el punto lead, y solo haremos texto una línea que queda así. De acuerdo, entonces eso nos da nuestro texto de alineación izquierda. Ah, aquí. Y así vamos a venir y especie de ampliar un poco esto y hacer clic fuera de aquí. Se puede ver algo, pero eso nos da si volvemos. Bajen esto. Tenemos looks bastante idénticos a lo que teníamos su OK, así que así es como hacemos la sección sobre y de nuevo el botón aquí, solo una especie de cuando haces click en este pequeño click hacia abajo a la sección de impuestos de contacto. Um, hay otra Una de las cosas que hago también aquí es que he empezado a hacer esto. He visto a algunos otros hacerme esto. A mí me gusta para consultas de medios. Lo que solía hacer es simplemente poner toda la locura mediática al fondo. El problema es, es que ya sabes, las consultas de medios referenciaron diferentes secciones. Si los pones todos al fondo, entonces como que te dieron un rebote de ida y vuelta. Y así me pareció un poco más fácil organizarlo. Simplemente haciendo mis consultas de medios para una sección en particular. Ah, aquí mismo en la sección misma. Entonces sé que esta consulta de medios, estos cuatro, esta sección en particular así que vamos a hacer sobre y luego estamos en punto Ah, título
del sitio y vamos a hacer texto al centro de línea así. De acuerdo, Y eso sólo va a cuando esto finalmente se patea así va a lograrlo. Entonces este centro de Texas, en lugar de estar a la izquierda, alineado, ¿de acuerdo? Y ahora podemos hacer si quieres, podemos hacer lo mismo por el botón y etcétera. Ah, en algunos de los queer, algunas de estas cosas, Vamos a meternos en algunas consultas de medios y otros lugares. Um, y en realidad, sí, eso. Entonces si volvemos a subir a nuestros estilos globales y vamos a nuestro botón, en realidad
tenemos uno aquí, también. Entonces medios y mi ex ingenio, 760 píxeles y vamos a hacer botón de punto como este, y vamos a hacer con 100% así y margen cero auto y centro de alineación de texto. De acuerdo, así que eso hace que nuestro botón sea así. Si quisieras centrar el este texto aquí, sin duda
podrías agregar esa consulta también. Ya sabes, eso no es algo que ah, ya
sabes, en este punto que eso quería prefiero dejara una línea como esa. Um, y así ah, puedes hacer eso. Entonces, todos modos, me gusta poner estas consultas de medios aquí, Así que sé que esta consulta de medios va con esto. El algo en esta sección de las clases en esta sección. Ya sabes, esta consulta de medios viene con los va con las clases o yo ds en esta sección en particular, y no estoy teniendo que encontrarlos en las cosas de abajo. Entonces, um, eso es otra vez, eso es algo que me gusta hacer ahí. Pero esta es la sección sobre Ah, se
puso eso estilizado. Seguiremos aquí. Ya veo. Tal vez haya un poco de algo con el relleno aquí, y cuando nos desplazemos aquí arriba así, así que vamos a seguir adelante y ah, arreglar algunas de esas cosas. Pero voy a seguir adelante y terminar este video aquí, y vamos a pasar por algunas de esas cosas a medida que avanzamos aquí.
7. Construir la sección de habilidades: Está bien. Esta lección. Nos vamos a meter en esta sección de mis habilidades aquí. En realidad podrás ver un ejemplo de estilizar el fondo aquí y así, force. Vamos a hacer eso. Hablar de una lista de características antes de hacer eso. Aunque, dejé la última lección hablando de limpiar este espacio aquí abajo y luego esta foto viniendo encima de aquí. Entonces lo primero es,
Ah, Ah, me acabo de perder una parte de la declaración CSS aquí en el encabezado set. Una de las cosas que queremos hacer es establecer el Índice Z aquí 23 y eso realmente
lo hará para que cuando nos desplazemos hacia abajo todo lo demás pase por debajo de él. Entonces eso lo conseguimos. Ah, el espacio aquí. Suficientemente interesante. No me había dado cuenta de esto cuando yo cuando había construido esto antes, pero eso en realidad está ahí en la responsiva tú. Ah, y lo que construí hasta ahora por lo que realmente necesitaba agregar algunas cosas que no estaban en el original. Entonces lo que vamos a hacer es ir a la grilla que CSS y tenemos esto Sin canaleta. Ahora vamos a agregar esta aplicación llamada sin brecha porque ninguna canaleta son los huecos entre
columnas y se puede ver que estamos configurando brecha de columna de cuadrícula y nuevamente queremos eso para nuestro
Queremos eso para nuestra sección de portafolio, pero también está el la parte a continuación cuando tienes un Siri's cuando tienes una fila en particular. En este caso, también
hay espaciado que se puede agregar debajo de eso. Y así puede que queramos no quisiéramos tener ese mayo. Quizá queramos deshacernos de eso. Entonces solo decidí crear una nueva declaración CSS llamada No Gap and Set the Grid gap 20 Y así, entonces, para arreglar eso, lo que hacemos es venir. Una vez que tenemos esa declaración CSS, entonces nos acercamos al encabezado de nuestro sitio aquí y llegamos a nuestra fila porque si recuerdas en cuadrícula, establecemos la brecha de cuadrícula en 20 píxeles en la fila aquí. Entonces, um y probablemente podríamos hacer esto como brecha de columna de rejilla en lugar de brecha de rejilla. Um, y eso podría haber sido realmente probado esto. Déjame ver aquí. Sí, mira, Así que eso lo arreglaría también. Se puede ver que eso se ha ido porque ahora no estamos agregando la brecha a continuación, así que esa es una forma en que se podría arreglar esto. Um, pero también podría verte diciendo:
Bueno, Bueno, eso
quiero. Son solo que no lo quiero ahí para esta en particular, ¿
verdad? Yo quiero un poco de brecha cuando estoy haciendo Rose. Simplemente no lo quiero para ese en particular. Por lo que de nuevo, hemos añadido esto. No hay brecha. Ah, no hay clase Gap aquí. Entonces sólo venimos por aquí. Llegamos a nuestra fila para nuestro encabezado aquí, y agregamos este caso sin clase de brecha fue de dos maneras diferentes en que se puede hacer eso. Realmente ordenar depende de ti. ¿ Qué? Tus preferencias. Pero eso se pone la palabra de esa brecha y ahí que ese extra y nos desplazamos esto hacia fuera. Entonces vemos que sigue siendo igual. Haz aquí nuestro menú. Todo sigue funcionando igual. Seleccionar que limpia que esas cosas arriba a continuación. Entonces vamos a bajar y vamos a ir a nuestra siguiente sección, que va a ser nuestra sección de mis habilidades. Entonces vendrá aquí abajo, va a crear nueva sección y le dará a la clase igual a sección así y déjame
desplazarme por aquí solo un poquito. Sección tan clásica. Y luego le vamos a dar a esto un yo D. De habilidades. Recuerda, todo
esto necesita tener lo hice i ds Porque nos estamos vinculando con ellos en nuestro menú. De acuerdo, entonces no es solo para la segmentación CSS. También es para fines de vinculación y luego una especie de lo que solías div clase es igual a contenedor , y vamos a hacer un div de Roe como este enemigos Rhone up Así y entonces vamos a tener ah div class con una columna de 12 12 calma. Entonces vamos a hacer clase igual y esto va a ser una especie de nuestro encabezado, ¿recuerdas? Ah, llama a 12. Ah, del mdn. Dice que cada sección realmente debería tener un encabezado con una h one tag para que las máquinas sepan que para esta sección este es el encabezado. Puedes ponerlo en cualquier lugar ahí dentro, pero cuando buscará esa etiqueta de encabezado y así vamos a clase es igual a encabezado de sección . Y ahora estamos empezando a confiar en algunos de esos estilos globales que creamos antes de Section header to H una clase igual título de sección, escucho Y entonces haremos mis habilidades. De acuerdo, Así que ahora estamos consiguiendo algo de ese estilo. Estamos consiguiendo el relleno alrededor de la sección. Estamos consiguiendo los tamaños de fuente en los pesos de fuente y todas las cosas que hicimos, um, para darnos este tipo de estilo automático aquí. Muy bien, Siguiente vamos a hacer P clase igual y vamos a hacer plomo. Y entonces solo voy a dio tengo las habilidades para hacer tu trabajo. ¿ Verdad? Aquí estaban me especialicé en algo así. Por supuesto que puedes poner lo que quieras aquí, pero eso es lo que estoy poniendo aquí, y ese es nuestro encabezado. Por lo que tenemos tenemos nuestro encabezado tenemos un título para y tenemos una descripción para ello. Eso es una especie de lo estándar que quieres probar y hacer con cada sección que
creas . Cuando crees una sección como esta, asegúrate de tener una cabeza o ah, y una descripción. Ahora realmente vamos a hacer de nuevo la lista de características. Recuerda, se ve
así, así que vamos a hacer algo sencillo como eso y vamos a crear una
lista de características , y no vamos a hacer ah, en lista de órdenes. En realidad sólo íbamos a hacer, um vamos a hacer Ah, dibs por esto. OK, así que vamos a hacer Ah, en realidad, necesitamos dedo del pie salir de este camino porque vamos a hacer una nueva fila en realidad va a hacer
toda una nueva fila dentro de aquí, así que Div Class es igual a fila y estamos va a darle una clase extra llamada lista de características. Muy bien, entonces y entonces vamos a hacer Vamos a hacer tres de estos. Se va a DIV. Clase es igual a fuerza de llamada. Vamos a hacer ingenio de cuatro columnas. Vamos a hacer elemento de función, así que va a haber por cada ítem, y luego vamos a hacer centro de texto así, ¿de acuerdo? Y dentro de eso, vamos a tener un íconos estaban usando fuente. Impresionante. Entonces yo clase igual a f A y F A Este lo vamos a hacer yo y luego vamos a llamar a esta característica Icahn para que podamos apuntarlo si queremos. Correcto. Entonces ese es el ícono. Y luego dentro de eso, vamos a tener una etiqueta h tres vamos a dar a esa clase igual título de largometraje. Y me gusta Teoh. A mí me gusta hacerlo así Donde doy cada tipo de cosas Ah, clase para que pueda pueda apuntarlo muy, muy fácilmente. Y cuando nos metemos en los C s, no
creo que apuntemos a cada cosa, pero apuntamos a una buena cantidad, y en algún momento, puede
que quieras hacerlo. Entonces vamos a un párrafo de, um, descripción
destacada como esta, y déjame simplemente copiar esto. Es solo un poco más fácil simplemente copiar el texto. Es sólo el texto para este en particular. De acuerdo, entonces lo que tenemos aquí, entonces, es que tenemos este artículo, y está en una fila en una columna todo eso. Tenemos una Nikon, tenemos un título, y tenemos una descripción para cada uno. Ah, una de mis habilidades aquí. De acuerdo, Entonces lo que voy a hacer es sólo una especie de dicho retipificar los últimos tres. Sólo voy a pegar los dos últimos o lo que sea por aquí. Entonces nos dieron dos más. Igual que eso. Diferente icono, Tipo de nombre diferente. Um, nadie, en realidad. Aquí, permítanme corregir eso. A I especie de doble copiado aquí. Me despacio. Entonces tenemos de nuevo un ícono, un título y una descripción para cada uno de estos. Se puede, por
supuesto, cambiar esos a lo que se quiera. De acuerdo, entonces ese es el HTML para la sección otra vez. Bastante sencillo. Pero ahora quiero meterme en el estilo de verdad, uh, todo esto. Entonces lo que vamos a hacer es volver atrás. Déjame seguir adelante y guardar esto y ver esto Looks like teach to mountain Save, y vamos a volver a nuestro freelancer. Archivo CSS 01. Aquí y otra vez, estamos. Aquí hay un par de cosas. Entonces una lista de características como esta es algo que podríamos usar en múltiples lugares, Por eso lo escribí de la manera en que el cada huele de la manera que lo hice. Entonces en realidad voy a poner la mayor parte del estilo para ello. Algunos de los estilos básicos bajo estilos globales. Y entonces vamos a pensar que tenemos un poco para la sección de habilidades. En realidad, no mucho para la sección de habilidades. Por lo que la mayor parte de esto va a venir de la lista de características porque una vez que tengas el CSS escrito, puedes caer en una lista como este tipo de cualquier lugar usando ese sabio, mismo HTML y eso hace que todo Ah, diablos de un mucho más fácil lo hace más reutilizable y así sucesivamente. Entonces definitivamente lo que recomiendo hacer con esto. Vamos a entrar aquí bajo botón primario y vamos a hacer función. No recuerdo esto era una especie de contenedor de cada artículo, y así que vamos a hacer relleno y vamos a hacer 20 pixeles para darle un poco de relleno . Y luego vamos a hacer el largometraje Icahn. Entonces vamos a apuntar al ícono. Y vamos a darle a esto un tamaño de fuente de 24 24 píxeles o 1.5 rim Ramsar basado en lo que sea . Ah, tamaño de
fuente ha sido seleccionado especie de por el dispositivo. Entonces si están en un teléfono o una computadora, qué navegador en particular. Generalmente son 16 píxeles, por lo que 1.5 ram sería el mismo que 24 píxeles serían 16 más 8 a 24 píxeles. Entonces para eso están las llantas. Generalmente, deberías realmente usar los reinos. Yo sólo tengo esta costumbre de hacer los retrocesos como lo estoy haciendo aquí. De acuerdo, entonces vamos a hacer un fondo en estos iconos. Vamos a usar esos colores morados vamos a hacer 890 b d d Eso les da un poquito de fondo. Vamos a hacer que los íconos sean blancos así. Y luego hagamos relleno de 15 pixeles. Se puede jugar con algo de esto, y luego vamos a hacer nuestro radio fronterizo del 100% y eso va a maquillarnos bien y redondo . De acuerdo, así que eso nos da los lindos iconos redondos ahí. Después de esto es largometraje y vamos a hacer título. Así que da estilo a los títulos de título aquí. Vamos a hacer tamaño de fuente y hacemos 28 pixeles. Um, en y estamos en relleno de fondo de 10 píxeles y luego bordear fondo un píxel sólido cada 40 44. OK, así que nos da un poco de estilo como este nos da nuestra frontera y así sucesivamente. Entonces esa es la sección de título. Ahora la sección de descripción que ves, porque estamos haciendo esto Ah, porque les dimos todas estas clases descriptivas que hacen que sea realmente fácil apuntar. Estos tan característica descripción hará tamaño de fuente 20 píxeles y tamaño de fuente en 0.25 habitación. No te dejes atrapar en el hecho de que yo no lo hice aquí arriba. No lo hice cuando lo escribí por primera vez. Probablemente sólo se olvidó. Y luego las matemáticas para 20 ochos un poco. ¿ Qué hay en 1.75? Es así, tamaño
de fuente 1.75 alrededor. Simplemente no quería hacer matemáticas sobre la marcha aquí, pero creo que eso es correcto. Está bien. Y luego para la descripción hará línea alta. Simplemente no te pongas demasiado atrapado en esas cosas. Eso sólo soy yo siendo inconsistente. Está bien, Así que eso nos da, entonces son mi sección de habilidades Ah, nuestra lista de características que podemos usar y estamos usando en esta sección de mis habilidades aquí. Ahora, lo último que vamos a hacer aquí es que vamos a bajar y vamos a crear una nueva sección aquí llamada Skills. Entonces no tenemos una tonelada de estilismo que hacer aquí, pero tenemos un poco. Entonces vamos a hacer habilidades y luego crear nuestra sección tipo de título aquí. Y todo lo que necesitamos hacer es realmente darle estilo a esta sección en sí misma. Y de esto es de lo que estoy hablando. Vamos a hacer antecedentes, y vamos a hacer el número F A f A f a y eso le da un poquito de ese
fondo grisáceo . Entonces déjame sacar esto de nuevo aquí un poco para que veas que esto es blanco aquí arriba . Ahora, tenemos un poco de ese fondo grisáceo estira todo el tipo de ancho
del navegador, al igual que lo que teníamos aquí de nuestro original. Entonces esa es la sección de mis habilidades. También está construyendo una lista de características. Lo ponemos en la sección de estilo global para que podamos reutilizarlo si queremos crear otra lista de
características como esta. Tenemos un poco de estilo básico. Um y luego si quieres anularlo,
bajarías a la sección específica cuatro dondequiera que estés agregando esa lista de características , y la sobrescribirías. Entonces así es en general como traté de organizar mis ojos CSS, tener estilos globales, y luego cómo tienes tus secciones individuales y así sucesivamente y comienzas con el estilo más global. Entonces empezamos por el muy,
muy arriba con, ya
sabes, apuntando al cuerpo y todo párrafo e impuesto de importación como muy, muy amplio. Después entramos en títulos globales, que son clases de estilo que vamos a usar Ah, a lo largo de múltiples secciones y múltiples páginas y así sucesivamente. Y luego terminamos abajo en diferentes tipos de componentes, realmente como una lista de características y así sucesivamente. Y luego te metes en tus secciones individuales y luego si quisieras, si tienes varias páginas, te debajo de eso, te pondrías en ah ah, estilo para páginas específicas en el sitio, que tú lo pueden hacer. Se parte de los movimientos más generales hasta el más específico. Y así es en general como debes hacer tu CSS con la forma en que funcionan las hojas de estilo en cascada y la cascada hacia abajo. Ah, eso es lo que quieres hacer.
8. Construir la sección de portafolios: esta lección. Vamos a estar construyendo esta sección de mi cartera aquí vamos a estar usando el
guión de consulta Ah J llamado Fancy Box para hacer eso. Si lo miras aquí, una especie de pops se alivia. Y luego tiene una cosa. Podríamos hacer click a través de todos los diferentes proyectos aquí. Entonces eso es lo que vamos a estar construyendo esa sección en esta lección, antes de meternos en eso, he estado notando que esta imagen especie de se sigue superponiendo. Pudiste haber visto que esto está bien, ya que estamos pasando, y yo sólo como que estaba pasando por el curso y yo iba en el fondo de mi mente. ¿ Al igual que qué? Porque sabía que había puesto esta imagen aquí y el Mac Max con fijo aquí. Pero notarás que aquí tengo un tipográfico. Entonces si has estado notando que si cambiamos eso a Max dentro, esto hace lo que se supone que lo haga ah, muchas veces, es como va. Cuándo, cuando estás codificando. Así que sólo quería una solución rápida que realmente rápido. Ah, y entonces podemos seguir adelante aquí. Entonces para construir esta sección de portafolio, lo primero que hay algunas cosas que tenemos que hacer para configurar esto. Entonces en primer lugar,
voy a venir aquí del pie de la estructura de carpetas aquí y a nuestra carpeta de trabajo y debajo de nuestras imágenes aquí, voy a crear una carpeta nueva y voy a llamar a este portafolio. Entonces vamos a poner todas nuestras fotos de portafolio aquí y luego dejarme arrastrar esto muy rápido. Ah, estas son las imágenes que vamos a usar. Y quiero decir, estos aire acaban de editar en tienda de fotos. Esencialmente, verás aquí tenemos un 1920 por 10 80 luego tenemos una versión más pequeña, que es 300 por 169. Y eso es sólo una especie de lo que me di cuenta otra vez por sólo una especie de meterme un
poco con esto y conseguir las dimensiones que pensé que se veían bien y que quería que se pudiera jugar con eso. A lo mejor quieres tres a través, o tal vez quieras cruzar o seis a través de lo que quieras, pero puedes jugar con eso. Pero tú quieres imágenes. Quieres la imagen más pequeña aquí y quieres la imagen más grande aquí dedo del pie mostrar
esto así para que cuando la gente haga clic en esa imagen pequeña, salga. De acuerdo, Entonces lo que voy a hacer y estos son quiero decir, acabo de conseguir estos de, Ah, creo que acabo de obtener estos de, como, píxeles o uno de los sitios libres de regalías que es ahí fuera para imágenes. Por supuesto, para ti, si este es tu portafolio, vas a estar usando fotos de tus artículos de cartera o si es para un cliente o lo que sea, entonces vas a estar usando sus fotos que ellos probablemente necesitarán proporcionarte. Pero conseguir estos aire sólo una especie de posicionadores para esta demo así que voy a hacer es sólo
voy a tomar todos estos y vamos a subir esos en esa carpeta de portafolio que acabo crear. Entonces estábamos todos esos ahí dentro, así que eso es lo primero que tenemos que hacer. Lo siguiente que tenemos que hacer es que tengamos ah, caja de
fantasía instalada y así están como cargados aquí arriba. Y así si no estás familiarizado con la caja de fantasía acabará de venir y solo podemos google fancy box y lo verás justo en la parte superior. Aquí. Este en realidad es una especie del sitio antiguo Quieres usar el que es de lujo aps dot com justo aquí. Y esto va a entonces o en realidad, supongo que tienes que pinchar por aquí. Sí. Tan elegante caja tres. Entonces solo llega a la última versión. Hacen un trabajo bastante bueno de vincularse a ella. Um, y entonces se puede ver eso aquí, se
puede ver el inicio rápido aquí. Y este inicio rápido es esencialmente lo que vamos a hacer, porque tienen estos hospedados sobre Ah, tienen un anfitrión en Cloudflare y cosas diferentes. Entonces solo vamos a usar ese cdn para esto y puedes ver que
aquí hay una hoja de estilo , y luego puedes ver que también hay ah,
guión, guión, y necesitarás que Jake se preocupe junto con eso. Entonces voy a seguir adelante y sólo agarrar el enlace aquí, y esto es lo que vamos a necesitar para la hoja de estilo y volveremos a nuestra
voy a cerrar esto y volver a su índice punto html y vamos a llegar a la cima y dejar me acaba de mover esto por un segundo aquí. Y como que traté de mantener todo unido. Ahora. Ah, me gusta una especie de separar estos de todo lo demás. Entonces voy a hacer ah, comenta aquí. Simplemente voy a hacer CSS componente porque eso es lo que esto es esencialmente es un componente. Vamos a acelerar eso. Y así si tuviéramos algún otro componente, podríamos acelerarlos ahí dentro. Ah, también. Pero por ahora, sólo
tenemos caja de fantasía. De acuerdo, así que eso nos va a conseguir el CSS. Y entonces ahora necesitamos el script Java también para ir con esto. Entonces, ¿en realidad vamos a bajar y poner eso en la foto de aquí abajo? Ves, ya
tenemos a Jake, estamos aquí, así que no tenemos que preocuparnos por eso. Y sólo vamos a agarrar el guión para caja de fantasía aquí, la decoración del guión, y vamos a agarrar eso y luego vamos a volver y vamos a bajar hasta el pie y sólo asegurarnos y pegarlo después de la consulta G A aquí. Entonces de esa manera, Jaques cargó y luego cajas de fantasía cargadas. Y entonces nuestro freelancer dot Js está cargado. Um, porque en caso de que necesitemos hacer caso, quieres hacer cualquier tipo de, ya sabes, hay mucha personalización es que puedes hacer con esto. Hay muchas maneras diferentes en las que puedes configurar esto y así sucesivamente. Y muchas veces para hacer eso, necesitarás hacer eso en una escritura Java y otro JavaScript para que puedas hacerlo en tu freelancer. Archivo Ah Js aquí. Por lo que este es generalmente el mejor lugar para poner esos. Muy bien, para que eso nos consiga nuestro CSS y nuestro javascript que necesitamos para que el trabajo de punta de caja de lujo. Ahora necesitamos una especie de solo construir esto dentro de nuestro índice dot html. Entonces vamos a bajar y, ya
sabes, tenemos nuestra última sección que hicimos nuestra sección de habilidades aquí, y eso termina justo aquí. Entonces ahora vamos a crear nuestra nueva sección aquí, y esto va a ser para son nuestros artículos de cartera. Entonces vamos a hacer sección y clase igual a sección y yo d igual bien, cartera y luego crear nuestra sección. Y luego, claro, como hemos hecho aquí. Clase es igual a contenedor, clase
activa es igual a fila. Y luego vamos a hacer nuestro encabezado aquí. Entonces vamos a hacer div clase igual y vamos a llamar a 12. Y iban a clase de cabecera igual a encabezado de sección. Y luego en eso, vamos a hacer nuestro H uno en nuestro título de sección y aquí sólo pondremos mi portafolio. Obviamente, no podías hacer eso lo que quieras y luego abajo eso hará nuestra descripción. Por lo que P clase igual y lo hará centro de texto plomo, y luego lo haremos. Aquí tienes todas las cosas geniales que he construido para mis clientes increíbles o lo que quieras poner ahí. Entonces siéntete libre de poner lo que quieras poner ahí. Pero ese tipo de nos da nuestro encabezado de sección y puedes ver que tenemos nuestra marca mi
sección de portafolio aquí abajo. De acuerdo, así que esa era nuestra, ah, nuestra columna 12 con Llamadlos ahí. Ahora queremos meternos en realidad a construir las secciones de cartera y hay una copa. Tan solo un par de cosas que necesitamos agregar Para que esto funcione con caja de fantasía, Es un script javascript r j crace y también está el CSS. Entonces se va a cuidar de la mayor parte de todo, Force. Sólo necesitamos escribir nuestro HTML correctamente. Entonces vamos a hacer es vamos a hacer div clase igual y vamos a hacer fila y luego no
vamos a hacer canaleta y vamos a hacer cartera. De acuerdo, así que todas nuestras carteras, van a artículos van a ir dentro de esto dentro de estas diferentes filas y luego vamos a hacer div clase igual y vamos a hacer llamada tres ahora. Se podría cambiar eso, dependiendo de cómo. ¿ Por qué quieres que los años sean? Ya sabes, podrías hacer cuatro tranquilos con Como yo estoy haciendo tres columnas Let's etcétera. Nos vamos a la partida de cartera y luego aquí dentro. Aquí es donde nos metemos en las cosas específicas de la caja de fantasía. Entonces vamos a hacer un enlace o ir a una y vamos a data dash fancy box y
vamos a poner eso igual a galería. Eso es lo que nos va a permitir cuando salgamos uno de los artículos de cartera los Ford y herederos traseros para hacer clic a través de él. Esto es lo que habilita eso dice caja de fantasía. Eso es lo que queremos. Había do fuente de datos se establecieron que igual a libra 001 Así que esto básicamente es especificando un I d. Este es el i d. donde este es el cuando hacemos clic en esto, um aquí es donde queremos obtener el contenido de la i d de la que queremos obtener el contacto . Te mostraré ese contenido de estoy seguro de que en un segundo,
un tráfico sale en blanco porque en realidad no estamos vinculando a nada aquí, ¿
verdad? Y luego dentro de esto, vamos a hacer nuestra imagen. Entonces vamos a hacer imagen fuente igual, y vamos a ser imagen pequeña. Entonces vamos a hacer imágenes yendo a recortar portafolio porque lo ponemos en esa
carpeta de portafolio y luego queremos la versión pequeña. Entonces 001 pequeño punto j peg y voy a hacer todos iguales. Cero. ¿ Hay uno? Obviamente, tu perfil, los artículos van a hacer referencia. Van a hacer referencia a diferentes proyectos o nombres de clientes o lo que sea. Por lo que tu vieja etiqueta probablemente sería algo relacionado con eso. De acuerdo, entonces eso nos da nuestra imagen. Aquí, déjame seguir adelante y guardar esto y podría no estar cargando la imagen sólo porque tenemos que
recargar esto y ellos ven aquí. Y en realidad lo es. En realidad, la imagen está cargada. Simplemente realmente pequeño va a estropear eso en un segundo. Yo solo quiero que se escriba aquí el olor de toda la edad. De acuerdo, entonces ahora que tenemos que esto una etiqueta hecha, entonces vamos a crear la cosa que en realidad aparece cuando se hace clic en esto. Entonces vamos a hacer div class igual y o en realidad vamos a hacer div style igual display. Las monjas solo estaban configurando eso para que no mostrara nada. Y ellos iban a clase igual puerto folio pop. Entonces este es el pop up, y luego vamos a decir que d igual a 001 Así que esa es la referencia aquí. De acuerdo, entonces cuando decimos fuente de datos aquí y ponemos un I d Este es el i d que ponemos aquí. Entonces, sea lo que sea
que establezca esto, también tiene que asegurarse ah, y establecer la fuente de datos aquí
también, también . De acuerdo, Entonces así es como emparejan partido estos arriba cuando hago clic en esto. Esto es lo que aparece. De acuerdo, Eso es importante saberlo. Ahora con caja de lujo aquí. De acuerdo, así que ahora dentro de eso vamos a hacer otra fila, Uh, y luego dentro de eso vamos a hacer vamos a hacer un ingenio de 88 columnas. Entonces voy a llamar a ocho y luego, ah, vamos a dejarme ir adelante y hacer esta otra aquí. Entonces vamos a hacer div class equals call por ahora. De nuevo, se
puede construir. Esto es todo esto va a aparecer cuando esto sea click. Entonces otra vez por caja de fantasía. Solo necesitas esto aquí mismo. Cuando esto es click esto aparece. Puedes construir lo que quieras dentro de aquí. Esto es sólo que pasa a ser lo que construí. Puedes disponer esto como quieras. De acuerdo, Así que ten eso en cuenta mientras estás construyendo esto. ¿ Todo bien? Entonces lo que voy a poner aquí en esta ocho calma ¿De qué lado es la imagen? Entonces voy a hacer fuente de imagen, y hacemos iguales y vamos a imágenes slash portfolio, y luego vamos a hacer 001 puntos j pick. Entonces ese es el completo 1920 por 10. 80 con aquí. Y yo sólo haré todos iguales. Ahí hay otra vez. OK, así que esa es la imagen completa. Eso es lo que va a estar ahí cuando estemos. Pop esto arriba. Haga clic aquí. Ya ves, conseguimos eso de ese lado de ahí. De acuerdo, así que ese es ese lado. Bastante sencillo. Y luego al otro lado, sólo
vamos a poner nuestro título y descripción. Entonces vamos a hacer H tres y vamos a clase igual título de proyecto. Y luego vamos a hacer proyecto. Yo sólo estoy poniendo en su lugar encima. Entonces nombre del proyecto. Obviamente. Pondrías el nombre de lo que fuera este proyecto entonces estoy haciendo clase div igual plomo y descripción
del proyecto. Está bien. Y luego aquí estaban solo pondrías la descripción de tu producto. Voy a poner un texto ficticio. No voy a escribirlo todo aquí, porque eso no tiene sentido. Entonces solo voy a dejar caer aquí algo de Lauren Ipsum que podemos usar para darnos una idea de cómo va a quedar
esto en mí. Limpia esto. Muy bien, Así que ahora cuando hacemos clic en nuestro artículo de cartera, ahora tenemos algo que se ve así. Ahora bien, esto no es necesariamente lo que mejor se ve aquí. Lo que sea. Pero ya sabes si como que nos sacamos de aquí. Esto te da una idea un poco mejor de cómo se supone que tiene que ver. De acuerdo, entonces, no, eso es un comienzo. Y entonces puedes darle estilo a esto. De cualquier manera que
quieras, puedes cambiarlo en función de, ya
sabes, los diferentes tamaños de pantalla y así sucesivamente. Otra vez. Nuestra red ya tiene algo de eso incorporado en ella. Se puede una especie de meterse con eso como le parezca conveniente. Está bien, así que eso nos da una especie de base aquí. Ah. Ahora lo que queremos hacer es que solo voy a seguir adelante y que este sea el tipo básico de plantilla para crear un artículo de cartera. De acuerdo, así que necesitas hacer esto por cada uno de estos. Entonces esta parte esencialmente, esta aquí mismo, todo esto, solo
copias y pegas todo esto, y entonces entrarías y cambiarías. Está bien. Voy a usar esta imagen voy a cambiar este dedo del pie a voy a cambiar esto. Voy a cambiar todas las imágenes, la descripción del proyecto, y así sucesivamente. Pero el diseño real del HTML es el mismo, así que voy a seguir adelante y agarrar el resto de estos artículos de cartera que tengo ah, pre hecho aquí para que podamos pasar esto bastante rápido en lugar de escribir todo
esto y aquí hay muchos de ellos, toma un segundo. Está bien, así que solo dejaremos caer el's aquí y así puedas ver que eso nos da. Ahora tenemos una especie de fila, diferentes imágenes aquí y demás. Ahora, una de las cosas que verás aquí es después del número cuatro aquí. En realidad cerramos nuestra fila y luego creamos una nueva fila aquí, así que dedo del pie, fin de darnos dos filas, queremos diferente rosa en esto aquí. Entonces solo ten eso en mente con esto para las diferentes carreteras que quieres cerrar la carretera y luego y luego crear un nuevo asado. Estamos haciendo filas de cuatro. De acuerdo, entonces eso nos da una especie de nuestra estructura HTML básica. Se pueden ver estos aquí abajo. Es decir, hay algunas cosas pasando aquí abajo que tenemos que arreglar. Ya puedes ver puedo dar click a través de todos estos aquí mismo. Tenemos la funcionalidad básica. Ah, en su lugar aquí. Entonces lo siguiente que tenemos que hacer es entrar en,
ah, ah, el CSS real. Y vamos a apuntalar algunas de estas cosas de aquí arriba. Por lo que vamos a bajar por debajo de nuestras secciones de habilidades o nos desplazaremos hacia abajo sobre habilidades y
crearemos una nueva sección. Voy a agarrar esto y,
bueno, bueno, ritmo que adentro, y entonces vamos a llamar a este portafolio. Ah, y luego abajo que vamos a hacer un poco de estilo aquí. Entonces lo primero que hacemos es el título del proyecto, y esto es para el pop real aquí arriba. De acuerdo, así que solo quería que hiciéramos esto un poco más grande. Entonces voy a hacer tamaño de fuente, y voy a hacer tres llantas aquí, y luego haremos margen cero. Por lo que es un poco más cerca de la altura de la línea. Haremos uno. Y voy a hacer la familia de fuentes como Yellowtail sólo para darle un poco de descuento, ya
sabes, diseñado para ello va a hacer cursiva. Esa es una respuesta así. Y luego voy a hacer nuestro color morado. Entonces libra y luego 890 b d c nos da nuestro color morado aquí. Um, me olvidé una coma después de esto aquí, así que nos devuelve nuestro Yellowtail. Está bien, así que eso nos da el título del proyecto. Y lo siguiente que vamos a hacer aquí es que vamos a hacer nuestra capacidad de respuesta. Vamos a agregar medios, y voy a hacer Max con Max voy a hacer 768 píxeles aquí. Entonces estamos apuntando a cualquier cosa. Eso son 760 píxeles. A menos que y vamos a hacer portfolio dot Portafolios iban a apuntar a nuestra clase de portafolios, y luego vamos a apuntar a nuestra columna de tres aquí se llaman tres. Está bien. Y lo que vamos a hacer aquí va a cambiar esto para cambiar nuestra columna de cuadrícula, y vamos a cambiarla para abarcar seis. Entonces esencialmente como estos Ah, medida que nos hacemos más pequeños aquí, estos
también van a cambiar . Y así, lapso tres span seis. Ah, para que eso es esencialmente lo que esto está haciendo. El aire aquí es porque, um, en realidad, eso es por un aparato ortopédico. Pero también este editor, tal vez se ha actualizado, pero generalmente no ha estado reconociendo esta cuadrícula CSS. Entonces esa es una de las razones por las que algunas de estas cosas tienen estos pequeños aires en mi I d El siguiente que vamos a hacer es que vamos a hacer entonces el siguiente tamaño de pantalla abajo al que
vamos a apuntar. Entonces vamos a hacer medios. Hacemos Max con, y vamos a hacer 480 píxeles y estamos aquí. Vamos a cambiar la columna de la cuadrícula, y vamos a cambiar eso para el lapso 12. Entonces va a estar lleno con, y luego vamos a poner el texto para alinear el centro y eso es nuestro y en realidad de nuevo, uh, necesitamos apuntar. Uh, tenemos que apuntar a algo aquí. Acabo de empezar a escribir en. Siempre hago eso un poco cuando me meto con las cosas receptivas. A veces me olvido de teclear aquí la declaración real. ¿ Al igual que qué? Estamos apuntando al elemento aquí. Entonces vamos a apuntar a que esa cartera llame de nuevo a tres elementos aquí. Y luego lo vamos a decir para que abran 12 y líneas de texto ahí. De acuerdo, entonces eso nos da nuestra capacidad de respuesta. Ahora, todavía
tenemos este poquito aquí abajo, y en realidad lo que me di cuenta es que no tiene nada que ver con el CSS. Volvemos aquí, Verás, tengo este camino que está abierto aquí, y nunca la cerré. Y tenemos que asegurarnos y volver a entrar. Y tenemos que cerrar esa fila así y luego aquello. Entonces básicamente estábamos anidando dentro de otra fila, y eso estaba causando nuestros problemas. Entonces ahora ven aquí que estos aire todo el camino, que deben ser del tamaño que deben ser, Así que en realidad no tenemos que dimensionar esos. Si apretamos esto hacia abajo, entonces ves que se convierte en esto es donde cambiamos del lapso tres al lapso seis. Y si seguimos yendo eventualmente llegamos a donde es Ah, es una columna con ancho o lo que sea. Por lo que está lleno de. Entonces eso es lo que hace por nosotros la parte de respuesta. Ayuda a ese dedo del pie. Ah, haz eso. Y entonces, por
supuesto, todavía
tenemos arriba aquí están nuestro proyecto aquí. Podríamos entrar si quieres. Puedes entrar aquí. Te dejaré eso como algo para ti. A lo mejor un pequeño reto para que
te des cuenta es, ya sabes, entre esto así y luego cuando llegue al máximo con así, tal vez quieras hacer. A lo mejor quieres apuntar a algo entre aquí, aquí mismo para que esto se vea un poco mejor. Entonces me iré. Eso es un reto para ti, pues averiguar cómo seguir adelante y hacer eso. Entonces eso es en realidad. El apartado de portafolio parece que podría ser un poco más complicado, pero en realidad fantasía. Pero box hace todo el trabajo por nosotros. Una vez que consigas este primer elemento configurado aquí, realmente
puedes simplemente copiar y pegar tu camino por el resto del mismo. Um y Y solo recuerda, cuando llegues a eso, cuando quieras crear una nueva fila, no
olvides cerrar la fila y luego agregar una nueva fila aquí. Um, y como dije otra vez, caja de
fantasía hace, hace todo el trabajo duro aquí. Y la otra cosa es, solo asegúrate de que esta fuente de datos esté apuntando al div o a lo que quieras aparecer. Ah, esta caja de contenido cuando aparece aquí y una vez que haces
eso, es realmente bastante sencillo.
9. Construir la sección de los clientes: esta lección. Vamos a crear esta sección de mis clientes aquí. Entonces es bastante sencillo. Simplemente da ah, diferentes testimonios o así sucesivamente otra vez. Por supuesto, vas a querer usar los que tienes de tus clientes o de tus clientes clientes. Um y luego otra vez, vamos a conseguir necesidad de subir algunas imágenes. Entonces voy a entrar en esto, clientes uno aquí que tengo, y luego nos acercaremos a nuestro espacio de trabajo o a su estructura de carpetas, y vamos a crear una nueva carpeta bajo imágenes de nuevo, y vamos a llamar a este uno clientes. Y yo sólo estoy haciendo esto para sólo tener un poco de organización que en realidad consiguiera ponerles carteras. Déjame arrastrar eso aquí solo para crear un poco de organización aquí. Nada demasiado loco. Y luego arrastraré estos por aquí, y estos son volver por aquí Estos aire 300 por 300. Por lo que estos aire en realidad cuadros cuadrados. Entonces si buscas qué talla necesitas para el uso, eso es lo que tienes, verdad? Por lo que esos están todos subidos. Concede que hay un Ruanda Stree 100 etcétera es como se les llama se puede por supuesto. Nombralos como quieras. Ah, por este. Voy a agilizar sólo un poquito aquí sólo porque ya hemos hecho bastante el encabezado
de sección . Entonces siento que probablemente haya bajado eso, así que solo voy a caer en el encabezado de sección. Es exactamente idéntico a lo que hemos hecho antes. Entonces ideas de sección, clientes, una llamada de fila de contenedor, título de sección de cabecera de
12 secciones y el texto de plomo aquí. Entonces no, eso es bastante sencillo. Aquí, um, déjame seguir adelante y sólo cerrar esta sección para que no me olvide así. Y también vamos a seguir adelante y cerrar el contenedor aquí para que
tampoco lo olvidemos . ¿ Verdad? Para que eso esencialmente nos dé nuestro inicio aquí. Entonces ahora acabamos de empezar Rose que tenemos un sitio de construcción de esto, y así que solo vamos a construir son una especie de fila de testimonios. Así que empezando aquí, después del encabezado de sección, vamos a ir a clase div, y vamos a hacer fila y vamos a hacer testimonios especie de. Apenas siguiendo el estándar de lo que hemos hecho antes. En cuanto a nombrar había dos clase div y vamos a llamar a cuatro porque estamos haciendo tres testimonios de ancho. Entonces estamos haciendo artículo testimonial. Creo que y luego dentro de esto, vamos a tener lo primero. Vamos a tener mucha de la imagen, y vamos a hacer clases iguales, yendo a imagen redondeada así. Y luego vamos a hacer avatar testimonial desde caso queremos apuntar específicamente a esto. Y entonces nuestra fuente va a estar donde pongamos nuestras imágenes. Entonces vamos a imágenes clientes y luego barra orejas Erawan dash 300 dot J peg, déjame dar la vuelta eso para que puedas ver eso así sucesivamente. Y en realidad me dieron un cero extra ahí dentro. ¿ Verdad? Entonces déjame arrastrar eso. De acuerdo, Así que ahí es donde se encuentran nuestras imágenes ah, y yo solo estoy haciendo el on en todos como el nombre. Esta es Jenny Nups. Jenny Masa. Está bien. Y luego cerrar nuestras etiquetas de imagen. Entonces eso es lo primero que vamos a poner aquí. Y luego después de eso, entonces vamos a crear un div, y vamos a hacer div y vamos a clase igual testimonial, y vamos a hacer centro de texto. Creo que y luego dentro de eso, vamos a hacer 83 y déjame desplazarnos por CNC mientras estamos haciendo esto, vamos a un H tres y,
uh, uh, dentro de eso, nuestras clases para eso van a ser clase es igual. Ah, título
testimonial como este. De nuevo, solo
estamos siguiendo lo que hemos hecho antes en otras áreas sobre cómo estamos nombrando esto . Vamos a hacer estupendo o lo que sea lo que quieras destacar aquí es lo que dijo esta persona. Ah, y luego vamos a hacer P clase igual, y vamos a hacer contenido testimonial. Entonces este es el contenido. Um, déjame agarrar este texto aquí, tipo de esto todo fuera y luego debajo de eso, Lo que vamos a hacer es sólo vamos a hacer nuestro testimonio, autores cuando lo dejamos caer, Entonces ese es nuestro texto para un testimonio. Y luego vamos a hacer P clase igual testimonial. Autor, uh, autor
testimonial y redes, Por
supuesto, como lo hicimos con nuestra vieja bolsa Jenny masa. De acuerdo, entonces eso nos da una especie de ah estructura básica para nuestros testimonios. Um, eso es en realidad quiero decir, eso es todo. Esa es la Esa es la estructura básica aquí está esta pequeña sección de aquí. Entonces para los otros testimonios, entonces solo vamos a seguir adelante y copiar y pegar esos en. Simplemente copias y pegas. Um, eso y esta Esta sección justo aquí y luego Ah, cambia lo que necesites para cambiar. Voy a caer en lo que ya tengo. Entonces estas son estas otras imágenes que tenemos aquí? Um y en realidad, como que
estropeé el título. Yo estaba buscando. Este es en realidad quiero decir, hacemos que me haga bien esto, porque es fantaboso. Es aún mejor. De acuerdo, entonces eso nos da nuestro tipo de estructura básica o html Ah, estructura. Aquí está en nuestras carreteras y nuestro lado de nuestro contenedor dentro de nuestro tramo. Entonces somos bastante buenos para seguir eso en la estructura html. Ve y guarda eso. Y luego voy a ir a nuestro CSS, y vamos a editar nuestro CSS aquí. Entonces de nuevo, agarraremos el encabezado de la sección CSS, y luego bajaremos aquí y en realidad voy a darnos un poco de espacio aquí y
volver arriba. Hace un poco más fácil trabajar con. De acuerdo, entonces ahora vamos a hacer nuestros testimonios y por nuestros testimonios. En realidad hay un poco más que vamos a hacer aquí. Entonces lo primero que vamos a hacer ojos no haría clientes. Entonces esa fue la idea de toda la sección, y volveríamos a hacer el fondo, y vamos a cambiar eso a nuestro f A f a f a a así. Entonces nos da ese trasfondo un poco grandioso y luego vamos a ir después vamos a
apuntar a cada ítem testimonial. ¿ Te acuerdas si miras esto ah, lo que tenemos aquí, Ya ves, ese tipo de tiene una plaza a su alrededor. Entonces esa es una de las cosas que queremos hacer años. Queremos crear ese elemento do testimonial. Ah, y luego vamos al fondo, y vamos a ponerlo en Así que acabamos de hacer el fondo de sección a Gray. Ahora vamos a hacer el fondo de estos testimonial dedo del pie blanco Teoh. Dale para que se destaque. Después hacemos relleno y haremos 30 pixeles, 25 pixels, 20 pixels y 25 pixels. Y eso sólo viene de jugar un poco con esto,
um, um, para llegar a donde esto me parecía una especie de centrado. Tiene que ver con, Por
ejemplo, esta etiqueta de párrafo probablemente tenga un margen en ella. Por lo que el relleno en la parte superior y la inferior es de 10 píxeles diferentes. Entonces esto es de 30 píxeles, y esto es de 20 píxeles. Eso tiene que ver con esa caricia. Podrías borrar ese relleno. Podrías deshacerte de ese relleno. Podrías hacerlo de esa manera, o podrías hacerlo de esta manera. Simplemente depende como quieras Oye,
¿quieres tuitear eso? Y luego vamos a hacer frontera un píxel sólido, y vamos a hacer ah f uno tiene para una manzana en F uno. De acuerdo, así que eso le va a dar un poco de frontera. Entonces ahora se puede ver que está empezando a parecerse un poco más a lo que teníamos en nuestro ejemplo . Eso hará testimonial, y haremos avatar. Entonces vamos a apuntar al avatar real aquí para mostrar el bloque para que realmente podamos apuntarlo con reglas CSS para marcar cero auto. Entonces va a centrar la imagen, um, y luego vamos a hacer con ah 100 píxeles. como si eso lo vamos a hacer más pequeño. Entonces ahora es una especie de sentarse dentro de esa caja no es sólo retomado todo el espacio. OK, entonces creo que eso se ve mejor. Consigue un montón de estas cosas que condonas. Puedes cambiarlo. No obstante, ya
sabes, lo que creas que se ve bien, pero esto es sólo una especie de lo que fui con X. Vamos a hacer título testimonial. Ah, y para esto, vamos a hacer el tamaño de fuente. Haremos 1.75 ram. Se trata de unos 28 pixeles. Y luego para contenido testimonial, vamos a hacer una altura de línea de 1.3. Sólo dale Ah ah, ten un poquito mejor. Mira, um, y entonces lo haremos, en realidad, eso es todo. ¿ Qué es todo lo que vamos a hacer con eso? Y luego abajo, vamos a hacer testimonial. Vamos a hacer, autor. Entonces este es el autor y déjame desplazarlo hacia arriba. Entonces, testimonio, autor, sólo
vamos a establecer un tamaño de fuente. En realidad vamos a hacer esto más pequeño que lo hacemos 0.8 o soy así para hacer un poco más pequeño. De acuerdo, entonces si una especie de expandimos esto un poco aquí para que podamos verlo. Ya ves, aquí
tenemos esto, y si miras nuestro ejemplo de lo que estamos construyendo, eso es lo que tenemos ahí, por lo que se ve muy igual. Y eso es eso en realidad. Para que ese sea el metal H. Ese es el CSS. Y así es como construyes. Ah, la sección de clientes aquí, tan bastante directa.
10. Crea el formulario HTML de contacto: esta lección. Vamos a construir aquí esta sección inferior que tiene el tipo de inicio de nuestro pie y tiene el contacto cuatro minutos en él. Si recordarás, esto es sólo una especie de formulario de contacto alimentado por Ajax, pero acaba de golpear Obtener cotización. Si el correo electrónico enviado con éxito, dirá con éxito va a poner en un correo de litera aquí y golpear Obtener cotización y se podría ver si no, volverá en el mensaje de aire aquí. Entonces eso es a lo que vamos a entrar en la construcción. Pero sólo vamos a hacer las h dos melas y CSS en este video o esta lección, y luego vamos a meternos en el PHP y luego en el script Java que necesitamos escribir para todo esto. Entonces dicho eso, vamos a sacar esto del camino y vamos a meternos en nuestra h La mayoría volverá a bajar
al fondo. Ah, otra vez, Ya
sabes, voy a una especie de avance rápido esto un poco con esta
cosa de sección ah cabecera porque este es en realidad este es un poco diferente,
Entonces, ¿por qué no voy adelante y simplemente teclea este hacia fuera así que Vamos a ir sección y vamos a hacer clase igual sección en. En
realidad, d igual a contacto. Uh, correcto. Y luego haremos nuestra clase activa igual contenedor. Clase activa es igual a fila y luego aquí vamos a dividirla Normalmente ser. Hacer 12 columna. Vamos más lejos esto, pero en realidad aquí, vamos a dividirlo. Entonces vamos a Div. Clase igual a llamada seis, porque vamos a tener el Vamos a tener la sección de la izquierda derecha aquí. Y luego tenemos la parte de contacto aquí a la derecha. Entonces estamos dividiendo esto en seis. Está aquí. Seis columnas. De acuerdo, entonces haremos esa. Y entonces vamos a seguir adelante y hacer la otra aquí, así que tenemos nuestra estructura básica en su lugar. Está bien, así que eso nos da 26 tranquilos con columnas. Ah, y ahora cuando aquí va a hacer el encabezado va a hacer mejor. Haremos clase igual sección, cabecera y dentro Eso hará nuestra H una clase igual título de sección. Y luego también vamos a añadir texto a la izquierda aquí y luego aquí lo hará. Contrátame como este pergamino aquí abajo. Entonces estamos empezando a conseguir un poco de algo aquí y luego vamos a hacer P aplaudir etiqueta de
párrafo igual a plomo. Y entonces sólo tenemos un poco de ipsum caliente aquí en contra Déjame caer en este Lauren ipsum aquí . ¿ Verdad? Entonces ese es nuestro texto ficticio. Ah, y luego abajo que vamos a crear. En realidad, esto está fuera de los encabezados. Eso es lo que hay en nuestra cabecera. Intentas mantener la cabeza o limpia al título y descripción y luego abajo. Ahí es donde vamos a hacer nuestra lista con nuestra dirección y número de teléfono y
dirección de correo electrónico . Entonces vamos a hacer una lista ordenada monja, le
daremos una lista de clase igual en línea, y luego lo haremos. La clase Ally es igual a, uh, lista en línea de ítem así, y va a ser nuestra línea de ítems. Y luego vamos a dar estos. Vamos a dar estos iconos. Hará I clase igual usará nuestro teléfono. Impresionante. Tipo de f A f un mapa de
guión, marcador de guión así. Y eso nos dará nuestro icono desplazar un poco hacia abajo aquí. Entonces nos da nuestro ícono aquí, y luego lo haremos lo pienso, lo en un carril freelancer y luego 55 80 algo así. De acuerdo, así que vamos a nuestra primera Ah, en línea de partida. Aquí, señora Adelante y hacer clase Ally iguala lista en línea ítem aquí. Sigamos adelante y solo creamos nuestro 3er 1 real rapido. Por lo que la clase Ally es igual a lista en el elemento de línea. Muy bien, entonces esos son nuestros tres ítems de la lista, y luego dentro de éste servirá. Ah, Bueno, ¿yo clase igual y lo haré f a f Un teléfono para el número telefónico. Y lo estoy otra vez. No puedes usar estas cosas exactas. Es posible que no desee incluir un número de teléfono. Quiero decir, lo que sea. Lo que funcione para tu situación. Más uno, voy a dio 88 y vamos a hacer 555-1 a 1 a especie de número de teléfono ficticio. Está bien, así que eso nos da nuestro segundo ítem de lista. Y entonces el 3er 1 va a ser clase I igual f a f a. Ah, sobre
dash on. Entonces lo haremos. Haremos correo electrónico en dominio dot com. Podrías enlazar estos para que su clickable y así sucesivamente. Sólo estoy manteniendo una especie de simple ahora mismo porque creo que lo principal que nos
preocupa aquí realmente es la forma, ¿
verdad? Entonces eso nos da otra vez especie de estructura básica hasta este punto. Ahora podemos bajar a nuestra segunda columna aquí. Podemos construir nuestra forma, así que vamos a formar acción, y vamos a establecer esto igual al punto de proceso PHP. Ah, en realidad
vamos a ejecutar esto en última instancia a través de JavaScript. Pero nuestro script de procesamiento PHP está en punto de proceso PHP. Entonces estamos apuntando a que vamos a método igual post, y vamos a hacer clase igual a oscuro y forma de contacto. ¿ Verdad? Entonces eso nos da nuestra forma le dará un título. Por lo que h tres h tres y luego clase igual título de forma y lo hará contactarme. Está bien. Y luego los envuelvo en campo de informar. Así que lo hago div clase igual campo de formulario como este solo por una especie de propósitos de segmentación hará clase de
entrada igual a tipo de texto nombre de texto igual al nombre de este formulario. Campo es nombre porque queremos Este es el nombre de la persona hará un marcador de posición igual y hará nombre y dirá que esto es obligatorio. De acuerdo, así que cerraremos eso, para que eso cree nuestro primer campo de formulario. Ahí se puede ver. Uh y entonces solo voy a copiar y pegar esto porque vamos a tener un par aquí, así que tendremos,
ah, ah, correo electrónico, y luego tendremos un área de texto. Supongo que podríamos seguir adelante y poner ese aquí así. Está bien, Entonces para el 2do 1 entonces la clase va a ser texto, pero también va a ser correo electrónico porque va a haber una entrada de correo electrónico. Vamos a cambiar el tipo a correo electrónico. Esto permitirá la validación en el lado del navegador, el nombre que vamos a establecer en el correo electrónico y luego el marcador de posición También vamos a establecer correo electrónico y haremos que ese sea requerido también. De acuerdo, entonces ahora tenemos correo electrónico de nombre, y luego en el siguiente, realidad
vamos a cambiar esto a área de texto. Y cuando hacemos eso, tenemos que bajar aquí. Tenemos que cerrar eso. Eso requiere un cierre. Creo que eso es lo que nos da un área de texto. Ah, y entonces la clase va a ser texto un tipo de área de texto. No necesitamos tipo porque no lo es. Es Definimos que cuando decimos que es un área de texto. Entonces no es un nombre de texto va a, uh, va a ser marcador de posición de mensaje va a ser. Cuéntame de tu proyecto, ¿de acuerdo? Y dejaremos ese requerido también. De acuerdo, así que déjame seguir adelante y guardar eso de verdad rápido y refrescar esto. ¿ Todo bien? Por lo que ahora tenemos email de nombre y nuestro cuadro de mensajes aquí. Lo último que necesitamos poner aquí que es nuestro botón. Entonces vamos a poner esto fuera de todos estos dibs, dispuestos a ingresar, y vamos a clase igual botones de botón enviar, y vamos a hacer tipo igual a enviar. Y estamos do valor igual a obtener cotización como esta, y luego necesitamos agregar un div aquí. Div I d es igual a mensajes de estado. Entonces aquí es donde vamos a splay mensajes de estado transmitidos. Ya lo viste antes. Esto es sólo un nem PDI div. Simplemente nos da algo para apuntar en un tenedor de lugar para que pongamos nuestros mensajes
de estado . Entonces ese es el HTML. Es decir, es una forma bastante básica, listas y así sucesivamente. Muchas de las cosas que se hacen con esto se van a hacer dentro de la C s. acuerdo, así que tenemos mucha forma de contacto CSS, y luego también tenemos y tenemos unos cuantos tipos de estilos globales que necesitamos ordenar de lío con aquí un poco. Entonces, um, sigamos adelante y hagamos primero los estilos globales. Ya que esos me refiero a técnica, ya
sabes, sólo para especie de mantenerse en línea con cómo deberíamos estar construyendo esto. Entonces lista en línea se pone justo debajo de este texto, ¿verdad? Aquí mismo. Y así vamos a hacer lista de puntos y la razón por la que lo estamos haciendo de esta manera para que puedas usarlo en otros lugares, No solo aquí. Entonces lista en línea y haremos display flex, y vamos a hacer flex flex. El rap está configurado para envolver, y una línea puede desplazarse hacia abajo para que puedas ver lo que está pasando aquí. Contenido de línea. Uh, vamos a hacer flex start. De acuerdo, Entonces esto sólo tiene que ver con algo de la forma en que queremos que esta grúa se alinee y así sucesivamente. Ah, ya
sabes cómo se dispuso todo lo que queremos. Entonces estamos usando flex box para ese relleno. Zero Ah, vamos a hacer tipo de lista? Ninguno. Entonces me pongo con todos los puntos de bala tamaño de fuente 14 píxeles y en realidad vamos a hacer, uh, 0.85 ram. Correcto, así que eso son alrededor de 14 píxeles y luego color. Vamos al número 999 De acuerdo, así que ahora mismo, porque tenemos este apretón hacia abajo, No necesariamente se ve como algo que puedas ver. Pasamos de ah, lista de
arriba a abajo con balas para ahora conseguimos todo tipo de lado a lado y así sucesivamente . Entonces eso nos da unos básicamente fuera y vamos a hacer lista. Ahora vamos a apuntar a los ítems dentro de esta lista en línea de ítem, y vamos a hacer flex grow. Déjame desplazarme aquí abajo, Flex crece, y pondremos eso en uno. Entonces eso es esencialmente bueno. Te das cuenta ahora, en lugar de que estos sean todos solo dejaron una línea justo al lado de la otra, le dice que crezca y especie de llenar el espacio restante aquí. Eso es esencialmente lo que estamos haciendo aquí. Entonces de nuevo, esto es algo de flex box, um, pero funciona bastante bien para este tipo de cosas. Y luego vamos a hacer margen inferior cinco píxeles. Entonces cuando lo hace, cuando llegamos a los tamaños de pantalla más pequeños y sí va a una nueva línea, tiene un poco de espacio. En realidad se parece a nuestro correo electrónico. Déjame volver a cada mañana. Rápido. Se parece a nuestro correo electrónico. Ah, sí, porque tengo un guión aquí correo electrónico, como en su presentación. Está bien, así que ahí está nuestro icono de correo electrónico. ¿ Ves eso? Entonces vuelve aquí. Muy bien, así que vamos a enumerar en el elemento de línea. Ahora, vamos a hacer los iconos, así que vamos a hacer lista en línea de ítem, y luego vamos a hacer punto f a y vamos a apuntar a esos iconos. Entonces lo que vamos a hacer aquí es que vamos a, um, salir. Déjenme darles estos. Les vamos a dar un color un poco diferente. Entonces vamos a hacer nuestro color morado 890 b d. D. Así que le da a eso un poco de color, y luego vamos a poner un pequeño margen a la derecha porque están justo al lado de ese texto o hacen siete píxeles. De acuerdo, así que eso es como que los mueve un poco aquí otra vez. Si sacamos esto, empecemos a parecernos más un poco más como lo que teníamos. De acuerdo, así que ahí está. Entonces esa es la ah, en líneas ahí. Ese es el Ese es el de aquí abajo. Esa pequeña zona de artículos de lista ahí. Um, déjame ver. Parece que tenemos que hacer para infield realmente rápido porque agregamos campo foráneo también. Hagamos campo de formulario. Entonces esto es por el lado derecho. Y vamos a hacer margen inferior 10 píxeles. Entonces eso nos da un poco de espacio aquí mismo. también lo hemos hecho. Mira, tenemos un poco de espaciado ahí. Creo que eso prácticamente lo hace por nuestro ah, por nuestros estilos globales. Ahora necesitamos bajar al tipo real de estilo específico para el formulario de contacto. Entonces acabamos de hacer testimonios ahí. Déjame hacer esto. Voy a agarrar mi divisor aquí otra vez en una pieza que aquí dentro. Correcto, Entonces eso es para nuestro formulario de contacto. De acuerdo, entonces para esta área de contacto, lo
primero que vamos a hacer es que vamos a ah, hacer el color de fondo. Entonces vamos a hacer antecedentes, y vamos a cambiar ese 2222 es lo que elegí. A mí me gusta ese Color hace que todo tipo de destaque color de borde y vamos a hacer el número 333 así. Creo que hay una frontera al otro lado, así que eso afecta un poco a ese tipo de cosas. Nada importante con eso, pero ayuda un poco. Después haremos contacto y luego punto encabezado de sección. Entonces estamos apuntando. Estaban apuntando a lo que a estilos globales. Pero estamos apuntando a uno específico de esta sección. Por lo que el encabezado de Sección está en cada uno de estos, pero sólo estaban apuntando al interior de contacto aquí. Entonces eso es lo que estamos haciendo con esta declaración. Por lo que cabecera de sección. Y luego vamos a hacer fondo de frontera y vamos a hacer Ah, un píxel punteado y haremos el número 444 así. ¿ Verdad? Entonces eso es otra vez. Ese es el encabezado de sección justo aquí. Entonces da un poco de recuerdo de nuestro ejemplo aquí tenemos esta cosa de punto punto punto punto justo aquí, así que eso da un poco de división ahí. Entonces eso es eso. Y luego entrémonos en el título de la sección. Por lo que Contactar título de sección y el título de sección. Vamos a cambiar la familia tipográfica a Yellowtail. Tan amarilla cola cursiva sans serif. Está bien. Ah, Y entonces vamos a cambiar el color otra vez. dedo del pie es morado. 890 fue a d b b b d d. Está
bien, así que eso es eso, Um, así que eso es eso Que esa sección, um, pensando que vamos adelante y miremos esta sección de plomo aquí, déjame ir y solo agrega texto a la izquierda así. Se dejó texto bastante seguro en eso. Entonces eso es Ah, eso hace eso. Está bien, así que volvamos aquí. Por lo que hay título de sección. Um y creo que necesitamos cambiar el color de ese texto también, porque no es muy. Ah, no está apareciendo muy bien ahí abajo. Entonces déjame entrar y hacer. ¿ Acaso apunté a eso? Ya veo. Bueno, solo
hagamos contacto con plomo y hagamos esto. Plomo de contacto. Hagamos color. Hagámoslo. Sólo intentemos esto para empezar. ¿ Ver? ¿ Ver? Ves, es un poco demasiado se debe 555 Sí, tal vez 666 Uh, vamos a evitar ese. Correcto. Está bien. 777 Eso me parece bien. Eso se ve sobre dónde estamos. De acuerdo, entonces eso nos da nuestro color para eso. Y parece que nuestro lado izquierdo está bastante hecho. Bastante bien para ir allí. A lo mejor tener algunas cosas volverían a, pero eso parece bastante estilizado para nosotros. Mi siguiente es título de formulario. Entonces va a ser que Contáctame texto o moviéndose hacia el lado derecho. Cuándo hacer color 999 Um, y vamos a hacer tamaño de fuente 2.25 gramo y margen 000 10 píxeles cero. De acuerdo, así que nos da un buen título de contáctame ahí, y ahora vamos a apuntar a esto. Entonces esta forma es una oscura donde recordamos le dimos la clase oscura porque es una forma oscura . No todas las formas de su lado van a ser así. Entonces solo estamos apuntando a este específicamente, Así que vamos a hacer oscuro, y luego vamos a hacer nuestros campos de texto y luego oscuros y nuestros campos de área de texto. Ahora, esos son todos nuestros campos. A excepción de nuestro botón enviar, si recuerdas porque le dimos nombre a la clase de texto, le
dimos al correo la clase de texto y correo electrónico y luego le dimos a esta la clase de área de texto. Por lo que básicamente acabamos de apuntar a todos esos campos. Y ahora podemos,
uh, uh, darles
estilo. Entonces vamos a colorear o 999 Ese va a ser el color del texto y luego el color del borde. Ver color de borde. Y haremos Ah, 222222 Haremos el color de fondo. Vamos a hacer rgb a aquí, y vamos a hacer negro, que es 255255 255 Sin embargo, vamos a darle una ciudad sin paga, así que haremos 0.1. Entonces eso nos da ese tipo de color grisáceo podrías encontrar un gran color y simplemente hacer un hex si quieres. Pero yo solo estaba como, Bueno, déjame meterme con Theo pasty eso porque entonces puedes entrar aquí y puedes decir, Bueno, dos ahora no me gusta que puedas jugar con ellos hasta conseguir lo que te gusta, por lo que eso hace que sea un poco más fácil trabajar con. Entonces ahí está eso y luego vamos a hacer una sombra de caja, y lo vamos a hacer en set. Entonces esto va a hacer una sombra, especie de dentro del campo de formulario. Por lo que está insertado 02 píxeles, tres píxeles
encendidos, luego RG rgb a y hará 000 y luego 0.6. Entonces eso es blanco. Y entonces tenemos una especie de ah pacenti en ella. Para que veas que crea esa pequeña sombra ahí dentro. Y podrías una especie de juego con estos números. Hagamos que este tipo de obvio. Hagamos 20. Ves, eso lo trae hacia abajo. Si hacemos 30 aquí, ya
sabes, ese tipo de se desvanece un poco, etcétera. Guiso 20. Aquí. Podrás especie de jugar con estos con estos números hasta que lo consigas el dedo del pie. Mira cómo quieres que se vea. Entonces estos aire sólo se especie de los números con los que me metí aquí, ¿de acuerdo? Y creo que para mí,
me gusta la forma en que se ve esa sombra. Ah, bueno, también fue Sólo copiar esto. Um No puedo recordar de la parte superior de mi cabeza donde estaba Box Shadow con soporte de navegador. Pero voy a seguir adelante y hacer esto. ¿ Qué chico? Ah, sombra
de caja. Así por si acaso necesitamos eso Si no es necesario,
entonces no va a lastimar nada. Entonces solo vamos a seguir adelante y tirar eso ahí dentro. Está bien, así que eso es Esas son las pequeñas áreas de texto aquí que puedes volver a ver. Esos se ven bastante similares a lo que teníamos en nuestro ejemplo Aquí. Um, ahora tenemos que seguir adelante y sumergirnos en el botón así que vamos a hacer punto Oscuro otra vez Hará botón enviar, y vamos a hacer color blanco f f f y vamos a hacer color de
fondo, color de fondo haría RGB a otra vez. Y así si no estás familiarizado, esto es sólo el RGB RGB rojo verde, azul colores y luego a es para la A pass ity. Entonces eso es esencialmente lo que es rgb A. Por lo que las primeras 3 letras airean el RGB y luego la última es la opacidad sin embargo lo
dices así que 000 de nuevo es blanco y luego haremos 0.2. Entonces eso nos da y sabes que puedes ir por el otro lado. Si quieres bien, podrías hacer al 5555 y luego quiero decir, puedes hacer eso como quieras, pero eso nos da una bonita especie de color negro. Haré borde,
um, um, con un píxel sólido y volveré a hacer RGB un y hará cero 00 y 0.1. Por lo que las fronteras sólo un poco más oscuras. CNC ahora tiene un poco de frontera más oscura ahí. Y luego haremos fuente espere 300 porque no me gusta ese aspecto audaz Ah, texto sobre eso. Correcto, Así que ese es el botón. Y luego tenemos que hacer el flotador para el botón. Así que hacer oscuro y hará botón de punto, uh, enviar, enviar y luego pasar el cursor y se dio botón de punto oscuro
Enviar, enviar y haremos enfoque Si alguien pasa dedo del pie, usa su botón de pestaña para ordenar pestaña a través de estos. Puedes cambiar el enfoque aquí así que haremos foco y lo haremos, Ah, color de
fondo y lo haremos. Vamos a cambiar el color de fondo rgb A y vamos a hacer 0000 0.35 Vale, y luego haremos el color del borde. Simplemente estamos cambiando los colores del fondo en las fronteras esencialmente en el hover y en el enfoque. Por lo que el color del borde haría rgb a otra vez 000 cero. Ah, apunte a y luego sólo vamos a hacer puntero de cursor. De acuerdo, ¿entonces? Bueno, eso nos da esto en realidad es el botón aquí. Así que de nuevo, Tab
tab, tab on focus here o on hover. Se puede ver el botón cambia un poco. De acuerdo, entonces eso nos da ese estilo. Ah, y luego tenemos nuestros mensajes de estado, así que vamos a seguir adelante. Vamos a seguir adelante. Estilo. Esos ups harán estatus. Ah, mensajes
de estado. Y esto va a ser una especie de solo el diseño general a la hora de peinar para los
mensajes de estado . Entonces margen Ah, arriba. Y haremos 0.7 carneros. Eso nos va a dar un pequeño margen entre eso y nuestro botón, y luego haremos relleno, y haremos una llanta. Por lo que da un poco de relleno alrededor del mensaje de estado. Y entonces ahora, ahora tenemos que hacer por error. Queremos el rojo y para,
um, um, el éxito. Queremos el verde. Entonces vamos a hacer mensajes de estado y vamos a hacer
punto, punto aire, y vamos a subsanar eso. Entonces vamos a hacer esto, y vamos a una pluma esa clase. Recuerda, si volvemos a HTML, todo lo que hicimos fue un div con mensaje de estado. Yo d No tuvimos éxito aéreo. Vamos a lapicar eso con RJ Query. De acuerdo, así que no tenemos el dedo del pie preocúpate por eso en HTML, pero necesitamos sí tener el estilo. De acuerdo, así sucesivamente, claro, seguro que haces eso. Entonces cuando hacer fondo y termina siendo D. C 3545 y yo sería capaz de ver algo de esto ahora mismo, pero lo haremos una vez que tengamos todo enganchado. Entonces va a ser el color de fondo y que ese va a ser ese color rojizo, y van a hacer color. Yo quiero esperar y luego aquí abajo, hacer mensajes de estado y va a hacer punto éxito. Y en realidad, sólo
podemos tomar este color aquí sólo debería poder tomar esto. Estaba haciendo tanto en aire como en éxito, pero en realidad deberíamos construir poner eso ahí arriba así, y entonces entonces no tenemos que volver a escribir código. Está bien, así que vamos a hacer fondo, y este va a ser ese color verde. Entonces esto termina siendo a ocho un 745 Y esos sólo se jugaban con los para conseguir el color correcto. Um, otra
vez, se puede hacer de esos qué? Lo que tú quieras. Está bien, así que esa es la sección de pie de página. Esa es la parte HTML y CSS de pensar que estamos Estamos más o menos donde necesitamos estar si hay algo que necesitamos retocar a medida que vamos aquí porque estamos realmente probando esto todavía. Um, entonces vamos a seguir adelante y tuitear eso aquí. Pero ese debería ser el HTML y CSS Ah, para esa sección.
11. Construir el contacto desde la Script de PHP: esta lección. Vamos a escribir nuestro script de procesamiento PHP, Recuerda, de nuestro para mí dijo la acción para procesar punto PHP. Vamos a hackle esto vía script Java para consulta BOJ. Pero aún así, ya
sabes, si nosotros si lo mandamos ahí, qué el yo no hice mucho en cuanto a la salida que se obtiene de vuelta. Pero aún así, ya
sabes, si este formulario se envía a esta página, aún debería procesarlo, aunque no estuviéramos secuestrando a través de JavaScript. Entonces por si acaso alguien tiene javascript apagado Ah, el correo aún se envía El mensaje de que la respuesta que reciben no necesariamente será la más, uh, ya
sabes, la más bonita, Pero aún así, esta voluntad, um todo debería seguir funcionando. Entonces Ah, por
eso vamos a poner este guión de procesamiento en eso. Que tú más estás todavía bien. Es decir, gente en estos días de gente no tiene javascript encendido. Hay mucha de la web que ni siquiera pueden usar muchos sitios y desarrolladores en estos días simplemente asumieron que javascript está encendido. Y así no creo que estemos fuera de límites con hacer lo mismo de todos modos. Seguiremos adelante y crearemos esta nueva desde el archivo llamará process dot PHP. Y es sólo en el tipo raíz de esta carpeta de trabajo que tenemos aquí. Entonces está justo al lado de punto índice cada melón en Una pregunta Sé que probablemente podría llegar
a esto es, Bueno, no
tenemos página html, pero estamos sentados y lo estamos enviando a esta página de PHP. ¿ No necesita esto ser PHP? Una respuesta es en realidad, no, porque no hay código PHP en realidad en esta página. Entonces no hay nada que procesar, a pesar de que la forma ah envía datos a un script de procesamiento PHP, ese script es todo un
archivo separado, ah, ah,aquí así que en realidad puedes hacer una página html de punto índice y enviarla a una parada de proceso Página PHP. Y funciona muy bien. Entonces sólo toma una especie de respuesta a esa pregunta, ¿verdad? Entonces con eso dicho, sigamos adelante y apertura y sigamos adelante y escribamos nuestro script PHP. Entonces lo primero que hacemos, por
supuesto, etiquetas PHP
abridor y luego vamos a configurar son una especie de nuestra fig con. Ahora me quedo con esto. Es decir, hay guiones enteros que son guiones masivos para hacer formularios de contacto y así sucesivamente. Estoy manteniendo esto realmente simple porque no quería hacer de este un enorme curso de PHP. De acuerdo, así que si quieres sumergirte en PHP, tengo un montón de cursos de gente durazno, ya
sabes que están disponibles que transmitiste acceso a ti vas almacenado John Morris online dot com. O si estás en cuota de habilidad, solo tienes que ir a mi página de perfil, y las verás todas ahí. Pero estoy tratando de mantener el PHP lo más limitado posible. Entonces lo primero que vamos a hacer es que vamos a hacer el envío a. Entonces, ¿a quién vamos a mandar esto? Y esto va a ser Recuerde, esta es una página de cotización o una acciones que va más cerca. Se trata de una solicitud de cotización pagada. Entonces esta va a ser tu dirección de correo electrónico. Vale, Así que solo voy a poner esto a no tontear en john Morris online dot com o lo que
sea esto va a ser una dirección de correo electrónico ficticio aquí para mí, pero obviamente querrías poner en tu dirección de correo electrónico de tus clientes email dirección y luego el tema. Haces la línea de asunto lo que quieras. Esta es la línea de asunto que tiene el correo electrónico cuando llega. Sólo voy a poner nueva solicitud de cotización y en realidad, déjame volver aquí arriba. Bueno, en realidad, es sólo hazlo aquí. Generalmente hacen cotizaciones simples. A veces me volteo flop. Entonces de todos modos, así que hagamos que esas comillas simples solo consistencia. Entonces vamos a revisar y ver si hay algún post fuera de incluso cuando esto se envíe vía Ajax. Todavía es reconocido como ser presentado como un post tipo de enviar. Entonces queremos comprobar para ver si Post Data ha sido enviado y vamos a así vamos a comprobar y ver si Post está vacío o no. Si está vacío, entonces sólo estamos No vamos a hacer nada. Podrías, por
supuesto, poner aquí una declaración else y decir algo como, ya
sabes, no hacer
eco de datos o algo así. Entonces si quieres hacer eso, puedes Puedes hacerlo. Um, por lo que
tengo, en realidad lo estoy dejando en blanco. Um, así que puedes simplemente decidir lo que quieras hacer ahí. Está bien. Siguiente cosa reducir. Ir a crear una lista blanca. Por lo que esta es una lista blanca de campo de forma de pies. Bueno, excepto así vamos a hacer nombre igual. Ah, Post y haremos nombre. Y de nuevo, hay formas realmente extravagantes, concisas de que podrías hacer esto sin escribir todo esto para ambos así. Pero de nuevo, para aquellos de ustedes que no conocen necesariamente una tonelada de PHP, no
quiero que esto sea demasiado complicado. Entonces todo lo que estamos haciendo es agarrar los datos del formulario enviado. Entonces cuando el primero
se presentó, esencialmente enviará ah solicitud con estos datos en este post super global justo aquí. Por lo que parece una variable PHP. Algo así como lo que sí aparecimos. Pero está estructurado un poco diferente. Esto básicamente el nombre que se envió, el correo electrónico que se envió en el formulario como Eso es realmente todo lo que necesitas saber para entender esto, y voy a hacer mensaje que haga mensaje igual. Y eso es uh huh post y mensaje. Y luego vamos a hacer miel igual y se dio post y tu URL. Y eso en realidad me hace no creo que agregamos el honeypot a nuestra forma. Sí, así que nos perdimos el mielero cuando hicimos nuestro formulario. Entonces, en realidad, volvamos a indexar html. Está bien. No es tan grande de un trato para agregar. Por lo que lo agregaremos aquí justo debajo de nuestra área de texto. Y así vamos a hacer div clase igual campo de formulario. Entonces se va a ver lo que es una olla de miel. Es un campo que cuando llega un baht, un baht siente como si tuviera dedo del pie muchas veces en los bots vienen a través. Van a llenar algo en cada campo de aquí, ¿
verdad? Y así ah, cariño, olla es básicamente como un oso no puede resistir la miel. Es como si un cuerpo no pudiera resistir llenar este campo. Entonces vamos a crear un campo que el baht llenaría, pero un humano no lo haría. Y la razón por la que el humano es porque vamos a poner esto para que no muestre nada. De acuerdo, entonces esto no se va a mostrar en realidad a un humano, pero un bott leyendo esto verá este campo y lo llenarán. ¿ Dónde está el humano no lo haría. Y eso es así entonces podemos decir si tenemos una botella, no tan tipo de entrada igual a oculto. Uh, ahora, esta es una forma muy rudimentaria de lidiar con el spam. Pero si lo haces bien, en realidad puede funcionar. Entonces lo haces Nombre igual a U R l Y entonces lo haremos. Marcador de posición te iguala, Earl, ¿verdad? Nada de eso importa porque no va a mostrar. Pero el punto de una olla de miel es como si los spammers hubieran descubierto que la gente hace esto. Y así si solo nombra a este tipo de entrada igual a honeypot, Bueno, los bots probablemente van a tener algo en él para reconocer eso y no llenarlo. De acuerdo, así que necesitas hacer que parezca un campo de forma real. Y tú eres l es como, cuando tú cuando usas el término miel, Teoh cebo la olla para llenarla. La mayoría de los bots. Lo que absolutamente quieren poner en tu sitio es que ahí estás l Por eso están spamming. Entonces, cuando usas una u. R. L como una maceta de miel, podría ser en realidad bastante efectivo porque la gente sólo va a querer
llenar eso . Entonces por eso uso eso aquí. De acuerdo, entonces este es un campo de formulario. Te das cuenta de que no aparece por aquí. Si me deshice de ah style display Ninguno, entonces Ah, en realidad, no
es Bueno, es un campo oculto, así que no importa, pero no se está mostrando más. Aquí está el punto. Y así los humanos no lo van a llenar, pero el baht lo hará. Y entonces cuando lo llamamos a nuestro script PHP, podemos agarrar eso y podemos probar. Y si se llenó que probablemente fue un comprado el que presentó este formulario, ¿de acuerdo? Y así entonces simplemente no podemos procesarlo. Entonces eso es en realidad lo primero que estamos haciendo. Vamos a revisar el honeypot, porque si es, ah si es un honeypot, es un spam, un spam. Pero ni siquiera vamos a meternos con nada. Entonces vamos a hacer si no, vacíos, y vamos a hacer miel. Entonces si eso no está vacío, eso significa que se llenó. Se presentaron datos en ella. Entonces vamos a hacer Echo J. Sohn Ah, en realidad codificar y vamos a crear un ah Air Ray. Ahora, la razón por la que estoy haciendo esto de esta manera es porque cuando lleguemos a la parte de JavaScript, vamos a agarrar estos mensajes y analizar cantidad en mostrarlos. Aquí es donde digo que si alguien realmente envía este formulario con javascript apagó su proceso formal. Pero ¿qué va a salir del dedo del pie? Es esta matriz codificada Jason codificada o un yo no hice nada del dedo del pie para que eso se vea más bonito. ¿ Algo? Porque estoy realmente enfocado en el el el a jack procesamiento de la misma. En realidad no estaba demasiado preocupado por Si alguien visita directamente con PHP para
ti, tal vez quieras saber, eso puede ser algo de lo que quieras dar cuenta. Y así entonces lo harías Ah, ya
sabes, te asegurarías y lo harías en tu guión particular de la forma en que escribes esto. De todos modos, había un problema. ¿ De acuerdo? Y de nuevo, con este mensaje en particular, notan
que no estoy dando mucha información porque esto es si los simios estuvieran asumiendo que un baht de spam llenó esto, no
vamos a decir Oh ja ja ja. Conocemos tu ah, cuerpo de
spam o lo que sea, ¿verdad? No vamos a hacer eso porque no queremos darles ese dedo de la información, tal vez tratar de trabajar o lo que sea. Simplemente vamos a decir que hubo un problema y entonces ojalá se muevan de nosotros . ¿ De acuerdo? Entonces otra vez, sólo ten esto en cuenta. Se trata de cuatro que tratan de spam. Muy bien, entonces ahora vamos a comprobar si hay valores vacíos otra vez. Este es un lugar donde podrías hacer algún script PHP de lujo. Simplemente vamos a mantenerlo realmente simple. Entonces si y después vamos a hacer vacío y vamos a hacer nombre. Entonces si los nombres vacíos o vacíos y van a hacer, uh de y configuramos el de igual a la dirección de correo electrónico que se envió, eso fue sólo una elección que hice sobre cómo nombré las variables Y entonces o así si ese correo electrónico que esto básicamente este correo de aquí está vacío y esa es esta condición se entenderá o ah, mensaje
vacío. Entonces si el mensaje está vacío ahora, ponemos requerido una cosa a tener en cuenta con esto es que ponemos requerido a los de la boca H dos. Entonces si tratamos de enviar este formulario, el navegador nos va a decir que está vacío. Entonces ya estamos haciendo eso en el frente, y ya tenemos frente y validación pero también lo vamos a revisar en el back end, si
acaso. Es decir, alguien podría estar viniendo de un navegador realmente viejo que no hace eso ni lo que sea. Entonces otra vez, somos solo tú siempre compruebas en la parte delantera y en la parte trasera. Entonces eso es lo que estamos haciendo aquí. Entonces si alguno de esos thes aire o declaración Así si nombre está vacío o de su vacío o mensajes vacíos de cualquiera de ellos está vacío. Entonces de nuevo, vamos a hacer eco y bien lo hacemos Jason. Ah, y código. Y vamos a hacer una matriz y vamos a hacer estado cero y mensaje y vamos a decir, falta
un campo A que es hacer campo requerido. De acuerdo, entonces estamos dando un poco más porque asumimos que esto es un humano. Ahora, en este punto, le
estamos dando un poco más de información que la que hicimos para Ah, el baht. Y de nuevo, vamos a hacer morir. De acuerdo, así que eso va a matar el guión después de eso. Entonces si se cumple esa condición,
se hará eco de que Jason codificó Ah, ese array codificado Jason. Y entonces morirá. Y de nuevo, la razón La única razón por la que estamos codificando Jason. Esto se debe a que vamos, en última instancia, eventualmente agarrar vía Ajax. Y así imprimirá un mensaje que agarramos vía Ajax. Y luego usamos eso de este lado de esta página para mostrar el mensaje adecuado, y pronto llegarás a ver todo eso aquí. ¿ Verdad? A continuación, vamos a comprobar si hay un correo electrónico válido. De acuerdo, Entonces vamos a establecer de igual a y vamos a hacer barra de filtro, que es una función PHP, y vamos a hacer desde Entonces vamos a pasar en nuestro email de. El correo electrónico. Esa fue Ah, alguna dirección de correo electrónico. Se presentó, y vamos a ejecutar el filtro de filtro. Validar correo electrónico. De acuerdo, entonces básicamente qué barra de filtro hace va a tomar esta variable y ejecutarla a través de este filtro. Y lo que hace este filtro es comprobar para ver si es una dirección de correo electrónico válida. Entonces, ya
sabes, hay un estándar por ahí para cómo debería ser una dirección de correo válida. Y PHP tiene estos filtros que pueden ejecutar la dirección de correo electrónico de enviado en contra de eso. Entonces eso es lo que esto va a hacer va a revisar eso y luego aquí abajo, nos dio si no de. Entonces si básicamente, si ese filtro de nuestros devuelve falso significado, esa no es una dirección de correo electrónico válida. Y de nuevo, vamos a hacer eco de Nissan, uh, y codificar. Y vamos a hacer un array status status zero message on dirá, um, no ah, email
válido. De acuerdo, entonces ese será nuestro mensaje. Acabo de notar aquí arriba esto en esos mensajes otra vez. Haz eso, yo y entonces sí moriremos aquí abajo. De acuerdo, Entonces eso comprueba para ver si tenemos el correo válido. Por lo que sólo estamos pasando por una serie de cheques. Verificamos el honeypot, comprobamos los valores, luego comprobamos si hay correo electrónico válido. Entonces solo estamos noqueando todas las cosas que podrían impedir que esto se procese. Y luego una vez que pasemos por todos esos, entonces podemos entrar en OK, ahora, estábamos bastante seguros de que tenemos datos válidos y así sucesivamente. Ahora, vamos a enviar el correo electrónico. Entonces vamos a enviar un correo HTML, así que vamos a conseguir cabeceras establecidas iguales a, y voy a hacer sprint f y voy a hacer desde y vamos a hacer porcentaje eso sprint f esencialmente te permite pop in placeholders. Entonces donde hacer desde y luego vamos a hacer el desde así y luego punto Uh, backside son slash y así. De acuerdo, así que esto es básicamente la configuración son de en lugar de que solo sea, um las direcciones de correo electrónico, que a qué se haría por defecto. Y sólo conseguimos un, ah, algo de la dirección de correo electrónico. Podemos hacer que se vea más bonito si queremos. Ahora, lo que estoy haciendo aquí es que en realidad solo estoy configurando esto desde la dirección de correo electrónico, así que en realidad no estoy haciendo nada aquí. Pero yo escribí eso para que si quieres, puedas cambiar esto y hacer como algunos como de, y luego podrías hacer el nombre y luego la dirección de correo electrónico y así sucesivamente. Entonces de todos modos, Ah, por
eso estamos haciendo esto aquí. Entonces encabezados. Y de nuevo, tengo todo un curso sobre el envío de correos electrónicos. Entonces si realmente quieres sumergirte en eso, te
recomiendo checar eso. Um di es igual. Por lo que esto se va a anexar a la primera línea superior. Entonces sprint f y vamos a hacer respuesta y vamos a hacer porcentaje s otra vez, y vamos a hacer de nuevo. Por lo que esto está poniendo de nuevo la respuesta. Tendrá por defecto la dirección de correo electrónico. Pero sólo estamos otra vez. Vamos a establecerlo explícitamente para que si quisieras cambiar eso, puedas cambiarlo. Para que pudieras poner la respuesta a otra cosa que no sea qué? El real la dirección de correo electrónico real que fue enviada desde, en este caso, no
sé necesario Por qué querrías hacer eso. Pero de nuevo, sólo
estoy tirando estas cosas aquí para mostrarles cómo hacer estos 80 millones de millas. Está bien, así que esto va a sumar de nuevo. Entonces vamos a difundir f y luego vamos a hacer X ex mailer, y vamos a dio PHP slash porcentaje s. y esto sólo va a establecer qué versión PHP. Esto se está enviando desde aquí. Está bien, así que eso se pone nuestros encabezados. Y entonces ahora nosotros y el punto iguala básicamente lo que eso significa es un pendiente lo. Entonces va a esto en última instancia a lo que los encabezados van a ser iguales es de y el de la
dirección de correo electrónico y luego una respuesta de salto de línea al de correo justo en un salto de línea, y luego x mailer y la versión de PHP, ¿
no? Entonces es el DI igual es solo dependiendo de la línea anterior en lugar de anularlo. Que es lo que harías si no hicieras el punto igual a derecho. Entonces si y luego vamos a hacer correrá el mando masculino. Entonces masculino y vamos a establecer Ah, la primera variable son las dos. Entonces eso es lo enviado a Eso es lo que configuramos en el conflicto que se va a enviar a usted o su cliente, cualquiera que sea el asunto del correo electrónico, que también pusimos en el convicto, y luego vamos a hacer el mensaje, y luego vamos a hacer los encabezados. De acuerdo, entonces eso va a ser lo que manda nuestro correo electrónico, y estamos revisando ejecutándolo en un condicional como este. Si el macho devuelve verdadero que el condicional se cumpla. Si devuelve falso de lo que no se cumplirá. Entonces si devuelve verdadero, entonces vamos a hacer eco de Jason y código, y vamos a hacer una matriz. Y esta vez el estado va a ser igual a uno porque fue exitoso y el mensaje será correo electrónico enviado con éxito así. Muy bien, vamos. El Papa. Seguimos matando el guión después de eso porque no necesitamos No hay más procesamiento que tengamos que hacer. Sólo tenemos que hacer eco de eso y eso es todo. Y luego lo último que vamos a hacer y no lo voy a hacer dentro de otra declaración es que sólo
vamos a hacer eco de J. Sohn Ah, en código. Y tenemos justo Esto es sólo una especie de ah ah ah, mensaje de estado
predeterminado. Así que el estado de matriz. Lo pondremos a cero, y luego pondremos mensaje igual a él. Correo electrónico no enviado con éxito. Por favor inténtalo de nuevo. Está bien. Y ese es el final de los guiones que no vamos a hacer el buceo aquí. Entonces, esencialmente, lo que está pasando aquí es si tenemos todos estos cheques que atravesamos si lo sabes, si uno de estos falla, si éste que se cumple esta condición lo que hizo básicamente significa que tenemos un fracaso, vamos a devolver un mensaje negativo, devolver un mensaje negativo, devolver un mensaje negativo, y luego vamos a intentar enviar el correo electrónico. Y si el correo electrónico envía devolverá un mensaje positivo y luego aquí abajo, por alguna razón, alguien se vuelve loco y lo hace a través de los cheques pero no envía el correo ni nada más. Básicamente, vamos a regresar. Y un mensaje negativo que dice que el correo electrónico no se configuró con éxito. De acuerdo, ese es el script PHP. Y de nuevo, vamos a En última instancia, no
vamos a enviar gente ahí directamente a esto. Vamos a utilizar Java script urge una consulta para enviar en solicitud Ajax y estos mensajes de estado que están consiguiendo codificado a Jason. Vamos a agarrar esos en RJ Query, y luego vamos a procesar los en RJ Query. Y eso es lo que va a mostrar el mensaje aquí abajo. Entonces cuando alguien Smith es esta forma, nunca saldrá de esta página.
12. Construir el contacto desde la secuencia de AJAX: Anuncié tiempo para crear script de consulta RJ que se va a procesar se forman aquí. Entonces vamos a venir a nuestro archivo que ya tenemos freelancers está ahí un punto Js y vamos a ir dentro de la función lista que ya hemos creado aquí sólo porque no realmente ningún uso en la creación de otro. Todo esto. Ah, Jake, ferrocarril. Basta con cargar una vez que el documento esté listo. Entonces, uh, sólo
vamos a ir a ponerlo aquí adentro, y lo vamos a hacer ahora. Podrías analizar esto. Creo que ya lo mencioné antes. Esto es para el menú. Ahora estoy haciendo el formulario. Podrías crear dos archivos JavaScript diferentes, por lo que sería un poco más portátil. Siéntete libre de hacer eso si quieres. Um, así que voy a decir que vamos a adjuntar un manejador de envíos al formulario. Lo que sea. No obstante, eso tiene sentido. Está bien. Entonces, nuevo, si no estás familiarizado con Jay Career, te
recomiendo ,
como, ,
como,no voy a hacer. Ah, Jake Ray 101 Aquí. Entonces pero así si quieres conocer más sobre Jake, recomienda encontrar curso y tomar que actualmente no tengo ninguno. Um, pero tal vez por la línea de todos modos, voy a invocar consulta J y vamos a buscar vamos a seleccionar o contactar formularios. Damos a nuestro formulario de contacto un formulario de clase de contacto, y así vamos a seleccionar eso, y luego vamos a hacer dot submit. Entonces ese es un método de consulta J. Entonces al enviar el formulario, entonces vamos a crear una función anónima y teclearemos en evento para que podamos apuntar al evento, y luego vamos a hacer cosas dentro de esta función anónima. Está bien, ¿entonces vamos a ver qué? Nuestros errores. Token inesperado. Está bien. Sí, yo Así que ponemos el token aquí arriba, Um, y así lo estamos invocando aquí abajo. Entonces adelante. En realidad, parte de eso va a ser porque esto sólo debería tener uno que debería estar aquí abajo. Exactamente. Seguro. ¿ Qué? Escribí mal ahí, pero eso en realidad cerró los corchetes que los paréntesis. Ahí. De acuerdo, Amy, así debe verse. Por lo que tenemos nuestra presentación. Ahora, estamos creando una función anónima dentro de estos corchetes, y aquí es donde vamos a manejar nuestra forma. Entonces lo primero que necesitamos hacer es detener la forma, realidad dar un poco de espacio aquí. Tenemos que evitar que el formulario se envíe normalmente. ¿ Verdad? Por lo que queremos evitar que se envíe y en realidad ir a esa página PHP crear porque lo
vamos a hacer vía Ajax. Vamos a evento dot prevenir default. Entonces de nuevo, esto es una especie de método jaqui que solo va a tomar este evento que pasamos. Por lo que el botón hizo clic en el formulario enviar. Eso va a tomar y va a evitar la acción predeterminada que está enviando el formulario a la U. R L en el script de acción. Entonces va a evitar que eso suceda, Así que es lo primero que tenemos que hacer. Entonces vamos a serializar los datos del formulario enviado y obtener la acción, que es esencialmente la URL. De acuerdo, entonces primero vamos a crear una forma de puntería variable, y vamos a ponerla igual a esto, Que es esto en este caso es desde que presentamos lo hicimos. Estamos haciendo esto en presentar. Es la forma. Entonces vamos a, um esta es la razón por la que estamos estableciendo igual para formar esto nos va a dar el elemento de forma de nuestra de nuestra página. Está bien. Y entonces vamos a conseguir son ustedes están en otro lugar en se. Eres l igual a, ah forma. Estamos entrando en una variable de forma que acabamos de crear adder de puntos. Entonces atributos y acción. Um bien. Entonces, esencialmente, lo que esto está haciendo es decir que vamos a entrar en la forma que se presentó, ¿
verdad? Porque hicimos esto en cemento. Vamos a entrar en la forma que se presentó, y vamos a entrar en ese elemento de forma, y vamos a conseguir la acción, el valor del bloque de acción, que es process dot PHP. Entonces a eso se debe establecer esta variable. Entonces la razón por la que hacemos eso es para que podamos agarrar, ya
sabes, podría
haber múltiples formas que son procesadas por este script de consulta J, y así vamos a agarrar la forma real o la U R l real de esa forma en particular, Sea cual fuere el que se haya presentado. Entonces solo hace que esto sea un poco más, uh, modular. Está bien. A continuación vamos a Ah, estoy haciendo esto muy bereberes tazones, pero vamos a mandar los datos usando post. Entonces vamos a variable y vamos a hacer la publicación igual, y vamos a poner eso igual a punto post. Por lo que este es un método de Cory nuevamente lesionado. Eres l Así que vamos a euro. Acabamos de conseguir Así que vamos El método post esencialmente es una taquigrafía para el uso de Ajax dentro de la consulta J. Por lo que esto va a crear va a publicar este dato dos. Vamos a publicar algo a esta u R L. Y luego tenemos que decirle qué publicar. Por lo que vamos a hacer forma se forman a partir de arriba variable de forma Chazal, toda
nuestra forma dot serializa. Entonces lo que se va a hacer serializar es esencialmente tomar todos los datos en la forma. Por lo que todos los campos ah que se han llenado aquí van a tomar esos y serializar aquellos para que puedan ser Es más fácil pasar como datos post. De acuerdo, así que eso es lo que está haciendo. Y entonces ahora necesitamos para que eso realmente sea a lo que me refiero. Esa línea justo ahí es lo que realmente envía los datos del post. Entonces como puedes ver, es
Es bastante simple y directo de esta manera, Jake se preocupa. Es decir, sé que mucha gente ha pasado desde entonces a algunas otras cosas, y estoy seguro de que hacen cosas similares, pero todavía bastante útiles en este momento. Vamos a poner los resultados en. Ah, div. De acuerdo, entonces vamos a hacer la publicación. Es por eso que sí publicamos variable arriba. Por lo que ahora podemos referirnos a ese punto Don. Entonces, cuando se hace, ¿
cuándo? Cuando esto termine aquí, entonces vamos a correr esto. Y así vamos a funcionar y vamos a hacer datos como este. Y ahora vamos a esencialmente dentro de esto cuando se haga la actuación y tenemos una respuesta de vuelta por Ajax. Ahora vamos a ejecutar esta función anónima, y ella Lo que recuperamos son los datos que obtuvimos de nuestra solicitud. Y así vamos a hacer respuesta variable y dijimos que igual a punto y vamos a analizar a Jason porque recuerdas, nosotros lo que presentamos. Ah, lo que estamos enviando de vuelta es Jason. Cuando creamos script PHP, mantuvimos a Jason y codificando todas nuestras respuestas. Es por eso que es más fácil trabajar con dentro de Ajay Kori vamos a partes eso y luego
vamos a hacer objetivos iguales y haremos mensajes de estado. De acuerdo, así que hemos hecho un par de cosas ahí. Hemos analizado nuestros datos y lo hemos establecido igual a respuesta aquí. Y entonces tenemos nuestro objetivo. Recuerda div con mensajes de estado. Entonces lo hemos puesto muy bien. Esto es solo establecer variables. Todavía no hemos hecho nada, Así que tenemos par star Jason y ponemos eso igual a respuesta. Y ahora hemos puesto nuestro objetivo para donde queremos subir estos datos. Y ahora vamos a hacer éxito publicitario slash clases de aire. De acuerdo, entonces vamos a sumar a los miembros de la clase. Entonces vamos a hacer esto. Um, dentro de J. Corey. Entonces lo que vamos a hacer es hacer si estado de punto de respuesta. Recuerda, la respuesta tiene lo que conseguimos de vuelta. Y recuerda, enviamos de vuelta una matriz con un estado y un mensaje. Entonces ahora estamos comprobando ese estado que creamos en nuestra matriz cuando y luego que Jason codificó en nuestro script PHP. Entonces si estado de punto de respuesta y vamos a decir si eso es igual a uno, correcto. Recuerda, teníamos uno como uno de ellos y cero como el resto de ellos. Entonces eso es igual a uno. Había Do target dot remove class error por si acaso, uh, el mensaje de aire ya estaba ahí. ¿ Verdad? A lo mejor envían el formulario, consiguieron un mensaje aéreo, y luego ahora volvieron a enviar y reciben un mensaje de éxito. Queremos asegurarnos de eliminar ese mensaje de aire. De lo contrario, es sólo que ese mensaje de estadísticas Dave va a tener ambas clases. De acuerdo, así que llegamos a quitar el mensaje de aire, y ahí fue a target dot add class y vamos a hacer el éxito. Entonces vamos a sumar en el mensaje de éxito. ¿ De acuerdo? Entonces, básicamente, si el si lo que obtuvimos de un script PHP, es una respuesta exitosa que vamos a quitar la clase aérea del
mensaje del staff , Div. Y vamos a sumar la clase de éxito. De acuerdo, lo contrario si el estado de punto de respuesta y probablemente podrías simplemente hacer otra cosa. Pero aquí estoy siendo muy explícito. Estado de punto de respuesta. Estamos revisando que Lo mismo equivale a cero noche entonces. Entonces si a es igual a cero, entonces vamos a hacer punto objetivo eliminar clase y éxito. Esta vez vamos a mover la clase de éxito porque esta vez falló y vamos
a apuntar punto agregar aire clase. De acuerdo, entonces eso es agregar nuestros mensajes de aire ahí. Por lo que es solo agregar y quitar una clase. Ya creamos esas clases en nuestro CSS. Y entonces lo último que vamos a hacer es que vamos a levantar el mensaje. Entonces vamos a hacer objetivo. Recuerda, esto es lo que establecemos objetivo igual a los mensajes de estado son nuestro bloque aquí, por lo que objetivo punto vacío anexar. Entonces está básicamente vacío es quitarlo cualquier cosa. Si hay algo ahí dentro antes se lo va a quitar ahora vamos a escribir
vamos a hacer respuesta el mensaje. Entonces el mensaje que creamos en nuestro script PHP para nuestro Ray y ellos iban a hacer el escondite y el punto se desvanecen y así eso es solo un defecto. Yo quiero hacer 400. Está bien. Entonces eso esencialmente lo que eso hace es que va a anexar. Va a mover cualquier mensaje ahí dentro. Se va a anular el nuevo mensaje de que lo acabamos de recibir. Lo está escondiendo y luego desvaneciéndolo. OK, entonces z básicamente que le permite desvanecerse en derecho para que cree ese efecto. Y entonces eso es lo que cuando tenemos todo esto, no, entonces eso es lo que tenemos. Cuando vengamos aquí y decimos No, John Lhasa va a llenar algunas cosas y nosotros en este momento es Red dice no sobre correo electrónico. Dijimos, Obtener cotización ahora Cambió. Se desvaneció de nuevo en y todo eso, si subimos aquí y hacemos como, G no un correo válido y entonces no obtenemos un correo válido. Entonces eso es lo que permite que todo ese efecto del dedo del pie suceda
es, Es esta consulta j aquí y el escondite y el desvanecimiento en la respuesta y así sucesivamente. Entonces eso es todo. Eso es todo para la consulta J aquí. Entonces otra vez, bastante sencillo. Si no te resulta familiar, Jake Ray, tal vez un poco difícil de seguir. Ah, recomiendo, ya
sabes, encontrar curso, Andrzej Carrera o algo así, o simplemente volver a través de ella o r. haciendo referencia al código fuente. Cualquier cosa que tengas que hacer para que esto se haga por ti
13. Construir la animación de la jQuery: Lo que quiero hacer ahora es el desplazamiento suave. Entonces si miramos esto aquí Ah, y damos click en uno de estos enlaces aquí si damos click en ti notamos que simplemente tipo de flash a cada sección y nuestro original Tuvimos algunos. Teníamos un pergamino suave. Entonces quiero agregar que aquí, hay un par de partes diferentes a eso. Entonces lo primero que vamos a hacer es que vamos a apuntar son evento real. Y así tenemos que empezar con nuestros selectores. Vamos a hacer menu mav item, y luego vamos a la etiqueta de ancla para ah, eso es así que recuerda en nuestro menú, cada uno de estos ítems de la lista de esta en lista ordenada se le da el elemento de menú de clase naff, y luego estamos solo haciendo referencia al enlace de anclaje, la la la etiqueta de anclaje en eso. Entonces lo hacemos y luego vamos a seguir en el evento donde después es click. Entonces cuando cualquiera de esos enlaces hizo clic en el aire, entonces vamos a hacer algo, y lo que vamos a hacer es crear una función no anónima que va a hacer las cosas que queremos que se hagan. Está bien, entonces y tenemos que deshacernos de eso. Tenemos que poner eso aquí abajo. Está bien. OK, entonces ese es nuestro selector. Y nuestro manejador de eventos están apuntando a nuestro evento. Y así ahora tenemos que hacer algunas cosas con esto. Entonces primero, vamos a establecer algunas variables vamos a poner esto igual a son este objeto que sólo podamos referirlo varias veces y J Coury no tiene que volver al dom. Es sólo una cosa de actuación. Y luego vamos a Tenemos que conseguir nuestra h ref. Entonces son una trampa para estos son los Va a ser libra sobre habilidades de libra, cartera de
libra. Si recuerdas cuando sección de liquidez le dimos un I d. Ah, eso coincidió con lo que hay en nuestro menú aquí. Es por eso que cuando hacemos click en estos, funciona para ir a cada uno ahora mismo. Entonces ah, pero necesitamos para nuestros propósitos. Tenemos que agarrar eso. Entonces vamos a hacer,
uh, uh, voy a hablar de por qué aquí en sólo un segundo, vamos a un borrador igual y ellos iban a hacer referencia ¿Esta Ah, variable y luego vamos a hacer adder, y vamos a hacer un treff. De acuerdo, Entonces lo que eso hace es básicamente agarrar esa libra alrededor o habilidades de libra agarrar que un viaje, uh, atributos de cualquiera de estos fueron clics. Cuando haces click sobre de h esto un borrador se pone a patear sobre cuando haces clic en habilidades para ponerte en juego habilidades de librar y así sucesivamente. De acuerdo, entonces eso dijo algunas variables que necesitarán. Y luego lo primero que vamos a hacer esto en realidad opcional. Entonces vamos a alterar el menú de duende. Por lo que ahora mismo, cuando hacemos clic en un enlace, este menú de duende por aquí se queda. De acuerdo, Así que escribí esto, y yo diría probablemente el comportamiento previsto que prefiero es que al hacer clic en uno de estos, se desplaza a la sección en el menú se cierra. Porque yo en mi mente, asumí que cuando alguien hace clic en una sección, realidad
van a querer leerla. Y entonces si tienen que volver a hacer clic en la X, eso es como si fuera un click extra. Entonces vamos adelante y lo cerramos por él. Puede que no esté de acuerdo conmigo en eso. Eso está bien. si no quieres hacer eso, Si no quieres cerrar el menú en un elemento se hace clic entonces simplemente no incluyas esta
pequeña sección justo aquí debajo del menú de toggle knave antes de la siguiente sección de desplazamiento suave . Pero quería mostrarte cómo hacerlo en caso de que quisieras hacer eso. Entonces lo que tenemos que hacer aquí es esencialmente imitar lo que hicimos aquí arriba con nuestro toggle ing, nuestro menú y nuestro menu toggle, pero solo hacer la parte remove. De acuerdo, así que vamos a hacer es que vamos a hacer menu toggle, y luego vamos a hacer dot remove class close. De acuerdo, entonces cuando este menú está abierto, el toggle se pone. Tiene la clase cercana añadida a ella y que tenemos alguna animación que va de la mano con eso. Y así cuando quitemos esa clase, entonces eso va a quitar eso. Eso que alterna, y luego vamos a bajar aquí. Vamos a hacer este punto Padres de esto nuevamente hace referencia a la etiqueta de anclaje del elemento de menú en la que se hizo clic. Entonces, ¿cuándo los padres no son padres sino padres? Y luego haremos menú. Haremos Ah, knave item y haremos menu knave y haremos menu. De acuerdo, así que estos imitan aquí arriba cuando aparecemos los elementos que agregamos el show class dos. Cuando alteramos esto, ahora somos sólo que son los mismos. Pero ahora lo que vamos a hacer es quitar clase, y vamos a hacer show así que vamos a quitar esa clase, y eso va a hacer que ese menú se cierre. OK, entonces de nuevo, eso es solo crear este efecto que donde cuando hacemos clic en uno de estos ítems aquí, va a cerrar el menú. Entonces ya ves, ahora el menú se cierra como si hubiéramos tocado ese botón X. Cuando volvemos a hacer clic en uno de estos ítems aquí, si no quieres ese comportamiento, solo elimina estas líneas aquí. ¿ Todo bien? Entonces lo último, entonces, es el desplazamiento suave y el desplazamiento suave es en realidad bastante sencillo. Entonces vamos a referir nuestra variable de ruta que creamos antes de recordar, aparecer ruta. Ah, un cuerpo de sonrisa. Entonces vamos a hacer referencia a eso y vamos a hacer una animación, así que vamos a hacer animar y luego dentro de eso, vamos a tener algunas opciones para nuestra animación. Entonces lo primero que queremos hacer es que queremos especificar cuál es nuestra animación. Vamos a hacer scroll top. Entonces eso va a ser nuestra animación, y tenemos que decirle a dónde vamos a desplazarnos. Entonces vamos a hacer referencia H ref, que creamos aquí arriba, que recuerda a libra sobre habilidades de libra y son secciones. Ten estos me ds. Entonces esto es esencialmente Emily emulando lo que pasarías si no tuvieras ningún javascript fuera de esto y hacías clic en él excepto que está animando el proceso. Entonces vamos a sumar offset. Entonces queremos sumar offset, y vamos a hacer top menos 100. Entonces, esencialmente, lo que esto va a hacer es cuando uno de estos,
uh, uh, linces hizo clic, vamos a animar el pergamino, ¿
verdad? Y nos vamos a desplazar. Todavía a la cima de eso, lo que sea. Ocho. Ref era escuela de cocina la parte superior de esa sección, pero vamos a agregar un desplazamiento a la parte superior de menos 100 píxeles. Entonces, básicamente, al hacer clic en él en lugar de la sección aquí, desplazándose a la derecha hasta la parte superior del navegador, así te va a dar unos 100 píxeles. De acuerdo, entonces eso es lo que eso hace de nuevo. Puede que estés bien con que esto vaya directo a la cima. O quizá quieras 400 fotos de lo que sea para tu situación, pero ah, eso es justo lo que he elegido aquí. De acuerdo, así que ese tipo de configura la animación. Ahora tenemos que decir cuánto tiempo va a tardar. Entonces vamos a hacer 500 milisegundos. Ella está cerca de medio segundo, y luego vamos a hacer adjuntar otra función anónima, y de nuevo, esto es una especie de opcional. Pero creo que tiene sentido en esta situación. Esto funcionará sin esta función anónima aquí. Pero lo que esto hace si hacemos window dot location dot hash es igual a aliento. Um,
Entonces, ¿qué? ¿ Qué pasa? Yo lo hago realmente rápido y bueno, necesito agregar algo aquí, pero hablaré de ese segundo. Entonces si no agregamos esto aquí mismo, lo que pasaría al hacer clic en uno de estos enlaces es que nos desplazaríamos a él y todo funcionará. Encuentra esa manera. Pero no elevaría la etiqueta ah hash ni el hash hasta el final de la URL. Y así, al hacer esto Lo que pasa es que depende cuando se hace click sobre él pone libra alrededor al
final del portafolio de puerto de la URL Libra de habilidades Pound, etcétera. Entonces es una especie de imita el comportamiento por defecto porque eso es lo que pasaría por defecto si no tuvieras trabajo un script adjunto a cualquiera de esto. Entonces creo que en este sentido eso tiene sentido imitar el comportamiento por defecto de esa manera. Dependiendo de si estás usando esto para otra aplicación de la que puedas o no quieras
hacer eso,
por lo que dependes de lo que estás haciendo. Puede o no agregar esta parte aquí, y luego lo último que tenemos que hacer aquí es devolver false, y eso va a asegurarse de que el comportamiento predeterminado al hacer clic en uno de estos enlaces no suceda. De acuerdo, entonces si entramos aquí ahora, hacemos click en habilidades puedes ver que obtenemos ese desplazamiento suave. Tenemos nuestros 100 píxeles aquí, y si vamos a portafolio, menú de lo
mismo se cierra. Contacto, etcétera volverán a subir a cerca y así eso nos da nuestra escuela sin problemas. Ahora bien, si no estás familiarizado con Jake query. Si este tipo de tu primera introducción a Jake Ray, esto es probablemente podría ser un poco abrumador otra vez. Yo recomendaría, ya
sabes, tomar clase E J Corey o volver a través de esto porque una vez que lo sabes, un poco de Jake donde esto en realidad es bastante sencillo. Esto es algo bonito Ah, no
quiero decir básico, pero es algo bastante estándar cuando se trata de Jake Preocupación So. Pero esperemos que eso te muestre cómo hacer eso. Y puedes hacer que esto funcione para cualquier situación en la que te encuentres.
14. Construir el pie de sitio: Está bien, ya lo
has conseguido. Estamos abajo a la última sección aquí. Sé que algo de esto es probablemente bastante grueso para pasar. Simplemente recomiendo tal vez volver a través de él y trabajar con un poco de aquí, tener un poco de problemas que se alarga. Pero estamos abajo a la sección de pie de página. Este es en realidad bastante sencillo y directo. Entonces vamos a hacer Footer. Y al igual que el encabezado, vamos a clase igual pie de sitio así y vamos a hacer como siempre, Div Class es igual a contenedor. ¿ Div clase igual a fila Y luego vamos a hacer clase div igual y vamos a hacer una llamada 12 y vamos al centro de texto. Está bien, y luego dentro eso servirá. Sólo haciendo un tipo de cosas de copyright aquí. Por supuesto, Cambia esto por año. Su sitio lo hará y copiará. Eso nos da los derechos de autor. Marcarme Desplázate aquí para que veas que estamos abajo. Despeja aquí abajo Así y copia. Y voy a hacer 2018 en 18 Joe Freelancer. Ah, está
bien. Reservado así. Y eso es más o menos. Ese es el pie de página. Basta con darle estilo en este punto. Entonces iremos. Eso diré yo. Y luego pasaremos a nuestro CSS aquí y me dejaremos agarrar mi divisor aquí. Entonces ahí está nuestro divisor y sólo vamos a hacer pie de página del sitio y vamos a hacer relleno de 20 píxeles. Escolar abajo para que puedas ver eso Así palmaditas 20 pixels hará fondo y vamos dio dos d dos d dos d dos d, solo un poco diferente gris. Y luego haremos color número 999 Derecho, Así que eso nos da más o menos son nuestro pie de página final ahí. Vaya, ve y guarde eso. Está bien, así que eso nos da una especie de nuestro último pie de página ahí. Ah, y eso. Es decir, eso es realmente todo ahí. Ahí está. Tan bastante rápido uno aquí todo Ah, saltando a una lección de envolver después de esto y podríamos hablar de algunas cosas a
tener en cuenta en seguir adelante desde aquí
15. Proyecto de clase y conclusión: Está bien. Entonces ojalá ustedes chicos y disfrutaran del curso. Si lo hicieras, te
agradecería que me dejaras una reseña sobre el curso. De verdad me ayuda. Además, asegúrate de seguirme en mi perfil para que puedas ver cuando libere algún nuevo curso y además echa un vistazo a alguno de los cursos que tengo ahí. Ya sabes, tengo Guía de Principiantes para PHP tengo objeto de curso HTML. ¿ Alguna programación? Diversos cursos de desarrollo Web. Ah, uno de mis cursos más populares ¿Es este freelancing en cursos de trabajo arriba? Entonces si quieres meterte en eso y demás,
Así que otra vez, siéntete libre de revisar esos y bucear cualquiera de los que ah, quieres aprender tan bien como para esto, Ya
sabes, una de las cosas que Me imagino que pasar por esto es ya sabes, algunas de estas cosas si muchas veces la gente se mete en el desarrollo web así sucesivamente, pueden aprender CSS muy bien. Pero tal vez no. Ya sabes, Jake, somos script Java tanto o lo que sea. En realidad estoy en un barco similar, ya
sabes. Yo lo sé. J consulta suficientemente buena, pero javascript realmente no es algo que he paloma pesado en una especie de más fue por el
camino PHP . Ah, y así cuando tienes algo como esto, creo que lo que hay que mantener tu mente es que lo combina de manera justa. No digas avance, pero necesariamente es un agresivo, ya
sabes, html, CSS, JavaScript y PHP. Y así cuando estás juntando todos esos idiomas diferentes,
Ah, Ah, puede
que no conozcas cada uno de ellos tan bien como pensabas o es lo que quieras o lo que sea. Y así, por
supuesto, así tal vez pueda sentirse un poco abrumador. Y hay un par de cosas que yo sólo quiero una especie de reiterar aquí las he dicho, pero una es, ya
sabes, si ese es el caso, sólo un poco de seguir adelante y seguir trabajando con ello y así sucesivamente, y creo que empezaré a tener más sentido. La segunda cosa, sin embargo, es y especie de. El punto de por qué quería hacer este video es que es realmente importante. Cursos basados en proyectos como este son agradables porque tienes que aprender a construir algo que sabes, real, y son divertidos y así sucesivamente. Pero si de verdad quieres dominar el desarrollo web, quieres ser realmente bueno en esto, y realmente quieres dominar específicamente un lenguaje en particular. Realmente necesitas sumergirte en un tipo de curso específico de concepto específico específico del idioma. Entonces algo así como mi Guía para Principiantes del Ph. Pierre, mi Guía para Principiantes del HTML, ese tipo de cursos de ese tipo. No necesariamente son tan divertidos o como cotización unquote sexy como un curso basado en proyectos como este . Pero esos son en realidad cómo te metes y realmente dominas esos idiomas. Y son esas cosas que la gente toma para llegar al punto donde pueden hacer un proyecto como este sin tener el dedo del pie,ya
sabes, ya
sabes, sin que una bestia sea súper abrumadora y así sucesivamente. Es decir, cuando me senté y hice esto, claro, siempre
tengo que hacer algunas investigaciones y buscar las cosas. Pero tengo la idea general en cada idioma de lo que quería hacer. Y eso es porque he tomado ah cursos específicos de idiomas en todas estas cosas, y he aprendido los lenguajes individuales reales en profundidad ellos mismos así y los uso
día a día. Entonces tuve una idea bastante buena de lo que iba a hacer. Entonces de nuevo, solo
quiero animarte a no quedar atrapado en Onley tomando de nuevo cursos basados en proyectos como este. Son divertidos. Están geniales. Creo que una vez que pasas por algunos de los cursos específicos de idiomas que los
cursos de puerto basados en proyectos como este son realmente buenos próximo paso a dar. Porque ahora te permite tomar todo este tipo de conocimientos que has reunido y ponerlos juntos en algo. Pero, uh, nuevo, ya
sabes, si de verdad quieres dominar el lenguaje, realmente quieres dominar el desarrollo web, entra en esos cursos específicos de idioma. Está bien, así que eso es todo lo que realmente tienen que decir en esta envoltura aquí otra vez. Ojalá disfrutara del curso que hicimos de nuevo. Agradezco si volvieras a dejar una reseña. También, sígueme en mi perfil. Si quieres que te notifiquen de algún otro curso y yo lo haré, avísame si tienes alguna pregunta en la discusión a continuación. Gracias
16. Próximos pasos: Yo soy honesto ya no hay más. Tan online.com, tan poca limpieza para terminar este curso. Si aún no lo has hecho, asegúrate de dirigirte al área de clases. Hay una sección de clase para algunos, algunos pasos por los que caminar para este curso. Así que asegúrate de dirigirte en que está bajo la discusión en la pestaña Proyectos que verás en el curso. Además, si te diriges a mi perfil, asegúrate de darme un seguimiento de mi perfil aquí para que te notifiquen cuando libere nuevos cursos. Y también tengo una especie de curso semanal estilo podcast en curso llamado Let's Talk freelance. Entonces si te gustaría tener algún tipo de acceso a la formación
continua en materia de freelancing y negocios en línea y así sucesivamente. Asegúrese de comprobar eso. Hablemos de curso freelance también. Y por último, sí tengo un boletín diario de tips en mi página web en John Morris online.com. Si te diriges por ahí, puedes apuntarte a esa lista de correo. También te pondrán en la mía propia, en mi propia aplicación móvil, o obtendrás acceso a más de 78 horas de contenido
gratuito al momento de esta grabación relacionada con freelance y así sucesivamente. Entonces si te interesa eso, BD seguro revisará eso también. De nuevo, ese es John Morris online.com. Está bien. Gracias por tomar la clase. Si lo disfrutaste, te agradezco por Ti. Déjame una reseña y te veremos en el próximo curso.