Crea sitios web simples y bonitos
Crea sitios web simples y bonitos combinando con herramientas básicas.
En internet, es común toparse con sitios web que destacan por su estética impresionante. Sin embargo, muchos de ellos enfrentan el desafío de mantener un diseño tanto simple como atractivo. Contrario a lo que se podría pensar, el diseño web no tiene que ser una tarea abrumadora. Con conocimientos fundamentales y herramientas apropiadas, cualquiera puede diseñar sitios que no solo sean visualmente atractivos, sino también intuitivos y fáciles de navegar. Este tutorial está diseñado para guiarte a través de los aspectos esenciales del diseño web, desde estructurar tu HTML hasta implementar estilos CSS cruciales y añadir interactividad con JavaScript. Te mostraré cómo estos elementos se combinan para crear un sitio web coherente y elegante, ideal para captar y mantener la atención de los visitantes.
Herramientas necesarias
Para este tutorial solo necesitas dos herramientas esenciales:
- Editor de texto: Recomiendo VS Code por su facilidad de uso y funcionalidades integradas.
- Navegador web: Chrome o Firefox con herramientas de desarrollo para probar y depurar.
Conceptos básicos
Antes de comenzar a diseñar tu sitio web, es crucial familiarizarte con algunos principios de diseño que te ayudarán a mantener la estética simple y atractiva:
Simplicidad
Adopta un enfoque minimalista: elimina los elementos superfluos para destacar solo lo esencial. Esto mejora la claridad y facilita la navegación, creando una experiencia de usuario más agradable y eficiente.
Consistencia
La coherencia visual es clave: usa una paleta de colores limitada, tipografías consistentes y espaciados uniformes en todo el sitio para fortalecer la identidad de marca y mejorar la legibilidad.
Jerarquía visual
Utiliza tamaños y colores estratégicamente para dirigir la atención del usuario, destacando elementos clave y facilitando una navegación lógica que resalte las áreas prioritarias de tu sitio.
Usabilidad
Optimiza la navegabilidad de tu sitio con enlaces claros y un diseño intuitivo, asegurando que los usuarios encuentren fácilmente lo que buscan, mejorando así su experiencia general.
Respuesta
Asegura que tu sitio sea responsivo, adaptándose fluidamente a diferentes dispositivos y resoluciones para garantizar una experiencia de usuario consistente y accesible en cualquier pantalla.
Estos conceptos son la base para crear un sitio web que no solo sea agradable a la vista, sino también funcional y accesible para todos los usuarios.
Estructura HTML básica
Iniciaremos con una estructura HTML básica que será la base de todo lo que desarrollaremos en este tutorial. Crea un archivo llamado ‘index.html’ en la carpeta de tu proyecto e incluye el siguiente contenido:
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8" />
<title>Mi sitio estético</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<header>
<div class="container">
<h2>Bienvenidos a mi sitio web</h2>
<nav>
<ul>
<li><a href="#home">Inicio</a></li>
<li><a href="#about">Sobre mí</a></li>
<li><a href="#contact">Contacto</a></li>
<li>
<a id="change-theme" href="javascript:void(0)">Cambiar Tema</a>
</li>
</ul>
</nav>
</div>
</header>
<main class="container">
<section id="home" class="card">
<h2>Inicio</h2>
<p>Este es el inicio de mi sitio web estético.</p>
</section>
<section id="about" class="card">
<h2>Sobre mí</h2>
<p>Un poco sobre mí y mi background en diseño web.</p>
</section>
<section id="contact" class="card">
<h2>Contacto</h2>
<p>¿Cómo contactarme? Aquí la información.</p>
</section>
</main>
<footer>
<p>Hecho con ♥ por zaserafin</p>
</footer>
<script src="scripts.js"></script>
</body>
</html>Estilizando con CSS
Comenzaremos el proceso de estilado con un “reset” de CSS para garantizar uniformidad en todos los navegadores. Te guiaré paso a paso en la adición de estilos que realcen la estética del sitio. Introduciremos reglas CSS de manera progresiva para lograr una consistencia visual y te enseñaré a implementar clases útiles que podrás emplear en proyectos futuros. Crea un archivo llamado ‘styles.css’ donde añadiremos los estilos gradualmente.
Reset CSS
Primero, aplicaremos un reset CSS para eliminar los estilos predeterminados del navegador y asegurar una base limpia y uniforme para comenzar:
html {
/* Una fuente base de 10px facilita el uso del valor rem*/
font-size: 10px;
/* con una base de 10px tenemos que 1rem = 10px, 2rem = 20px, etc. */
/* Definir el esquema de color nos permite crear un tema claro y oscuro más fácil */
color-scheme: light dark;
/* Estás variables nos ayudarán más tarde */
--bg-color: #f4f4f4;
--bg-color-alt: #c6c6c6;
--text-color: #1f1f1f;
--primary: #009d71;
}
/* Cuando html tiene la clase 'dark' cambiamos las variables al modo "oscuro" */
html.dark {
--bg-color: #1f1f1f;
--bg-color-alt: #333;
--text-color: #eaeaea;
}
* {
/* border-box hace que el ancho y la altura incluyan el padding y el borde */
box-sizing: border-box;
/* Remueve los margenes por defecto de los navegadores */
margin: 0;
padding: 0;
}Este código garantiza la consistencia de margenes entre los elementos de la página, el modelo de caja y las variables del tema de colores.
Estableciendo estilos base
Tras aplicar el reset CSS, estableceremos estilos base que asegurarán una apariencia coherente y uniforme en todo el sitio:
body {
font-family: "Arial", sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: var(--bg-color);
font-size: 1.6rem;
min-height: 100svh;
display: flex;
flex-direction: column;
}
main {
flex: 1 1 auto;
}
header,
footer {
background-color: var(--bg-color-alt);
text-align: center;
padding: 1em;
}
header .container {
display: flex;
align-items: center;
justify-content: space-between;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
a {
font-size: 1.8rem;
color: var(--primary);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
section {
margin: 20px 0px;
padding: 20px;
border-radius: 8px;
}Estos estilos aseguran una tipografía legible y colores coherentes para el texto y los enlaces, que podremos modificar según el tema de color que seleccionemos.
Clases reutilizables
Por último, crearemos clases CSS útiles que puedes reutilizar en diversos componentes o secciones de tu sitio:
/* Definir la estética de los botones nos permite conservar la consistencia */
.btn {
background-color: var(--primary);
color: var(--text-color);
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
/* Las cards son muy útiles a la hora de separar el contenido de una web */
.card {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 20px;
border-radius: 8px;
background-color: var(--bg-color-alt);
}
/* Definir un ancho fijo nos permite organizar el contenido de manera más adecuada */
.container {
width: 100%;
max-width: 1200px;
margin-inline: auto;
}Estas clases, .container para los contenedores principales, .btn para botones y .card para tarjetas, ofrecen un diseño atractivo y funcional que puedes incorporar fácilmente en diferentes partes de tu sitio. Cada clase está diseñada para ser modular, permitiéndote adaptar y expandir tus estilos de manera eficiente y efectiva.
A continuación tienes el código CSS completo.
html {
/* Una fuente base de 10px facilita el uso del valor rem*/
font-size: 10px;
/* con una base de 10px tenemos que 1rem = 10px, 2rem = 20px, etc. */
/* Definir el esquema de color nos permite crear un tema claro y oscuro más fácil */
color-scheme: light dark;
/* Estás variables nos ayudarán más tarde */
--bg-color: #f4f4f4;
--bg-color-alt: #c6c6c6;
--text-color: #1f1f1f;
--primary: #009d71;
}
/* Cuando html tiene la clase 'dark' cambiamos las variables al modo "oscuro" */
html.dark {
--bg-color: #1f1f1f;
--bg-color-alt: #333;
--text-color: #eaeaea;
}
* {
/* border-box hace que el ancho y la altura incluyan el padding y el borde */
box-sizing: border-box;
/* Remueve los margenes por defecto de los navegadores */
margin: 0;
padding: 0;
}
body {
font-family: "Arial", sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: var(--bg-color);
font-size: 1.6rem;
min-height: 100svh;
display: flex;
flex-direction: column;
}
main {
flex: 1 1 auto;
}
header,
footer {
background-color: var(--bg-color-alt);
text-align: center;
padding: 1em;
}
header .container {
display: flex;
align-items: center;
justify-content: space-between;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
a {
font-size: 1.8rem;
color: var(--primary);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
section {
margin: 20px 0px;
padding: 20px;
border-radius: 8px;
}
/* Definir la estética de los botones nos permite conservar la consistencia */
.btn {
background-color: var(--primary);
color: var(--text-color);
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
/* Las cards son muy útiles a la hora de separar el contenido de una web */
.card {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 20px;
border-radius: 8px;
background-color: var(--bg-color-alt);
}
/* Definir un ancho fijo nos permite organizar el contenido de manera más adecuada */
.container {
width: 100%;
max-width: 1200px;
margin-inline: auto;
}Añadiendo interactividad con JavaScript
Finalmente, agreguemos un poco de interactividad. En este caso haremos que cuando demos click en “cambiar tema” nos intercambie el tema actual.
document.addEventListener("DOMContentLoaded", () => {
document.querySelector("#change-theme").addEventListener("click", () => {
document.documentElement.classList.toggle("dark");
});
});¡Espero sinceramente que este tutorial te haya mostrado que crear un sitio web simple y atractivo está al alcance de tus manos con solo un poco de HTML, CSS y JavaScript! No importa si estás dando tus primeros pasos o si ya tienes algo de experiencia, lo más importante es que te diviertas y explores tu creatividad en cada proyecto que realices. ¡Así que anímate a diseñar y desarrollar tus propias ideas! Y recuerda que cada intento es una oportunidad para aprender algo nuevo.