Crea una Landing page desde cero
En estos capítulos vamos a construir 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 resuelto 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 esqueleto de la página
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Cursos Desarollo Web</title>
<meta name="description" content="Landing page de muestra para un curso de desarrollo web on line.">
<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = yes, width = device-width">
<!--estilos para los iconos -->
<link rel="stylesheet" href="css/iconos.css">
<!-- aqui se irán añadiendo los estilos creados en cada nuevo módulo -->
<link href="css/muestra.css" rel="stylesheet" type="text/css">
</head>
<body>
<main id="home">
</main>
<div id="botup"><a href="#home" ><i class="icon-circle-up"></i></a></div>
<div id="vntmodal">
<div id="botcerrar" onclick="cerrarModal('vntmodal')"><i class="icon-bot-close"></i></div>
</div>
<script src="codigo.js"></script>
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:
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital@0;1&family=Ubuntu:wght@500&display=swap');
:root{
--altoMenu: 46px;
--anchoCentral: 80%;
}
*,*:before,*:after{
box-sizing:inherit;
}
html{
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
overflow-x:hidden;
height:100%;
font-size:16px;
box-sizing:border-box;
}
body{
height:100%;width:100%;margin:0px auto;
}
html,body{
font-family:Verdana,Arial, sans-serif;
font-size:16px;
line-height:1.5;
}
header,nav,section{
display:block;
}
article, aside{
width: var(--anchoCentral);
margin:0 auto;
}
article{
padding-top: var(--altoMenu);
}
a{
background-color:transparent;
}
a{
color:inherit;
text-decoration:none
}
a:active,a:hover{
outline-width:0;
}
b{
font-weight:bolder;
}
h1,h2,h4,h5 {
font-family:"Segoe UI",Arial,sans-serif;
font-weight:400;
margin:10px 0;
}
h1{
font-size:3rem;
}
h2{
font-size:2rem;}
h3{
font-size:1.7rem;}
h4{
font-size:1.3rem;}
h5{
font-size:1.1rem;}
.bg-black{
background:black;
color:white;
}
.fg-white{ color:white; }
.bg-celeste {
background-color: rgba(163,188,253,.11);
}
.bg-azulmd {
background: #0142ffba; color:white
}
He puesto un par de variables de CSS para el alto de la bara superior y el ancho de la página dedicada a contenido. La pongo más que nada como ejemplo del uso de variables en CSS. También podrías usar este sistema para almacenar colores. Si necesitas cambiar un solor solo tienes que cambiar la variable CSS.
En la primera linea importo las fuentes desde Google, también podrías instalarlas en to servidor o enlazarlas como una hoja de estilos. Los detalles los tienes en el sitio de fonts de Google.
Las fuentes también puedes enlazarlas en la sección head como una hoja de estilos
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">}
Incluso si quieres puedes descargar las fuentes a tu servidor y usarlas en modo local. Aunque normalmente es recomendable usar CDN para cargar resursos, quitas trabajo a tu servidor, ahorras espacio y la descarga suele ser más rápida. Siempre hab´ra un CDN cerca de los visitantes a la página
La página solo ocupa el ancho de pantalla en dispositivos de pantalla pequeña, mientras que en desktop ocupa un 80% de la página y queda centrado horizontalmente (margin:0 auto). Recuerda que este sistema para centrar bloques funciona si display es un tipo bloque (block) con un ancho (width) definido.
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.