Instagram Feed con Bootstrap

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

🌱 Cómo comenzar este proyecto

No clones este repositorio porque vamos a usar una plantilla diferente.

Recomendamos abrir el repositorio de la plantilla html usando un entorno de desarrollo como Codespaces (recomendado) o Gitpod. Alternativamente, puedes clonarlo en tu computadora local usando el comando git clone.

Este es el repositorio que necesitas abrir o clonar:

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

Por favor sigue estos pasos sobre cómo comenzar un proyecto de programación.

💡 Importante: Recuerda guardar y subir tu código a GitHub creando un nuevo repositorio, actualizando el remoto (git remote set-url origin <your new url>) y subiendo el código a tu nuevo repositorio usando los comandos add, commit y push desde la terminal de git.

📝 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.