No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Compra acceso a todo Platzi por 1 año

Antes: $249

Currency
$209/año

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscríbete

Termina en:

15D
22H
26M
9S
Curso Práctico de JavaScript

Curso Práctico de JavaScript

Juan David Castro Gallego

Juan David Castro Gallego

Deploy con GitHub Pages

27/29
Recursos

Aportes 110

Preguntas 15

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Cuando descubri que existia GitHub Pages me fui de lleno, estoy estudiando full desarrollo web y estoy haciendo los retos de Frontend Mentor, ya me termine todos los ede HTML y CSS en Newbie, comenzaré a perderle el miedo a meter retos con JS.

Este es mi page!! https://xiomiau.github.io/

Todos los comentarios son super bienvenidos ❤️

Proyecto

GitHub Page: https://irvingvaquero.github.io/frontend-practico-js/
Repositorio: https://github.com/IrvingVaquero/frontend-practico-js

Agregados

  • Hice que se agregara productos al carritos, se haga a suma de los precios y la contabilización de los mismos
  • En la parte donde se muestra la información se actualiza dependiendo del que se seleccione además de agregarle la funcionalidad al botón
  • Agregue un modal cuando se quiere agregar un producto duplicado
  • Para móvil como para escritorio cuando se agregan muchos productos agregue un scroll solo a la sección de producto además de cambiar el diseño del scroll
  • Por ultimo el modal es adaptable a móvil

Me tome la libertad de habilitar el poder agregar cada producto al corrito, el poder eliminarlos y además, el poder sumar el total de acuerdo a los productos que estén en el carrito.
link de pagina: https://geovannypaez.github.io/Landing_Page-De-Market-Place/src/index.html
link de repo: https://github.com/GeovannyPaez/Landing_Page-De-Market-Place

Desarrolle algunas mejoras en animaciones y funcionalidades
Link de la demo: https://eliezersam93.github.io/curso-frontend-developer-practico/

Link del repo: https://github.com/eliezersam93/curso-frontend-developer-practico

Qué padre! A mi si me tardo un poquito en desplegar el link de la página, hasta que volví a cargarla me apareció. Y de forma curiosa a mi si me funcionó con el link que me dió, no tuve que agregar el index.html y está totalmente funcional 😄

Les comparto link del demo. Ya habilité el poder agregar cada producto al corrito, el poder eliminarlos y además, el poder sumar el total de acuerdo a los productos que estén en el carrito.

Demo: https://joserangel25.github.io/curso-frontend-js-practico/

Saludos!

Profe, falto un caso por probar. Al abrir el desktop menu, y luego un product detail, al volver a dar click en el email para abrir el desktop menu no lo abre.

Hice una función que ayude como helper para cerrar todos los elementos.

Y la mando a llamar en las funciones que llamamos con el click, en donde se necesitan cerrar elementos.

Parece ser que funciona bien, aunque no estoy seguro que tan buen rendimiento tenga mantener la función así 😅

Comparto mi deploy:

https://canti21.github.io/frontend-developer-practico-js-practico/
No es mucho pero es trabajo honesto 🤓

Aquí mi deploy: https://gnievap.github.io/curso-frontend-developer-practico-javascript/
Y aquí mi pull request: https://github.com/platzi/curso-frontend-developer-practico/pull/670
Está casi igual que el del curso, pero pretendo seguir experimentando conforme vaya aprendiendo más sobre JS.
Muchas gracias JuanDC, este curso se me hizo genial! Y tu entusiasmo es muy agradable y contagioso. De veras que con Platzi, el que no aprende es por que no quiere.

1
Comparto mi page… quise hacer cambios profundos, más allá de los estéticos, pero me faltan herramientas…de todos modos no está muerto quien pelea… seguiré luchando hasta lograrlo.
Mientras tanto les comparto mi tiendita:

https://vale-78.github.io/curso-frontend-developer-JS/

hola, agregue algunas funciones para hacer dinámicas las imágenes y textos https://christophervilla.github.io/front-dev-js/index.html

Deploy en GitHub Pages:
https://soniamegs.github.io/YardSale/

¡QUE NO TOQUES ESE BOTON! 😃

Estos cursos que nos orientan el cómo poner en marcha el conocimiento me fascinan… por acá les comparto:
El Deploy https://libian19.github.io/curso-frontend-developer-conJavascript/index.html
y aquí el código https://github.com/libian19/curso-frontend-developer-conJavascript

