Hoy vamos a hablar de cómo crear un diseño web desde cero. Este va a ser uno de esos posts un poco más largos. De esos donde pongo todas mis ganas y empeño.
Después del «éxito» del vídeo donde creaba la página web de un restaurante, he decidido hacer otra página web. Pero esta vez haré algo un poco más atractivo (visualmente hablando).
En este diseño voy a emplear HTML, CSS, mediaqueries (para hacerlo responsive) y atentos porque voy a emplear un poco de JS. Aunque para ser honesto, la parte de JavaScript la he realizado con una pequeña ayuda de ChatGPT.
Vamos a hacerlo paso a paso, y te voy a mostrar todo el proceso. Así que, si estás aprendiendo o estás interesado en el diseño y desarrollo web, este post te va a venir como anillo al dedo, como se suele decir.
Antes de empezar
Pues eso, antes de empezar comentarte algunas consideraciones. La primera y más importante, es que este diseño es una adaptación de un respositorio de Github del señor teja003.
De todas formas, te voy a dejar el código más adelante (como siempre).
La segunda cosa que quería comentar, y con esto ya acabo, es que estos tutoriales me cuestan más de hacer que otros vídeos. Así que agradezco mucho si te pasas por el vídeo y le das un buen like (o dejas un comentario de esos que tanto me gustan a mi).
Bueno, ahora vamos a la acción.
Estructura web con HTML
Primero, vamos a empezar con el HTML. Vamos a crear una estructura básica con un header, un main y un footer.
En el header, vamos a tener un menú con un logo y algunas opciones como «Inicio», «Servicios», «Contacto», etc.
También vamos a tener un botón de «Iniciar sesión» y otro de «Registrarse».
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<main class="main">
<div class="top">
<div class="nav">
<i class="fa fa-bars menu-icon" aria-hidden="true"></i>
<div class="links-div">
<ul class="link">
<ul class="links">
<li><a href="#"></a>Caribe</li>
<li><a href="#"></a>Hoteles</li>
<li><a href="#"></a>Islas</li>
<li><a href="#"></a>Cruceros</li>
<li><a href="#"></a>Vuelos</li>
<li><a href="#"></a>Escapadas</li>
<li><a href="#"></a>Famílias</li>
<li><a href="#"></a>Ofertas</li>
</ul>
</ul>
</div>
</div>
<div class="signup">
<ul>
<li><a href="#">Sign up</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
</div>
<div class="center">
<div>
<h1 class="h1">DROPCODING</h1>
<p>La mejor agencia de viajes de YouTube</p>
</div>
<div>
<input type="text" class="search" name="search" placeholder="Encuentra tu destino...">
<span><i class="fa fa-search" aria-hidden="true"></i></span>
<ul class="links">
<li><a href="#">Caribe</a></li>
<li><a href="#">Hoteles</a></li>
<li><a href="#">Islas</a</li>
<li><a href="#">Cruceros</a></li>
<li><a href="#">Vuelos</a></li>
<li><a href="#">Escapadas</a></li>
<li><a href="#">Famílias</a></li>
<li><a href="#">Ofertas</a></li>
</ul>
</div>
</div>
<div class="bottom">
<div class="social">
<ul>
<li><a href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
</ul>
</div>
<a href="#"><p>¿Conoces nuestra newsletter?</p></a>
</div>
</main>
</body>
<script src="/script.js"></script>
</html>Una vez hecha toda la estructura en HTML, vamos a maquetar el diseño con los estilos CSS.
Estilos con CSS página web
Ahora, vamos a añadir algunos estilos con CSS. Vamos a utilizar Flexbox para centrar los elementos y vamos a añadir algunos colores y fuentes para hacer que el diseño se vea más atractivo.
También vamos a utilizar algunas técnicas avanzadas como clamp para hacer que la fuente se adapte al tamaño de la pantalla.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
p{
color: #fff;
font-size: 1.2rem;
}
a{
color: white;
text-decoration: none;
}
ul li {
list-style: none;
display: inline-block;
}
.main {
padding: 1.5em;
height: 100vh;
background: linear-gradient(to bottom, rgb(0 0 0 / .25),rgb(0 0 0 / .25)), url("img/fondo-caribe.jpg");
background-position: center center;
background-size: cover;
position: relative;
overflow: hidden;
}
.main .top {
display: flex;
align-items: center;
justify-content: space-between;
}
.main .top .fa {
font-size: 2em;
color: white;
cursor: pointer;
visibility: hidden;
}
.main .top .links-div {
z-index: 100;
width: 300px;
position: fixed;
left: -100%;
height: 100vh;
background: linear-gradient(to bottom right, rgb(255 255 255 / 70%), rgba(255, 255, 255, 0.6));
border-top-right-radius: 8px;
border-bottom-right-radius: 3px;
backdrop-filter: blur(5px);
transform: 300ms;
}
.main .top .links-div .link {
margin-left: 3em;
}
.main .top .links-div .link li {
display: block;
margin-top: 1.5em;
}
.main .top .links-div .link li a{
color: #505050;
font-weight: bold;
}
.main .top .links-div.active {
left: 0;
transform: 800ms;
}
.main .top .signup li {
margin-left: 1em;
}
.main .top .signup li a {
padding: .35em .85em;
background-color: transparent;
border: 1px solid white;
border-radius: 6px;
transition: 300ms;
}
.main .top .signup li a:hover {
background-color: white;
color: black;
}
.main .center {
position: relative;
left: 50%;
top: 15%;
transform: translate(-50%, -15%);
text-align: center;
display: grid;
grid-template-rows: 1fr 1fr;
row-gap: 8em;
}
.main .center h1 {
font-weight: bold;
font-size:clamp(2.5rem, 5vw, 5rem);
color: white;
}
.main .center input{
outline: none;
border: none;
width: 650px;
padding: 1rem;
border-radius: 10px;
font-size: 1em;
margin-bottom: 1rem;
filter: drop-shadow(6px 6px 12px gray);
}
.main .center span {
position: relative;
left: -2.9em;
cursor: pointer;
padding: .5em;
}
.main ul li {
margin: .5em .75em;
}
.main ul li a {
transition: 400ms;
padding-bottom: .3em;
}
.main ul li a:hover {
color: white;
border-bottom: 2px solid white;
}
.bottom{
display: flex;
align-items: center;
justify-content: space-between;
}
.bottom{
display: flex;
align-items: center;
justify-content: space-between;
width: 100vw - 3em;
margin: auto;
position: absolute;
bottom: 2em;
}
.bottom .social ul li {
list-style: none;
display: inline-block;
margin-right: 1em;
}
.bottom .social ul li a i {
color: white;
font-size: 1.5em;
}Sí, lo sé… ¿Vaya parrafote, no?
Pero bueno, es lo que tiene el CSS, que ocupa bastante espacio.
Aunque todo se puede arreglar si lo comprimes un poco. Pero bueno, en este caso, no nos vamos a complicar la vida y vamos a pasar a las media queries para hacer el diseño responsive.
Diseño Web Responsive (media queries)
Una de las partes más importantes del diseño web es hacer que sea responsive. Vamos a utilizar Media Queries para asegurarnos de que nuestro diseño se vea bien en diferentes tamaños de pantalla.
Vamos a ajustar el tamaño de la fuente, el espaciado y otros elementos para que se adapten al tamaño de la pantalla.
@media (max-width:768px){
.main .center .searh{
width: 500px;
}
}
@media (max-width:583px){
.main .center span{
left: 44%;
top:-52px;
}
}
@media (max-width: 580px) {
.main .center .search {
width: 100%;
}
.main .center .links{
display: none;
}
.main .top .fa {
cursor: pointer;
visibility: visible;
}
}Como el diseño web no es my largo, no ha hecho falta hacer muchas media queries. Con tan solo 3 medias ya tenemos nuestro diseño web completamente responsive.
Página web con JavaScript
Finalmente, vamos a añadir algo de interactividad con JavaScript. Vamos a hacer que el menú de hamburguesa aparezca cuando la pantalla sea pequeña y vamos a añadir un efecto de «clic» para abrir y cerrar el menú. Es una forma sencilla de añadir algo de interactividad a nuestro diseño.
Pero… ¡Ojo aquí!
Porque vamos a hacer un poco de trampa. He variado un poco el script de JS para hacer el menú responsive y como yo no soy ningún «máquina» de este lenguaje, le he pedido ayuda a mi amigo ChatGTP.
Al final ha quedado así la cosa:
const menu = document.querySelector('.menu-icon');
const linksDiv = document.querySelector('.links-div');
menu.addEventListener('click', () => {
linksDiv.classList.toggle('active');
// Si linksDiv tiene la clase 'active', cambiamos el ícono a 'times', si no, lo cambiamos a 'bars'
if (linksDiv.classList.contains('active')) {
menu.classList.remove('fa-bars');
menu.classList.add('fa-times');
} else {
menu.classList.add('fa-bars');
menu.classList.remove('fa-times');
}
});He comentado algunas líneas para que veas que es lo que hace exactamente. Básicamente, mostrar el menú de navegación y cambiar el icono del menú hamburguesa.
Algo muy sencillito, pero efectivo.
Y ya estaría por hoy ¿No está nada mal, no?
Conclusión
Pues eso, ya lo tenemos creado, un diseño web desde cero con un poco de IA.
Espero que te haya gustado y que hayas aprendido algo nuevo. Si tienes alguna pregunta o sugerencia, no dudes en dejarla en los comentarios.
Por último, me gustaría pedirte tu opinión.
¿Te ha gustado este formato un poco más largo? ¿O prefieres un estilo más tirando a Bailecitos de Tiktok? Sea como sea, agradecería mucho que me lo dejaras en los comentarios. ¡Los contesto todos!
Nos vemos en el próximo post ¡Bye bye!