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

Landing Page con Javascript

Dificultad

  • intermediate

Duración promedio

8 hrs

Tecnologías

  • javascript

  • html-css

  • vanilla-js

Dificultad

  • intermediate

Duración promedio

8 hrs

Tecnologías

  • javascript

  • html-css

  • vanilla-js

alt text Simple Landing Page

Landing page Javascript Preview

La mejor manera de aprender es creando proyectos de la vida real, esta es la página de inicio típica que a tu jefe o al propietario de una empresa nueva le gustaría construir.

🌱 Cómo iniciar este proyecto

Este proyecto viene con los archivos necesarios para empezar a trabajar, pero tienes dos opciones para empezar:

1$ git clone https://github.com/breatheco-de/exercise-landing-page-javascript.git

💡 Importante: Recuerda actualizar el remote del proyecto con el de tu repositorio usando git remote set-url origin <your new url>, y luego guardar tu código en tu nuevo repositorio usando add, commit y push.

📝 Instrucciones

Demuestra cómo crear esta hermosa página de inicio sin necesidad de bootstrap:

  1. Crea una página de inicio [como la de esta imagen] (https://github.com/breatheco-de/landing-page-javascript/blob/master/landing.png?raw=true).
  2. Puedes encontrar las imágenes de páginas de inicio en la carpeta . / Img.
  3. Empieza por crear tu estrategia, [aquí hay una estrategia de ejemplo] (https://storage.googleapis.com/breathecode-asset-images/f4808eb89df45ffba5e7bfc1a3ab45516c93a7b3b0eb66ea12d3899eb54172cf.png?raw=true).
  4. Usa [flexbox] (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) para tud sus diseños.
  5. Reutiliza tus clases CSS, usa nombres de clases de comportamiento como padding-1 o continainer en lugar de nombres relacionados al proyecto como the-dog o my_header.
  6. Haz que se vea exactamente como la imagen, ¡píxel perfecto!

Objetivos adicionales (si te sientes seguro):

  • Usa javascript para capturar el correo electrónico del usuario y enviarlo usando [formsubmit.co] (https://formsubmit.co/)

Tecnologías

HTML5 y CSS y Javascript.

Regístrate para obtener acceso a proyectos similares

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

Dificultad

  • intermediate

Duración promedio

8 hrs

Tecnologías

  • javascript

  • html-css

  • vanilla-js

Dificultad

  • intermediate

Duración promedio

8 hrs

Tecnologías

  • javascript

  • html-css

  • vanilla-js

Dificultad

  • intermediate

Duración promedio

8 hrs

Tecnologías

  • javascript

  • html-css

  • vanilla-js

Dificultad

  • intermediate

Duración promedio

8 hrs

Tecnologías

  • javascript

  • html-css

  • vanilla-js

Regístrate para obtener acceso a proyectos similares

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

Dificultad

  • intermediate

Duración promedio

8 hrs

Tecnologías

  • javascript

  • html-css

  • vanilla-js

Dificultad

  • intermediate

Duración promedio

8 hrs

Tecnologías

  • javascript

  • html-css

  • vanilla-js