Crea un Landing page tu mismo
En estos capítulos vamos a contruir una landing page desde cero.
Vamos a ir por etapas, vas a ir codificando cada parte de la página como un módulo. Una vez completados todos ellos se unen en la página definitiva.
Si has leído las páginas onde te describo que es y como es una landing pag ya hab´ras adivinado que módulos van a componer esta landing page.
- Una barra de menus responsive
- El area hero (above the fold)
- Detalles de la oferta
- Una pequeña demo
- El profesorado
- Los testimonios
- El formulario
- El pie para cerrar
Esta estrategia se basa en dividir un problema complejo en pequeños problemas simples, al unir las soluciones parciales tenemos resulto el problema inicial. Es una estrategia que funcionan bastante bien y se utiliza habitualmente en programación.
Código HTML.
Nuestra landing page se compondrá como decimos de módulos. El esquema general de estos módulos es crear un elemento article con secciones en su interior.
Cada apartado o módulo es un article, y las partes que lo componen se montan como secciones, en forma de filas o de columnas o una mezcla de ambas, construídas con estilos CSS.
El esqeuleto de la página
A lo largo de los capítulos se irán creando las diferentes partes que componen la página final. Puedes ir creándola desde el principio. Es decir partiendo de este HTML que te muestro, vas añadiendo los HTML de cada nuevo apartado y el correspondiente CSS. Al final tendrás la página completa.
También puedes ir creando cada módulo por separado y al final los incluyes todos en una única página.
Elije el camino que te sea más cómodo.
Estilos CSS para la landing page.
Cada nuevo apartado puede añadir algunas nuevas reglas de estilos, que se integran en un nuevo archivo CSS. Todos estos archivos son acumulativos, o sea, cada nuevo módulo utiliza los archvios CSS de módulos anteriores y el nuevo que se cree.
El archivo de estilos inicial es este:
Javascript para tu landing page
En la página se usan algunos efectos que hacen necesario el uso de Javascript:
- Menú responsive
- Menú de fichas (tabs)
- Scroll automático
- LightBox (ventana flotante)
- Botón flotante de vuelta arriba
En la página de introducción hay más detalles sobre el uso de estos scripts. Solo decirte que he usado solo Javascript elemental sn dependencias externas. Ni librerias como jQuery ni plugins predefinidos.