Instagram Photo Feed con Bootstrap

El Feed de Fotos de Instagram (con Bootstrap)

Como programador, tienes la tarea de replicar una imagen como un sitio web.

1https://github.com/4GeeksAcademy/html-hello

📝 Instrucciones

• Crea un sitio web que se vea exactamente como este:

Clic aquí para descargar el gif

Aquí puedes ver cada componente separado:

• El grid con tres imágenes por fila

• El grid con una imagen por fila

• El modal

• El dropdown

• Inicia el HTML y el CSS desde cero, no lo reutilices desde otro ejercicio porque terminarás teniendo un desastre.
• Antes de comenzar a programar haz un dibujo del sitio web con todos los componentes de bootstrap que usarás. Usa todos los posibles componentes de bootstrap, la idea es que los aprendas para poder reutilizarlos durante el resto de tu vida.
• Una vez hayas identificado todos los componentes, comienza con el navbar (desde arriba hasta abajo) e intenta adaptar los ejemplos que encuentres en internet a lo que se te pide en la imagen. No copies y pegues solamente, entiende y procesa, si no entiendes los nombres de las clases usadas en el componente, terminarás pegándote contra una pared y frustrado.
• Usa todos los posibles bootstrap utilities (helpers), toma el tiempo de leerlos todos porque harán tu vida 99% más fácil.
• Los proyectos tienen que ser 100% responsive utilizando el sistema de grid de bootstrap.

📒 Recursos

Tienes la lección en línea y la hoja de trucos de bootstrap en la sección de activos. También te recomendamos videos tutoriales en bootstrap de Net Ninja.

¿Que hacer si estás atascado?

• Limpia el caché (siempre actualiza con command+shift+R), utilizando el modo incógnito en Google Chrome.
• Busca soluciones en Google.
• Habla con otros estudiantes.
• Habla con desarrolladores senior que conozcas.
• Habla con mentores en slack.
• No tengas miedo a preguntar.

¿Que NO hacer si estás atascado?

• No debes frustrarte y pensar que no sirves para esto: todos los desarrolladores se quedan atascados todo el tiempo, ¡pregunta! ¿Cómo sabes si sirves o no en algo que no sabes? La programación es una ciencia, los hechos son importantes y tú no tienes hechos.
• No te cuestiones por horas sin buscar ayuda: Google solo es tan útil como tú sepas buscar en él, habla con otros estudiantes o con tus instructores.
• Cambia la estrategia: Einstein dijo una vez, si haces lo mismo obtendrás los mismos resultados.

Este y otros proyectos son usados para aprender a programar por parte de los alumnos de 4Geeks Academy Coding Bootcamp realizado por Alejandro Sánchez y muchos otros contribuyentes. Conoce más sobre nuestros Cursos de Programación para convertirte en Full Stack Developer, o nuestro Data Science Bootcamp.