hola así quedo mi version:
Bienvenida al curso
Por qué aprender Responsive Design con Mobile First
Setup inicial
Analizando el diseño
El valor de Mobile First
Arquitectura inicial
Assets de nuestro proyecto
Fuentes de nuestro proyecto
Estilos base
Sección de Header
Maquetación del header
Implementando BEM
Uso de linear-gradient
Uso de position para botón flotante
Sección de Intercambios
Estructura base de la sección de intercambio
Imagen de background
Estructura de tabla de monedas
Estilos base de tabla de monedas
Detallando estilos de tabla de monedas
Finalizando estilos de tabla de monedas
Sección de Beneficios
Estructura base de la sección de beneficios
Estilos de la sección de beneficios
Maquetando tarjetas de beneficios
Sección de Planes
Maquetando sección comodín
Estructura de sección de planes
Aplicando estilos a sección de planes
Aplicando estilos a las tarjetas de la sección de planes
Detallando estilos en tarjetas de planes
Aplicando estilos al botón de call to action
Scroll horizontal con CSS
Sección de Footer
Footer
Media Queries
Aplicando media queries
Lighthouse
Análisis con Lighthouse
Próximos pasos
Cierre y próximos pasos
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Crear cuenta
Si ya tienes una cuenta,
Iniciar sesión
Cierre y próximos pasos
31/31Recursos
Aportes 184
Preguntas 2
Ordenar por:
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
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:
- Para activar el modo oscuro presiona CTRL + SHIFT + L
- Notas del curso Responsive design
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 ^^
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—MobileFirst/
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!
Aquí les dejo mi pagina!
https://jairopozo.github.io/Proyecto_Bit/index.html
El repo:
https://github.com/JairoPozo/Proyecto_Bit
Gracias Diego!!!
Page: https://gabimin.github.io/ResponsiveDesign/
Repo: https://github.com/gabimin/ResponsiveDesign
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
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 quedo mi proyecto
https://jaal97.github.io/responsive_design_maquetacion-mobile-first/
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.
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/
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.
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:
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:
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;
}
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.