4Geeks logo
4Geeks logo
Sobre Nosotros

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.

Full-Stack Software Developer

Data Science and Machine Learning - 16 wks

Buscar en lecciones

Aprendizaje social y en vivo

La forma más eficiente de aprender: Únete a una cohorte con compañeros, transmisiones en vivo, sesiones improvisadas de codificación, tutorías en vivo con expertos reales y mantenga la motivación.

← Volver a Proyectos

Continúa aprendiendo gratis sobre:

Instagram Photo Feed con HTML/CSS

Meta

Tutoriales y ejercicios de 4Geeks Coding Projects para personas que están aprendiendo a codificar o mejorando sus habilidades de codificación

Dificultad

beginner

Repositorio

Clic para abrir

Video

Clic para abrir

Demo en vivo

No disponible

Duración promedio

6 hrs

Tecnologías

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 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 ambiente 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:

https://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):

(Click aquí para expandir)

o bien puedes usar estas imágenes:

imagen 1

imagen 2

imagen 3

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

📒 Recursos

  • Este video de la red ninja es increíble para comenzar a entender el flexbox.

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

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

Meta

Tutoriales y ejercicios de 4Geeks Coding Projects para personas que están aprendiendo a codificar o mejorando sus habilidades de codificación

Dificultad

beginner

Repositorio

Clic para abrir

Demo en vivo

No disponible

Duración promedio

6 hrs