DEV Community

gus gus
gus gus

Posted on

El responsive te lo debo (mini proyecto en html).

Se habla español.
Nadie cree en mí (a veces ni siquiera yo mismo), pero entre las horas de mi trabajo (o mejor dicho, de lo que hago para pagar las cuentas), he retomado el bootcamp de codificación. (Diré el nombre recién cuando lo termine y tenga el diploma en la mano).
Ya estoy en el módulo de CSS, viendo layouts. Hace unas semanas se me ocurrió imaginar cómo sería aprender a programar en los años 90: libros, fotocopias, clases presenciales en un lugar físico, un pizarrón y una carpeta con apuntes.
Así que, en una tarde de lluvia (las mejores para una persona antisocial como yo), me arremangué y decidí aplicar en la práctica lo que había aprendido. Diseñé en mi mente una web simple: imágenes que cambiaban al presionar un botón. Nada muy complicado.
Quería que mantuviera cierta coherencia, así que busqué imágenes en Unsplash, las edité en Photoshop para que tuvieran el mismo tamaño y relación de aspecto, y creé diferentes textos manteniendo la misma cantidad de palabras y párrafos.
Coloqué un título en "h1". Debajo de las imágenes, creé un "nav" con botones que linkeaban a las otras páginas con su foto correspondiente. Aquí hice algo que quizá no sea lo más correcto semánticamente: anidé etiquetas "a" dentro de los botones. Descubrí que de esa forma el texto no se volvía azul y subrayado, y quedaba más limpio.
Para más inri (como diría Dross), usé un atributo que ya no se recomienda según la documentación oficial: el atributo align para centrar todo.
También usé Git y GitHub para practicar y publiqué el proyecto en GitHub Pages.

Aqui dejo el resultado final:

el Link: [(https://gosdev2026.github.io/welcometoargentina/index.html)]

Como reza el titulo de este poste: el responsive te lo debo , al menos hasta dentro de un par de semanas cuando pueda modificarlo con CSS.

Y si a alguien quiere ver el codigo para darme consejos aquí esta:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>welcome to Argentina</title>
    <link rel="icon" sizes="64x64" href="/favicon.png">   
</head>
<body>
    <header align="center">
        <h1>Welcome to Argentina</h1>
        <a href="./index.html"><button>home</button></a>
    </header>
    <section>
         <figure align="center">
        <img src="https://images.unsplash.com/photo-1547483238-f400e65ccd56?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width="800px" alt="Fitz Roy, Patagonia, Argentina">
    </figure><br>
    <p align="center">Welcome to Argentina, a land of breathtaking landscapes and unforgettable experiences. <br>
Discover natural wonders, rich culture, and hidden gems waiting to be explored. <br>
Start your journey today and feel the magic of a destination like no other.</p>
    </section>
    <br>
    <section align="center">
        <nav>
            <a href="./buenosaires.html"><button>Buenos Aires</button></a>
            <a href="./bariloche.html"><button>Bariloche</button></a>
            <a href="./iguazufalls.html"><button>Iguazu falls</button></a>
            <a href="./peritomoreno.html"><button>Perito Moreno Glacier</button></a>
        </nav>
    </section>


<footer >
    <br><br><br><br><br><br><br>
    <p align="center">© 2026 This website about Argentina was designed and developed by Gus using only HTML.
</p>
</footer>
</body>
</html>```


Enter fullscreen mode Exit fullscreen mode

Top comments (0)