Paso 1: Estructura HTML básica
Comenzaremos creando la estructura básica del HTML.
`<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Tienda Online</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="logo">
<h1>Mi Tienda</h1>
</div>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Productos</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Carrito</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero">
<h2>Bienvenido a Mi Tienda</h2>
<p>Los mejores productos al mejor precio.</p>
</section>
<section class="productos">
<h3>Nuestros Productos</h3>
<div class="product-grid">
<!-- Aquí agregarás los productos -->
</div>
</section>
</main>
<footer>
<p>© 2024 Mi Tienda Online. Todos los derechos reservados.</p>
</footer>
<script src="scripts.js"></script>
</body>
</html>
Paso 2: Estilos CSS básicos
Ahora, vamos a agregar algunos estilos CSS para estructurar y darle estilo al sitio.
`/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #f5f5f5;
color: #333;
}
header {
background-color: #333;
color: #fff;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo h1 {
margin: 0;
}
header nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
header nav ul li {
margin-left: 20px;
}
header nav ul li a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
.hero {
text-align: center;
padding: 50px 20px;
background-color: #007bff;
color: #fff;
}
.productos {
padding: 20px;
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.product-grid div {
background-color: #fff;
padding: 15px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
text-align: center;
}
footer {
text-align: center;
padding: 10px 0;
background-color: #333;
color: #fff;
margin-top: 20px;
}
Paso 3: Agregar productos con JavaScript
Vamos a usar JavaScript para agregar productos dinámicamente.
`// scripts.js
const productos = [
{ nombre: "Producto 1", precio: "$10.00", imagen: "img/producto1.jpg" },
{ nombre: "Producto 2", precio: "$20.00", imagen: "img/producto2.jpg" },
{ nombre: "Producto 3", precio: "$30.00", imagen: "img/producto3.jpg" }
];
const productGrid = document.querySelector('.product-grid');
productos.forEach(producto => {
const productDiv = document.createElement('div');
productDiv.innerHTML = `
<img src="${producto.imagen}" alt="${producto.nombre}">
<h4>${producto.nombre}</h4>
<p>${producto.precio}</p>
<button>Agregar al carrito</button>
`;
productGrid.appendChild(productDiv);
});
Paso 4: Hacer el diseño responsivo
Vamos a asegurarnos de que el sitio se vea bien en diferentes tamaños de pantalla.
/* Responsive Design */
@media (max-width: 768px) {
header {
flex-direction: column;
align-items: flex-start;
}
header nav ul {
flex-direction: column;
width: 100%;
}
header nav ul li {
margin-left: 0;
margin-top: 10px;
}
}
@media (max-width: 480px) {
.hero {
padding: 20px;
}
.product-grid div {
padding: 10px;
}
}
Paso 5: Añadir interacción con JavaScript
Podemos mejorar la interacción del usuario añadiendo funcionalidades como agregar productos al carrito.
// scripts.js
productGrid.addEventListener('click', function(e) {
if (e.target.tagName === 'BUTTON') {
alert('Producto agregado al carrito');
}
});
Curso de Frontend Developer
COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE
0 Comentarios
para escribir tu comentario
