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

Video tutorial

Regístrate para ver las instrucciones en video

← Volver a Proyectos

Construye una tarjeta postal con HTML/CSS

Dificultad

  • easy

Duración promedio

4 hrs

Solución

Tecnologías

  • Layouts

  • HTML and CSS

Dificultad

  • easy

Duración promedio

4 hrs

Solución

Tecnologías

🌱 ¿Cómo iniciar este proyecto?

¿A quién no le gustan las postales? Este es uno de tus primeros ejercicios (si no es el primero) y es divertido y relativamente fácil :)

Vamos a crear una postal con HTML5 y CSS y luego puedes compartirla con tu madre o con tu otra mitad, ¡ella/él se va a sentir orgullosa/o! :)

🌱 ¿Cómo iniciar este proyecto?

  1. Asegura que ya tienes una cuenta en GitHub: https://github.com
  2. Recomendamos que abras este repositorio 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/breatheco-de/exercise-postcard

👉 Sigue las siguientes instrucciones sobre cómo empezar un proyecto nuevo. Importante --> Éste repositorio no es un template.

Instrucciones

Crea el HTML y CSS necesario para replicar esta imagen de forma precisa.

postcard preview

✋ Aquí tienes la url del logo de 4Geeks: https://storage.googleapis.com/breathecode-asset-images/5318bde604cf5c915f94897a71b49ab2523101322ea21cb046db1e67c24fa3be.png

Empieza por dibujar tu estrategia

Postcard Strategy

¿Qué hacer si estás atascado?

Hay un video sobre este ejercicio, míralo si estás perdido. Pero no copies todo, trata de colocar tu propio código.

Fundamentos

Este ejercicio cubre los siguientes fundamentos:

  1. Estructura básica para cada sitio web HTML5.
  2. La etiqueta Link para importar Reglas CSS.
  3. Uso de fuentes de google.
  4. Uso de diferentes selectores disponibles en CSS.
  5. Trabajar con contenedores o cajas: border, padding y margins.
  6. Overflow.
  7. Uso de un formulario simple.

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.

Video tutorial

Regístrate para obtener acceso al tutorial interactivo

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

4 hrs

Solución

Tecnologías

Dificultad

  • easy

Duración promedio

4 hrs

Solución

Tecnologías

Dificultad

  • easy

Duración promedio

4 hrs

Solución

Tecnologías

Dificultad

  • easy

Duración promedio

4 hrs

Solución

Tecnologías

Video tutorial

Regístrate para obtener acceso al tutorial interactivo

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

4 hrs

Solución

Tecnologías

Dificultad

  • easy

Duración promedio

4 hrs

Solución

Tecnologías

Material de apoyo

Para prepararte mejor para completar estos ejercicios, sugerimos los siguientes materiales

Lección

Aprendamos CSS: ¿Qué Quiere Decir CSS?

Lección

¿Qué es HTML? Es tiempo de aprender HTML y su estructura

Ejercicio

Aprende lo básico de HTML Interactivamente

Ejercicio

Aprende CSS con Ejercicios Interactivos