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鈥e 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 鈥淪ettings鈥, en el men煤 izquierdo de la nueva vista, seleccionar a 鈥淧ages鈥, aparecer谩 del lado derecho las opciones de configuraci贸n del deploy.
  • 鈥 En el cuadro de 鈥淪ource鈥, seleccionar en la pesta帽a la rama 鈥渕ain鈥. La pesta帽a de la carpeta /root, la dejamos as铆, le damos al bot贸n 鈥渟ave鈥.
  • 鈥 En el cuadro de "Theme Chooser", dejarlo as铆.
  • 鈥 Luego de dar al bot贸n 鈥渟ave鈥, 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鈥檚 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 鈥榞ithub Page鈥

鈥> Link de 鈥楳i 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: