como crear un diseño responsivo con html, css y javascript

2355

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>&copy; 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');
    }
});

hace 4 meses