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

Post de Instagram

Dificultad

  • easy

Duración promedio

4 hrs

Tecnologías

  • Layouts

  • HTML and CSS

Dificultad

  • easy

Duración promedio

4 hrs

Tecnologías

Instagram es una de las interfaces de usuarios más populares del mundo, este es el primero de los tres ejercicios que te harán replicar las partes más importantes y difíciles de Instagram.com

Crea los archivos HTML y CSS necesarios para replicar esta misma imagen.

🌱 ¿Cómo iniciar 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.

Estrategia

Comienza por identificar que <tags> (etiquetas) HTML puedes usar para este sitio web, por ejemplo <div>, <p>, etc.

Aquí tienes una pista de una buena estrategia:

Estrategia para post de Instagram

Este website utiliza la font Roboto-type de Google Fonts e íconos de Font Awesome:

¿Qué hacer si estás atascado?

Pregúntale al instructor o a tus compañeros de clase de inmediato, no te quedes estancado por más de 15 minutos, porque este es uno de tus primeros ejercicios y no se espera que sepas todo. ¡¡¡Haz preguntas!!!

Fundamentos:

Este ejercicio cubre los siguientes fundamentos:

  1. Estructura básica para cualquier sitio web HTML5.
  2. La etiqueta <link> para importar Reglas CSS.
  3. Utilizar fuentes (fonts) de Google.
  4. Usar los diferentes selectores disponibles en CSS.
  5. Trabajar con contenedores: borde, relleno y márgenes.
  6. Overflow.
  7. Usar Flex vs Position vs Float vs Display.

Este y otros ejercicios 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.

Regístrate para obtener acceso a archivos y video de la solución

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

Dificultad

  • easy

Duración promedio

4 hrs

Tecnologías

Dificultad

  • easy

Duración promedio

4 hrs

Tecnologías

Dificultad

  • easy

Duración promedio

4 hrs

Tecnologías

Dificultad

  • easy

Duración promedio

4 hrs

Tecnologías

Regístrate para obtener acceso a archivos y video de la solución

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

Dificultad

  • easy

Duración promedio

4 hrs

Tecnologías

Dificultad

  • easy

Duración promedio

4 hrs

Tecnologías