Bootcamps

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.

Academia

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.

Full-Stack Software Developer - 16w

Data Science and Machine Learning - 16 wks

Buscar en lecciones


IngresarEmpezar

Regístrate en 4Geeks

← Volver a Proyectos

Crea un formulario con HTML5

Dificultad

  • easy

Duración promedio

3 hrs

Tecnologías

Dificultad

  • easy

Duración promedio

3 hrs

Tecnologías

Weekly Coding Challenge

Todas las semanas escogemos un proyecto de la vida real para que construyas tu portafolio y te prepares para conseguir un trabajo. Todos nuestros proyectos están construidos con ChatGPT como co-pilot!

Únete al reto

Podcast: Code Sets You Free

Un podcast de cultura tecnológica donde aprenderás a luchar contra los enemigos que te bloquean en tu camino para convertirte en un profesional exitoso en tecnología.

Escuchar el podcast

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

📝 Instrucciones

  1. Por favor, usa tus habilidades HTML5/CSS y Bootstrap para replicar este formulario exacto.
  2. Se recomienda usar el framework de Bootstrap si ya lo conoces. Si no lo haces, practica tus habilidades de diseño usando flexbox.

    Clic para abrir la imagen en una nueva ventana

  3. Debes asegurarte de que todas las entradas se utilicen correctamente: entradas de tipo fecha, email, número, texto, etc.
  4. También debes asegurarte de prevenir y validar el formulario de todas las formas en que HTML5 te permite (campos obligatorios, formatos, etc.).
  5. Usa el <input type="date">, no intentes implementar tu propio calendario de selección de fecha.
  6. Si no estás usando Bootstrap: crea una estrategia de diseño dibujando todos los cuadros <div> que puedas identificar, concéntrate particularmente en los divs que están colocados horizontalmente en la misma línea porque requerirán usar display: flex.
  7. Si estás utilizando Bootstrap: para practicar todas las clases que Bootstrap te brinda para diseñar sus formularios, casi no necesitas CSS propio.

📒 Recursos

Solo si estás usando Bootstrap: aquí está la documentación de Bootstrap 5 sobre formularios. Intenta entender el código HTML detrás de los ejemplos para que puedas modificarlos en tu solución.

Estrategia

Si no estás usando Bootstrap

El diseño para este ejercicio requiere muchos <div> y cajas, aquí hay una propuesta que podría funcionar.

Clic para abrir la imagen en una nueva ventana

¿Qué hacer si te quedas atascado?

No te frustres, ¡pide ayuda! Después de intentarlo por tu cuenta durante 30 minutos, es hora de dejar de intentarlo y pedir ayuda.

Este y otros proyectos 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

3 hrs

Tecnologías

Dificultad

  • easy

Duración promedio

3 hrs

Tecnologías

Dificultad

  • easy

Duración promedio

3 hrs

Tecnologías

Dificultad

  • easy

Duración promedio

3 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

3 hrs

Tecnologías

Dificultad

  • easy

Duración promedio

3 hrs

Tecnologías

Weekly Coding Challenge

Todas las semanas escogemos un proyecto de la vida real para que construyas tu portafolio y te prepares para conseguir un trabajo. Todos nuestros proyectos están construidos con ChatGPT como co-pilot!

Únete al reto

Podcast: Code Sets You Free

Un podcast de cultura tecnológica donde aprenderás a luchar contra los enemigos que te bloquean en tu camino para convertirte en un profesional exitoso en tecnología.

Escuchar el podcast