/ COMPUTER SCIENCE~ FRONTEND~ PROJECTS / 1 min read

Responsive Web Design Projects - Build a Product Landing Page

Objetivo: Construir una app en CodePen.io que funcione de manera similar a: https://codepen.io/freeCodeCamp/full/RKRbwL

Herramientas utilizadas en este proyecto:

  • HTML
  • JavaScript
  • CSS (FlexBox)

Debido a que el diseño gráfico no es lo mío, me basé visualmente en la siguiente Landing Page de Leadsbridge.com. Esta vez, no voy a compartir todo el código HTML aquí, en lugar de eso, escribo lo más relevante:

  1. La landing page tiene un header con un logo (random) de la empresa dentro.
  2. También, en el header existe un elemento nav (sticky) con links que apuntan a las secciones dentro de la página.
  3. La barra de navegación tiene 3 elementos clickeables.
  4. Se puede observar un video embebido en la pagina.
  5. La landing page tiene un formulario, al hacer submit el email es enviado a una página que confirma que ha sido recibido correctamente.
  6. La página es responsiva mediante media queries.
  7. Se utiliza FlexBox en todo el proyecto.

Offtopic - El siguiente repositorio contiene el código fuente de un proyecto en Laravel utilizando el framework TailwindCSS. La idea fue aprender a usar TailwindCSS haciendo un sitio web corporativo con sus landing pages.

Y finalmente, un post acerca de: ¿Cuáles son los 5 pilares principales de una Landing Page exitosa?