/ 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é en la siguiente Landing Page de Leadsbridge.com. Esta vez, no voy a compartir aquí todo el código HTML, en lugar de eso, escribo lo más relevante:

  1. La landing page tiene un header con el logo de la empresa dentro. Utilicé un logo random de León.
  2. También, en el header existe un elemento nav 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.

El siguiente repositorio contiene el código fuente de un proyecto en Laravel utilizando el framework Tailwind CSS. La idea fue aprender a usar Tailwind CSS haciendo un sitio web corporativo estilo landing page.

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