A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Cierre y pr贸ximos pasos

31/31
Recursos

Aportes 184

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

hola as铆 quedo mi version:

Diego sigo esperando un curso avanzado tuyo de CSS o de JS

Lo mejor del curso definitivamente fue ver a todo el mundo interactuando en figma

Exelente curso.Profe Diego.

A帽adi algunos estilos para la vista en pantallas de escritorio, espero que les sea de su agrado.

Si gustan pueden revisar el repo: github repository
Aqui la vista en github pages

La verdad este curso me ha encantado, siento que avanzo. Nunca pares de aprender!

Forever fan de los cursos de De Granda 馃挌鈥 Este es un proyecto en el que hab铆a -intentado empezar- empezado un poquito antes de que saliera el curso, pero no ten铆a muy claro como lograr hacer una website mobile first (luego lo dej茅 por un tiempo porque #anxiety). Todos los tips me han aclarado tantas cosas馃ぉ y me han ayudado a terminarlo -casi- por fin! Solo faltan unos detalles en la version desktop para actualizarlo en mi repo.

Les dejo la versi贸n mobile

隆Hola! Les dejo el link de la versi贸n final del trabajo que realic茅, junto con una imagen (no hice el scroll en las tablas porque me parece que se ve铆a feo 馃槙):

As铆 quedo mi versi贸n de mi proyecto personal para ayudar a las mascotas de la calle:

Me encanto el curso, aprend铆 demasiado de Diego y de los compa帽eros que compartieron sus consejos de c贸digo!
Aqu铆 mi gh page, https://kary01.github.io/batata-bit.io/ 馃

El primer dise帽o de mi landing page:
M谩s adelante cambiar茅 y agregar茅 mis im谩genes.

Aqu铆 est谩 la p谩gina para que la vean

Seguire Inyectandole poder con el tiempo.
https://yosefblandin.github.io/batabit_landing_page/

asi quedo el proyecto original

https://bata-bit.netlify.app/

Termine el proyecto base con cambios en BEM y use Amason S3
https://github.com/albertnucom/mobile-first

Hola , dejo mi pagina terminada
https://educodes.github.io/Batatabit/
Aprend铆 mucho. Gracias Diego y a los compa帽eros que hicieron sus aportes durante el curso.

aqui mi version desktop

de todos los profes ESTE ES MI FAVORITO

Se cumpli贸 con el objetivo.

Buen d铆a, aqu铆 te comparto mis notas sobre el curso, espero te sea de utilidad:

De nuevo quedo muy contento con la forma en que imparte los cursos profe diego, gracias y a seguir aprendiendo.

No s茅 que hice mal, los media-querys no me funcionaron. Lo importante es haber llagado al final de este curso C: https://skrugh17.github.io/BataBit-mobile-first-/

Buen dia champion鈥 Un reto mas鈥 Muy satifecho. Ya pronto estare subiendo mis trabajos en github鈥
鈥 Saludos.

Wao! de verdad eres el mejor profesor que me ha tocado Diego, much铆simas gracias, Aprend铆, much铆simo y mi pagina me quedo WAO! mi portafolio gracias a tus cursos.

Le agregue mejor dise帽o al desktop y Tablet , https://github.com/andresfgz/Batatabit ,se agradece la estrellita

Am茅 el curso :3

Aprend铆 mucho de mis compa帽eros ^^

Excelente curso

Le realice algunas modificaciones al primer scroll

Aqu铆 dejo mi repo y este el link de la pagina Batatabit

Adicionalmente, hice este proyecto c贸mo ejercicio para practicar 馃槉

Hola, les adjunto el link del repositorio de GiHub pages para que lo puedan visualizar como me quedo el proyecto de que realizamos en el curso con el porfesor Diego:
https://emercadogarcia.github.io/WebMobileFirst/

Ame este curso, gracias Diego y gracias a toda la comunidad que comparte sus proyectos, en los aportes de esta clase vi muchos proyectos que WOW hay mucho por aprender, por practicar y por mejorar y ver sus proyectos me inspira much铆simo, muchas gracias

Aqu铆 pueden ver el resultado de mi practica https://jahiker.github.io/responsive-mobile-first/

Pude subirlo a GitHub Pages pero por alguna raz贸n no reconce los media querys鈥 pero ah铆 pueden verlo!
https://brash22.github.io/batatabit/

Bueno, estubo interesante aplicar todas estas buenas pr谩cticas.
Este es my proyecto culiminado. Un gusto compa帽eros

Proyecto finalizado con mucho esfuerzo, adjunto mi resultado:
Batabit

Diego muchas gracias por este aprendizaje, ha sido motivador y de gran inspiraci贸n completar este logro.

Comparto mis resultados el gitpage del proyecto:

https://camilo-duque.github.io/BataBit鈥擬obileFirst/

obtuve un 100 en accesibilidad pero mi dise帽o no qued贸 tan bonito que digamos

Ha sido un honor llegar hasta le final 鉂わ笍
Mi repo 馃槈
GitHub Page 馃槂

Un curso maravilloso gracias @degranda, si te luciste, pero mas alla de eso, debo admitir que estos cursos pr谩cticos gustan tal vez un poco m谩s por el hecho de que hace que profundicemos nuestros conociminetos previos. A seguir aprendiendo!!
Sitio en la web
Repositorio en Github
As铆 me quedo:

Excelente curso!

A帽ad铆 un men煤 responsivo y la Landing la divid铆 en tres secciones.

Dejo los enlaces por si quieren revisar:
Repositorio: GitHub
GitHub Pages: Pages

Excelente curso, me encanto, Gracias Diego 馃槂
Este es mi resultado: https://teremir.github.io/batatabit_mobile_first/

Mi version del proyecto
Repositorio: https://github.com/victormanu20/ProjectBatabit
page: publicada con GitPages pagina

Aqu铆 dejo mi proyecto

En el repo hice un readme donde trat茅 de explicaralgunas cosas
readme

Excelente curso, ahora a continuar con java script!
Gracias Diego!
Les comparto como quedo mi pagina que hice con este curso y mi compa帽ero de desarrollo Sherlock: https://milagrosfrontend.github.io/Mobile-first/

Estos son los resultados de mi proyecto, tengo que realizar m谩s practica para ir mejorando.

Este fue un curso incre铆ble como todos los de De Granda. Gracias totales!

Un curso maravilloso y de muchos aprendizajes. Comparto el link del proyecto:
https://ingrafaelmartinez.github.io/batata-bit/

Que buen curso 馃槂

convert铆 el proyecto en mi propia p谩gina, tiene algunas cosas diferentes. Aqu铆 les dejo el link para que le echen un ojo o me ayuden en que puede mejorar. Saludossss https://diegogomez98.github.io/

Buena tarde, comparto mi repositorio:
https://github.com/JhonnFy

Mi proyecto quedo asi. en la version mobile implemente funcionalidad a las flechas para los slidesr, creo que quedo bien.
https://maurimurillo.github.io/Batabit-Project/

Dejo el enlace a mi proyecto por si alguien desea la informaci贸n. https://github.com/joseluis1061/batataBit/tree/screenCustom

Finalmente as铆 quedo mi proyecto:
https://ayrtonfidel9.github.io/BatataBit-Ayrton/

![](
Asi me quedo a mi

Web Terminada al 100% con unas pocas modificaciones en cuanto al prototipo, retos terminados y los demas retos me los propongo a mi mismo una vez termine las modificaciones pertinentes para la web de mi esposa. Saludos a todos! Muy lindo curso, bien dictado, entendible y por sobre todo completo.

https://github.com/sendeiser/MobileFirst-Web-Curse.git

comparto mi idea inspirada en todo el contenido del curso

Super Curso Profesor, Diego De Granda!馃槃馃憦


Realmente es una joya saber que esto existe para tener mejores pr谩cticas y posicionarnos mejor en las b煤squedas de Google Chrome.

Aqu铆 est谩 toda mi p谩gina completa 馃槃

Verderamente orgulloso del resultado y feliz con este excelente maestro y curso 馃槃

De mi parte ya que ten铆a algunas bases de maquetaci贸n, me propuse hacer la p谩gina con el dise帽o de Figma primero y luego ver el curso, y qued茅 bastante contento con mi resultado. Se los comparto:
https://yotis56.github.io/mobile-first/


trabajar茅 m谩s en mi versi贸n pero ando contento con lo logrado hasta ahora, muchas gracias Platzi, muchas gracias Diego.

No puedo describir la felicidad que tengo por haber hecho este curso, el resultado y lo que aprend铆 me sorprendi贸 de muy grata manera. Diego es un genio y la comunidad est谩 mas que a la altura. Les dejo mi resultado

page:
https://cquiladiaz.github.io/batabit/
repo:
https://github.com/cquiladiaz/batabit

Saludos y #NuncaParenDeAprender

Excelente curso
Les dejo los repositorios:
https://github.com/mauroqs/cursoMobilFirst
Git-hub pages
https://mauroqs.github.io/cursoMobilFirst/

Dejo mi GitHub page y el repositorio por si a alguien le resulta util.
https://ossmazon.github.io/MobileFirst/
https://github.com/ossmazon/MobileFirst

Buscando la pagina me encontre con este hermoso dise帽o: https://batatabit.com/

Reto culminado !!!

Responsive Mobile

es satisfactorio terminar estos cursos, dejo mi resultado
https://cristian-mera.github.io/Batatabit-CristianMera/

Vi que muchos lo personalizaron bastante, yo lo dej茅 casi igual. jeje

Para quien quiera verlo, ac谩 est谩n las diferentes versiones.

Los videos son tan buenos y pr谩cticos que dan ganas de dar like al video, pero no hay boton jajaja

Me encant贸 este curso, pues no sab铆a como desarrollar para mobile.
Aqu铆 el resultado de mi p谩gina.

Super bueno el curso, muy alegre aprendi demasiado! Que crack para ense帽ar.

Aca esta el mio. Sali con buenas calificaciones en LightHouse!
https://github.com/darklilium/CryptoWeb

Aqu铆 el enlace a mi proyecto del curso.

![Desktop](
![Mobile]()

Me encanta como el 50% de los comentarios son diciendo lo buen profesor que es Diego mientras muestran su resultado, y el otro 50% son comentarios diciendo que Diego es buen profesor

Gracias a este curso el emprendimiento que tenia en mente ya empez贸 un proceso de consolidaci贸n, aqu铆 les dejo mi pagina web creada desde 0; https://www.mitiendags.com/

OJALA DIEGO DE GRANDE IMPARTIERA UN CURSO DE BOOTSTRAP 5 , SERIA EXCELENTE

Hola dejo mi repo y pagina como aporte!

Pagina
https://luislisal.github.io/batabit/

repo
https://github.com/luislisal/batabit

馃槃

https://codepen.io/nicolasgonz/pen/eYRdEOx?editors=1100

ac谩 les dejo mi trabajo reci茅n terminado en Codepen, ver谩n que faltara algunas cosas en html pero Codepen las hace autom谩ticamente, se los recomiendo si tienen una pc potente que soporte una IDE.

Muchas gracias, Diego!

Tuve varios inconvenientes con algunos de los estilos; sin embargo, se pudieron solucionar todos y a帽ad铆 algunos cambios personales.

Los links al proyecto:

web
Repository

Muy buen curso. Pude completar los retos. Aqu铆 dejo el link de mi proyecto

Lo logramos comunidad 馃帀馃帀馃帀馃憤馃挌

listo.

excelente

Para las personas que quieran seguir practicando con una gu铆a, este canal les puede ayudar, hace buenas paginas con buenas practicas y todo se ve que es de manera organizada ni como perderse, eso si, si no entienden algo consulten la documentaci贸n, indaguen y nunca paren de aprender.

Por cierto es en ingles el contenido y sin comentarios.

estuvo muy bueno el curso. Se me pas贸 muy r谩pido y siento que aprend铆 y me quedaron claras bastantes cosas m谩s.馃槈

Les dejo el link de el producto finalizado. https://angelob9.github.io/Batatabit/

Me propuse el reto de armar esta p谩gina por mi cuenta y lo logr茅 en su mayor铆a, hubo partes donde tuve que seguir a Diego y este fue el resultado 馃槂

https://gifted-goldwasser-93a5af.netlify.app/

Repositorio de este proyecto:

https://github.com/Manuel-ElGrillo/batatabit-project

Agregue una animaci贸n al momento de hacer HOVER en alguna de las tarjetas en la parte de los planes, aca la pueden ver:
https://johnatanramos.github.io/Mobile-First/#plans.

En la parte del footer deje el enlace de github para que puedan ver a detalle otras funcionalidades diferentes y de mas que agregue

Aca les dejo el codigo de la animacion para quien lo quiera implementar. Espero les guste.

<code> 
.plans-container--card {
  position: relative;
  scroll-snap-align: center;
  width: 70%;
  min-width: 190px;
  max-width: 280px;
  height: 249px;
  margin: 50px auto 0;
  padding: 0 15px;
  background-color: var(--just-white);
  border-radius: 15px;
  box-shadow: 0 4px 8px rgb(89, 73, 30, 0.16);
  transition: 450ms all;
  transform-origin: left top;
}

.plans-container--card:hover ~ .plans-container--card {
  transform: translate3d(10px, 0, 0);
}

/* Para cuando se pare sobre el coursel pero no se pare sobre una tarjeta */
.plans-containter--slider:hover .plans-container--card {
  opacity: 0.3;
}

/* Para cuando se pare sobre una tarjeta */
.plans-containter--slider:hover .plans-container--card:hover {
    /* Esto hara que se amplie como si se estuviera haciendo zoom */
  transform: scale(0.9);
  opacity: 1;
}