Bueno, este es mi page en Git Hub de este proyecto, muy contenta con el avance, voy desde cero y paso a paso, por ahora lo subo de acuerdo a lo que llevábamos en el curso, espero ir actualizando poco a poco.

https://lizzquintero.github.io/curso-frontend-developer-javascript/

Gracias Juan David, eres un muy buen profesor.

Me queda la duda, en el curso de Git y GitHub Freddy nos especifica que no deberíamos subier archivos diferentes a texto, esto incluye las imagenes… Yo no lo subí, por lo tanto no se ven en mi demo los iconos, al final cuál seria una buena alternativa para trabajar estos logos?

yo no tome el repositorio con el fork pero ya tenia el de la ruta de aprendizaje

https://github.com/Dannymx29/pruebasJs

Saludos 👋, hice un modo oscuro de la app espero les guste.
.
Deploy: https://haroldzs.github.io/frontend-develop-practice/
.
Repositorio: https://github.com/HaroldZS/frontend-develop-practice

Excelente GitHub Pages para publicar nuestros proyectos:
Aqui el mio para esta practica: https://ramrider89.github.io/front-dev-practico/

📌 Pasos para hacer el deploy 📌


 

  • • En la página de github, en el repositorio del curso, dar click a la pestaña que dice “Settings”, en el menú izquierdo de la nueva vista, seleccionar a “Pages”, aparecerá del lado derecho las opciones de configuración del deploy.
     
  • • En el cuadro de “Source”, seleccionar en la pestaña la rama “main”. La pestaña de la carpeta /root, la dejamos así, le damos al botón “save”.
     
  • • En el cuadro de "Theme Chooser", dejarlo así.
     
  • • Luego de dar al botón “save”, nos aparece la dirección de la ruta del deploy, para verlo, es mejor esperar unos minutos, cuando se abra, agregar al final /index.html a la ruta del navegador.
     

Nice course dejo mi url del proyecto.
https://saulenavarro.github.io/javascript_DOM_Project/

Bueno estuve un poco perdido para poder ver lo que había hecho desde github pages, pero después de hurgar un poco por fin lo pude encontrar, y este es mi page:
https://olivonisser.github.io/curso-frontend-developer-practico_javascript/

les agradezco los comentarios, saludos

Comparto mi deploy
https://smillerr.github.io/yardSaleProject/

Link del repo
https://github.com/smillerr/yardSaleProject

Me tome la tarea de añadir algunas funcionalidades, tales como:

  • Añadir productos al carrito, tanto desde la vista principal como desde el detalle del producto

  • Eliminar los elementos del carrito de compras

  • Mostrar el total a pagar que es dinamico, si agregamos un producto se aumenta y si lo eliminamos se disminuye

  • Filtrar productos según su categoría

Espero que les guste!

Cualquier recomendación o feedback que tengan, estaré dispuesto a escucharlo y tomarlo de la mejor manera.

Y recuerden amigos, jamás paren de aprender.

Usar GitHub Pages, sé que me olvidare y sufriré con ello continuamente así que lo guardo.

Listo, deploy realizado.
Que emoción poder culminar este curso! 😃
Comparto mi proyecto.
.
Live
.
Repositorio

Les comparto mi desarrollo, le pude incorporar dinamismo al carrito para poder seleccionar articulos y guardarlos en el localstorage

Proyecto en deploy

¡Cambió un poco la configuraición de github pages e incluso se puede usar otro url/ domininio. El proceso es el mismo, sólo cambian los encabezados!

Este es mi proyeceto, no cambia mucho pero lo usaré como base para una tienda de artesanías:
https://dr1602.github.io/javascript-practice/

Mi github pages: leodexe.github.io

No hice un gran cambio, pero si lo añadi mas productos por si quieren comprar jeje
https://jackreategui.github.io/curso-frontend-developer-practico/

hola compañeros, les comparto el link de github pages:

https://alejandrozambrano.github.io/curso-frontend-developer-javascript/

Mi sitio vive en internet!!! 😀💪💻

Acá está mi resultado final: https://emercab.github.io/curso-frontend-dev/

.

.

Todo el código en mi repo: https://github.com/emercab/curso-frontend-dev

Empezando este curso no me imaginaba que al final podría con ayuda del profe publicar mi primera página con Js, elegí un tema que me motivará y se viera cute 🍰🎂🧁aquí se los comparto:

-------->Cake’s page<--------

Muchas gracias profe Juan! 🥳😁

https://r3is3rsf.github.io/curso-frontend-javascript/

Para desplegar paginas tambien se puede usar Vercel.

esto si lo conocia, pero me parece muy bueno que estos conocimientos los podamos ver y aprender, yo previamente ya lo habia usado y es una funcion muy practica. para el ejercicio lo deje en esta url: https://andresflorez0799.github.io/curso-frontend-developer-practico/

🤓 En mi caso llevo casi un año trabajando con GitHub, y le enlacé mi dominio personal que compré en Namecheap para que se vea más profesional. Entonces a mí me sale en https://joeduardoreyes.dev/curso-frontend-developer-javascript-practico/

Hola, les dejo mi pagina por si a alguno le sirve o ayuda en su desarrollo:

Deploy: https://eolunas.github.io/curso-frontend-developer-javascript/
Repo: https://github.com/eolunas/curso-frontend-developer-javascript

Intente unir lo mas interesante que vi por aca, lo agregado:

  • Modal box.
  • Visualización de producto seleccionado.
  • Añadir al carrito (Agrupar por producto).
  • Remover productos.

He realizado pequeñas modificaciones estéticas y de rendimiento💚


A su vez, convertí todo el código css => sass, ademas de comprimir las imágenes.

–> Link de ‘github Page’

–> Link de ‘Mi Repositorio’ Donde les deje un README.md con algunos tips que les pueden ser de ayuda

<h5>Pd: Aun no se como integrar animaciones con JavaScript que no rompan mi sitio en mobile, si alguien tiene idea le agradecería la ayuda.</h5>

Este es la github pages de mi proyecto de YardSale:

https://orlandogonzales13.github.io/yardSale_JS/#

hoy 18/08/2022 termine este pequeño curso, pero ire actualizandolo y agregando cosas para que mi proyecto quede mejor, este es el primero de mi portafolio.

Les deseo muchos éxitos a todos mis futuros compañeros !

Este es mi link de GitHub pages

https://joserphc.github.io/taller-frontend-js/

Hola compañeros, les comparto mi proyecto, seguiré haciendo modificaciones con el tiempo.
https://pipetoroc.github.io/yard_sales/

Tambien les comparto mi pagina de portafolio, cualquier comentario para mejorar y seguir aprendiendo será muy bien recibido.

https://pipetoroc.github.io/FelipeToro/

https://alebeta06.github.io/curso-frontend-developer-javascript-practico/index.html
Solo me falto que salieran los productos detallados en el productDetail al darle clic a cada producto… Si me pudieran explicar que hacer en esa parte se los agradezco ✌️

En la clase anterior lo comenté pero no sabía que la siguiente era sobre esto jaja, aquí mi projecto https://jdvega21.github.io/yard_sale/

Dios, ahora tengo curiosidad de saber que pasa si le doy al botón que no hay que apretar. jajajaja

Yo ya usaba github pages jajaja >>> https://francomoreira.github.io/

Hola.
El curso estuvo excelente.

Comparto mi deploy: https://maeno323.github.io/Yard-Sale/

Lo había dejado en la clase anterior, pero lo vuelvo a dejar por aca, mi deploy:
https://orlando0x.github.io/Proyecto-Yard-Sale-FrontendDev/index.html

Les comparto mi Deploy

Y mi GitHub 😉

monte mi pagina por github page, me hace falta corregir muchas cosas, como tamaño de imagenes y responsive,

https://carlos-rocha-z.github.io/paginaWeb-beta/

Así va la mía, afino unos detalles y realizo el pull request 😃

https://castegraf.github.io/curso-frontend-developer-javascript-practico/

Tiene buena pinta https://juandc.github.io/curso-frontend-developer-javascript-practico/ . Pero tomare con más calma el curso más adelante!

Por aca dejo el link de mi demo, le hice algunas modificaciones.
https://andrearivasru.github.io/frontend-js-practico/
Cualquier feedback lo aprecio. ❤️

<https://juli6464.github.io/curso-frontend-developer-javascript-practico/>
Mi proyecto: <https://nardila888.github.io/curso-frontend-developer-JavasScriptNA-practico/> ![](https://static.platzi.com/media/user_upload/image-75e1c342-62eb-4545-9438-2b90ab810f74.jpg)
Por aqui les dejo mi proyecto: <https://dreamercompany.github.io/yardSaleEcommerce/> He agregado un shadow y un boton que muestra todo interactivamente. Todos los comentarios y Feedback son de gran ayuda!

