A tu propio ritmo

Explora nuestra extensa colección de cursos diseñados para ayudarte a dominar varios temas y habilidades. Ya seas un principiante o un aprendiz avanzado, aquí hay algo para todos.

Bootcamp

Aprende en vivo

Únete a nosotros en nuestros talleres gratuitos, webinars y otros eventos para aprender más sobre nuestros programas y comenzar tu camino para convertirte en desarrollador.

Próximos eventos en vivo

Catálogo de contenidos

Para los geeks autodidactas, este es nuestro extenso catálogo de contenido con todos los materiales y tutoriales que hemos desarrollado hasta el día de hoy.

Tiene sentido comenzar a aprender leyendo y viendo videos sobre los fundamentos y cómo funcionan las cosas.

Buscar en lecciones


IngresarEmpezar

Regístrate en 4Geeks

← Volver a Proyectos

Instagram Photo Feed con HTML/CSS

Dificultad

  • easy

Duración promedio

6 hrs

Tecnologías

  • Layouts

  • HTML and CSS

Dificultad

  • easy

Duración promedio

6 hrs

Tecnologías

🌱 ¿Cómo iniciar este proyecto?

Todo el mundo conoce Instagram, es el ejercicio ideal y divertido para practicar tus habilidades de principiante en HTML/CSS. En este proyecto practicarás los siguientes conceptos:

  • Reutilizar clases de CSS.
  • Reglas de CSS de Display y Position.
  • Construir un layout (diseño) con CSS/HTML.
  • Centrar contenedores.
  • Flow left y right.
  • Importar imágenes.

🌱 ¿Cómo iniciar este proyecto?

No abras este repositorio, utilizaremos otro template para empezar a programar.

Recomendamos que abras el repositorio html template utilizando un entorno de desarrollo como Codespaces (recomendado) o Gitpod. Como última opción puedes clonar el repositorio localmente en tu computador utilizando el comando git clone.

Este es el repositorio que debes abrir:

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

👉 Sigue las siguientes instrucciones sobre cómo empezar un proyecto nuevo.

📝 Instrucciones

Usando todo lo que has aprendido con HTML y CSS3, por favor crea un website que replique este gif (pixel perfect):

(Clic aquí para expandir)

Usa la propiedad display como en los viejos tiempos o la nueva propiedad CSS flex para hacer el posts feed.

📒 Recursos

  • Este video de "The Net Ninja" es increíble para comenzar a entender flexbox.

  • Aquí tienes la estrategia para el ejercicio: Instagram Photo Feed Strategy

  • Por favor habla con tus compañeros, con cualquier otro estudiante o tu mentor sobre cualquier pregunta que puedas tener. Programar es difícil para todos.

Regístrate para obtener acceso a proyectos similares

Lo usaremos para darte acceso a la comunidad.
¿Ya tienes una cuenta? Inicia sesión aquí.

Al registrarte estás aceptando nuestros Términos y condiciones y Política de privacidad.

Dificultad

  • easy

Duración promedio

6 hrs

Tecnologías

Dificultad

  • easy

Duración promedio

6 hrs

Tecnologías

Dificultad

  • easy

Duración promedio

6 hrs

Tecnologías

Dificultad

  • easy

Duración promedio

6 hrs

Tecnologías

Regístrate para obtener acceso a proyectos similares

Lo usaremos para darte acceso a la comunidad.
¿Ya tienes una cuenta? Inicia sesión aquí.

Al registrarte estás aceptando nuestros Términos y condiciones y Política de privacidad.

Dificultad

  • easy

Duración promedio

6 hrs

Tecnologías

Dificultad

  • easy

Duración promedio

6 hrs

Tecnologías