Paso 1: Estructura HTML básica
Comenzaremos creando la estructura básica del HTML.
`<!DOCTYPE html><htmllang="es"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Mi Tienda Online</title><linkrel="stylesheet"href="styles.css"></head><body><header><divclass="logo"><h1>Mi Tienda</h1></div><nav><ul><li><ahref="#">Inicio</a></li><li><ahref="#">Productos</a></li><li><ahref="#">Contacto</a></li><li><ahref="#">Carrito</a></li></ul></nav></header><main><sectionclass="hero"><h2>Bienvenido a Mi Tienda</h2><p>Los mejores productos al mejor precio.</p></section><sectionclass="productos"><h3>Nuestros Productos</h3><divclass="product-grid"><!-- Aquí agregarás los productos --></div></section></main><footer><p>© 2024 Mi Tienda Online. Todos los derechos reservados.</p></footer><scriptsrc="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: 10px20px;
display: flex;
justify-content: space-between;
align-items: center;
}
header.logoh1 {
margin: 0;
}
headernavul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
headernavulli {
margin-left: 20px;
}
headernavullia {
color: #fff;
text-decoration: none;
font-weight: bold;
}
.hero {
text-align: center;
padding: 50px20px;
background-color: #007bff;
color: #fff;
}
.productos {
padding: 20px;
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.product-griddiv {
background-color: #fff;
padding: 15px;
box-shadow: 02px4pxrgba(0, 0, 0, 0.1);
text-align: center;
}
footer {
text-align: center;
padding: 10px0;
background-color: #333;
color: #fff;
margin-top: 20px;
}
Paso 3: Agregar productos con JavaScript
Vamos a usar JavaScript para agregar productos dinámicamente.
`// scripts.jsconst 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;
}
headernavul {
flex-direction: column;
width: 100%;
}
headernavulli {
margin-left: 0;
margin-top: 10px;
}
}
@media (max-width: 480px) {
.hero {
padding: 20px;
}
.product-griddiv {
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');
}
});