✨🦄

Acá les dejo mi depploy :3
➡️♡♡♡♡♡♡ yardSale ♡♡♡♡♡♡⬅️
Hice que el nav bar sea fixed, junto con el product detail y el order detail. También implementé que cuando mobile menu esté abierto no se pueda hacer scroll de la página. Y bueno también implementé unas animaciones bonix n.n. Espero que les guste 💚

Gran manera de poderlo compartir <https://johanbm.github.io/curso-frontend-developer--javascriptpractico/>

Pueden checar mi proyecto en este link. Las ganas me ganaron e hice el carrito de compras completo, es decir de añadir y sacar elementos de él con el precio y el número de items.

Qué felicidad da terminar cursos y entender todo nuevamente :’)

https://juanpacortez93.github.io/007_Practical_Javascript/

Hola, comparto con ustedes mi progreso, <https://cami-pdrz.github.io/curso-frontend-JS-practico/> , con aportes de la comunidad implemente unas funcionalidades, las cuales fueron desafiantes de entender e implementar dentro de mi código. Dentro de las funcionalidades: filtro que oscurece la pantalla al momento de seleccionar un producto, además el aside de descripción del producto queda en el centro y los datos son dinámicos en cada uno de los productos. se que no esta perfecto y agradezco su feeback . gracias y nunca paren de aprender. 😊

Mi tienda en línea desplegada con GitHub Pages 👇:

https://scharcode.github.io/javascript-school-project/

Gracias , Juan ♥

¡Se agradecen todo tipo de comentarios!
https://kevinmg20.github.io/curso-frontend-developer-javascript-practico/index.html
También comparto el link de mi pull request donde se explican los pequeños distintivos que le hice al proyecto 😃
https://github.com/platzi/curso-frontend-developer-practico/pull/1807

https://yeralshaik.github.io/Yard-Sales/

No funciona 😦

Acá les dejo el link del demo de mi proyecto, le agregué la función de mostrar los productos correspondientes en el product detail, así como unos toques personales en el CSS: https://fer-dev-gt.github.io/curso-frontend-developer-javascript-practico/ 💚

Y por si quieren ver a mayor detalle el código, aqui les dejo mi Pull Request: https://github.com/platzi/curso-frontend-developer-practico/pull/1478

Es muy satisfactorio cuando te pones a prueba y lograr ir un poco mas allá del curso . Lograr estas pequeñas cosas son una gran motivación para seguir aprendiendo. Me gusta lo que estoy haciendo y poderme desafiar.

Asi es como se ve mi pagina luego de hacerla un poco mas real.
Pantalla inicial:

Informacion de productos:

Añadiendo 1 articulo al carrito:

Añadiendo varios productos al carrito:
.

y para finalizar la version mobile:

Te quiero mucho GitHub Pages ❤️

Link de mi proyecto:
https://jsalegria16.github.io/StoreProjectWithJS/index.html

Link De mi repo:
https://github.com/jsalegria16/StoreProjectWithJS

Agregué las siguientes funcionalidades:

  • Agregar al carrito de compras
  • Eliminar del carrito de compras
  • Precio total del carrito de compras
  • CAda prodicto tiene su propia ventana de detalles
  • Agregar productos al carrito desde el aside de detalles del producto.

No me carga la pagina css t.t ni la de js

Dejo el enlace de mi primera versión de YARD SALE:

Pincha aquí

¡Hola!
Espero que te encuentres bien.
¿Qué aporté de mi cosecha en el proyecto?
Bien, lo agregué fueron animaciones simples al momento de cambiar menús, agregar productos al carrito, pequeña animación de eliminar productos al carrito, cuando agrego un producto al carrito y ya lo tengo almacenado en mi carrito solamente incremento las unidades del mismo en 1 más, el total cambia cuando se eliminan productos del carrito, el total del carrito es el precio unitario por la unidades de cada producto en mi carrito.
Demo de Yard Sale:
https://irvingsaenzcolon.github.io/Yard-Sale.io/
¿Te gustaría ver mi repositorio?
https://github.com/irvingSaenzColon
Pásame el tuyo en comentarios para ver tus increíbles proyectos
Imágen de muestra: