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.

Data Science and Machine Learning - 16 wks

Full-Stack Software Developer - 16w

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

Construye una Postal Digital 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

No disponible

Demo en vivo

Clic para abrir

Duración promedio

4 hrs

Tecnologías

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

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.

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

No disponible

Demo en vivo

Clic para abrir

Duración promedio

4 hrs

Tecnologías