Transcripciones
1. Introducción: Hola y bienvenidos a una nueva clase. Esto está construyendo un sitio web de comercio electrónico con auriculares. Entonces, en primer lugar, ¿qué vamos a usar para esta clase? Vamos a usar Node.js y JavaScript. Y para el front end vamos a usar Bootstrap, EJS, HTML, y CSS. Entonces en esta clase vamos a crear todo lo que es front end. Y vamos a visualizarlo ahora. Entonces este es el proyecto que vamos a crear. Contamos con nuestra integridad de marca domiciliaria sobre y contáctanos. También tenemos el método de inicio de sesión y de alta. Y por supuesto, esta es la página de inicio. Tenemos algunas características del sitio web, algunas marcas, algunos bestsellers. Y por supuesto, las categorías. Después seguido de un pie de página que lo vamos a tener aquí mismo. Por lo que esto es básicamente para el sitio web como página de inicio. Y por supuesto vamos a crear mucho más que eso. Vamos a crear las categorías de marcas sobre nosotros y contactarnos juntos mientras aprendemos todos y cada uno de los pasos en el camino. Y por supuesto, vamos a terminar nuestra página web con un proyecto un poco pequeño que vas a crear y por supuesto dejarlo en la sección de proyectos. Entonces con eso dicho, esta es la introducción de este vaso. Nos vemos en el primer video.
2. Nodo de configuración: Muy bien, así que ahora estamos en nuestra página web de comercio electrónico. Esta es una carpeta en nuestro escritorio. Y vamos a dividir el proyecto en dos partes principales. El primero es diseñar el front end de nuestro proyecto, luego trabajar con el back-end. Pero por ahora, vamos a empezar con nuestro archivo JavaScript. Vamos a usar Node.JS y requerir algunas de las pocas cosas como Express, BodyParser, EJS, y mangosta. Y por supuesto, no te preocupes si no sabes nada de ellos. En realidad puedes mantenerte al día ya que
vamos a explicar algunos de ellos en nuestro proyecto. Entonces, antes que nada, vamos a crear nuestro app.js. Entonces lo llamaremos, y este es el archivo de carpeta JavaScript. Y luego vayamos a NodeJS, descarguemos la versión que es para nosotros. Entonces estoy usando Windows, así que simplemente no sé la dispersión. Y después de eso pasan por el mago del aislamiento. Y luego nos queda bien ir. Entonces está arriba y símbolo del sistema, CMD. Y I. Digamos que tenga en cuenta, vamos a conseguir NodeJS. Es comerciante 14.15.5. Y esto significa que descargamos NodeJS con éxito. Por lo que ahora vamos a dirigirnos a nuestro escritorio. Y lo siento, volvamos cd Desktop y luego entramos a nuestro sitio web de comercio electrónico. Entonces como dijimos, es sitio de comercio electrónico y sitio de comercio electrónico. Y sigamos adelante e instalemos. Algunos están requiriendo algunas de las cosas que
necesitamos tener para completar nuestro proyecto. Entonces lo primero que tenemos que hacer es escribir npm install express. Y como puedes ver, se descargará express y unos segundos. Y este es el proceso de descarga. Y necesitamos descargar algunas cosas también Como BodyParser, EJS, y mangosta. Por lo que la base de datos que vamos a utilizar es un MongoDB. Y esto es lo primero. Esto se expresa descargado. Y en realidad podemos decir, dije de instalado. Y podemos descargar BodyParser, EJS, mangosta, y express session todo al mismo tiempo. Entonces si seguimos adelante y golpeamos Enter, puedes ver que se están descargando. Entonces por ahora, por qué se están descargando, podemos volver a nuestro código y empezar por requerir que se descargue. Un archivo. Entonces lo primero que tenemos que hacer es crear nuestra primera constante. Y esta será la constante Express. Y lo usaremos para requerir Express. Y como pueden ver, no
teníamos este paquete. Suerte que JSON antes. Una vez requerimos algunas cosas, notamos que tenemos algo como, vamos a ver. Tenemos aquí BodyParser. También tenemos, por ejemplo, el nombre del color y todos estos archivos o requisitos que necesitamos utilizar en nuestro proyecto. Se están descargando automáticamente con sólo descargar estos cuatro o cinco requisitos. Entonces por ahora esto se expresa y luego necesitamos BodyParser. Por lo que necesitamos requerirlo también. Entonces analizador corporal, y como de costumbre, esto es sólo un nombre. Podemos nombrarlo como queramos, pero es más fácil si lo nombramos así. Y por supuesto necesitamos escribir el mismo nombre de descarga desde aquí. Como puedes ver, usamos BodyParser con un guión en el medio. Y esto se expresa y BodyParser por ahora, sigamos EJS para requerir EJS, luego Mangoose. Por lo que esto es mangosta requieren. Y por supuesto, necesitamos usar la sesión. Entonces esta es sesión de la sesión express que descargamos. Y creo que por ahora estamos bien. El último que tenemos que hacer es crear nuestra aplicación real. Por lo que esto se expresará así. Entonces por ahora, podemos empezar con nuestro proyecto. Entonces vamos a comprobar si todo está funcionando. Y una forma de hacerlo es simplemente creando el puerto que vamos a usar. Entonces usaré el puerto 3000 y lo veremos en un minuto. Y por supuesto necesitamos escuchar esta pizarra usando esa lección. Entonces vamos a usar a la gente que acabamos de crear. Y por supuesto, podemos crear una función. Y vamos a console.log. Y vamos a escribir Servidor iniciado o 3000. Y esto es para el despliegue. Y ahora podemos mandar algo. Por ejemplo, supongamos que cada vez que entramos a nuestro navegador, necesitamos escribir hola mundo. Entonces tenemos que conseguir, vamos a usar el método get. Y la página por defecto será ésta, la varilla hacia adelante. Y por supuesto necesitamos crear una función. Tenemos la solicitud y la respuesta. Y luego dentro de esto vamos a arena de la respuesta, descansa esa arena. Y vamos a mandar Hola mundo. Entonces esto es básicamente, esta es nuestra configuración. Ahora podemos seguir adelante y escribir en nuestro CMD Node JS. Y así es como podemos instanciar. Entonces, cuando tenemos aquí tenemos un error, no podemos acceder a la aplicación antes de la visualización. Y como podemos ver, usamos la longitud de aptitud. Lo sentimos, aquí necesitamos usar App que obtienes. Y por supuesto, esta es la inicialización de la app, debería ser antes del uso de la misma. Y por supuesto ahora si regresas y escribes app.js. Y como podemos ver, Tenemos esto para permitir que NodeJS se ejecute. Por lo que simplemente permitiré el acceso. Y podemos ver el mensaje que escribimos. Esl inició en 0.3 mil. Esto indica que todo funciona bien. Si seguimos adelante y vamos a localhost 3000, podemos ver Hello World indicando que
logramos construir con éxito nuestro navegador de nodos o aplicación de Node. Entonces esto es todo para este video y el siguiente video vamos a empezar con el front end de nuestro proyecto. Entonces nos vemos.
3. Encabezado: Muy bien, Ahora que acabamos de terminar de configurar nuestro app.js, en realidad
podemos empezar con nuestro front end. Pero una cosa antes de eso es usar algo disponible para nosotros en nodo. Y a esto se le llama Norman. Y como pueden notar, si voy a nuestro cmd y escribamos nodo app.js. Y por supuesto ir a localhost 3000. Podemos ver que tenemos hola mundo. No obstante, si cambiamos algo aquí, Supongamos que cambio HelloWorld, HelloWorld como pesado. Y este caso, si vuelvo y tuviera que refrescarse, no va a pasar nada. Entonces una forma de lidiar con eso es instalar realmente el Nodo 1. Y para lo que no los hombres, como se utiliza, es en realidad crear algo que cada vez que cambiamos algo, nuestro código se cambia automáticamente y nuestro navegador. Entonces sigamos adelante y sólidos. Y una forma de hacerlo es simplemente escribir MPI y BMI dash g a global y necesitamos instalarlo. Hindeman. Ahora, se está instalando un anciano. Y luego después de terminar la instalación, simplemente
podemos usarlo diciendo nodo app.js en lugar del nodo app.js. Entonces esto es básicamente para Rodman. Y luego después de que se haga el escaneo con esto, podemos empezar con nuestro front end. Entonces esperemos, esperemos un poco. A lo mejor. Simplemente cierra esta ventana por ahora. Y dentro de nuestro sitio web de comercio electrónico, necesitamos crear las vistas. Y dentro de este USE, van a crear todos nuestros archivos EJS. Por lo que dentro de las vistas se crean los parciales de carpeta. Dentro de parciales tenemos el encabezado y el pie de página. Entonces volvamos atrás y comprobemos que Norman sigue atascado en algo. Entonces vamos y empecemos con nuestro encabezado. Por lo que dentro de la cabecera, por simplemente fue a Bootstrap. Y en este proyecto vamos a usar Bootstrap. Así que empieza, ve a Plantilla iniciada, simplemente cópiala y pega aquí. Después fui a Font Awesome para usar los iconos. Así que ve a Font Awesome. Y por supuesto, consigue tu propio kit. Si no tienes un email de registro. Y luego va a conseguir algo así. Se mete dentro, se pone gong para conseguir este. Puede crear cualquier kit que desee. Mi teléfono ahora, voy a usar este por lo que voy a golpear Enter y luego volver y básico aquí. Por lo que ya pegué en el cuerpo. Y ahora vamos a crear el encabezado. Y luego después de terminar de la otra, simplemente
podemos mover esta parte, tal vez todo esto hasta aquí, y pegarla dentro de nuestro pie de página. Entonces esto es básicamente volvamos atrás. Y como puedes ver, cuando se vende Tuckman y luego escribimos Norman app.js para instanciar la aplicación, la carpeta o archivo JavaScript. Y en este caso, el servidor se está ejecutando en el puerto 3000. Si vuelvo aquí y volvamos a localhost, tenemos hola mundo, se dirige. Si cambio algo aquí. Entonces supongamos que fui y agregué esto, retrocedamos, refresquemos. Y como pueden ver, vamos a ver. Está bien, Así que está empezando, y ahora tenemos esto aquí. Entonces esto es básicamente para nochmal. Y como dijimos, tenemos aquí nuestra cabecera. Y dentro de este encabezado vamos a crear la barra de navegación que vamos a utilizar. Por lo que tenemos cabecera. Dentro de la cabecera, tenemos los nervios y aquí tenemos algunas clases. Contamos con barra de navegación, barra de
navegación expandir grande, menú de navegación y BJ oscuro. Y en realidad puedes copiar tu propia barra de navegación desde Bootstrap, pero prefiero crearla por mi cuenta. Entonces esto es para la barra de navegación y por supuesto necesitamos agregar el botón. Por lo que el primer botón sería de clase navbar, niño pequeño. Y luego tenemos el botón de navegación. Y entonces por supuesto, necesitamos ser un tipo D de este botón para ser el botón real. Y luego los datos VS cambiaron para cambiar entre los elementos siempre que tengamos un lapse y por supuesto el objetivo. Por lo que los datos BAS objetivo, y estos son métodos de adición simples solo para usar la barra de navegación. Entonces mi, ahora para que limite mi red por ahora. Adelante y crea aquí las subdivisiones. Entonces dentro de nuestro botón y ve aquí y ábrelo. Pero por ahora, volvamos a nuestro app.js y en realidad intentemos enviar este encabezado que EJS a nuestro navegador. Entonces cuando estoy pensando es simplemente crear casa. Y dentro de la suma, podemos usar el encabezado y el pie de página. Entonces, aprendamos a hacer eso. Simplemente podemos crear un nuevo archivo en vistas, y este será home.html. Dentro de esta casa, necesitamos incluir el encabezado y el pie de página. Entonces para hacer eso, simplemente podemos escribir esta línea de código para comandante, dash, y luego incluir lo que deberíamos incluir como parciales y luego attr. Entonces ahora simplemente cerramos la etiqueta como lo hicimos antes, y este es nuestro encabezado. Y por supuesto podemos teclear lo que queramos aquí. Entonces, por ejemplo, vamos a escribir hola desde casa, y va a funcionar muy bien. Pero por ahora necesitamos renderizarlo usando la app dot JS. Aquí. Entonces volvamos a arriba y adentro. Tenemos que usarlo como app.get. Entonces en la brecha, necesitamos renderizar a casa como de costumbre. Ahora volvamos, refresquemos. Y como podemos ver, tenemos nuestra barra de navegación. Es muy pequeño por ahora, pero lo conseguimos de la cabecera. Y en realidad lo usamos dentro de nuestro hogar simplemente incluyéndolo dentro de nuestro hogar que DJ S. Así ahora llamamos al Home para el archivo js y también al encabezado simplemente refiriéndonos a él dentro de aquí. Entonces esto es básicamente para transferir el encabezado de un archivo a otro. Esta es la sencilla línea de código que necesitamos usar. Entonces sigamos adelante ahora y continuemos con ese encabezado aquí. Y por supuesto, tenemos que empezar por crear algunos artículos. Y algunos de ellos son el hogar, por ejemplo, necesitamos tener una página de inicio. Y lo primero que estoy pensando en hacer es crear unos cuantos, algún icono aquí. Entonces vamos a averiguarlo más tarde. Pero por ahora, simplemente escribo la referencia. Y esta referencia no señalará nada por ahora. Pero tenemos algunas clases como la marca navbar, esa diapositiva. Y luego texto en mayúscula. Si necesitamos agregar alguna escritura aquí, debe
ser mayúscula y x g2. Y luego Amex auto para simplemente hacerlo en medio de un deficiente. Pero por ahora esto es lo que necesitamos agregar aquí nuestro elemento. Simplemente lo agregaré dentro del lapso. La clase será H2, y podemos añadir nuestro icono. Entonces sigamos adelante y elijamos el ícono que queremos de Font. Impresionante. Entonces volvamos a los iconos. Y vamos a desplazarnos hacia abajo. Como podemos ver, tenemos tantos artículos que puedes usar. Escojamos esto, éste por ejemplo. Por ahora. Así que pulsa Enter y luego espera un poco hasta que se cargue la página. Y en realidad puedes usar este icono con esta sencilla línea de código. Entonces si vas aquí, baja el sitio usando este ícono y copia esto. Ahora volvamos a nuestro código. Y en lugar de yo, pego esto. Ahora si volvemos a nuestro sitio web de comercio electrónico, oh, está aquí. Entonces esto es básicamente este es nuestro Eigen que vamos a usar por ahora. Por lo que ahora, después de crear el elemento, en realidad
podemos empezar con la creación de nuestros elementos dentro de esta barra de navegación. Entonces para hacer eso, necesitamos crear la nueva división. Y esta división tendrá varias clases como de costumbre. Se derrumbará la clase, la primera clase, y esta es la clase más importante y veremos por qué en un poco. Pero por ahora, navbar para laboratorios. Y luego después de eso, justificar contenidos centrados. Y por supuesto, texto, mayúscula, y luego SW, negrita. Y por supuesto, ya que usamos los datos ser como objetivo para estar señalando en mi barra de navegación, necesitamos nombrarlo igual que antes. Entonces mi barra de navegación, y esto es en realidad para la división, esto es división de demanda. Dentro de esta división, necesitamos crear la primera columna y será una columna Dan, y por supuesto un grupo también. Por lo que se trata de un grupo de la columna 10. Y por supuesto necesitamos crear la lista desordenada. Y dentro de nuestra lista desordenada tendrá navbar, nav y algún relleno o margen en todos los lados. Entonces esto es, podemos crear nuestro primer elemento de lista. Y como de costumbre, la clase será nav item. Ya que estamos trabajando con red, el enlace estará apuntando a nada por ahora. Y por supuesto, el DNI. Lo averiguaremos más tarde. Pero por ahora ser la clase activa. Y las clases serán nav link, una caja tal vez para más tarde y m2. Entonces creo que por ahora estamos bien. Entonces sigamos adelante y comprobarlo. Si voy a refrescar, no
vimos nada porque no lo probamos. El homepage. Entonces este es el hogar. Y como pueden ver, por ahora tenemos nuestra casa. Por lo que este es el primer elemento de lista. Vamos a seguir adelante y crear los otros. Por lo que dentro de aquí, déjame copiar esto pocas veces. 1, 2, 3, 4, y 5. Ahora pensando en hacer esto como marca y luego este producto. Y por supuesto necesitamos una página para el, sobre nosotros. Y así se trata de esto, y esto es Contáctenos. Entonces esto es básicamente cuatro. Y la novela, la primera parte de la barra de navegación, si vuelvo, déjame cambiarla a cosa de categoría, es mejor. Y si vuelvo atrás, refresco, como podemos ver, tenemos categoría de marca casera sobre contacto y todos podemos estar de acuerdo en que necesitamos ajustarlos, tal vez cambiar los colores. Y por supuesto tenemos que sumar algunas cosas al final de este nabla. A lo mejor un simple botón de inicio de sesión y registro los revisará más tarde, pero por ahora esto es todo. Entonces en el siguiente video vamos a crear nuestro archivo CSS para nuestro encabezado. Y sólo unas pocas cosas aquí. Y por supuesto continuar pero creo que nuestro encabezado, el registro, los botones de registro. Y en realidad vamos a crear este letrero como modelo. Y vamos a ver cómo se va a construir. Y el siguiente video. Entonces esto es todo para este video. Aquí. El siguiente.
4. Navbar 1: Está bien, así que ahora que terminamos con nuestra primera parte de la barra de matemáticas, podemos empezar con un arrancar los animales. Y una forma de hacerlo es crear un estilo o un archivo CSS. Y en este archivo CSS, lo
vamos a vincular a nuestro encabezado. Y por supuesto, podemos llamar a los ítems por ID o por nombre de clase, o incluso por la etiqueta. Y podemos cambiar o modificar cualquier cosa que no éramos, como color, tamaño, etcétera. Entonces, en primer lugar, necesitamos crear una carpeta pública. Y dentro de esta carpeta, vamos a crear una carpeta CSS. Y luego crea el archivo CSS. Y yo lo nombré style.css. Puedes ponerle el nombre que quieras. Pero hay que prestar atención que debe terminar con dot css, lo que indica que se trata de archivo SCSS. Entonces este es mi expediente por ahora. Y por supuesto necesitamos vincularlo a nuestro encabezado. Entonces vuelve aquí. Y como pueden ver, agregué esta línea de código. Y es simplemente decir que queremos vincular este patrimonio EJS a un archivo llamado style.css es una carpeta CSS. Y por supuesto para volver atrás, no
olvides que ahora estamos en parciales. Entonces hay que volver aquí y luego entrar a la carpeta CSS, style.css, y debería funcionar bien. Entonces ahora para asegurarnos de que simplemente podemos ir, y digamos que necesito el cuerpo con el color de fondo del rojo. Entonces ahora si vuelvo y refresco, podemos ver que conseguimos el fondo rojo como queríamos. Entonces esto indica que nuestro archivo CSS funciona bien. Entonces lo primero que vamos a modificar la familia de fuentes de todo el cuerpo. Por lo que la familia de fuentes. Y por supuesto, hagámoslo san-serif y esto debería ser importante, por lo que simplemente agregamos S como importante. Ahora vuelve fresco y ahora estamos bien. Entonces vamos a empezar con el estilo p elementos de nuestra barra de navegación. Y estos elementos están dentro de la cabecera. Por lo que creo estos comentarios para indicar que se trata de un encabezado. Entonces y adulto. Y por supuesto, si necesitamos llamar a los elementos por ID o por nombre de clase. Y volvamos a cabecera. Desplácese hacia abajo. Y como podemos ver, tenemos esta clase navbar, nav y nav item. Por lo que vamos a utilizar estos dos para cambiar y modificar el banner de estos artículos. Y por supuesto, volvamos atrás y empecemos con el primero. Entonces Navbar, Nav. Y este será un actor. Por lo que siempre que esta clase esté activa, la a dentro de la barra de navegación debe ser de color 31. 31, 8, f ser cinco. Pero esto es un, básicamente esta es la corriente que queremos usar por ahora. Y digamos que cada vez que
flotamos sobre algo, necesitamos que el color sea también éste. Por lo que tenemos que cambiar el elemento de navegación cada vez que tengamos el elemento sobre. Y el color debe ser el mismo hashtag, 31, 8, f, v5. Y ahora volvamos a refrescar. Y siempre que pase el cursor sobre este elemento, se
puede ver que cambia a lo que queremos. Ahora bien, si reducimos el tamaño de esto, como podemos ver, se derrumba. No obstante, permítanme hacerlo más grande. Por lo que tenemos marca casa categoría sobre y contacto. No obstante, si lo hacemos más pequeño, se derrumba y no hay nada que podamos presionar para visualizar estos artículos. Entonces construyámoslo y por supuesto, cambiemos el estilo de estos artículos para que se vean más agradables. Entonces lo primero que tenemos que hacer es crear nuestras divisiones aquí. Por lo que dejé un espacio vacío para crearlos. Y ahora, así lo primero que necesitamos para crear una nueva división de clase, luz de
fondo y línea anémica uno. Copiar pegarlo dos veces más. Y esta es la línea 2, la línea 3. Ahora volvamos a nuestro style.css y agreguemos aquí algunos elementos de estilo. Por ejemplo, podemos agregar el, las tres líneas en la misma. Entonces línea uno y esa línea dos. Y por supuesto esa línea 3. Abramos las llaves, así que le daré un ancho de 23 píxeles. Puedes cambiarlo y tal vez probarlo tú mismo. Pero por ahora, le doy lo mismo. El ancho de 23 píxeles, la altura para ser tal vez, hagámoslo tres. Creo que es para ser bueno. Y luego el margen de cinco píxeles. Y por supuesto, tenemos que sumar una transición. Por lo que la transición debe ser vieja, un 0.4 segundos. Y veremos por qué en un momento. Pero por ahora, podemos llamar al cambio. Y esto será, como dijimos, la Transformación Rotar menos 45 grados. Entonces simplemente lo escribiré y luego lo explicaré. Entonces eso es tarde. De menos cinco píxeles y seis píxeles. Y por supuesto a la línea 2. Esta será nuestra capacidad, 0. Y entonces el final será el cambio. Esa línea 3 y transformar. Gira 45 grados y traduce. Menos cinco píxeles, menos seis píxeles. Entonces esto es básicamente. Y si te enfrentas a algunas dificultades para escribir esta línea de código, el CSS, siempre
puedes volver a revisar el antiguo curso de valor y en el que te expliqué HTML y CSS. Y tenemos una explicación muy detallada sobre algunos temas muy importantes. Y por ahora, estas son las líneas. Sigamos adelante y continuemos entonces. Vuelve con ellos. Por lo que después de cambiar de línea, necesitamos el botón de navegación. Y siempre que nos enfoquemos en ello, vamos a cambiar el radio, el radio fronterizo para que sea ninguno. Y esto es importante. Por supuesto, y vamos a darle un punto y coma aquí. Ahora, para el elemento del menú, simplemente nombro, los
nombré así. Por lo que este elemento del menú, Vamos a cambiar el tamaño. Por lo que el tamaño será de 16 píxeles. Y luego el espaciado de letras y le dan un
píxel y el color y lo hacen tal vez sólo entre el blanco y el gris, por lo que font-weight será más ligero. Y finalmente, la transición será todo n, o tal vez el color y 0.5 segundos. Entonces esto es todo para el estilo de la barra de navegación. Entonces vamos a seguir adelante y renombrarlos. Por lo que dentro de la cabecera, tenemos aquí el niño de la barra de navegación, la luz de fondo 123. Y por supuesto necesitamos agregar el elemento de menú a todos estos. Por lo que elemento de menú. Y siempre que quieras agregar lo mismo para más de un elemento, simplemente
puedes presionar
y, para luego elegir todos los lugares que quieras escribir y luego escribir elemento de menú. Y ahora estamos bien. Por lo que tenemos nuestros elementos de menú, artículos de
navegación, barra de navegación, todo debería funcionar bien. Adelante y corremos. Como podemos ver, tenemos nuestra categoría de marca domiciliaria sobre y contacto. Y siempre que pasemos por encima de ellos, se
puede ver que cambia el color. Ahora lo que hicimos efectivamente transiciones es crear esto. El primero es crear éste. Y cada vez que lo
presionamos, tenemos estos aquí. Entonces, ¿qué hicimos? Cancelar, volver al estilo. Y como podemos ver, transitamos en 4.4 segundos para los leones. Y por supuesto, traducimos menos 5 menos 45 grados y menos cinco píxeles a seis píxeles para la línea 1, menos cinco píxeles, y menos seis píxeles a la línea 3 y la línea 2, tendremos un Bassett es 0. Y por supuesto los todos los elementos del menú tienen el mismo tamaño de fuente, espaciado de
letras, color, peso de fuente y transición. Entonces esto es básicamente para los estilos. Ahora si
volvemos, lo vemos una vez más. Si presionamos aquí,
aquí tenemos todos nuestros elementos. Hazlo más grande. Los tenemos justo aquí. Por lo que tal vez en el siguiente video, podamos agregar estos botones de registro e inicio de sesión. Y por supuesto que quizá podamos reducir el tamaño aquí. Creo que se ve. A lo mejor puedo mover un poco esto a la derecha y hacerlo más grande. Y sí, estamos bien por ahora. Entonces esto es todo para este video. El siguiente video vamos a finalizar nuestra barra de navegación, luego empezar con nuestro pie de página y nos vemos entonces.
5. Navbar 2: Hola y bienvenidos de nuevo. En este video, vamos a seguir construyendo nuestra barra de navegación para luego pasar a la foto. Entonces, en primer lugar, necesitamos crear dos botones. El primero diremos inscribirte, y el segundo sería iniciar sesión si ya tienes una cuenta. Entonces con eso dicho, sigamos. Construimos nuestra lista desordenada. Tenemos esta división, y dentro de este colapso, podemos sumar nuestra nueva división. Y esta división sólo aparecerá si la pantalla es lodo. Por lo que el registro sólo aparecerá si tenemos una pantalla grande. Entonces para hacer eso, vamos a usar la columna grande dos. Y la lista desordenada será de clases navbar. Y para indicar que queremos que esto agregue, lo siento, navbar-nav en float. Y así flotar. Y, y estamos bien. Podemos empezar con la creación del elemento nav. Y por supuesto necesitamos crear el HRF. Las clases serán nav link. Entonces tenemos la luz de texto y por supuesto, tal vez añadir la clase Regístrate para más adelante. Entonces esto es inscribirte. Si vuelvo y refresco, vamos a conseguir este botón de registro que aparece aquí. Ahora, como
dijimos, queremos que esta suscripción solo aparezca cuando estemos usando una pantalla grande. Entonces si tal vez lo hago más pequeño, podemos ver que aquí aparece la suscripción. Entonces estamos bien por ahora. Y por supuesto, tenemos que añadir el inicio de sesión, pero estoy pensando en hacer desaparecer el registro. No obstante, si tenemos una pantalla pequeña como ésta, vamos a tener ésta y el logo. Y entonces aquí tenemos seno. Y así para hacer eso, simplemente
podemos escribir nuestro código debajo de nuestra división. Entonces esta división, ¿dónde está? Esto es, este es el colapso. Y esta división, para luego crear una nueva división. Y esta división tendrá varias clases. Ya usamos diez de riqueza aquí. Entonces vamos a usar eso los dos restantes. Y por supuesto que le doy representa px 1, columna 2. Y si la pantalla es grande, tal vez una sea suficiente. Entonces ahora vamos a crear nuestra lista. Como de costumbre, la clase será barra de
navegación y luego el elemento de lista del elemento de navegación de clase. Y por supuesto necesitamos crear nuestro elemento. Señale nada. Por ahora. Esto es en longitud como de costumbre. Y dentro de este enlace de navegación. Podemos crear nuestro lapso. Y en este caso, lo que estoy pensando es crear un modelo y esto saldrá. Entonces, por ejemplo, supongamos que aquí tengo este botón. Siempre que presione, presione sobre sine n, algo saldrá aquí para rellenar el nombre de usuario y la contraseña. Entonces sigamos adelante y construyámoslo ahora dentro del enlace aquí. Por lo que tenemos suficiente barra blanca, nav item y nav link. Entonces, saltemos esto por ahora. Vamos a crear nuestro icono más adelante. Pero por ahora vamos a conseguir el modelo real. Por lo que será un enlace a nada por ahora. Y será marca navbar. Como de costumbre los datos sean lucha. Y esto sería modelar saga sólo para tunelar los datos del modelo objetivo BAS. Voy a nombrarlo sine n. Así que simplemente escribiré hashtag inicio de sesión. Dentro de esta capa, voy a crear un botón, a, clase B, el final, el tipo será botón. Y el estilo que estoy pensando en tener el color de fondo como de costumbre. Paso 3 uno, 8, f, v5. Entonces ahora estamos bien. Si tan sólo entro su letrero y volvamos, refresca, va a conseguir este botón como inicio de sesión aquí. Ahora lo que queremos hacer es crear este modelo. Entonces cada vez que presionemos sobre esto saldrá en, aquí fuera. Y antes de eso, solo agreguemos esta pequeña cosa aquí. Por lo que siempre estamos pensando en agregar un carrito de compras. Y dentro de este enlace de navegación, así que tal vez solo agregue el icono I de Font Awesome. Y las clases serán FAS como carrito de compras y lo harán dos veces más grande. Entonces tengo un dos x. y por supuesto necesitamos algunos estilos, así que estoy pensando en hacerlo blanco, así que color blanco. Entonces ahora estamos bien Refresh, vamos a sacar este carrito de compras aquí. Y queremos mostrar el carrito de compras y el registro al mismo tiempo. Por lo que siempre que el usuario no esté registrando, vamos a mostrar sine n e inscribirnos. A lo mejor mostramos este carrito de compras aquí. Pero lo resolveremos más tarde. Por ahora, vamos a tener el registro de registro. Y por supuesto, el botón de cerrar sesión. Entonces sigamos adelante y creamos como, como éste en realidad. Por lo que tenemos aquí el botón de cierre de sesión. Entonces, simplemente cambiemos el letrero aquí mismo. Y por supuesto, vamos a revisar cada eje marca navbar, modal, sine n tipo clase. Todo se ve bien. No obstante, necesitamos realmente quitar los artículos, éste y éste. Entonces creo que ahora estamos bien. Tenemos la clase navbar. Y tenemos que sumar una acción. Así que deshacer click, voy a hacer algo, pero por ahora, lo dejaré vacío. Y lo vamos a enfrentar en realidad mientras pedaleamos el backend. Por ahora, esto es todo. Entonces si vuelvo y refresco, voy a conseguir el inicio de sesión, cierre de sesión, registro y guardia. Entonces ahora, antes de seguir adelante, solo
comentemos esto. Por lo que estos dos y vamos a estar teniendo inscribirte e inscribirnos n categoría marca casa. Y todo se ve bien por ahora. Entonces esto es básicamente para el registro y el inicio de sesión. Y ahora vamos a crear el modelo real aquí mismo. Entonces para hacer eso, sigamos adelante y volvamos a nuestra cabecera. Dentro de este encabezado, Salgamos de este encabezado de barra de navegación, creemos una nueva división. Y esta división será un modelo de clase, y se desvanecerá también el id, como dijimos cada uno señala en esto, así que vamos a copiarlo. Entonces id igual a sine n dentro de esta división, vamos a crear la forma. Posteriormente se decidirá la acción. Por ahora lo dejaré vacío. Y por supuesto, necesitamos agregar método, pero por ahora, podemos ir sin él. Por lo que la división de esta clase será de diálogo modal. Y vamos a crear varias divisiones dentro de este diálogo modal. Por lo que el primero será más que contenido. Dentro de este contenido vamos a tener el encabezado y título, entonces cuerpo. Entonces lo primero que vamos a crear un modelo que contenido. Y dentro de esto, vamos a tener el encabezado modal. Después tenemos el bar h. Este será título modal. Y entonces aquí lo vamos a haber firmado. Por ahora. Si vuelvo atrás y refresco presente ,
así, el seno n saldría aquí mismo. Entonces lo que vamos a hacer es agregar una etiqueta, luego una entrada,
luego una etiqueta para la entrada de contraseña, y el botón de inicio de sesión. Vuelve atrás. Y por supuesto, después de crear este H4, tal vez crear el botón para despedir. Por ejemplo. Aquí vamos a tener el cuerpo modal y estoy pensando en crear un grupo de forma. Y por supuesto, vamos a tener alguna prohibición. El primer sello será para un correo electrónico. Se etiquetará a la clase. Y luego tenemos dirección de correo electrónico. Y por supuesto, después de conseguir la etiqueta me tenga una entrada de tipo e-mail. Y las clases se formarán control. Entonces tenemos MI para ser dos y esto es un insumo. Y el nombre, vamos a usar este nombre más adelante, pero por ahora vamos a nombrarlo nombre nombre de usuario. Entonces este es el primero. Voy a seguir adelante y refrescar prensa. Tenemos una dirección de correo electrónico y la entrada. Entonces volvamos y realmente copiemos esto para no repetirlo muchas veces. Entonces tenemos la dirección de correo electrónico, entonces tenemos la contraseña. Entonces, simplemente cambiemos esto por contraseña. Y por supuesto tenemos que cambiar estos también. Entonces tipo de contraseña, también contraseña. Y por último, el nombre también será contraseña. Entonces esto es todo para la dirección de correo electrónico y contraseña. Echa un vistazo. Tenemos la contraseña del correo electrónico, y por supuesto necesitamos agregar el botón de inicio de sesión. Entonces volvamos a aquí. Y dentro de nuestra división. Este es para el cuerpo. Nosotros, terminamos con el cuerpo para así crear el pie de página. Por lo que esto será modelado. Y vamos a justificar el centro de contenido. Dentro de esta foto, voy a crear el botón y este será de tipo submit y la clase será btn. Y estoy pensando en el mismo color de fondo que antes. Lo siento tanto, color de fondo. Y sería 318, F, B5. Por lo que 31. Es Eso es b5. Volvamos a refrescar. Vamos a conseguir este pequeño botón, pero nos olvidamos de agregar aquí sine n. volver, refrescar sine n. y como pueden ver, tenemos este botón de inicio de sesión justo aquí. Por lo que ahora podemos ingresar nuestra dirección de correo electrónico y contraseña, luego dar click en iniciar sesión. Y si estamos firmados, si tenemos una cuenta en este sitio web, eso nos llevará en consecuencia. obstante, si no tenemos, tal vez vamos a agregar algo como una alerta o algo así para simplemente glorificar que esta dirección de correo electrónico o contraseña o no, correcta. Entonces esto es básicamente para el front-end de la cabecera. Creo que esto tal vez sea suficientemente claro el correo electrónico de inicio de sesión, la dirección y la contraseña. Quizás más adelante podamos añadir un inicio de sesión con Google, donde el usuario pueda optar por iniciar sesión con un ya crear la cuenta desde Google. Y también puedes hacer eso con Facebook. Pero para mantenerlo sencillo por ahora, vamos a usar el botón de inicio de sesión. Y entonces tal vez más tarde podamos añadir otro botón aquí mismo y tal vez decir iniciar sesión con Google. Entonces esto es todo para el encabezado. Y el siguiente video vamos a crear nuestro pie de página. Entonces nos vemos.
6. Footer: Hola y bienvenidos de nuevo. En este video, vamos a crear nuestro pie de página. Entonces, empecemos con crear el congelado. Contamos con el fotosintato EJS. No obstante, antes de excitar, Vamos a copiar todos estos y luego añadirlos a nuestro pie de página. Entonces esto es lo que sería el fin de nuestros cuatro ahí. Entonces tenemos los guiones y el cuerpo que el HTML. Entonces, por ahora, vamos a crear el pie de página. Las clases estarán oscuras como el encabezado, el X5 y vacíos cinco. Por lo que ahora podemos crear nuestro fluido contenedor y luego crear la fila. Y el texto será ligero. Y por supuesto, necesitamos algo de relleno en el eje Y, así que tal vez cuatro. Y ahora después de crear la fila, necesitamos crear el color. Por lo que algas cañoneras para y para las pequeñas, lo
haré seis. Ahora, tal vez a los cinco años. Entonces este es el Sobre Nosotros. Y el párrafo será una ventaja de clase. Y vamos a añadir un poco de Lauren, Lauren, creo que es bueno. Entonces ahora, si regresas y refrescas, no pasará nada ya que no agregamos la foto a nuestra página de inicio. Entonces aquí, vamos a copiar esto y añadirlo aquí mismo. Pero antes de esto, Vamos a añadir un par de líneas. Entonces tal vez 20 es bueno. Y ahora en lugar de encabezado, necesitamos agregar el pie de página. Entonces ahora volvamos atrás y refresquemos. Y como podemos ver, tenemos estos About Us aquí y algunos párrafo Lorem Ipsum. No obstante, si volvemos, veamos qué está pasando. Entonces aquí tenemos las, cada cinco imágenes sobre nosotros. Y entonces tenemos la clase tal vez cambió este plomo a pequeño ya que son iguales en talla 10. Adelante y revisarlos ahora. Si vuelvo y se ve mejor. Por lo que tenemos el Sobre Nosotros. Ahora vamos a crear unos cuantos más. Gracias. Por lo que estaba pensando en dividir la página en cuatro categorías. El primero es sobre nosotros de lo que vamos a preguntar, tal vez sólo sumar todos estos aquí. Y luego vamos a tener el e-mail nos o necesitamos ayuda o algo así, luego se conectaron. Entonces este es el plan. Adelante aquí. Entonces tenemos la columna, entonces creemos otra. Entonces después de terminar con la primera columna, para usarla para dos ahora, y por supuesto para pequeña, estaba pensando lo mismo que antes. Por lo que columna pequeña seis. Dentro de esta columna, vamos a crear la visita nosotros. Y entonces tenemos la lista desordenada. Hagámoslo desestilizado para conseguir los puntos de bala. Y por supuesto podemos crear nuestros artículos de lista. El elemento será clase, pie de página, enlace. Y por supuesto, hay que agregar a casa. Y en realidad vamos a copiar esto un par de veces. En esta lista se rubro 123. Por lo que tenemos casa tal vez marcas y productos. Entonces si vuelvo atrás y refresco nada para que los visitantes a casa marcas y productos. Y siempre que vamos a, uh, tal vez, tal vez el usuario presione sobre las marcas, Se lo llevará automáticamente hacer la categoría de marca aquí. Entonces esto es todo. Y en realidad vamos a cambiar estos productos en categorías ya que ya los hemos nombrado antes. Entonces esto es básicamente para la segunda división. Empecemos con el tercero. Y aquí le vamos a preguntar al usuario si necesita ayuda. Por lo que la columna 2 y la columna pequeña seis. Y luego va a crear un H5 y clase será Pb tres. Y aquí te vamos a preguntar, si necesitas ayuda. Este es el caso. Tenemos una lista desordenada dice antes de la clase será lista y el ítem de lista será un H ref y tal vez agregue el contacto aquí. Por lo que la clase sería pie de página, enlace, Contáctenos. Y por supuesto, podemos copiar este ítem de la lista para tal vez agregar nuestra dirección de correo electrónico. Entonces aquí vamos a tener nuestra dirección de correo electrónico, tal vez esto en e-commerce en example.com. Y por supuesto, en realidad podemos agregar esto ahora mismo. Por lo que siempre que queramos enviar un correo electrónico o hacer que el usuario envíe un correo electrónico, podemos abrir el buzón usando el correo a y luego enviado
por electrónico y example.com. Entonces ahora si vuelves atrás y refrescas, vamos a tener el Contáctenos y e-commerce y el ejemplo ago. Y esto nos contacta quien llevará al usuario a toda
una nueva página donde tenemos un mensaje que el usuario puede enviar. Y este comercio electrónico en realidad subirá en el buzón
del usuario y hará que en realidad nos envíe un correo electrónico. Entonces esta es básicamente la idea de necesitar ayuda. Tenemos dos opciones. Ya sea en contacto con nosotros a través de la página web o vaya por correo electrónico. Por último, tenemos la estancia conectada, y esto se utilizará para hacer que el usuario ingrese a su correo electrónico si
quiere recibir ofertas exclusivas o nuevas actualizaciones. Entonces volvamos a nuestro código. Y dentro de esto aquí, crear una nueva división. Las clases serán columna grande o columna pequeña, 685, tal vez. Sí. Y la clase será V3. Después tenemos la estancia conectada. Y entonces tenemos un párrafo. El párrafo será pequeño. Y tal vez algo así como introduce tu dirección de correo electrónico para recibir ofertas exclusivas y nuevas actualizaciones. Entonces esto es todo. Vamos a crear el formulario que el usuario debe enviar. Por ahora estará vacía la acción. Y por supuesto que necesitamos agregar alguna clase, tal vez solo los tres margin-bottom por ahora. Y entonces necesitamos crear una división de clase. Input-group. Dentro de esta entrada tendrá la entrada masculina y la clase se formará control. Y por supuesto, el nombre sería correo electrónico. Esto es para marcador de posición posterior, sería dirección de correo electrónico. Entonces creo que esto es bueno. A lo mejor sólo añadir el botón para presentarlo. Por lo que esto sería entrada, grupo anexar, anexarlo a la entrada por encima de ella. Y tenemos el botón y se presentará el tipo. Entonces tenemos las clases. Tenemos varias clases. Estaba pensando en agregar un fondo de peligro. Entonces dimos peligro. Y luego tenemos el texto, texto blanco, mayúsculas. Y por supuesto, tal vez hacer audaz el font-weight. Sí, Así que esto es básicamente, si sigo adelante y refresco, vamos a recibir ingresa tu dirección de correo electrónico para recibir ofertas exclusivas y nuevas actualizaciones. Tenemos la dirección de correo electrónico y este botón. No obstante, nos olvidamos de agregar algo, tal vez en verte aquí. Entonces si vuelvo y refresco, voy a conseguir esta dirección de correo electrónico y la CU anexada a ella. Ahora, si ahora vemos tenemos una pequeña diferencia. A lo mejor. Ajustemos esto. Entonces en lugar de, contémoslos. Por lo que tenemos aquí 4268. Y también tenemos aquí por sí, creo que estamos bien por ahora. No obstante, esta dirección de correo electrónico punto b2 largo. Y para estar en la misma línea, quizá espacio de alto dividendo. Vamos a revisar. Sí, Es por que esta dirección de correo electrónico es demasiado larga. Podemos hacerlo distinto a eso,
así que hagámoslo eco en example.com, refresquemos. Y ahora estamos bien. Tienes el correo de Contáctenos. Y si quiere entrar a su propio él y atlas para recibir alfas
exclusivas y nuevas actualizaciones puede desde aquí. Y haga clic en Enviar, nos vemos. Y luego esto se usará posteriormente en nuestra base de datos donde
podremos guardar estos correos electrónicos y luego enviar ofertas exclusivas a estos usuarios. Entonces esto es todo para el pie de página. Acabamos de crear nuestro encabezado y pie de página. Y en realidad creo que se ven bien y tenemos nuestro flotando por aquí. Y por supuesto podríamos ajustar estos dos botones, pero por ahora, lo dejaremos tal como está. Y los siguientes videos vamos a empezar con crear el sobre nosotros y contáctanos página. Y luego pasaremos a nuestras últimas tres páginas, que son la marca y categoría de casa. Entonces dicho eso, este es el final de este video. Nos vemos en el siguiente.
7. Acerca y contacto: Hola y bienvenidos de nuevo. En este video, vamos a crear nuestra página Acerca de Nosotros. Y empezaremos a crear esta página dentro de la página de inicio. Después de terminarlo, podemos crear nuestro propio archivo EJS y mover todo el código ahí. Pero por ahora empezaremos con crearlo aquí mismo. Entonces lo primero que tenemos que hacer es crear la sección con algunas clases. La primera clase sería B5 y yo le daría un m cuatro tal vez. Sí. Y necesitamos crear nuestro fluido contenedor. Entonces podemos crear nuestra división. Y esta división será el encabezado, el About Us, el título. Y nos creamos, tal vez centro de texto. Y luego cada uno. Estoy pensando en tener un color. Entonces uso este azulejo. Será lag de color. Y entonces podemos crear Sobre Nosotros. Entonces tenemos un párrafo. Añadiré algo de relleno en el eje y y luego algunos aprenderán. Gracias a Dios. Y si volvemos atrás y
refrescamos, vamos a sacar esto sobre nosotros de lo que tenemos unas pocas líneas. Después de eso podemos crear tal vez algo visual. Y estaba pensando en tal vez escribirnos y luego enumerar algunas de nuestras características o ¿qué somos especiales? Y así tal vez después de crear esta división, podamos crear una nueva división. Y esto será texto rho blanco y centro de impuestos. Entonces vamos a tener la columna en la vieja página y soy blanco caer dentro de esto. Voy a preguntar por qué. Y por supuesto, necesitamos agregar algunas clases aquí, así que muéstrales antes. Y el color también será negro. Entonces esto es básicamente para los cables y ahora quizá podamos agregar algunos subrayados aquí. Entonces el persa. Y esto tomará una clase de subrayado y tal vez Marzo y botón de papel de aluminio después del subrayado. Entonces si vuelvo y como pueden ver, tenemos esto, como dijimos. Y aquí podemos sumar las características o nuestras especialidades. Por lo que estaba pensando en agregar más rápido, muy mejores precios y de máxima calidad, y luego también agregar algunos iconos para indicar lo que estamos diciendo. Entonces después de terminar desde esta división, que está aquí, podemos seguir adelante y crear una nueva fila con MI vida. Y cada columna sería MD4. Y por supuesto el centro de impuestos. Por lo que ahora podemos crear nuestro primer ícono. Y este ícono será FASFA, envío rápido, para indicar la entrega rápida y hacerla cinco bolsas. Y el texto será peligro. Entonces ahora m antes, y ahora estamos bien. Añadamos entrega rápida aquí mismo. Y si vuelvo, refresca ahora para conseguir este ícono y luego entrega rápida. Si queremos agregar algo aquí, podemos agregar un párrafo. Entonces tal vez por lo general alrededor de cinco a siete días. Volvamos atrás y refresquemos. Y como podemos ver, tenemos entrega rápida, generalmente alrededor de cinco a siete días. Todavía nos quedan dos. Entonces esto es entrega rápida. No tenemos los mejores precios. Adelante e implementado. Simplemente podemos copiar esta columna, dos tipos más, 1 y 2. En lugar de entrega rápida, podemos escribir los mejores precios. Y aquí podemos sumar la máxima calidad. Ahora, ya busqué los iconos, así que sé en lugar de FAS, tener un envío, Vamos a quitar esto. Y pensé en los mejores precios sí use el USD de mano. Entonces como ayuda y retención de USD y detectos será el inter, también la broma de que sea rojo. Y aquí una flecha y luego circula hacia arriba. Entonces esto es todo. Pero en lugar de FAS, vamos a usar FHIR. Entonces estas son clases simples y cuatro pies Font, Awesome, y no tenemos que preocuparnos por ellas. Simplemente no podemos copiarlos desde ahí e implementarlos en. Ahora, sigamos adelante y refresquemos. Contamos con los mejores precios, máxima calidad y entrega rápida. Entonces cambiemos estos párrafos. En lugar de normalmente alrededor de cinco a siete días. A lo mejor. No lo sé, tal vez Lauren, ocho. Y entonces tenemos aquí de primera calidad. Y también se aprende. Así que adelante y refresca, considera rápido nuestro Y AS en un muy mejores precios y calidad. Y tenemos una pequeña definición aquí. Ah, introducción a nuestros productos o empresa. Entonces esto es básicamente para la página About Us. Creo que se ve bonito y sencillo. Y por supuesto podemos seguir adelante y crear nuestra página Contáctanos. No. Entonces antes de eso, simplemente podemos quitar todos estos y añadirlos en la ciencia, nuestro sobre nosotros. Bien. Entonces sigamos adelante y creemos aquí un nuevo archivo llamado sobre EJS. Y esto contendrá todo este apartado. Entonces vamos a copiarlo y pegarlo aquí, pero asegúrese de incluir el encabezado y el pie de página. Por lo que copiaré este incluido aquí. Y luego vamos a tener el pie de página también. Entonces por favor aquí. Y ahora estamos bien. Regresamos a nuestra primera posición. Tenemos hola desde casa. Y estas líneas aquí. Entonces esto es básicamente para el About Us. Y siempre que queramos implementar o trabajes con el back-end, podemos ajustar esto. De quien presionemos sobre esto, llévanos a la, sobre los js. Entonces dejaremos esto para después. Pero por ahora sigamos adelante y creemos una página de contacto. Entonces volvamos aquí. Y por supuesto, necesitamos, o también necesitamos crear el contacto con el EJS. Pero como lo hacía antes, primero
trabajaré con el hogar a los EJS y luego lo muevo de nuevo a otro archivo. Entonces por ahora, vamos a crear aquí una nueva división, y este será el contenedor. Y voy a añadir algunas clases también vio será formulario de contacto y BJ oscuro. Y estaba pensando en agregar la clase de imagen de contacto. Y estas clases vamos a usar discutes en el archivo CSS Ionic, pero por ahora los voy a agregar aquí. Por lo que la clase será un bebé, un tobogán de impuestos de Rocket Chat. Y luego tenemos un 5 x PD D3. Entonces esto es todo básicamente, si vuelvo atrás y refresco, va a conseguir esto y tenemos este mensaje, podría. Y lo vamos a colocar en el medio. Entonces vamos a tener un cuadro aquí, que dirá que ingrese su dirección de correo electrónico y su mensaje. Y si te asignan, entonces tal vez podamos cambiarlo para ingresar el mensaje solo porque ya conocemos la dirección de correo electrónico. Entonces esta es la idea general. Entonces sigamos adelante y lo implementemos ahora. Ahora adentro. Entonces, tal vez crear una forma. Y tenemos el método y la acción. Dejaremos eso para después. Dentro de esta forma, tenemos los tres años donde vamos a ahorrar. Te encantaría obtener tus comentarios. Y alquilan la diapositiva de texto de clase. Vuelve atrás y refresca. Y como podemos ver, cortamos esto. Nos encantaría escuchar sus comentarios. Ahora, los vamos a empezar y pegarlos en el medio en un poco. Pero por ahora simplemente los vamos a sumar aquí mismo. Entonces este es el h3 que podemos agregar. Nuestra división debe ser una fila. Dentro de esta fila vamos a tener el sexo medio cristal, la columna, lo siento, y luego tenemos el grupo de forma como de costumbre. Y quieres tener la entrada de tipo texto. Y tal vez el nombre sea X nombre. Y luego tenemos el control de formulario de clase, y luego el tenedor del lugar, y tal vez su nombre. Y ahora sumamos el valor, pero por ahora y lo dejamos hasta. Entonces esto es básicamente para la entrada. Entonces, solo copiemos esto dos veces más. Para el teléfono de correo electrónico y luego el mensaje, el mensaje real. Entonces vamos a ver. Tenemos aquí nuestro correo electrónico y después tenemos texto. Correo electrónico. El tipo debe ser correo electrónico. Después tenemos el teléfono. Entonces el texto de tipo está bien. Simplemente necesitamos cambiar esto a teléfono y luego a tu teléfono. Y veamos qué construimos y ahora
refrescamos, conseguimos estos cuatro insumos y todos están por debajo de los demás. Por lo que los vamos a arreglar en nuestro archivo CSS. Por ahora. Vamos a crearlos. Eliminemos esto. Y ahora que tenemos nuestro nombre, correo electrónico, número de teléfono. Nuevamente, agrega el mensaje de envío. Entonces vamos a crearlo aquí. Y en realidad sería el mismo texto de tipo de entrada. A lo mejor aquí se someta. Y en lugar de etiquetas. Y entonces tenemos aquí, en lugar del nombre, soy nombre de texto, empresario, someta. Y luego vamos a añadir algo sobre Clegg. Marcador de posición. Tal vez solo elimine el placeholder y la clase será btn conjunto de contacto de control de formulario. Por lo que BTN contacto, el valor sería enviar mensaje. Por lo que hemos enviado mensaje. Y ahora estamos bien. Si vuelvo atrás y refresco, tenemos este botón aquí que dice Enviar mensaje. Y si queremos ajustarlo, simplemente
podemos agregar el btn aquí, refrescar. Y desapareció ya que no usamos la diapositiva Texto. Entonces si uso texto, tal vez peligro. A ver, Refrescar. Tenemos este botón aquí mismo, pero por ahora lo dejaré como antes, la forma original, y luego lo ajustaré usando el estilo CSS. Por lo que este es un básicamente para el mensaje de envío y estos están en la misma columna. Y ahora vamos a crear otra columna donde vamos a añadir nuestro mensaje real. Por lo que columna md 6. Y en esta columna vamos a crear un grupo de formulario como de costumbre. Y luego vamos a crear el área de texto. El nombre debe ser texto. Mensaje. Clase será para el control. Y creo que estamos bien. Tenemos todo lo que necesitamos. A lo mejor estilo, el ancho para ser 100 por ciento, y la altura para ser también tal vez 150 píxeles está bien. Y ahora estamos bien. Contamos con nuestro área de texto. Por último, necesitamos agregar el botón de enviar mensaje en este caso. Entonces vamos a seguir adelante y crearlo aquí mismo. O quizá estemos bien por ahora. Nosotros en realidad, yo estaba pensando en mover esto a aquí o vamos a verlo. Pero retrocede y refresca. Tenemos nuestro área de texto y tenemos nuestro mensaje. Creo que así se ve mejor. Entonces esta es la idea general. Y en el siguiente video vamos a darle estilo a estos, esta forma y hacer que se vea mejor simplemente colocándolos en el medio, teniendo algo de relleno y margen por aquí y allá. Y cambiando el estilo de este botón enviar mensaje. Con eso dicho, este es el final de este video. Nos vemos en el siguiente.
8. Marca: Muy bien, Así que ahora terminamos con nuestra casa para sobre y contactanos y betas, podemos continuar con la página de marca. Entonces volvamos a localhost 3000, y esta es la página que tenemos. Vamos a mover estos a la página de comentarios o a la página de contacto. Entonces aquí voy a crear un nuevo archivo y nombrarlo, ponerme en contacto con ese EJS y luego ir a Inicio, copiar todo esto y simplemente pegarlo dentro del contacto. No olvides agregar el encabezado y el pie de página a cada archivo EJS que crees. Entonces aquí tenemos cabecera, copia esto y agrega un lagrimeo y pie de página. Entonces ahora estoy configurado aquí, hemos estado ahí y ahora estamos bien. Si vuelvo, guarde, volvamos aquí y refresquemos. Esta es la página de inicio hasta ahora. Y ya creamos el sobre y en contacto con nuestros discursos y podemos utilizarlos cuando queramos. Entonces, por ejemplo, si el usuario presiona sobre sobre, debería
llevarlo automáticamente a la página sobre en lugar de este hashtag. Ahora, saltemos a la página de la marca. Y en este caso lo voy a construir como de costumbre y la página de inicio. Entonces cada vez que lo
hicimos, simplemente podemos quitarlo y colocarlo en la marca que archivo EJS. Entonces, por ahora, empecemos con la creación de la división. Y será un texto centrado y el fondo, le
daré el nombre de fondo marcas vendidas, úsalo en el CSS más adelante. Pero por ahora, esto es todo. El H1 será tal vez marcas. Y estoy pensando en tener algo de relleno. Años de clase serán BT cinco. Y por supuesto, va a escribir un párrafo con el plomo de clase Pb. También he, y estoy pensando, elige tu producto de la marca que te gusta. Por lo que esta es pequeña introducción. Si vuelvo atrás y refresco, estamos teniendo marcas y elegimos tu producto de la marca que te guste. Y por supuesto, quizá queramos agregar un fondo aquí puede ser una imagen o un color de fondo, y lo averiguaremos más adelante. Pero por ahora, esta es la idea principal. Y dentro de esto y pensando en agregar una entrada de búsqueda para que el usuario pueda buscar la sonda o la marca que quiera. Y luego, uh, tal vez el botón aquí. Entonces sigamos adelante y lo hagámoslo. Por lo que será dentro de la forma y la forma realmente vacía por ahora. Y la división será un margen de grupo de entrada, tres inferiores. Y luego un auto max. Creo que esto es bueno. Y entonces tenemos la entrada. Por lo que entrada de texto de tipo, la clase se formará controlada como de costumbre. Y por supuesto, necesitamos un tenedor de plaza. Por lo que busca tu marca. Y entonces tenemos el nombre que vamos a usar más adelante. Estoy pensando en el nombre de la marca. Y entonces tenemos quizá agregar el botón y estará en la misma línea de la entrada. Entonces voy a usar la clase input-group append. Y luego agrega el botón de clase, btn, btn, contorno BTN, secundaria. Y solo para hacerlo gris y luego E5. Por supuesto, se presentará el tipo. Y entonces tenemos el botón real que es la búsqueda. Entonces ahora si volvemos atrás y presionamos Refresh, conocido por tener el botón Buscar, pero se ve muy grande. Se necesita toda la página, así que tal vez podamos ajustarla. Tenemos el botón Buscar aquí. Entonces en cambio, cada vez que creamos esta entrada, en su lugar esta y esta división, podemos crear en realidad el estilo que
queremos y queremos que el ancho máximo sea tal vez 35 REM. Vamos a revisar. Ahora si volvemos refrescar. Sí, creo que es bueno. Pero también podemos quizá hacer la altura. Entonces en este caso, tal vez agregue aquí. Sí, así que eliminamos este margen, abajo cinco y nuestra ella volverá como podemos ver, tenemos nuestra barra de búsqueda con el botón Buscar aquí. Entonces esto es todo para la marca. Elige tu producto de la marca que te guste, y la barra de búsqueda. Ahora, pasemos a las cartas reales, donde estaremos teniendo las cartas. Por lo que el usuario tiene dos opciones. O elige la marca buscándola, o tenemos aquí algunas marcas listadas y puedes elegir cualquiera de ellas. Entonces volvamos atrás y oigamos. Después de terminar con la forma y la división, podemos empezar con nuestra nueva división, que será fila. Y yo soy actos auto. Y por supuesto, dentro de esta fila necesitamos crear la columna, por lo que el sexo de columna y un Auto max. También dentro de esta fila, voy a crear otra fila. Y ya veremos por qué en un minuto. Pero por ahora llevémoslo a la planta. Entonces la columna seis, o tal vez en medio más sexy. Entonces tal vez el sexo medio y tipo de tirón grande en serán cuatro. Y MI para agregar algo de relleno en todos los lados. Por lo que P1. Ahora tenemos nuestra estructura y la dividimos en realidad hora, tal vez nuestra página y 2. Dos columnas siempre que tengamos un medio para pantallas de menor tamaño y en tres columnas. Y siempre que tengamos pantallas grandes y cómo sabemos que son dos o tres. Por lo que la pantalla se divide en 12. Y aquí estamos usando seis y mediano y pequeño. Por lo que 6 veces 2. Por lo que tenemos dos columnas para pantallas medianas o pequeñas. Y tendrá cuatro veces tres, que es 12. Por lo que tenemos tres columnas cada vez que tenemos pantallas grandes. Y lo veremos en un minuto. Pero por ahora vamos a crear nuestra tarjeta. Por lo que hemos escuchado y le voy a dar la marca Dios. Esto es, vamos a usar NCSS. Y por supuesto, vamos a crear nuestra forma y tendremos una acción más adelante. Pero por ahora vamos a apegarnos a esto para MD. Y vamos a tener una imagen, vamos a elegir una imagen en un minuto. Pero por ahora, vamos a tener la imagen de la tarjeta. Y por supuesto, voy al estilo porque
quiero que la imagen tenga una altura máxima de cinco REM. Y ahora terminamos con la imagen. Podemos crear el encabezado de la tarjeta. Entonces voy a crear una nueva división en la que voy a tal vez a la clase, que es el nombre de la marca. Entonces voy a tener un párrafo con una clase de plomo. Y aquí vamos a tener el nombre de la marca. Y luego volvamos aquí. Y vamos a crear la otra división, que tomará el botón de enviar. Y vamos a crearlo usando centro de texto y algún relleno en la parte superior. Y este botón será de tipo submit. Entonces tipos de matemáticas. Y luego tenemos clase btn, btn primaria. Y entonces tenemos quizá explorar. Y ahora estamos bien. Si vuelvo y golpeo refresco, vas a conseguir la primera tarjeta. Entonces tenemos la imagen aquí, pero aún no agregamos la fuente de la imagen. No lo hagas. Posteriormente. Tenemos el nombre de la marca y explora. Entonces pensé que tal vez hacerlo sencillo. Y siempre que el usuario sea interesante, está interesado en la marca. Siempre puede presionar el próximo martes a la marca real con los productos listados. Una página más. A lo mejor creas una página de producto donde el usuario pueda ver todos los productos de esta marca específica. Y luego podemos crear también una página de producto para el producto específico que el usuario elija. Entonces esto es básicamente copiemos esto un par de veces más. Entonces tal vez tenemos esta fila y tomamos esta columna y tenemos otra fila. A lo mejor puedes copiar esto. Entonces vamos a ver, aquí termina. Copiar esto pocas veces. Y Vuelve atrás, pulsa Refresh, y ahora estamos bien. Contamos con nuestra marca, imágenes y el botón explorador. Y ahora sigamos adelante y añadamos algunas imágenes aquí. Por lo que siempre que quieras imágenes, puedes ir adelante a pixels.com. Y estas imágenes son completamente gratuitas por lo que puedes elegir cualquier imagen que quieras. A lo mejor me llevaré éste por ahora. Y puedes presionar este botón para descargarlo. Y por supuesto puedes donar o tanques en Twitter o Instagram, el creador de esta imagen. Me lo saltaré por ahora. Ve al show de estrangulamiento en carpeta y luego tal vez llévatelo desde aquí. Apareció, cortó y luego pegarlo dentro de una nueva carpeta a la que entramos en Crear, estoy pensando en nombrarlo imágenes y tal vez añadirlo a la vista o carpeta pública. Entonces, vamos a ver. Yo estoy pensando en conseguir esto aquí, tal vez llamadas temperaturas. Y dentro de esta carpeta de imágenes, vamos a crear lo real o tal vez pegar esto primero. Y luego volvamos. Y por supuesto, siempre podemos llevarnos esta carpeta y un set y el público aquí. Muy bien, así que ahora dentro del público tenemos CSS e imágenes dentro de la carpeta de público. Entonces esto es todo básicamente, elegimos una imagen. Si queremos, también podemos elegir este. Y ahora tenemos nuestras dos imágenes. Vamos a renombrarlos. Y estoy pensando en la imagen uno y la imagen dos, y siempre busco el archivo dot. Y por supuesto, lo veremos en un minuto, pero debes asegurarte de que cada vez que estés escribiendo en el archivo fuente aquí, Esta es nuestra imagen. Y siempre que estemos escribiendo aquí que queremos la imagen, por ejemplo, esta arriba y las imágenes públicas. Nosotros queremos este. Tenemos que asegurarnos de que escribimos el archivo dot, corregir, de lo contrario la imagen no aparecerá. Entonces esto es todo. Ahora podemos quizás agregar las imágenes aquí. Añadamos estas dos imágenes. Durante esto, lo voy a agregar como imágenes punto-punto y luego la imagen real, imagen uno que PPG. Y ahora si vuelvo a la web de e-commerce, vamos a ver que aquí tenemos la imagen. Y por supuesto, eliminemos todos estos porque por ahora no los necesitamos. Voy a copiar a los demás. Entonces cambiamos la imagen de la primera, que es ésta. Entonces voy a borrar todo esto. Y vamos a copiar estas dos veces y cambiar la segunda imagen. Entonces ahora estamos bien. Podemos cambiar esta imagen 21 más tiempo. Esta es también la Imagen 2. Volvamos atrás y golpeemos refresco. Y como podemos ver, conseguimos nuestras imágenes. A lo mejor puedes ajustarlos, pero por ahora, estamos bien con esto. Tenemos marca nombrada la imagen y explorar. Y esta es la página de la marca. A lo mejor puedes agregar el color de fondo aquí. Entonces vamos a comprobar si tenemos antecedentes. Y si esperamos, tomemos tal vez este. Entonces ahora lo tenemos aquí. Vamos a renombrarlo. Esta es la marca de imagen de fondo. No sé si se verá bien, pero probémoslo. Entonces en realidad no lo agregamos aquí. Tenemos que añadirlo en el archivo CSS. Por lo que en el siguiente video vamos al CSS del archivo de carpeta de marca. Y por supuesto, vamos a seguir con la categoría y luego los productos, los productos reales. Y también necesitamos crear la página de administración donde el administrador del sitio web pueda cambiar,
agregar, o hacer lo que quiera dentro de este sitio web. Entonces dicho eso, este es el final de este video. Nos vemos en el siguiente.
9. Productos: Muy bien, entonces ahora que hemos creado nuestra página de marca, Vamos a seguir adelante y copiar todos estos en el archivo EJS real. Entonces sigamos adelante aquí y creemos un nuevo archivo. Voy a nombrarlo una beca que EJS. Y por supuesto, volvamos atrás, copiemos todo esto y peguémoslo dentro de esta marca. Y necesitamos añadir absolutamente el encabezado y el pie de página. Entonces este es el encabezado. Y por supuesto, necesitamos agregar el pie de página. Y ahora estamos bien. Por lo que tenemos nuestro pitch de marca listo. Y ahora vamos a crear la página de categorías. Entonces lo que estoy pensando es crear aquí una marca y categorías. Por lo que siempre que el usuario haga clic en la marca, te llevará a esta página donde tenemos las marcas y por supuesto tenemos la imagen justo aquí. Y lo mismo para categoría. Siempre que el usuario haga clic en categoría, lo llevará a las categorías y buscó la categoría que quiere. Y creo que esto es todo, pero también tenemos que sumar el fondo aquí. Y dijimos que lo vamos a hacer en CSS. Pero por ahora voy a copiar todos estos de nuevo y pegarlos y la página de inicio o la categoría. Por lo que será igual, pero con un pequeño cambio de categorías en lugar de marcas. Entonces volvamos. Y dentro de casa. Voy a pegarlos de nuevo. Y aquí en lugar de marcas, voy a escribir categorías y elegir tu producto de la categoría que más te guste. Y luego tenemos búsqueda,
búsqueda y nombre de marca, nombre de categoría. Y por supuesto, cambiemos todas estas al mismo tiempo, alguna marca, marca. Y también tenemos aquí. Sí, Entonces esto es todo. Vayamos de aquí. Tenemos también marca y marca. Entonces vamos a eliminar todos estos y tipo categoría, el mismo nombre. Entonces si regresas y golpeas refresco, tenemos el nombre de la categoría, el nombre categoría, y nos perdimos uno aquí. Entonces esto es lo que el nombre de la biblioteca. Y ahora estamos bien. Contamos con nuestras categorías. Contamos con las categorías producto exprimidor de la categoría como tenemos la búsqueda. Y también tenemos estas guías para el. Y todos estos se van a cambiar una vez que
trabajemos con el back-end y las bases de datos. Entonces por ahora, los dejaré así, pero claro que necesitamos cambiarlos por el nombre real de la categoría. Y estaba pensando tal vez agregar algo de relleno aquí. Entonces volvamos a la división de discos. Y dentro de éste tenemos la forma y tal vez le agregamos algún relleno inferior cinco, tal vez. Volvamos atrás y golpeemos Refresh. Y ahora tenemos nuestro relleno de cinco píxeles. Y ahora olvídalo, vamos a añadir aquí el fondo real. Entonces como puedes ver dentro de éste, agregamos un nombre de clase aquí mismo. Por lo que tenemos la marca de fondo y la dejamos como marca tanto para categorías como para marcas, ya que no va a cambiar, voy a elegir el mismo fondo para ambos. Y por supuesto, hagámoslo a su término cuando haya terminado con ellos. Y ahora en el style.css, podemos agregar nuestra imagen de fondo real. Entonces voy a llamar a fondo una marca y luego usar la imagen de fondo como, lo
siento, URL de imagen de fondo. Y por supuesto que las imágenes, entonces tenemos una imagen de fondo, marca el GPG. Y ahora estamos bien. Si vuelvo y golpeo Refresh, vamos a tener este fondo, podemos cambiarlo si no nos gusta, pero por ahora, lo dejaré tal como está. Y por supuesto, este hola desde casa uno b y nuestra actual página web. Entonces sigamos adelante y lo eliminemos desde aquí. Y ahora estamos bien. Refrescar. Ahora puedes ver que tenemos nuestras categorías. Elige tu producto de la categoría que más te guste, y la búsqueda, y también las categorías que tenemos en nuestra tienda. Entonces esto es básicamente para las categorías y este es el mismo que para la marca también. Entonces sigamos adelante ahora y tomemos todos estos y los coloquemos en el archivo de categorías. Entonces voy a crear un nuevo archivo. Voy a nombrarlo categoría. El EJS. Después vuelve a Inicio, copia todo esto, y pegado dentro de esta categoría. Y como de costumbre, no queremos olvidar desde aquí el pie de página y el encabezado. Entonces esto es que básicamente tenemos nuestra categoría, marca y sobre y contáctanos. Todos estos están listos para ahora si golpeo refresco, no los tenemos en la página de inicio. Entonces esto es básicamente para la categoría y marca. Ahora, todo lo que tenemos que hacer es crear una nueva página de producto donde vamos a enumerar todos los productos que tenemos, ya sea en la marca o en la categoría. Y esto depende del usuario. Entonces lo que vamos a hacer es por atrás y filtro S2. Todos los artículos según la marca o la categoría. Y si el usuario quiere. A lo mejor si hacemos clic en marca y se lo lleva a la marca, marca Thrive. Y entonces por supuesto
, elige la marca que quiere. Por lo que necesitamos filtrar todos los artículos que
tenemos de acuerdo a la marca que el usuario elija. Entonces esta es la idea. Entonces sigamos adelante y creemos la página de productos. Después, crea una página de producto para los propios productos reales. Y creo que suena un poco complicado, pero confía en mí, no lo es, es como crear un archivo de categoría o marca. Entonces sigamos adelante ahora y creamos una nueva carpeta para los productos que el JS y otra carpeta para el producto real. Voy a nombrarlo producto. Por lo que los productos aquí vamos a tener todos los productos que tenemos acuerdo al tal vez lo que el usuario elija, ya sea categoría de marca y cuando quieras realmente. Y luego siempre que estemos en la página del producto y al usuario le guste un producto específico, entonces lo redirigirá a la página del producto donde tenemos los detalles explicados del producto. Entonces con eso dicho, sigamos adelante y empecemos con la página del producto dentro de nuestra página de inicio como de costumbre, y luego tapetum en el producto. Entonces el js. Entonces ahora como de costumbre, como tenemos en los productos, todas las categorías y marca, vamos a copiar esta primera división porque creo que se ve bien. Entonces vamos a pegarlo aquí. Y ahora sólo tenemos éste. Entonces elegamos, tal vez cambiemos categorías a productos y luego elijamos tu, un producto de tal vez una categoría que te guste. Creo que eso se ve bien también. Si quieres quitarlo de nuevo, adelante. Pero por ahora lo mantendremos como está. Pero aquí tenemos los productos y luego también tenemos la barra de búsqueda como de costumbre. Y ahora empecemos con el producto real. Por lo que voy a crear una nueva sección con el fondo puede ser ligero. Y luego vamos a empezar con la fila, entonces tenemos a Irlanda. Y dentro de estos voy a crear nuestra lista desordenada. Y esto tomará productos de vidrio. No lo uses. En efecto, archivo CSS. Y luego tenemos los elementos de lista reales. Por lo que el primer elemento de lista tendrá la división de productos. Y luego dentro de esta división de productos va a tener el enlace. Y por supuesto en este enlace señalará ante nada por ahora. Entonces tenemos el estilo. Voy a hacer la decoración del texto a Ninguno. Y ahora dentro de este enlace vamos a colocar dos cosas. El primero es la imagen y luego tenemos. El título, precio, marca, y categoría del producto. Entonces sigamos adelante y creamos ante todo la imagen. Y dentro de esta imagen vamos a añadir imágenes, tal vez imagen a un equipo. Y luego después de agregar esta imagen, podemos agregar el título. Pero antes de eso, vamos a crear una clase de imagen de producto que no usamos más adelante. Y entonces tenemos la nueva división, que será fila, quizá margen top dos. Y luego tenemos el bloque central y luego la columna. Y ahora estamos bien. Podemos crear nuestro lapso y vamos a nombrarlo. A lo mejor por entrada y estilo de baile como de costumbre, decoración de
texto a ninguno. Y luego después de eso podemos crear la clase de nombre de producto con H6 como encabezamiento. Y dentro del lapso podemos tener el ítem vital para ahora volver atrás y golpear Refresh, va a tener título del ítem con una luz de fondo. Y por supuesto tenemos esta lista desordenada y los vamos a ajustar en un poco, NCSS. Entonces ahora si vuelvo aquí y agrego pocas cosas, entonces cuando estoy pensando es tener las imágenes y entonces tenemos el título. Y eso es lo único que hay que añadir. O tal vez el usuario pueda hacer clic en para ser redirigido al producto especial. Y tenemos también el nombre de marca, categoría, nombre, y talla. No los voy a incluir dentro del enlace. Voy a escribirlas, sólo agréguelas. Ahora si vuelvo y refresco, tenemos nuestra imagen y luego también tenemos el título del elemento tal vez. Por lo que ahora necesitamos ajustar el título del elemento de la imagen y agregar pocas cosas. Entonces, en primer lugar, vamos a crear una nueva división que será de texto de columna de clase. Y entonces soy actos cinco, bloque central
H5 y precio del producto para después. Y en esto, voy a sumar el precio del producto. Por lo que precio del artículo, tal vez añado un ejemplo como $10. Entonces esto es por el precio del producto, y voy a añadir el producto, marca y categoría. Por lo que una nueva división con marca de producto como nombre de clase. Y dentro de éste voy a escribir marca y luego seguido de un lapso con algunas clases. A lo mejor sólo hazlo audaz. Tan font-weight, audaz. Y entonces la marca puede ser. Probemos Google por ahora. Y luego tenemos otra para las categorías. Por lo tanto categoría de producto. O quizá puedas trabajar con marcas ya que es lo mismo. Entonces, y aquí vamos a añadir una panadería. Y luego seguido por el lapso sería también divertido manera ambos. Entonces tenemos la categoría. Simplemente agrego un título porque no tengo ninguna parte superior de mi mente. Y estamos bien ahora tenemos la marca y la categoría. Todavía tenemos una cosa que es del tamaño. Y estoy pensando en agregarlo dentro de esta división. Por lo que tenemos aquí producto, marca también. Después tenemos tamaño seguido de un span con la fuente de clase, peso, negrita. Y también tenemos el tamaño, tal vez a un 100 mililitros, y aquí tal vez cambié la planta y que sea johnson. Entonces ahora estamos bien si golpeo Refresh. Por lo que vamos a parecer marca Google categoría Johnson tamaño a un 100 mililitros. Y esto es todo para este video. En el siguiente video lo vamos a ajustar usando CSS. Entonces nos vemos.
10. Producto: De acuerdo, así que ahora que terminamos con el primer producto, sigamos adelante y ajustamos usando CSS. Entonces dentro de nuestro CSS, style.css, vamos a crear aquí un nuevo pero para los productos. Y por supuesto, empecemos con los productos. Como pueden ver, si vuelvo a Home, tenemos aquí la clase de producto. Entonces voy a comentar en CSS. Entonces voy a mostrar banderas, luego justificar inicio de contenido. Y por supuesto, los artículos de alineación van a hacer que flexione eso. Después tenemos el flex wrap wrap. Entonces ahora si retrocedemos y
refrescamos, podemos ver que nos bajamos de los artículos del lado izquierdo. Ya estaban a la izquierda. Pero ahora por cualquier cambio que pudiera ocurrir, seguirán en el lado izquierdo de la imagen aquí. Entonces ahora ajustemos los artículos, los artículos reales. Por lo que dentro de los productos, tenemos el ítem de lista aliada. Por lo que todos los elementos de lista dentro del producto, necesitamos list-style-type a ninguno. No queremos el tipo de estilo y el relleno será 0. Entonces tenemos flotador. A lo mejor hago 0, 1, 34, sí. Y entonces tenemos la altura. Por lo que la altura máxima será de 25. Y entonces también tenemos el botón de frontera, abajo. Y por supuesto, sólido 0.1 REM. El color será como de costumbre, 31, ocho, V5. Y por último, sumaré algunos márgenes por todos lados. Así que 15 píxeles, diez píxeles que 15 píxeles, y finalmente diez píxeles. Entonces ahora si volvemos atrás y damos un toque de refresco, vas a tener esto como fondo. Y por supuesto, necesitamos ajustar algunas de las características. Volvamos atrás y veamos dentro los productos que tenemos ahora la división que es producto. Ahora ajustamos el ítem de lista. Vamos a seguir adelante y, y hacerlo un poco más pequeño, pero en realidad mucho más pequeño. En realidad queríamos así. Entonces volvamos a Stein y trabajemos con la clase de producto. Por lo que producto arpanet luego exhibido faltas. Entonces tenemos dirección flex, que es estar en columna. Y por último, el ancho será tal vez 15 RAM. Y por supuesto, necesitamos ajustar el nombre del producto. Tan font-weight, audaz. Entonces tenemos el color. Como de costumbre. 31, ATF me 5. Entonces ahora volvamos atrás y golpeemos refresco. Y como podemos ver, esta es nuestra imagen y podemos estar de acuerdo en que se ve muy grande, por lo que necesitamos ajustar la imagen. Entonces volvamos aquí y ajustamos usando la imagen del producto que creamos antes en lugar de Arpanet. Y necesitamos ajustarlo usando el max sería, bueno, date prisa máxima altura para estar también bien, lo estoy. Ahora si vuelves atrás y golpeas refresco, vas a ver que conseguimos nuestra primera imagen seguida del artículo titulado marca, tamaño de
categoría y también el precio justo aquí. Ahora ajustemos algunos de estos también. Si volvemos a nuestra página de inicio, tenemos aquí el nombre del producto, precio
del producto, y marca del producto para todos estos. Y por supuesto, la imagen del producto para la imagen que acabamos de modificar ahora. Y vamos a ajustarlos llamando a la marca del producto. A lo mejor hacer un poco el color. Tales como 880, 880. Piensa que se verá bien. 88 atm cosa descubierta es buena para la marca y tamaño y por supuesto, el precio del producto. Ahora, vamos a trabajar con ello. A lo mejor sólo hazlo audaz. A ver. Y entonces también tenemos quizá la categoría de producto. Y dijimos que es lo mismo que la marca, así que estamos bien por ahora. Volvamos atrás y golpeemos refresco. Y como podemos ver, ahora tenemos nuestro barco. Esto es audaz y estos son un poco como, genial. Y también tenemos el título del artículo y el mismo color que se cierne sobre estos artículos. Entonces este es el primer artículo que tenemos. Tenemos la imagen, tenemos la información de calidad por ahora. Y por supuesto, lo que tenemos que hacer ahora es crear otra página de producto donde el usuario, si quiere saber detalles extra sobre este producto o realmente comprarlo,
Puede dar click en ya sea en la imagen o en el título. Y te llevará automáticamente a la página del producto donde podrá agregarlo al descarte, ver algunos detalles sobre este producto. Y tal vez puedas agregar una calificación al final. A ver qué vamos a hacer un rato. Pero por ahora esta es la idea general sobre el producto, su página de productos. Añadamos un par de productos aquí. Entonces vuelve a casa. Tenemos dentro de esta fila, tenemos esta columna. Entonces sigamos adelante y copiarlo un par de veces. Y veamos qué va a pasar. Sí. Entonces aquí, 12345. Si vuelvo y golpeo refresco, vamos a conseguir estos productos. Tenemos seis productos por ahora. Y por supuesto tal vez podamos quitar estos hallazgos más adelante. Pero por ahora es bueno. Y aunque cambiemos el tamaño. Entonces en tamaño mediano vamos a tener que hacerlo, y en los patrocinadores vamos a tener uno. Y por supuesto tal vez puedas ajustar esto para estar en el centro cada vez que
tengamos pantalla pequeña como esta, tal vez sea buena idea colocar las imágenes y la siguiente información en medio de la pantalla. Y por supuesto, siempre que tengamos medio de algo más grande, los
vamos a tener en el lado izquierdo. Por lo que la construcción o modificaciones adicionales del pozo que puedes hacer es realmente hacerlo en medio de la pantalla. Y por supuesto, siempre que tengamos pantalla grande, hazlos tal vez cuatro al mismo uno en lugar de tres. Sí, se ve mejor. Entonces por ejemplo, este es el primer 1, segundo, tercero, cuarto año. Entonces tal vez se vea mejor, pero por ahora, nos quedaremos con esto. Esta es la página del producto. Vamos a seguir adelante y copiar todo esto y pegarlo y los productos que EJS clase o archivan. Entonces esto es todo. Sí, Vamos a seguir adelante y copiar toda esta sección en productos para que el JS, y por supuesto no te olvides de añadir tu pie de página aquí mismo. Y luego el encabezado al inicio del expediente. Entonces estos son los productos son las sillas. Y ahora si refrescamos nuestra página de inicio, vamos a conseguir estas líneas pie de página y encabezado como queramos. Por lo que ahora el siguiente paso es imprimir realmente la página del producto real. Por lo que dijimos que tenemos varios productos uploader. Y siempre que el usuario quiera revisar un producto 11 o uno específico un artículo que le guste. Quiere ver más detalles, por ejemplo. Por lo que hace clic en el electrón, la imagen del producto o un título, y luego debe hacerlo dirigirlo automáticamente a la página del producto con explicación extra. Y tal vez puedas agregar algo en la parte inferior de la página que diga, quizá también te guste y luego algunos
productos extra de la misma categoría o de la misma marca que está revisando. Entonces esta es la idea general. Adelante y empecemos con ello dentro de nuestra página de inicio como de costumbre, luego copiarlo en el producto. Entonces para hacer eso, empecemos con la creación del. Entonces este es el apartado. Y dentro de esta sección vamos a crear nuestro contenedor. líquido debe ser y el final del contenedor bajó. Y luego dentro de esto va a crear la primera fila. A lo mejor añadir una fila de 0 para pantalla de tamaño pequeño o cualquier cosa menos la pantalla grande y una. Y lo veremos en un momento. Y esto estará vacío. Entonces vamos a tener sexo de columna. Y para pantallas grandes de cuatro. Y alinear artículos, centro. Y aquí es donde vamos a añadir la imagen. Entonces agreguemos imagen. El origen será como imágenes de patrón habituales, image1, pero GBG. Y por supuesto no tenemos que añadir algún estilo, que es el ancho máximo de esta imagen para ser de 300 píxeles. Y creo que somos buenos para la imagen. Ahora. Vamos a crear otra columna para pantallas grandes. Y esto también estará vacío. Y luego seguido de otra columna 6 donde vamos a sumar la información, soy sexo y para pantallas grandes ya que van a ser cuatro. Y por supuesto dentro de este panel, abajo para crear el formulario a enviar o para agregar al carrito. Y dentro de esto voy a tener el título. Por lo que este será de texto de clase para hacerlo azul. Y luego tenemos el título del ítem, y luego seguido de un párrafo con la clase H5 como Epígrafe 5. Entonces dentro de este rubro vamos a sumar el precio. Entonces precio. Y luego dentro del lapso, va a tener el precio con texto datos secundarios. Ya puedes ver si agrego precio, por ejemplo, $34, Volvamos atrás y golpeemos refrescar. Y como podemos ver, obtuvimos la imagen seguida del título del artículo y luego el precio que es de 34. Entonces esta es una idea general. Esta es la imagen real. Ahora aquí podemos agregar información extra. Adelante y hagámoslo aquí mismo. Tenemos el precio que tenemos antes, y luego necesitamos agregar marca. Entonces volvamos aquí y agreguemos una nueva clase o seamos un nuevo párrafo. Y entonces tenemos el span, que estará teniendo la fuente de clase, peso, negrita. Entonces tenemos la marca. Y por supuesto, vamos a sumar la marca real como Johnson en este caso. Y esta marca, lo siento, Johnson debería estar entre este párrafo de padres. Ahora ya terminamos con la marca. Saltemos de línea y luego creemos una nueva fila para los tamaños. Entonces lo que estaba pensando es conseguir una nueva fila dentro de esta fila va a tener la columna de dos y el margen de top de dos también dentro de la SRO va a crear este tamaño. Y por supuesto, la clase debe ser gravada secundaria. Y por supuesto, tal vez lo logre tener sexo. Y luego seguido de otra columna. Y esta columna sería la misma que antes, por lo que la columna 2. Y aquí vamos a tener el tamaño real dentro de un párrafo de liga de clases. Entonces tal vez el tamaño es de 200 mililitros. Y por supuesto, si vuelvo atrás y doy refresco, vas a conseguir el precio del título del artículo, talla de
marca Johnson a 100 mililitros. Y ahora sigamos con cuántas piezas el usuario una vez. O tal vez vamos a copiar esto una vez más para la categoría. hoy vamos a tener categoría. Y luego seguido de tal vez, digamos champú. Y ahora como un acabado de esta fila es crear otro con columna de sexo. Y dentro de esta columna voy a crear el grupo de entrada. Y aquí el usuario va a agregar la cantidad real, cuántas piezas quiere. Por lo que MP3. Y dentro de esto voy a crear la entrada real de tipo nombre de texto. Voy a ponerle nombre caja para una clase posterior. Yo estoy dibujando. Y entonces el Marcador de Lugar será cantidad. Y luego tenemos la división de piezas para ampliar grupo de entrada de clase. Entonces ahora si tocamos refresco, vamos a conseguir este tamaño a una cantidad de 100 mililitros y piezas. Entonces esto es todo para este video. Y el siguiente va a agregar el add al carrito y tal vez la descripción de este artículo. Entonces nos vemos.
11. Home 1: Hola y bienvenidos de nuevo. En este video, vamos a continuar con nuestra página de productos. Por lo que aún tenemos el botón Agregar al carrito. Sigamos adelante y editemos aquí. Esta es nuestra fila a otra fila aquí. Y yo estaba pensando en darle una clase del muaré tres solo por depender del eje y. Entonces voy a añadir nuestra tarjeta, que es el botón. Y el tipo sería, como de costumbre, presentar. Y estoy pensando en los datos, el toggle para después. Lo construiré por ahora, así. Y el estilo será display inline block. Por último, tenemos las clases reales y vamos a usar clases de
Bootstrap y btn y btn dark, después Agregar al carrito. Entonces esto es básicamente para nuestro botón por adelante y refrescarlo. Vamos a conseguir este botón y está oscuro. Y se supone que nos redirija al tal vez a la página de productos donde tenemos todos los productos que el usuario ha elegido por ahora. Y por supuesto, si el usuario está sin firmar y registrado todavía, en realidad debería
llevarlo al modelo de inicio de sesión donde debería poner su dirección de correo electrónico y contraseña. Y por supuesto, si aún no tiene cuenta, también puede ir a registrarse para registrarse con una cuenta nueva. Entonces vuelve aquí y agrega este artículo a como cortado. Entonces como dijimos, este es nuestro jardín. Volvamos atrás. Y estaba pensando en agregar una descripción aquí detrás del artículo Titán. Entonces tal vez lo hagamos en. Tenemos un título. Añadamos un gráfico de barras donde tengamos a Lauren. Y por supuesto, siempre podemos elegir algunas clases para nuestro Biograph. No elijas el modo de clase para hacer pequeño el párrafo. Y como podemos ver, este es nuestro párrafo. Y entonces tenemos el precio, marca, categoría, tamaño,
cantidad, y luego agregamos Dios, y por supuesto nuestra imagen. Entonces si solo disminuyo el tamaño de esto, veamos qué está pasando. Aumentémoslo desde ambos lados. Entonces como podemos ver, tenemos nuestra imagen y la información en la misma línea. Entonces esto es todo para los productos, la página del producto. Sigamos adelante y movamos todos estos al producto que archivo EJS. Entonces aquí, vamos a ver. Este es el inicio de esta sección del camino hasta el final aquí. Vamos a llevárselos aquí. Después regresa y toma estos encabezados y pies de página. Entonces este es el encabezado. Tomemos. Y colóquelo en la página del producto. Y luego vayamos todo el camino hacia abajo y sumamos nuestro pie de página. Ha estado ahí por. Entonces creo que ahora somos buenos para la página de producto y producto. Entonces hasta ahora, si comprobamos, ¿qué hicimos? Nosotros hemos hecho la página de inicio. Lo siento. Nosotros hemos hecho la categoría de marca sobre contactarnos. Y hemos hecho dos páginas que no son visibles para el espectador dentro de la barra de navegación. Y ellos son los productos y la página del producto. Entonces por ahora estamos bien. Adelante aquí y ahorremos. Y volver atrás. Si nos refrescamos, este es nuestro hogar. Por lo que ahora empezamos a construir nuestra página de inicio. Entonces por supuesto, vamos a construir la página Pedidos donde el usuario pueda ver todos estos pedidos, pedidos anteriores, y artículos actuales en su tarjeta. Y también necesitamos construir las páginas de Admin también. Para que Empecemos con la página de inicio. Y estaba pensando en agregar un carrusel aquí mismo para tal vez visualizar diferentes marcas y luego agregar un bestseller. Contamos con los productos bestseller. Después también añadir otro queroseno donde podamos visualizar las diferentes categorías. Y por supuesto, podríamos agregar algunos productos al final. Entonces, vamos a ver. Volvamos atrás y escuchemos gracias para empezar. Correcto. Entonces aquí aunque para crear primera división. Y voy a tener una estrategia de imagen de fondo en algún mal estilo. Imagen de fondo será igual a URL de nuestra imagen. Compruébalo más tarde. Pero por ahora, el tamaño de fondo estoy pensando en hacer que cubra. Y por supuesto, la posición de fondo estaría centrada. Y luego finalmente, también tenemos la altura. Yo estoy pensando 35, tal vez 38 H. Y entonces tenemos antecedentes, repito, no repetirlo. Y finalmente, el margen será 0. Entonces esto es para la imagen y la revisaremos más tarde. Pero vamos a crearlo ir. Y cuando estoy construyendo aquí en realidad es una imagen, una imagen de fondo. Y entonces tenemos algo así como bienvenida al sitio web de comercio electrónico y un párrafo en la parte inferior para, así que por ejemplo, tomemos vidrio con p o lados superiores y tal vez Bienvenido al sitio web de comercio e. Y luego finalmente, tengamos tal vez teniendo sexo y checkout. Artículos antiguos, tal vez de primera calidad y ofertas exclusivas. Sí, creo que así será. Y por supuesto, sabemos que tenemos que sumar ahora la imagen real. Entonces vamos a los píxeles. Y veamos qué tenemos algunos antecedentes. Eso es un simple, tal vez añadir un símbolo de tierra y esa búsqueda. Y como podemos ver, tenemos tantas opciones, pero por ahora, elegiré la más simple. Entonces tal vez pueda ir con este descargado. Y ahora lo tenemos aquí como hogar de fondo. Y lo terminé aquí. Entonces si volvemos, tenemos la imagen y tal vez necesitamos centrar esta información. Por lo que voy a añadir una columna. Y yo estaba pensando en columna para medio y arriba para ser seis. Y luego necesitas centro de texto. Entonces centro de texto. Y por supuesto va a tener la foto máxima. Entonces esto es lo que se coloca aquí estos encabezamientos y retrocede y refresca. Y como podemos ver, tenemos un sitio web bienvenido al sitio web de e-commerce, checkout, artículos de primera calidad y buffers exclusivos. A lo mejor ahora podemos agregar algo justo aquí como fondo de, vamos, eh, veamos. Entonces esta es nuestra primera división. Vamos a crear otro Con centro de fila. Entonces tenemos algún margen, saber tal vez 0 y algunos remeros y también luz de fondo. Y luego vamos a crear la columna de cuatro. Dentro de esta columna vamos a tener un párrafo de vidrio,
plomo, tal vez de primera calidad. Y luego copiar esto dos veces más. Por lo que de primera calidad, entrega rápida y los mejores precios. Entonces ahora si volvemos atrás y presionamos Refresh, vamos a conseguir algo así. Por lo que tenemos la página de bienvenida, checkout, artículos de primera calidad y ofertas exclusivas. Entonces tenemos algunas de nuestras características. Por ejemplo, de primera calidad, entrega
rápida, y los mejores precios. Entonces esto es básicamente para la página de bienvenida, y empecemos con los más vendidos. Entonces si volvemos atrás y vamos a crear aquí nuestra sección. Por lo que esta sección tendrá varias clases, tal vez luz que texto. Y algo de relleno. Abrámoslo y luego creemos nuestro fluido contenedor. Y por supuesto, necesitamos crear el título donde tengamos los mejores cajeros. Y luego el párrafo que dice echa un vistazo a algunos de nuestros más vendidos. Por lo que va a tener la primera fila y algunas clases como el texto. Entonces tenemos el centro de texto. Y esto es todo para el crecimiento y Phantom con un margen de cuatro. Y dentro de esta columna, pensando en agregar aquí los más vendidos. Y por supuesto añadir algunas clases como display for y luego MB o. Entonces. Ahora si volvemos y damos la vuelta al refresco, vamos a conseguir algo como esto. Tenemos nuestros bestsellers. Vamos a párrafo aquí. Entonces después de nuestro rubro, tal vez puedas agregar el párrafo real aquí mismo. Por lo que la clase será liderada. Y luego tenemos que echar un vistazo a algunos de los artículos más vendidos para 2020, por ejemplo. Volvamos atrás y refresquemos. Y esto es básicamente. Y ahora podemos sumar tres de los artículos más vendidos. Y podemos agregarlas usando quizá tarjetas. Entonces volvamos a nuestro código. Y este es el final del pergamino le estaba diciendo el fluido contenedor. Y ahora vamos a crear otra fila. Por supuesto que necesitamos agregar alinear elementos, centro, texto, centro, y luego tenemos un máximo o dos. Y entonces vamos a abrirla. Ahora vamos a crear la columna. Por lo que columna para pantallas grandes es de cuatro, y para pantallas pequeñas es de 10. Entonces tenemos un auto max. Y esto es básicamente para la columna. Y ahora podemos crear nuestra tarjeta real. Entonces voy a crear la tarjeta con tarjeta uno para CSS. Usa esta clase para CSS. Y entonces tenemos texto oscuro MI para endémicos foto. Abrámoslo y empecemos con la creación de la imagen. Por lo que la fuente de la imagen serán imágenes punto-punto. Entonces tenemos la imagen real. Supongamos que vamos a usar uno mucho. Y agreguemos algunas clases aquí mismo. Por lo que la primera clase será un otoño máximo. Y por supuesto, no nos olvidamos del módulo en el eje y. En cuanto al estilo, voy a tener la altura máxima con un 100 pixeles. Y lo mismo para ancho máximo de 100 píxeles. Ahora si vuelves atrás y refrescas, como podemos ver, conseguimos nuestra imagen sin nada hasta ahora podemos agregar alguna información al final. A ver. Volvamos atrás. Y por supuesto, podemos agregar el nombre y luego tal vez agregar un botón que diga Ver detalles. Y si el usuario hace clic en este botón, automáticamente
lo redirigirá a la página del producto de este artículo específico. Entonces esto es todo. Volvamos atrás. Este es el final del Dios. Tenemos la imagen. Y por supuesto, dentro de la tarjeta podemos crear el guardia Buddy, Buddy. Y entonces tenemos el primer rubro, que es el título. Y todavía tenemos en realidad el título y el botón. Y vamos a añadir dos más que esto. Por supuesto, los vamos a hacer en el siguiente video. Entonces nos vemos.
12. Home 2: Hola y bienvenidos de nuevo. Todavía tenemos el título y por
supuesto el botón para ver detalles de este producto bestseller. Entonces sigamos adelante y empecemos con el rubro que dice quizá el título. Por lo que agrego un rubro cinco. Y luego subclases como texto, mayúsculas. Entonces también nos divertimos, peso, negrita, y por supuesto MB, tres. Elemento de lista. Esto es para el CSS y voy a añadir el título real, Supongamos Johnson. Y después de eso, voy a agregar un formulario para presentar. Por lo que la firma no tendrá acción por ahora. Y por supuesto, el botón, el botón real con tipo enviar. Y luego algunas clases como PTEN, algunos remeros y todos lados. A lo mejor texto, mayúscula o tal vez no. Añadamos el botón de precio y el CS4 o posterior. Y lo haré amarillo. Entonces estoy sumando el BDI y queriendo clase y vuelo fiscal. Entonces veamos los detalles. Y por supuesto, si volvemos atrás y golpeamos Refresh, vamos a buscar a Johnson y ver detalles. Y esto es básicamente para esta tarjeta, también
podemos tener tal vez el ancho en la tarjeta predeterminada. Entonces volvamos atrás. A ver. Entonces en lugar de especificar el ancho máximo a un 100 píxeles, voy a decir ancho para ser igual a un 100 por ciento de la tarjeta. Y en lugar de tener algún margen encendido, veamos, en lugar de tener algún margen en la parte superior como este y botón, voy a especificar que el margen sólo debe estar en el botón. Entonces en lugar de MI app.use MB. De esta manera podemos ver que conseguimos nuestra imagen. Y por supuesto, este título no es sólo una palabra. Es básicamente, por ejemplo, champú
Johnson, 400 mililitros. Y creo que se ve bien por ahora. Y por supuesto, todos los detalles deben estar dentro de la página del producto que creamos anteriormente. Entonces esta es solo la definición del producto y una imagen, el título. Y si el usuario está interesado en este artículo específico, siempre puede ir a la página del producto haciendo click en Ver detalles. Entonces esto es todo para el primer producto. Añadamos dos más. Volvamos, copiemos todo esto y lo peguemos dos veces más. A lo mejor cambiar la imagen. A lo mejor este para la imagen dos y la última, y mantenerlo como imagen uno. Y vamos a ver. Y como puedes ver, conseguimos nuestro producto bestsellers. Tenemos tres productos y siempre podemos cambiarlos cuando queramos. Entonces al final de nuestro proyecto, vamos a construir tal vez una parte específica donde podamos cambiar estos productos aquí mismo. Entonces esto es básicamente para los bestsellers. Veamos qué vamos a hacer con el, tal vez las marcas y categorías. Entonces lo que estoy pensando, pensando es tener las marcas aquí primero, antes, los bestsellers, luego sumar las categorías aquí. Y por supuesto que lo vamos a hacer usando carrusel. Entonces si volvemos a bootstrap tus dos componentes y luego carrusel, vamos a ver varios tipos de carrusel. Y vamos a usar este. Por lo que este con indicadores, tenemos tanto a los agentes como éstos pueden elegir entre ellos. Y este es el código de esto. Y por supuesto, tal vez quieras agregar el título y alguna información de definición sobre este producto o esta marca. Podemos hacerlo fácilmente agregando aquí la leyenda de ancho. Entonces sigamos adelante y copiemos todo esto y volvamos a nuestro código. Ve a máxima calidad antes de la sección bestseller, voy a pegarlo. Veamos ahora nuestra página web. Y como podemos ver, tienes la primera diapositiva. Y si volvemos, así que agregué aquí algunos encabezamientos para el primero. Y por supuesto añadí las imágenes como podemos ver aquí mismo. Y ahora si volvemos a Francia, vas a conseguir esto. Y sé que es un muy grande para la pantalla y puedes arreglarlo. Pero esta es la idea. Si presionamos sobre los indicadores, deben llevarnos automáticamente a. Este tercero no está disponible, y éste es el primero. Entonces volvamos atrás y ajustemos eso. Tenemos imágenes. Olvidé agregar la varilla hacia adelante. Y esto es básicamente siempre podemos hacerla más pequeña. Entonces, por ejemplo, si quiero hacerlo en medio de la pantalla, puedo agregar una nueva fila, luego Agregar Columna 3, 4, ¿verdad? Sexo de columna, para agregar nuestro carrusel. Y la columna 3 para la izquierda. Y ahora abre esto aquí, y luego copia todo esto desde aquí hasta la sección, y luego pégalo aquí mismo. Y entonces tal vez si volvemos atrás y
golpeamos refresco, podemos ver que tenemos nuestra tarifa de marca aquí. Y como puedes ver, cambia. El tal vez la altura de la imagen cambia de acuerdo a la imagen misma. Por lo que estaba pensando en agregar una altura máxima a las imágenes. Entonces aquí. Altura máxima de Einstein. Y yo estaba pensando tal vez 400 pixeles. Y ahora voy a copiar esto dos veces más aquí y después aquí. Y si volvemos a fresco, vamos a conseguir esto. Entonces como podemos ver, ahora
se ve mejor. Y también tenemos aquí el título y algunos subtítulos. Sí, sobre el producto. El usuario puede consultar todos los productos desde aquí. Y por supuesto, tenemos que añadir tal vez el primero quizá el título de las marcas. Entonces estaba pensando en agregar fluido contenedor y luego agregar aquí la primera fila y luego el rumbo a las marcas. Y luego también voy a agregar texto centrado. Y por supuesto voy a añadir el párrafo con el lead de clase que dice, apagarse, tal vez nuestra caja, nuestras marcas. Ahora si vuelves a refrescarte, vas a conseguir marcas, echa un vistazo a nuestras marcas. Y por supuesto, quizá podamos hacer esto en otro color como un peso o quizá textos secundarios. Entonces volvamos aquí y sumamos a esta secundaria de impuestos de clase. Ahora si vuelves atrás y pulsas Refresh, vas a conseguir este. Por lo que tenemos marcas, checkout nuestras marcas. Y aquí tenemos todas las marcas. Y por supuesto, si no nos gusta de esta manera, siempre
podemos ajustarnos. Entonces, por ejemplo, puedo mover esto a aquí, va a ser aide. Y finalmente aquí también voy a poner afinación. Ahora si volvemos, creo que se verá un poco más bonito. Sí. Entonces esto es todo para las marcas. Hará lo mismo por el producto. Entonces solo voy a copiar todo esto y pegarlo justo después de los bestsellers. Y por supuesto podemos sumar algún margen aquí. Y olvidé quizá agregar todo esto, toda esta fila al fluido contenedor real. Entonces esta fila me deja simplemente cerrarla. Tómalo todo. A ver. Sí. Entonces esto es lo que se va a llevar se sientan aquí mismo. Y si vuelvo atrás y refresco, voy a conseguir lo mismo. Entonces estamos bien y tal vez sumamos algún margen en ambos, ambos lados. Entonces MIS cinco, y creo que ahora estamos bien. Yo refresco. Este es el checkout de la marca, nuestras marcas y algún margen en la parte inferior, y por supuesto en el primero aquí. Entonces esto es para las marcas. Vamos a seguir adelante y copiarlo. Entonces voy a cerrar este fluido contenedor. No sea todo eso. Entonces ábrela luego después de ésta. Entonces estos son los mejores centros lo más cercanos que puedo crear aquí mismo. Abrámoslo de nuevo y echa un vistazo a nuestras categorías. Y luego dentro de estas categorías
podemos sumar también aquí en lugar de categorías de marcas para que el acuerde. Y creo que no, estamos bien. Esta es nuestra página de inicio. Si nos desplazamos hacia abajo todo el camino hacia abajo, podemos ver las categorías. Tenemos. El pie de página, tenemos nuestro encabezado. Tenemos algo, tal vez alguna información sobre nuestro afilado y por supuesto los bestsellers aquí mismo. Y el back end. Por supuesto que vamos a sumar el derecho aquí. Vamos a añadir un, por ejemplo, si el usuario quiere hacer clic en esta marca específica, siempre se
puede hacer clic en ella y se lo llevará a las marcas de aquí, y por supuesto a las marcas específicas que usted desea también. Entonces esto es todo. Y a partir de este best seller, si el usuario elige este producto, lo llevará directamente al producto en sí. Y esta es la idea de la página principal. Sólo eliminemos estos aquí mismo. Y creo que ya terminamos por esto. Vamos a refrescarnos. Y esto es todo. Esta es nuestra página de inicio. En el siguiente video, vamos a crear los pedidos
de lugar y la ubicación, tal vez el pago. Y por supuesto después de esto vamos a terminar nuestro frente y un diseño con la página de administración donde vamos a dejar que el administrador cambie lo que quiera. A lo mejor marcas, categorías, agregar nuevos artículos, nuevo producto, y los modificó. Los precios, la descripción como él quiere. Pero esto es todo para este video. Nos vemos en el siguiente.
13. Orden de lugar 1: Hola y bienvenidos de nuevo. En este video, vamos a crear la página Place Order. Y yo estaba pensando, volvamos primero. Entonces siempre que estemos aquí y esto y supongamos que estoy mirando un artículo específico. Por lo que estoy en la página del producto donde también tengo el add al carrito justo aquí. Entonces como podemos ver, si el usuario hace clic en este Agregar al carrito, debe
llevarlo directamente a la página de Hacer Pedido donde pueda ver todos los pedidos anteriores. Y también se puede ver la tarjeta en sí. Y puede quitar artículos, agregar artículos, y comprobar el total, luego hacer el pedido real. Y yo estaba pensando que antes de eso si el usuario no ingresaba su dirección de envío o método antipago, en
realidad debería añadirlos y también aparecerán en la página de Hacer Pedido. Entonces volvamos aquí. Y vamos a crear un nuevo justo aquí. Tan nuevo archivo. Y le voy a nombrar el envío, Dios. Pero EJS. Entonces este es el primero. Y en este archivo, como siempre, necesitamos incluir el encabezado y el pie de página. Entonces volvamos, saquemos este básico aquí mismo, y entonces tal vez cambiemos esto a pie de página. Y ahora podemos empezar. Entonces lo primero que estaba pensando en hacer es crear tal vez el fluido contenedor. Y hagámoslo ahora mismo. Entonces líquido contenedor, y luego también la fila. Y por supuesto, vamos a crear algunos P13. Y yo estaba pensando que la primera en pantallas grandes, la primera división con cuatro, estará vacía. Entonces voy a sumar otra división con gran delantero también dentro de esta división. Vamos a crear otro ahí mismo, y luego algo de relleno en el eje y. Y por supuesto aquí necesitamos agregar las barras de progreso que vamos a usar. Entonces lo que estaba pensando es agregar aquí mismo una barra de progreso que se actualizará cada vez que terminemos una tarea. Por lo que consta de dos o tres tareas. El primero será agregar la dirección de envío y luego descansar en completo. Y después de completar esta tarea, tenemos el método de pago. Por lo que esta barra de progreso se actualizará cada vez que nos hiciéramos con una tarea. Entonces vamos a crearlo ahora mismo. Y para conseguir un pro, crea una barra de progreso, puedes tomarla de Bootstrap o creada por ti mismo. Por lo que será de progreso de clase y tal vez bg secundaria. Y en lo que estaba pensando para agregar un margen, tres de abajo. Y por supuesto, necesito crear el progreso. Butt. Y luego déjame simplemente desplazar hacia la derecha. Entonces esta es la barra de progreso, tal vez advertencia de fondo. Y luego el estilo. Vamos a tener el ancho igual al 25 por ciento. Entonces ahora si volvemos oh, lo siento, lo construimos en el envío. Dios. Y es un caso. Déjame simplemente quitarlo y colocarlo en casa después de algunas líneas de la Tierra tiempos 20. Y vamos a probarlo aquí, refrescar. Y como podemos ver, tenemos nuestra barra de progreso justo aquí. Entonces este es el primero. Y si volvemos ahora y cambiamos esto al 50 por ciento, podemos ir y notamos que ahora es 50% en lugar de 25. Por lo que este ancho para cambiar la barra de progreso de secundaria a advertencia. Y parece que estás logrando algo. Entonces esto es todo para la barra de progreso. Sigamos. Entonces esta es la división y esta es la economía. Y por supuesto, voy a tomar esto y empezar desde aquí. Por lo que la segunda división será el sine n está enviando el pago y este pedido. Y estos estarán justo aquí después de la barra de progreso. Entonces vamos a crear una segunda fila con PDE5 y luego también creamos algunas columnas. Entonces el primero sería sine n y la división es segunda deficiente sería de clase tal vez Columna 3. También. Ya hemos visto y en este caso vamos a tener envíos. Después columna tres él con pago. Y por supuesto finalmente, el lugar. Entonces como podemos ver, ahora
estamos actualmente a disposición, tal vez cambiemos esto a 25 otra vez. Y como podemos ver, tenemos sine n pago basado en envío y pedido de lugar. Y ahora estamos en esta posición donde hemos firmado final y estamos en el envío del anochecer. Entonces en este caso, nuestra espalda y nos encargaremos de comprobar si el usuario ha iniciado sesión. Si este es el caso, se lo llevará automáticamente a éste. Y por supuesto, si no está firmado
él, también puede iniciar sesión y luego volver a este envío agregando la información de envío. Entonces este es el pago de envío sine n y estamos bien por ahora. Vamos a seguir adelante y crear nuestra caja real donde vamos a tener la información de envío. Entonces lo primero que vamos a hacer es crear el código y Centro de Impuestos, luego también archivo PY y tal vez textos luz. Y vamos a añadir la columna 1 sólo para tener algo de espacio a la izquierda. Y por supuesto va a tener la columna bronceado con Fondo oscuro y texto. Inicio. Y vamos a añadir un poco de estilo. Por lo que el estilo será la altura. Y en este caso la altura será de 28 REM ya que
ábrela y crear forma predeterminada estará vacía por ahora. Y por supuesto vamos a crear los insumos. Entonces estoy pensando en agregar varias cajas de entrada y vamos a crearlas usando el grupo de formularios. Entonces para grupo, y luego tenemos la etiqueta. Y esta etiqueta será de clase B. ¿Por qué R0? Y entonces tal vez dirección completa. Entonces tenemos la entrada real del tipo de texto. Entonces tenemos algunas clases como el control de formularios. Y tal vez eso es todo, ese es el nombre y la dirección. Y por supuesto, positor, tal vez en el pueblo. Y así creo que esto es todo. Copiemos este feudo más veces. Nos dirigimos. Entonces vamos a cambiar esto a ciudad. Y tal vez aquí. Y estás sentado y por supuesto, el número telefónico. Por lo que aquí número. Y entonces finalmente tenemos tal vez vamos a añadir el siguiente botón donde el usuario pueda proceder a la siguiente tarea cada vez que termine con estas informaciones. Entonces hagamos eso usando tal vez un grupo de entrada. O supongamos, digamos que vamos a usar los botones simples. Entonces Centro Tributario, luego B13. Y esto es en básicamente botón type submit. Y luego tenemos clases como btn, btn-primary. Y luego tenemos centro de texto, y este es el botón Siguiente. Y ahora si volvemos, vamos a refrescarnos. Y como pueden ver, nos dieron nuestro sine n pedido lugar de pago de envío. Esta es la barra, barra de
progreso, y ahora estamos en 25 por ciento. Tenemos que llenar esto. Y luego después de imprimir estos, podemos ir al siguiente. Y por supuesto, después de la siguiente vamos a tener el método de pago. Entonces vamos a actualizar esta barra de navegación y crear un método de pago así como este. Entonces volvamos atrás y creemos un gran abajo. Entonces ahora tenemos la barra de navegación, tenemos la barra de progreso, y tenemos todo para la dirección. Vamos a copiar esto. Y por supuesto, vamos a pegarlo aquí abajo, pero vamos a tener algunas líneas. Y aquí vamos. Ahora la barra de progreso estará en 50 por ciento. Y por supuesto, vamos a quitar estos. Y ahora estamos bien. Entonces este es nuestro El segundo donde tenemos el método de pago real y tenemos firmando todo lo que necesitamos. Simplemente eliminemos esto y empecemos una nueva división aquí mismo. Entonces después de hacer pedidos y tener estas divisiones, tal vez agreguemos aquí un nuevo texto de fila centrado en el Wi-Fi. De acuerdo, Entonces estamos bien por ahora. Tengamos la columna un 10. Y por supuesto, necesitamos cambiar este grupo de formulario. Entonces aquí vamos. Vamos a alimentar todo esto. Y eso empieza con crear una columna 2 y una columna 1. Y luego vamos a tener el centro de texto. Y por supuesto Hagamos deformado que vamos a presentar. Y luego tenemos la división y vamos a tener algunas clases como la tarjeta. Entonces tendríamos texto en blanco, después tenemos centro de texto. Entonces este método de pago, ya que no sólo tenemos un método de pago, que es el contra-entrega por ahora, lo
vamos a crear como tarjeta. Entonces esto es todo, margen fondo. Y por supuesto vamos a añadir algún estilo como el margen 0. Entonces también tenemos tal vez ninguno. Y entonces el ancho máximo de 18 están en m. y finalmente, el botón de margen, diez píxeles. Y esto es todo para esta división. Abrámoslo y empecemos a crear algún contenido aquí. Por lo que el primero sería el encabezado de corte, que será Pago 2. Simplemente voy a crear o pagar tiempo aquí mismo. Y luego vamos a crear el cuerpo de la tarjeta. Y aquí vamos a tener las diferentes opciones, pero por ahora nos vamos a quedar con una sola opción. Por lo que será un teléfono. Lo vamos a utilizar como casilla de verificación. Por lo que empiezan los textos y p53. Y ahora estamos bien. Podemos comenzar con la entrada de casilla de verificación tipo. Y luego agreguemos algunas clases para control de cheques. Y luego finalmente, quizá agregue el DNI. Entonces lo usaremos para más adelante, que es tal vez lo haga ejemplo. Y eliminemos esto. Ahora estamos bien para la entrada. Vamos a crear la etiqueta. Y esta etiqueta será, por ejemplo, cheque. Y luego también tenemos la etiqueta de cheque de formulario. Y finalmente tenemos la mano de obra real, que es efectivo contra entrega. Y por supuesto, después de todo esto, necesitamos el botón Enviar o el siguiente. Entonces vamos a crearlo aquí mismo. Vamos a crear el botón y el tipo, o se va a presentar. Y por supuesto, las clases serán btn y btn advertencia. Y esto es todo. Volvamos atrás y refresquemos. Como podemos ver, obtuvimos nuestra forma de pago. Lo tenemos como contra-entrega, pero nos olvidamos de teclear próxima huelga aquí. Ahora, fresco, como podemos ver, lo tenemos. Ahora lo que estaba pensando en tener esto a continuación como inhabilitado, siempre que no elegimos ningún método de pago y siempre que lo elijamos, va a ser y desactivado. Y por supuesto, el usuario puede ir a la siguiente tarea, que es la colocación real del orden. Entonces con eso dicho, este será el final de este video y el siguiente video, los
vamos a colocar en los archivos específicos. Y por supuesto que vamos a hacer esto, vamos a tener un discapacitado el no marcar ninguna casilla aquí mismo. Y también vamos a crear página de orden de lugar definer. Y con eso dicho, este es el final de este video. Nos vemos en el siguiente.
14. Orden de lugar 2 2: Muy bien, Así que hola y bienvenidos de nuevo. En este video, vamos a continuar con el método de pago. Dijimos que queremos desactivar este botón. Y cada vez que hacemos clic en un método de pago, por ejemplo, si chatbox este, y entonces este siguiente debería estar disponible para nosotros para que podamos presionar sobre él. Adelante y hagámoslo. Ahora mismo. Tenemos el contra-entrega. Y por supuesto, el siguiente sin embargo, lo que vamos a hacer es agregar un on-click un derecho aquí. Por lo que dentro de la entrada, esta es la chatbox. Y desclick yendo a devolver un método que vamos a crear en JavaScript. Entonces tal vez le llamaré términos cambiados y le dé esto. Y por supuesto, vamos a hacer lo que ustedes van a hacer es desactivar este botón. Entonces si volvemos ahora y hacemos clic en Refrescar, podemos ver que está deshabilitado. Y lo que tenemos que hacer ahora es tal vez cambiarlo una vez que presionemos sobre esto. Entonces volvamos atrás y creemos un guión aquí mismo. Y en este guión vamos a crear nuestra función. Sigamos adelante y creemos el guión. Dentro del guión tenemos la función que acabamos de nombrar, términos cambiados. Y se llevará el chatbox, limitemos chatbox. Y comprobará si marca casilla el chat. Entonces si se comprueba, vamos a llamar al elemento por ID. Por lo que documento punto obtener elemento por ID. Y vamos a revisar el ID de este elemento. Y como podemos ver, no
tenemos una idea. Tan sin nombre, le daré un ID de siguiente y luego iré a obtener el elemento por ID siguiente y luego cambiar deshabilitado para ser igual a falso. Entonces si se marca la casilla de verificación, vamos a hacer que esto sea capaz de falso. No obstante, este no es el caso. Vamos a conseguir el elemento por ID y luego simplemente hacerlo cierto. Entonces esto es todo. Ahora un fig, vuelve atrás y pulsa Refresh, va a tener este botón desactivado. No obstante, una vez que hagamos click en esto, lo vamos a tener. Podemos usarlo y si lo quitamos, lo mismo que antes. Entonces ahora que hemos creado el envío y el método de pago, sigamos adelante y empecemos con el pedido de lugar real. Melocotón. Entonces ahora sigamos adelante y movamos todos estos a sus páginas específicas. Entonces aquí, sigamos adelante y creemos una nueva página y que le vamos a nombrar tal vez una tarjeta de pago y Node.js. Y por supuesto vamos a quitar todos estos aquí. Entonces vamos a quitarlos, agregarlos aquí. Y por supuesto vamos a añadir pie de página y encabezado. Entonces este es el pie de página. Yo voy a hacer lo mismo por aquí. Entonces aquí tenemos el encabezado y estamos bien por ahora. Por supuesto que todavía tenemos éste, que es el método de envío. Entonces sigamos adelante y lo retiremos también y lo coloquemos en su posición apropiada. En este caso, está en el corte de envío. Entonces ahora si volvemos a nuestra página de inicio y hacemos clic en Refrescar, vamos a conseguir algunos espacios vacíos ya que tenemos estas líneas. Ahora vamos a refrescarnos y estamos bien. Entonces esto es todo para las dos primeras páginas. Ahora vamos a crear la página de pedidos de lugar real. Entonces sigamos adelante y sumamos algunas líneas, tal vez dn. Y ahora vamos a empezar con la creación del fluido contenedor. Entonces voy a crear la fila con algo de relleno en el eje y. Entonces estaba pensando en dejar como, como de costumbre, algunos, algún espacio a la izquierda y luego empezar con la caja real. Y en este caso, pero estoy pensando en agregar una fila. Entonces tendríamos nuestro DOM. Y dentro de esta fila, voy a crear como de costumbre. A lo mejor sólo los copié. Sí, así que como es lo mismo, vamos a copiar todo esto del tema anterior, ir al pago. Dios, como podemos ver, esto es deficiente y no necesitamos todo esto en realidad, sólo
necesitamos a estos dos. Entonces vamos a copiarlos. ¿ Verdad? Y volvamos a nuestra página de inicio en ellos aquí. Y por supuesto necesitamos agregar el globo con algo de relleno, como dijimos. Y quitemos esto. Y tenemos así que esto es todo. Vamos a colocarlo aquí. Y quizá la división que falta. Y ahora estamos bien. Y este es el envío o la barra de progreso, como podemos ver aquí lo tenemos. Ahora vamos a crear la Orden de Lugar, pero antes de esto, Vamos a ajustar esto. Por lo que ahora tenemos 75 por ciento en lugar de 50. Y si volvemos, ahora
estamos al 75 por ciento. Todavía tenemos sólo el Pedido de Lugar. Entonces ahora empecemos con la creación de la página real. Entonces lo que voy a hacer es crear una nueva. Row en este caso aquí. Y voy a tener la primera columna con quizá siete a tamaño mediano. Y luego tenemos que ir con algo de relleno y por supuesto la columna real. Y lo que estaba pensando es agregar la ubicación. Entonces lo primero que vamos a mostrar es la ubicación real de la persona con la información que ingresó desde el envío. Y por supuesto, tal vez un botón de edición para que pueda volver a la ubicación de envíos y editores. Entonces para hacer eso, vamos a usar un carrito como de costumbre. Por lo que tarjeta con algún fondo, luz, margen botón tres. Y podemos empezar con el encabezado de la tarjeta. Y luego va a agregar tal vez dirección, y luego seguido de la dirección real. Entonces tal vez, supongamos pueblo, tal vez Calle, edificando. Y después de eso vamos a tener el cuerpo de la tarjeta. Nos vamos vamos vamos a exhibir la ciudad. Entonces en H5 y lo voy a hacer como ket llamado título. Y luego vamos a tener la ciudad. Y luego después de eso podemos crear el teléfono o el número telefónico. Y en este caso, estaba pensando en agregar el número de teléfono a la izquierda y el botón de edición a la derecha. Entonces vamos a crear una nueva fila. Científicos robaron ir a tener sexo para el primero. Y el párrafo será de texto. Y tal vez el número de teléfono. Supongamos 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4. Y después de eso vamos a crear una nueva columna, también sexo. Y en este caso vamos a tener el botón el cual tendrá varias clases como BTN, float to end. Y por supuesto esquema BTN, primaria. Y por supuesto la edición real. Ahora si volvemos atrás y golpeamos Refresh, vamos a conseguir algo como esto. Tenemos la dirección, tenemos la ciudad, el número de teléfono, y el botón Editar para editar todos estos. Entonces en el back-end, no
queremos hacer este botón. Nos dirigimos a la página de envío donde el usuario puede editar todos estos y luego volver,
volver a la página de titular del lugar. Entonces este es el primero. Y sigamos con la creación del método de pago. Entonces creo que es lo mismo. Y vamos a crear una nueva fila aquí mismo. Y en este caso, voy a tener una sola columna. Y luego la tarjeta con los patrones de fondo de luz. Y por supuesto, el margin-abajo tres. Abrámoslo y empecemos aquí. Entonces esto es todo dentro de esta división, vamos a tener el encabezado de la tarjeta como de costumbre. Y en este caso, sólo dirá pago. Y como solo tenemos un pago, lo voy a agregar simplemente usando el Título 5. En este caso, como de costumbre, se llama título y luego contra-entrega. Entonces esto es todo. Ahora si volvemos al párrafo y adherimos clase llamada Texto, va a tener tal vez entrega gratuita en pedidos antiguos arriba tal vez $15. Entonces esto es todo. Y ahora terminamos con la segunda moneda. Si volvemos atrás y refrescamos para tener algo como esto, pero yo estaba pensando en añadirlo debajo de la columna que está en el medio siete. Entonces volvamos atrás. A ver ¿qué hicimos mal? Si vuelvo a aquí tenemos la columna y aquí debimos haber agregado este papel. Entonces vamos a quitarlo y colocarlo aquí mismo. Ahora si volvemos y damos la vuelta al refresco, vamos a conseguir la dirección luego el método de pago. Y aún tenemos algunos espacios aquí. Y en este espacio vacío, realidad
estoy pensando en agregar el botón Hacer orden y donde el usuario también pueda ver sus pedidos reales. Entonces, pero antes de eso, voy a añadir un nuevo personaje aquí mismo. Y esta tarjeta mostrará todos los artículos que están en el cliente Scott. Entonces sigamos adelante y empecemos con ello. Volvamos atrás. Y como de costumbre, lo vamos a tener dentro de esta división. Y hagámoslo aquí mismo por nosotros. Crearemos nuestra columna, entonces, lo siento, superamos y luego nuestra columna. Y por supuesto, la suma de fondo con luz y mucho y fondo tres como de costumbre. Y tenemos el encabezado de la tarjeta. En este caso, va a tener el párrafo con algunos estilos como display, tal vez inline-block. Y claro que tenemos que tener tus órdenes o curar. Sí, creo que todos esos son tus artículos. Suena mejor. Entonces tenemos otro párrafo con el flotador de clase. Y en este caso vamos a tener estilo. Y también vamos a mostrar bloque en línea. Y en este caso vamos a tener precios. Por lo que los artículos están en la mano izquierda, los precios a la derecha. Entonces esto es para el encabezado. Y en este caso vamos a empezar con el amigo frío. Sigamos adelante y creemos una nueva división con cuerpo y justifiquemos centro de contenido. Y como sabemos, comenzamos con crear E4 para presentar. Y entonces tenemos una fila. Y en este caso vamos a tener la columna tres. Y el final en esta columna, estoy pensando en agregar la imagen, los ítems para que supongamos que elige el ítem buffet image1 y tal vez agregar algunos estilos. A ver. En primer lugar vamos a exhibir inline-block y después vamos a tener la altura de cinco Barry. Y finalmente ancho de también muy final. Entonces esto es todo para la imagen. Ahora vamos a crear otra columna. Y en este caso tendremos la columna 9. Y dentro de esta columna voy a tener el párrafo para el título. Entonces como de costumbre estilo inline block, lo siento. Esto es todo. Tenemos dentro de esta pantalla de azulejo bloque en línea. Y entonces tenemos el título real supongamos que elegimos chanson, y luego vamos a tener otro párrafo por el precio. Y en esta ocasión podrá estar mostrando y también inline-block. Y por supuesto ahora vamos a tener la carga de clase y, y supongamos que tenemos 25 dólares. Entonces ahora si vuelves a refrescarte, vas a ver algo como esto, aún
tenemos algunas modificaciones para esto y las vamos a hacer en el siguiente video. Entonces nos vemos.
15. Orden de lugar 3: Está bien, Así que ahora que lástima, Vamos a sumar el resto de la información para que todavía tengamos, ya
agregamos el título y el precio. A lo mejor vamos a sumar esto, sumar la cantidad en realidad. Entonces agreguemos un párrafo que diga cantidad. Y luego seguido de la cantidad real. Lo voy a tener en un lapso. En este caso, supongamos que el usuario compró tres. Y después de eso vamos a crear una nueva fila después de esta división. Y en este caso, lo
vamos a tener para la demo. Entonces tal vez la columna 6 y esto se vaciaría y tenemos columna y el sexo. Y en este caso, vamos a tener el botón quitar. Entonces vamos a añadir el botón. Y el botón real tendrá algunas clases como PTEN, cambiador de
videojuegos, y luego flotar, ¿verdad? Y por supuesto, el tipo se someten. Entonces sí, creo que esto es todo. Volvamos atrás y golpeemos refresco. Y como pueden ver, aquí tenemos la cantidad. A lo mejor agreguemos la cantidad en realidad a esta. Entonces hagámoslo. Tendremos aquí el color, y añadámoslo en realidad dentro de esta columna. Pero como estamos usando display inline-block, voy a tener una nueva división aquí mismo. Dentro de esta división, vamos a tener estos dos párrafos y luego seguido de esta cantidad. Y por supuesto, los científicos botón, vamos a agregar remoto. Entonces creo que esto es básicamente, si lo
actualizamos, vamos a tener la cantidad 3 y el botón quitados para realmente quitar este artículo. Entonces ahora a todo esto, vamos a sumar una línea. Y en este caso, después de d4 aquí mismo, voy a sumar cada parte. Y si golpeo Refresh, quiero tener esta línea. Y por supuesto si tenemos varios, tal vez varios artículos, se verán así. Entonces sigamos adelante y tenemos este cuerpo de cartas. Y dentro de este cuerpo vamos a crear varias formas para varios artículos. Entonces voy a copiar todo esto un par de veces. Y ahora si volvemos atrás y golpeamos refresco, vas a conseguir varios artículos. Y por supuesto, cada artículo consta de imagen específica, título
Pacific, la cantidad que el usuario ha comprado, y por supuesto, el precio del artículo. Y también tenemos el botón de quitar para eliminar cualquier elemento que el usuario no quiera. Entonces esto es todo para los artículos. Y en este caso todavía tenemos el contrato de pedido de lugar real aquí. Entonces si recuerdas, en realidad
creamos una columna aquí mismo, que es ésta. Entonces si quieres tener tal vez aquí,
sí, Así que esto es todo. Tenemos columna media. Siete. Entonces después de las siete, estoy pensando desde el 7012 vamos a tener la Orden de Lugar. Entonces, vamos a desplazarnos hacia abajo. Tenemos esta división es crear una nueva división aquí mismo. Y en este caso, vamos a tener una nueva columna a mitad de cinco. Y en este caso vamos a tener, como de costumbre, una nueva fila con algo de relleno en el eje y y luego otra columna, luego el Dios real. Y en este caso vamos a tener, como de costumbre mala sequía, luz y botón de observación tres. Y entonces también tenemos la forma que vamos a presentar para el pedido de colocación. Entonces esto es todo. Vamos a tener el encabezado de la tarjeta como de costumbre. Dentro de esta cabecera de tarjeta, para tener un centro azteca. Y vamos a tener el botón con algunos estilos. Entonces estoy pensando que el ancho de este botón debe ser del 65 por ciento nuestra tarjeta. Y entonces todavía tenemos las clases de btn, VT y tal vez amarillo, por lo que advierte. Y entonces tenemos tal vez, vamos a añadir el onclick y devolver First Order y este método lo usamos más tarde, pero por ahora todavía agregué. Y por supuesto el tipo debería ser un botón, y entonces todavía tenemos el nombre, tal vez acción. Y por supuesto, la Orden de Lugar aquí mismo. Por lo que hacer orden. Y ahora si volvemos refrescar, vamos a tener esta tarjeta con sólo un encabezado que dice colocar todo. Entonces esto es todo para el encabezado. Sigamos creando el cuerpo. Entonces volvamos atrás. Todavía tenemos el cuerpo de la tarjeta, y en este caso lo voy a crear aquí mismo. Tan buen cuerpo. Y entonces todavía tenemos el título de la tarjeta. En este caso. Voy a emitir resumen de tarjeta. Y empecemos con una nueva fila. Y esta fila va a tener los ítems, por lo que la columna 6. Y luego dentro de esto e ir a colocar artículos. Entonces tomemos el, quizá la suma. Entonces en la columna sexo, el segundo, Vamos a añadir tal vez por ahora 70. Y por supuesto, cuando terminemos y diseñamos y la igualdad backend el acto. En realidad el programa quizá debería agregar todos los artículos a los precios de todos los artículos y luego mostrarlo bajo el resumen del pedido. Pero por ahora, vamos a sumar 70 dólares. Y luego después de conseguir tonelada con el luchado va a crear una nueva fila. En este caso, vamos a tener un nuevo sexo de columna. Esto es para la entrega. Y luego agreguemos otra columna, sexo. Que es 3 tal vez. Y luego después de eso vamos a crear una nueva fila con algunos B13. Y en este caso vamos a tener el total del pedido o tal vez el precio total. Entonces eso se creó sexo columna. Y en este caso, o el total, y luego seguido por la cantidad real. Entonces hagamos un rasgo aquí, equilibrado seis. Y digamos que también es alguien en dólares ya que la entrega es gratuita. Entonces creo que esto es todo. A lo mejor también en realidad puedes agregar tal vez un párrafo que diga que no tienes artículos en tu tarjeta. Si no tenemos ningún artículo en nuestro código. Pero por ahora nos quedaremos con esto y dondequiera que estemos haciendo el back-end, también
podemos agregarlo. Entonces vamos a refrescarnos y como pueden ver, tenemos los otros ítems de resumen, entrega tiene algunos remantes, y también el otro total con el total real. Ahora, creo que esto es todo para el, este. Y por supuesto, podemos agregar también una nueva tarjeta aquí para ver todas sus viejas compras. Y en este caso, lo voy a crear aquí mismo después de esto. Por lo que dentro de esta columna, va a tener una nueva fila. Y en este caso vamos a tener como de costumbre, la columna con luz. Y por supuesto el margen inferior verde. Por lo que cabecera de tarjeta como de costumbre. Y entonces claro que vamos a tener el párrafo. Y en este caso, hagámoslo una nueva línea y estilo. A lo mejor mostrar bloque en línea. Y luego por supuesto tenemos la carga de clase de compras, y luego tuvimos el bloque en línea de display de estilo como de costumbre. Y en este caso tenemos el recibido. Entonces lo que estamos mostrando aquí son los pedidos reales del usuario y si se recibe o no. Entonces creo que esto es todo para el encabezado de la tarjeta. Volvamos atrás y veamos como refrescarlo. Sí, creo que se ve bien. Contamos con sus compras y si se recibe el no. Y después de que Daniel vaya a crear el cuerpo de la tarjeta con centro de contenido justificar. Y después de eso vamos a tener la fila. Y luego después de que se vaya, podemos empezar con la creación del párrafo, tal vez cuatro. A lo mejor quitar esta clase por ahora, voy a añadir algunos estilos. Por lo que en este momento se mostraría bloque en línea. Y luego, entonces tengo la fecha del pedido. Entonces fecha y tal vez supongamos 26 a 2021. Y luego seguido de tal vez el precio. Pero antes de que sigamos adelante y refresquemos. Y como podemos ver, tenemos la fecha del pedido. Y yo estaba pensando en agregar el botón real de recibido o flexión justo aquí. Y por supuesto el total o el precio justo aquí. Entonces en lugar de sumar el precio aquí, voy a tener el botón que dice Pendiente o recibido. Entonces vamos a hacer las dos. Y el diferente andrew va a exhibir uno de ellos de acuerdo a si se recibe o no el artículo. Por lo que botón de inundación y BD y BD y tener éxito si se recibe. Y quizá el éxito, lo siento. Y por supuesto el estilo que es display inline block. Entonces esto es todo para el primer botón y voy a escribir recibido. Y después de eso, después de esta división, vamos a tener una nueva división. Y en este caso, voy a tener el total es y tal vez 120 dólares. Ahora si retrocedemos y refrescamos, como podemos ver, ese total como y este botón debería estar aquí mismo. Entonces sigamos adelante y arreglémoslo. Dentro de este botón tenemos la pantalla de estilo inline-block. No obstante, creo que probablemente tenemos sólo eliminemos eso. Lo hice otra vez. Entonces tenemos aquí el inline-block y nos olvidamos de crear una nueva división. Vamos a almacenar todos estos, así que sigamos adelante y hagámoslo aquí. Entonces vamos a refrescarnos. Y como pueden ver, tenemos el botón recibido justo aquí. Y tal vez también podamos tener esto como uno para pequeños. Y vamos a refrescarnos. Y como podemos ver, conseguimos esto como un total atrasado o después de la fecha del pedido. Entonces esto es todo para el primero. Añadamos tal vez sigamos adelante y sumamos otra línea. Entonces HR y luego copiar todo esto, luego pegado unas cuantas veces más. Entonces este es Atlas. Adelante y refresca. Y como podemos ver, obtuvimos diferentes órdenes. Pero esto no es lo que estaba pensando. Estaba pensando tenerlos todos dentro de la tarjeta. Entonces volvamos atrás y veamos el problema. Entonces aquí, conjunto de tener este aquí mismo. Lo voy a tener justo después de éste. Y todos estos deben estar en el cuerpo de la tarjeta. Entonces voy a copiar todo esto y pegado un par de veces más. Volvamos atrás y golpeemos refresco. Y como podemos ver, nos dieron nuestros pedidos con la fecha de Euler, el monto total de la misma, y si se recibe o no. Y por el bien de este ejemplo, voy a cambiar esto a pendiente solo para que ustedes sepan cómo lo van a tener si el pedido aún no se entrega. Entonces voy a tener aquí, en lugar de btn-éxito, btn peligro. Y en lugar de recibir, voy a tener flexión. Entonces este es Atlas. Adelante y refrescarlo. Y como podemos ver, tenemos el botón que dice pendiente aquí mismo. Y sin embargo, se reciben todos los demás artículos. Entonces esto es todo para este video que creamos. Para envolverlo, creamos estas tarjetas pequeñas donde tenemos el pago de dirección. Entonces tenemos todos los artículos que están en la tarjeta
del usuario y por supuesto, sus viejas compras. Y también tenemos el total o los resúmenes. Entonces tenemos el total justo aquí. Y ésta debe ser la suma de todos los ítems multiplicados por la cantidad que el usuario ha pedido. Entonces esto es básicamente para este video. El siguiente video empezaremos con la construcción de la página de administración. Y también tenemos la página de registro donde se ha ido el usuario. Ahora, inscríbase a este sitio web. Con eso dicho, este es el final de este video. Nos vemos en el siguiente.
16. Administración: Hola y bienvenidos de nuevo. En este video, vamos a crear la página de administración. Y en realidad la página de administración constará de dos páginas. El primero que vamos a construir juntos, y el segundo será tu proyecto que vas a crear. Entonces, empecemos con la primera donde vamos a tener varias categorías, marcas, y artículos que podemos agregar. Entonces volvamos a Dios. Y en primer lugar, ya que todavía tenemos todos estos aquí mismo, Vamos a tal vez añadirlos a la orden de lugar. Entonces aquí, siempre que tengamos éste, que es el fluido contenedor, lo
vamos a llevar todo. Y dijeron y la Orden de Lugar, creo que no creamos un nuevo archivo, Place Order, EJS. Y en este caso voy a sumar todas estas aquí. Y como de costumbre, no olvides el encabezado y el pie de página. Entonces esto es todo para el pie de página. Y vamos a desplazarnos hacia arriba en el encabezado justo aquí. Y ya terminamos por la Orden de Lugar. Ahora estamos en la casa que EJS y vamos a crear la primera página de administración. Entonces como dijimos, necesitamos tal vez una caja donde podamos sumar nuestras categorías. Entonces sigamos adelante y empecemos con la creación del fluido del contenedor. Y luego dentro de ésta y ve a Crearla crecer con antes. Y por supuesto, columna, sexo
grande, fondo, luz y ser tres. Entonces esto es todo para el primero. Vamos a crear el formulario. Y por supuesto, dentro de este formulario voy a tener la categoría add. Entonces vamos a añadirlo aquí mismo, y luego seguido de una etiqueta. Y este será el nombre de la categoría. Y por supuesto, una división que es input-group. Y dentro de este input-group va a tener la adición real de la categoría. Entonces vamos a tener una entrada de tipo texto y la clase se formará control. Y luego el marcador de posición, tal vez nombre de categoría o nombre, simplemente un nombre. Y creo que esto es todo. Si volvemos atrás y
golpeamos refresco, vamos a tener algo que se vea así. Por lo que tenemos la academia, tú tienes el nombre de la categoría, y también tenemos el nombre real. Ahora cuando pensar es agregar la imagen de esta categoría. Entonces volvamos y tal vez copiemos todo esto y peguémoslo aquí mismo. Entonces imagen de categoría, y no vamos a añadir un enlace a la imagen. En realidad vamos a añadir el bajo, así que lo dejaré como texto. Y lo que vamos a hacer es agregar todas las imágenes a nuestra carpeta de imágenes. Y entonces podemos elegir entre esto. Ya que vamos a entrar al camino. Entonces esto es todo para la imagen. Vamos a tal vez mal. Y si volvemos atrás y refrescamos y entonces tengo el nombre y la imagen de categoría. Entonces esto es todo para la Agregar Categoría. Hagamos exactamente lo mismo para la marca y lo coloquemos aquí mismo. Entonces ahora volvamos atrás y tomemos todo esto, que es sexo de columna. Copiarlo y colocarlo aquí y aquí tenemos la marca, marca. Y luego tenemos la imagen de marca. Y como pueden ver, si regresamos y damos un toque de refresco, vamos a tener algo que se parece a esto. No obstante, aún tenemos que añadir tal vez, tal vez hacerla oscura. Por lo que conjunto de luz de fondo que está desnuda oscura y CO2 suceden. Vamos a refrescarnos. Y por supuesto, no necesitamos olvidar agregar el impuesto como. Entonces este es Atlas. Vuelve atrás y refresca. Y como podemos ver, tenemos la categoría add y las cajas de marca donde tenemos, podemos ingresar a la categoría y a la imagen. Y por supuesto que no queremos olvidar el botón de envío real. Entonces vamos a crear otra división. Vamos a añadir el botón. Y esto será de clase btn, btn, tal vez aquí, oscuro. Y entonces tenemos sometimiento. Y vamos a tener lo mismo aquí mismo. Entonces botón. Y luego algunas clases como btn,
btn iluminan esta vez ya que estamos usando el fondo de oscuro y someten, refrescan. Y como podemos ver, nos dieron el envío y presentamos para nuestra marca y categoría. Ahora que terminamos con nuestra marca y categoría, el siguiente paso es crear realmente la adición de un artículo. Entonces volvamos. Y aquí tenemos la forma, todavía
tenemos división, y esto es para la fila. Vamos a crear una nueva fila. Y en este caso, vamos a tener la columna Medalla de seis y el fondo oscuro. Y también tobogán fiscal con algún relleno en todos los lados. Y ahora podemos crear nuestra forma. Y luego dentro de este formulario, empecemos con la creación del H3, que es agregar ítem. Y por supuesto, tenemos que seguirlo con la primera etiqueta para el nombre del artículo. Por lo que etiquetar por nombre. Y este será ItemName, luego seguido de una división de grupo de entrada como de costumbre. Entonces grupo de entrada. Y entonces todavía tenemos margen inferior tres. Y por supuesto necesitamos agregar la entrada real. Entonces agrego un texto de entrada y luego tenemos control de formulario de clase. Y también tenemos el nombre, que es el nombre real, y tal vez el elemento de posición, nombre o nada. Creo que tal vez lo vas a hacer como nombre. Y esto es básicamente para la primera división. Ahora, todavía lo tenemos. Algunas cosas. Entonces vamos a copiar esto y pegarlo un par de veces más. Por lo que tenemos el nombre del artículo puede ser la descripción del artículo, y luego también tenemos el artículo. Añadamos aquí la categoría, luego seguido de la marca de artículos. Y por supuesto todavía tenemos el precio, cantidad e imagen y también el tamaño. Entonces artículo, marca, artículo, imagen, digamos. Y después de eso, vamos a tener la cantidad del artículo. Por lo que esta es la cantidad disponible en nuestro stock. Y después de eso, vamos a terminar con la imagen del artículo, el petróleo. De acuerdo, entonces agregamos aquí la imagen por lo que aún tenemos el precio. Sí, Así que básicamente tenemos todo lo que
necesitamos, todavía tenemos el tamaño. Entonces sumémoslo realmente rápido aquí. Entonces esto es todo, este es el lado. Y por último, vamos a tener el botón de enviar. Y estaba pensando en agregar tal vez un botón para ver todos los artículos que tenemos. Entonces hagámoslo genial. Aquí. Tenemos este tamaño de artículo. Vamos a crear una nueva fila aquí mismo, el sexo de columna para el botón de enviar. Por lo que el tipo debe ser Enviar. Y luego después de esa clase, btn, VT y luz como de costumbre, y el botón Enviar real. Y después de eso vamos a crear las columnas x. y en este caso, la vamos a tener. ¿ Verdad? Entonces flotar, derecha, o flotar y el metal. Y este formulario será la forma que vamos a enviar botón será btn,
btn carga ligera, y luego ver todos los artículos. Entonces básicamente si sigo adelante y refresco, podemos ver que tenemos todos los artículos en folk. Por lo que tenemos el nombre, descripción, categoría, marca, imagen, cantidad, precio, y talla. Entonces esto es básicamente para el artículo. Y ahora realmente necesitamos crear otra división tal vez. Y esta división consiste en todos los pedidos que los usuarios han ordenado ahora. Y por supuesto, necesitamos crear una nueva, tal vez una nueva página para ver todos los ítems y tal vez cambiar alguno de ellos si queremos. Entonces esto es todo para éste. Sigamos adelante y creemos la siguiente división. Entonces volvamos a nuestro código. Y en este caso, me voy a desplazar hasta aquí y empezar con los pedidos reales. Por lo que después de terminar con este formulario, esto es todo para la columna y aún en la misma fila. Entonces aquí, vamos a crear una nueva columna, el sexo medio y nuestro pensamiento para que se desplace. Y veremos qué significa desplazamiento de puntuación en un minuto. Entonces esto es por las órdenes y. Por supuesto que vamos a tener división tan fría como crear nuestra forma. Y luego dentro de este formulario voy a tener el encabezado de la tarjeta como de costumbre con alguna advertencia de fondo y el texto debe ser oscuro. Entonces, sigamos adelante y ábrela. Dentro de esto, vamos a tener el número de orden en este caso. Yo tal vez lo escribo como uno. Y por supuesto seguido de otro párrafo con la tarjeta de clases, texto y flotador. Y y en este caso, esto es por el precio total y seguido de tal vez, digamos 75 dólares. Entonces esto es todo. Si vuelves atrás y golpeas refresco, vamos a tener algo que se vea así. Estos son los pedidos y dentro de los pedidos
tenemos el primer pedido con un precio total de uno. Ahora podemos agregar tal vez algo de información al respecto. Y por supuesto no vamos a sumar todos los artículos que el usuario ha comprado. Simplemente vamos a añadir tal vez su ubicación, el precio total que ya agregamos, y tal vez un botón de unos pocos. Y siempre que
el usuario, el administrador presione este botón, lo llevará al orden real con todos los detalles de este pedido. Entonces esto es todo. Sigamos adelante y sigamos creando el cuerpo de la tarjeta, llamado conejito. Y en este caso dentro del cuerpo tenemos el título del auto como de costumbre, que será tal vez el usuario de cuyo orden es éste? Entonces tal vez voy a nombrar que tenía. Y en este caso, voy a tener la ubicación y el texto de la tarjeta, así llamada x. Y en este caso va a tener tal vez Líbano. Y después de eso, vamos a tener la fecha. Por lo que también otro contexto con la fecha puede ser 26 al 2021 y luego seguido del número telefónico y otro contexto. Entonces esto es todo, tal vez más de 4, 4, 4. Y así si vuelves atrás y golpeas refresco, vas a tener esto. Tenemos el nombre, Líbano, la fecha, y el número telefónico. Y por supuesto voy a añadir tal vez el botón de vista aquí mismo. Entonces sigamos adelante y creemos el botón para ver el orden completo. Y yo estaba pensando en agregarlo aquí mismo. Y por supuesto aquí me olvidé de tenerlos como párrafo en lugar de texto en lugar de división. Así que guiémoslos y arreglémoslos. De acuerdo, entonces ahora que los arreglamos, Vamos a crear el botón con el tipo de enviar. Y luego tenemos las clases que son las btn, btn-primarias. Y creo que ya terminamos todavía hay que vernos. Ahora volvamos atrás y refresquemos. Y como podemos ver, tenemos el orden real. Y tal vez porque esto no se está llevando toda la página para toda la división, hagamos el pedido de mariscos aquí mismo. Entonces voy a hacer es tener estas etiquetas de título y todas estas nuevas fila y columna 6. Vamos a tener todo esto dentro de esta columna. Y luego voy a crear otra columna que también es el sexo. Y en este caso, voy a tener el botón de presentación. Entonces ahora si volvemos y damos la vuelta al refresco, vas a tener algo que se parece a esto. Y por supuesto podemos sumar las clases como carga. Y, y como pueden ver, está al final justo aquí. Entonces esto es todo. Siempre podemos agregar, tal vez tomar todo esto y copiarlo un par de veces más, y vamos a refrescarlo. Y como podemos ver, tenemos nuestras órdenes, varias órdenes. Y por supuesto, esto es todo para esta página. Creamos todas las páginas de Admin o funciones de admin mencionadas, y esto es todo para la primera página de administración. Nos vemos en el siguiente video.
17. Artículos: Muy bien, Así que bienvenido de nuevo. En este video vamos a crear el discurso del ítem donde si el administrador hace clic en esta vista todos los ítems lo hará debería ser dirigirlo a todos los ítems con toda la información que pueda editar. Entonces sigamos adelante y empecemos con ello. Pero primero, antes de hacer algo que sea solo el color de esto y lo colocó, colóquelo en la página de administración real. Entonces voy a crear un nuevo archivo. Y esta será la página de administración o la, sí, Así que creo que tiene sentido admin a los EJS. Y en este caso vamos a tener estos. Y por supuesto, empecemos a construir los artículos aquí mismo. Entonces lo primero que vamos a crear es una forma. Y luego después de eso vamos a tener que crear el fluido contenedor. Y luego seguido de tal vez la fila. Y luego por supuesto el canon. Pero antes de eso, vamos a añadir algo de relleno, así que tal vez B5. Y ahora estamos bien. Podemos empezar con la creación de la tarjeta. Y yo estaba pensando en crear simplemente un cuerpo frío. Y dentro del Skype, amigo, voy a tener el fondo, la luz y justificar el centro de contenido. Y ahora empecemos por construir la primera fila, luego la columna grande tres. Y lo primero que vamos a añadir es la imagen. Entonces tal vez imágenes o imágenes de corte. Y mencione uno que usted Vg, dpi JPEG. Y por supuesto que va a tener que añadir el estilo. Por lo que la pantalla debe ser inline-block. El estatura. A lo mejor 15 píxeles podrían ser buenos. Perdón, 15 AM. Y el ancho también será de 15 RT m. y esto es básicamente para la imagen. Vamos a crear otra división para el texto. Y en este caso, voy a tener alguna planeación antes y detecta centro. Y entonces empecemos por crear la fila. Entonces tenemos la columna sexo. Y por supuesto vamos a tener la entrada para editar. Por lo que este tipo debería ser Button. Y por supuesto, la idea que se necesita en eso y la clase btn, btn advertencia. Y luego PY dos. Y por último, después de terminar con esta entrada, va a tener que crear otra columna de código de seis, que contendrá el botón real de tipo submit. Y en este caso, lo vamos a hacer inhabilitado por ahora. A lo mejor limitaré el próximo verano. Sólo para los guionados, vamos a crear. Así que sé el n, ser dos btn advertencia y luego por supuesto ser camino también. Entonces esto es todo para el primero. Si seguimos adelante y nos
refrescamos, vamos a tener algo que se parece a esto, pero nos olvidamos de agregar los botones. Entonces aquí mismo tenemos que añadir, primer lugar, tenemos el primer botón, que es éste. Y en este caso, voy a tener el botón Enviar. Si volvemos atrás y golpeamos refresco, voy a tener algo que se vea así. Pero sin embargo, todavía tenemos este botón. Y en este caso, lo siento, tenemos que hacerlo como botón aquí mismo. Por lo que se debe presentar la pipa. Y como de costumbre, tal vez id Vamos a hacer que se añada y luego declara el final BD y advertencia. Como de costumbre y PGY2. Eliminemos esto y dentro de este botón vamos a tener edición. Entonces este es un básicamente tenemos el editar y enviar. Y por supuesto la edición no está desactivada, pero sin embargo, el botón Enviar está deshabilitado porque no cambiamos nada para enviar. Y así es como parece que la imagen, y ahora tenemos que añadir la información aquí mismo. Entonces sigamos adelante y empecemos con ellos. Todavía tenemos, ya creamos la columna grande tres. Entonces lo que vamos a hacer es crear la columna grande 9 para vender tener nueve. Y en este caso una sal con el flujo. Entonces tenemos sexo de columna. Y por supuesto vamos a tener la etiqueta para el nombre, tal vez nombre del producto. Y luego seguida de la división que es grupo de entrada y MV3. Y entonces por supuesto, la entrada real del tipo de texto. Por supuesto que el nombre debe ser nombrado y el que debe estar desactivado al principio. Y por supuesto la clase debe formarse, controlarse. Y luego seguido por el DNI del próximo semestre. Y esta es la idea de que podemos usar JavaScript. Y esto es, básicamente es ir adelante y buena suerte. Como puedes ver, tenemos el nombre del producto y está desactivado por ahora. Entonces esto es todo para el nombre del producto. Vamos a seguir adelante y copiarlo varias veces. O la otra información. Entonces producto, tal vez la imagen. Y luego tenemos la categoría de producto. Y entonces por supuesto tenemos la marca de producto. Y vamos a copiarlo una vez más. Entonces aquí tenemos el producto, tal vez cantidad. Y ahora si vuelves atrás y golpeas refresco, vas a ver algo como esto. Quitemos esta cantidad de producto de aquí y lo coloquemos aquí mismo. Entonces vamos a quitar esto. Y sabemos que en un nuevo camino es crear un nuevo color. Y dentro de esto vamos a tener la cantidad del producto. Y tal vez agregamos el nombre de la imagen. A lo mejor agreguemos el precio y el tamaño. Entonces vamos a base precio del producto y tamaño del producto. Y creo que estas son toda la información que necesitamos. Tenemos cuatro por cuatro. Oh, está bien, así que olvidamos la descripción. Por lo que está pensando en quitar esta base aquí mismo. Y luego por supuesto, agregue la descripción del producto aquí mismo. Entonces esto es todo. Si vuelvo y golpeo refresco, podemos tener algo que se vea así. Y esto es básicamente para los artículos, vamos a tener varios artículos que se ven así, que, se ve así. Y lo que vamos a hacer es agregar algunos valores. Por ejemplo, tenemos el nombre del producto dentro de esto, ahí tienen el valor, que es tal vez Johnson, tal vez la descripción del producto que tienen valor profundo de lorem, ipsum, y luego la categoría de producto puede ser champú. Por lo que valor champú, producto, marca, valor, Johnson. Y por supuesto, producto por cantidad que tenemos tal vez tengamos 20. El precio del producto será tal vez $15, y el tamaño del producto será de 200 mililitros la imagen. Por lo que el valor debe ser daños dimensión 1 a GBG. Y ahora si vuelvo y refresco, voy a tener todos los valores aquí mismo. No obstante, aún tenemos que crear el botón Editar. Por lo que dondequiera que presionemos agregó, todos estos, uno de los insumos debe volverse a no ser inhabilitado y entonces podemos cambiarlos. Y cada vez que presionamos sometemos, todos estos deberían cambiar en nuestra base de datos. No obstante, esta tarea debe ser un retorno de salida y, y tareas de base de datos. Y por ahora todavía tenemos que simplemente
hacerlos no desactivados cada vez que pasamos este botón de edición. Entonces con eso, sigamos adelante y creemos un descriptor que vamos a usar. Entonces vayamos todo el camino hasta aquí. Y después de la forma, vamos a tener el guión, que será quizá del tipo. Entonces aquí, vamos a agregar el tipo que es el texto JavaScript. Y empecemos con crear el documento y listos para, listos en esta función, que es el otro caso. Por lo que tenemos la edición, que es el ID de nuestro botón de edición. Y por supuesto sobre clink, va a tener que abrir esta nueva función. Lo cual cambiará o eliminará el atributo de este habilitado de toda la información que tengamos. Pero nos olvidamos de agregar esta clase aquí. Entonces estaba pensando en agregarlo aquí mismo. Añadamos para toda la información a la vez. Entonces sigamos adelante el control extranjero y ábrelo y agreguemos la letra F. Y esta es la clase que vamos a usar. Entonces aquí vamos a tener la clase F, y vamos a eliminar este atributo de discapacitado de esta clase. Entonces esto es básicamente para este y por supuesto para la clase o el DNI presentar. Si hacemos clic en Enviar, debería desactivarlos y en realidad agregar el atributo deshabilitado. Entonces sigamos adelante y lo haremos ahora, y lo explicaré una vez que lo haya hecho. Entonces presentar y por supuesto DoubleClick. Tenemos la función y entonces también tenemos que puntar, o este es el ID. Por lo que la próxima cumbre y ese atributo, vamos a sumar desactivados. Este Abel. Y esto debería estar deshabilitado. Entonces esto no es básicamente para éste. Y por supuesto, si volvemos atrás y refrescamos, si presiono en esta edición y estos ahora están abiertos. No obstante, cada vez que
presionamos sobre presentar, deberíamos poder presionar sobre someter. De vuelta aquí notamos que no agregamos la clase F. Ahora volvamos atrás y refresquemos. Y como podemos ver, si hago click en editar, tengo toda la información que puedo editar. Y una vez que lo cambie, digamos champú para bebés Johnson y haga clic en enviar. Podemos ver que lo cambiamos. No obstante, por ahora, ya que estamos usando, no
estamos usando back-end. No cambiará una vez que el, una vez que se actualice la página. Entonces esto es básicamente para éste. Y usaremos este artículo por Dios para varios artículos, en realidad para todos nuestros artículos una vez que terminemos nuestro sitio web. Entonces ahora sigamos adelante y los coloquemos en el ítem, que artículos EJS, pero EJS. Ahora volvamos a casa. Vuelve a nuestro formulario. Vamos a conseguirlo. Y claro que vamos a tener este guión. Entonces vamos a copiar todo esto básico aquí y luego borrado de aquí. Y por supuesto vamos a tener que añadir el encabezado aquí mismo. Entonces aquí tenemos nuestro encabezado y ahora nuestros artículos son DJ como archivo está listo. Entonces esto es, en realidad es para el ítem, por lo que EJS. En el siguiente video vamos a tener que crear el método de inscripción. Y esto en realidad es lo último que vamos a crear. Y por supuesto, no lo sabemos, tengo que olvidarme de nuestro proyecto el cual se presentará después del valor de registro. Entonces con eso dicho, este es el final de este video. Nos vemos el siguiente.
18. Signup: Hola y bienvenidos de nuevo. En este video, vamos a crear la página de registro. Entonces sigamos adelante y empecemos con ello aquí mismo. Lo primero que vamos a crear es la sección. Y en este caso, voy a tener que sumar algunas clases. Entonces si primero es contacto solo para más tarde y algo de relleno. Y luego por supuesto el fluido contenedor, seguido del primer rubro, que es el nombre real de nuestra página web. Entonces voy a agregar algunas clases como texto oscuro, tal vez texto, mayúscula, y margen, abajo cuatro y centro de texto. Por lo que estas son nuestras clases y tal vez agregar el sitio web de comercio electrónico. Entonces esto es todo para el rubro. Ahora vamos a empezar con nuestra primera fila. Y voy a añadir el centro justify-content como de costumbre, y tal vez empezar por crear la primera columna. Y en este caso, tomará la columna grande hacia adelante y la columna mediana 54 pequeña. Voy a tener que hacer seis suma. A lo mejor. Algún relleno en la parte inferior para la ruta, el suelo es oscuro. Y voy a añadir la caja y esto es para el CSS más adelante. Entonces esto es todo para nuestra columna. Voy a tener que añadir un formulario. Y luego dentro de esta forma voy a crear una fila con un margen top de tres. Entonces ahora volvamos atrás y veamos qué creaste por ahora, si actualizamos nuestra página, vamos a tener una caja pequeña con el título del sitio web de e-commerce y decidamos esta caja. Vamos a tener que añadir un,
B, el nombre, apellido, dirección de
correo electrónico, contraseña, y por supuesto, el botón de suscripción. Entonces esto es todo básicamente, Vamos a seguir adelante y empezar con la dirección de correo electrónico. Por lo que para columna media de sexo y algún relleno en el eje y, vamos a tener que crear la etiqueta para el nombre de pila. Y entonces la clase será etiquetada de nombre. Y luego tenemos que crear la entrada de texto tipo, seguido de algunas clases como el control extranjero. Tenemos también MI para ser dos y esta es la entrada para CSS y tal vez Nombre, FirstName. Entonces volvamos atrás y refresquemos. Y como podemos ver, conseguimos este nombre de pila con esto de este lado, o justo después del nombre de pila. No obstante, necesitamos nuestro FirstName para tener la diapositiva de texto. Entonces lo que vamos a hacer es usar todo esto dentro del CSS. Entonces, por ahora, sigamos adelante y copiemos esto y tal vez unas cuantas veces más. Nombre, tal vez otro tal vez esto para el apellido. Sí, creo que esto tendría sentido. Y apellido. Y aquí vamos a tener que añadir L name en lugar de pathname. Y como puedes ver, tenemos FirstName, LastName. Sólo eliminemos este nombre aquí mismo. Y creo que por ahora estamos bien. Vamos a crear otra fila. Y en este caso, esta fila estará asistiendo a una división con un grupo de forma y algún relleno como de costumbre. En este caso, voy a tener que añadir una etiqueta para el correo electrónico. Por lo que esto es por correo electrónico y la clase será etiquetada. Y esto tendrá la etiqueta como dirección de correo electrónico. Y tenemos el e-mail de tipo, la entrada de tipo e-mail, la clase, ¿sería para el control como de costumbre? Y luego tenemos algún margen en y2,
b2, y entrada y nombre, tal vez nombre de usuario. Y esto es básicamente para la dirección de correo electrónico real. Y vamos a copiar esto, pegarlo una vez más para la contraseña. Entonces aquí, en lugar de dirección de correo electrónico, voy a tener que agregar contraseña. Y por supuesto el tipo debería estar aquí, contraseña. Y finalmente, el nombre. Esos serían los mismos. Entonces esto es básicamente sigamos adelante y lo refresquemos. Y como podemos ver, recibimos nuestro nombre,
apellido , correo electrónico, dirección y contraseña. No obstante, vamos a ajustarlos usando la luz de texto aquí. Tan ligero, Volvamos atrás y refresquemos. Y como podemos ver, conseguimos nuestra página de registro tal vez. Y lo último que vamos a crear es el botón real para inscribirte. Entonces volvamos. Después de crear esta división, voy a tener que crear otra división con algunas clases como la cuadrícula. Y entonces la brecha debería ser ser ser Y2. Y ahora estamos bien. Podemos crear nuestro botón real de tipo enviar. Después tenemos las gafas, tenemos DBT, y tal vez vamos a crear B2. Hagámoslo texto en negrita, mayúsculas. Y luego tenemos el botón de enviar, y esto es para el CSS. Entonces tenemos luz de texto. Y por supuesto que vamos a tener que sumar. Entonces esto es todo básicamente, si sigo adelante y lo refresco, entonces tener algo que se parezca a esto. Entonces estaba pensando por ahora no vamos a usar CSS. Solo hagamos esto como amarillo. Por lo que btn, btn advertencia. Y creo que estamos bien. Volvamos a comprobarlo. Si lo refrescamos, tenemos este botón para inscribirnos. O tal vez puedas hacerlo btn peligro. Y volvamos, refresquemos. Y sí, creo que se ve mejor. Entonces esto es todo para la página de registro. Esto es todo consiste. Sólo tenemos éste y el pie de página. Entonces volvamos atrás y sumamos todos estos a nuestra suscripción a ese archivo EJS. Entonces este es el apartado. Entonces tengo que añadir esto. Y vamos a crear un nuevo archivo. Y esto se va a apuntar que el JS y medio todo esto. Y ahora terminamos con este proyecto. Todavía tenemos un paso. Y este será proyecto real al que vayas a Crear. Y lo vamos a echar un vistazo en el siguiente video. Entonces nos vemos.
19. PROYECTO: Hola y engratos si llegaste tan lejos. En este video, vamos a discutir nuestro proyecto. Por lo que el proyecto se trata de crear la página de pedidos. Cuando creamos el Euler o la playa admin, teníamos algo que se ve así. Contamos con los pedidos precio total, titulo. Este es el nombre del usuario. Después tenemos la ubicación, fecha o un número. Y también tienes algo donde podemos dar click en él para ver el Euler completo. En este caso, cada vez que presionamos sobre esta orden de Hippel, debería llevarnos a ésta. Y como puedes ver en esta página, tenemos el orden completo de un usuario específico. En este caso, el nombre del usuario es ¿cómo fue ésta la fecha de ubicación de un número? Y aquí tenemos los artículos. Y pasó a ser que te hice pedir solo artículos de bebé Johnson y sus precios son 12. Y como podemos ver, 3 veces 12 tenemos 36 justo aquí. Entonces esta es la idea. La idea de este proyecto es simplemente crear. Esta puede ser una guía para mostrar la información del usuario y el orden del usuario también. Y también puedes agregar esta cotización que
creamos en la página de administración aquí mismo solo para visualizarla también. Y por supuesto, si presiono sobre
esto, automáticamente debería llevarme al siguiente usuario, que es el orden número 2. No obstante, todo esto, los vamos a hacer en la siguiente clase cuando, donde vamos a trabajar con el backend de esta web. Entonces con eso dicho, este es el fin de nuestro proyecto por ahora. Espero que lo disfruten y buena suerte creando esta parte de ella. Entonces si tienes alguna pregunta, no dudes en preguntarme en la parte de discusión y por favor no
olvides agregar tus proyectos en la sección de proyectos para darte mi opinión. Espero que hayan disfrutado de este proyecto y buena suerte.