"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > Creación de su primer sitio web responsivo con HTML y CSS

Creación de su primer sitio web responsivo con HTML y CSS

Publicado el 2024-08-06
Navegar:124

Building Your First Responsive Website with HTML and CSS

Crear un sitio web responsivo es una habilidad esencial para cualquier desarrollador front-end. Un sitio web responsivo ajusta su diseño y contenido según el dispositivo y el tamaño de la pantalla, lo que garantiza una excelente experiencia de usuario en todos los dispositivos. En este artículo, lo guiaremos a través del proceso de creación de un sitio web responsivo básico utilizando HTML y CSS.

Requisitos previos

Antes de comenzar, debes tener conocimientos básicos de HTML y CSS. También será beneficiosa la familiaridad con CSS Flexbox y las consultas de medios.

Paso 1: configurar su proyecto

Comience creando una nueva carpeta de proyecto y agregando los siguientes archivos:

  • index.html: El archivo HTML principal.
  • estilos.css: el archivo CSS para diseñar el sitio web.

Paso 2: Estructurar tu HTML

Abre index.html y agrega la estructura HTML básica que desees, puede ser cualquier cosa:



    
    
    Responsive Website
    


    

My Responsive Website

Welcome to My Website

This is a simple responsive website built with HTML and CSS.

About Us

We provide excellent web development services.

Our Services

We offer a wide range of web development services.

Contact Us

Feel free to reach out to us for any inquiries.

© 2024 My Responsive Website

Paso 3: Diseñe su sitio web

A continuación, abra el archivo estilos.css y comience agregando algunos estilos básicos:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

header {
    background: #333;
    color: #fff;
    padding: 1rem 0;
}

header h1 {
    text-align: center;
}

nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
}

nav ul li {
    margin: 0 1rem;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

main {
    padding: 2rem;
}

section {
    margin-bottom: 2rem;
}

footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    position: fixed;
    width: 100%;
    bottom: 0;
}

Paso 4: hacerlo responsivo

Para que el sitio web responda, utilizaremos consultas de medios. Estos nos permiten aplicar diferentes estilos según el tamaño de la pantalla. Agregue las siguientes consultas de medios a estilos.css:

@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
        align-items: center;
    }

    nav ul li {
        margin: 0.5rem 0;
    }

    main {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    header h1 {
        font-size: 1.5rem;
    }

    nav ul li {
        margin: 0.25rem 0;
    }

    main {
        padding: 0.5rem;
    }
}

Paso 5: Probar su sitio web

Abra index.html en un navegador web y cambie el tamaño de la ventana del navegador para ver cómo se ajusta el diseño a los diferentes tamaños de pantalla. Debería ver el menú de navegación apilado verticalmente y el relleno alrededor del contenido disminuye a medida que disminuye el ancho de la pantalla.

Finalmente

¡Ya has creado un sitio web responsivo sencillo utilizando HTML y CSS! Este ejemplo cubre los conceptos básicos de la estructuración de una página web y el uso de consultas de medios para crear un diseño responsivo. A medida que adquieras más experiencia, podrás explorar técnicas avanzadas como CSS Grid, Flexbox e imágenes responsivas para crear diseños más complejos y dinámicos.

¡¡¡Manténganse al tanto!!!

Declaración de liberación Este artículo se reproduce en: https://dev.to/egbo2255/building-your-first-responsive-website-with-html-and-css-32eh?1 Si hay alguna infracción, comuníquese con [email protected] para borrarlo
Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3