Tutorial - Como aplicar el Diseño Resposive

5659

¡Hola Hola! 😃

En este tutorial voy a mostrarles como he aplicado el diseño responsive a una página web y su uso.💻👩‍💻

1️⃣ Iniciamos conociendo el diseño original de mi página.

🎮🧿 Este es el código utilizado para el HTML

<<body><sectionclass="section"><divclass="card"><imgsrc="https://scontent.fgua7-1.fna.fbcdn.net/v/t39.30808-6/345426383_898341447905155_1060563709585093578_n.jpg?_nc_cat=106&cb=99be929b-59f725be&ccb=1-7&_nc_sid=8bfeb9&_nc_ohc=Ci63DEEUeAQAX9xTMip&_nc_ht=scontent.fgua7-1.fna&oh=00_AfDMfd45xTQiLj6HiQOjKoTRN62nQjuVUlzrI9x0v2SsXw&oe=64719480"alt="pantalla"><divclass="foto"><imgsrc="https://lh3.googleusercontent.com/pw/AJFCJaWEu9GwFpgmW5T75brQiAlacKCIC2Bwb3YE6_t89_1slOHjlmE75kAe2JQS4mP1i-3uZQychmR2ya5n04JTEPHG5zTg9TejoMEHqBQxmte3bEgKUCAkVUX66ecB_QBsMtFqOCyzD3PTlMBv_XH90J7DvRI529F8HFVYtO4EyWQV4ckuyYn3dtxNKRZXOBhKOpKm72rglDuePKzLqb1w15eFhwKi7Wi22xIB2RH2qm4lFQz3FMVjOUZ54a9dejMumFy3U5nDed--1rvu_hn71U6ajS-GvoJwq4QIPni6S1zjOTCuniZ_yo54ivlPqxcJ5QTtNEwd9yEp7vRRu14PeRk-dgnoNN7RPkLTH7zsPOk21Twd7A8MF-FI-6TW0P-pVSr7kiikoftXfAwOE9qbs5M4WpIwEYlCQE2U6HZbzk71cs3WwtwfGow26NrOkbXMou--R05No4EHJvJn47hvMiyrauqURu5kXzRrW51m-oTwZ0JtNHuXcEOtiOtpjmBnQgnvxQeln400tU595vnn4J2y2cMHlDt-kNXGzdoebO85qXdNu4lPuocXjsh2UFReqdncK1Ig_Nn0aCMhoBPhYXNYKA5x8lvEKb1TNWBXsyM0zOUK3ZnIThu2CXFwZ9IM7lzmHTkRFPa2xCMXBWm8y-93ezye9-s4ZiBifQ7YYsGKIRWZI0GV62vrMWyO5qX8JmehGXhi9i5SJN3afDfejvM3KoQHnXB-VacqO8-2mdT8Z8coq_EwsLFl8BZ6d8HR-MGDA1V-H3GRA1NqNeGC2VFHLWWuTCfG_IR2nd7Y6OXBDhz_3bt_tQpJvHDqKKv2N50qMAIMcVDWCUU8ImOytvGokSoedGu-HPivt0QAh-5vLE3gVx4sLLoQZgkYgza--PvSrSlBlQ49c_uBhq81nZrv8Xl8VyLEUqxYUYR4tNOMFv6e-S-BRUKfMvK9HHZTKoVrvQWlY8xsRz_PgQ06ve72aiX3mQ=w400-h400-s-no?authuser=0"alt="foto"></div><p>Ericka Tuchán</p><p>Frontend Developer, Digital Designer</p><ulclass="list"><li><iclass="fa-solid fa-map-pin"></i>Guatemala</li><li><iclass="fa-brands fa-square-instagram"></i>@erickatuchan</li></ul><divclass="rectangulo"><divclass="mitad-izquierda"><h1>23,115</h1><p>Followers</p><!-- Contenido de la mitad izquierda --></div><divclass="mitad-derecha"><h1>11,995</h1><p>Following</p><!-- Contenido de la mitad derecha --></div></div><!-- Contenido de Boton Follow --><divclass="rectangulo-2"><h1>Follow</h1></div></div></section></body>>

Este el código utilizado para el CSS 🎨🖌️

<        .section{
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .card{
            width: 500px;
            height: 700px;
            background-color: GhostWhite;
            border-radius: 20px;
            overflow: hidden;
        }
        .cardimg:nth-child(1){
            width: 100%;
            position: relative;
            z-index: 1;
        }
        .foto{
            width: 200px;
            height: 100px;
            z-index: 3;
        }
        .fotoimg{
            border-radius: 50%;
            border: 10px solid ghostwhite;
            z-index: 2;
            top: -150px;
            left: 145px;
        }
        .cardp{
            text-align: center;
        }
        .cardp:nth-child(3){
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            font-size: 30px;
            color: DarkSeaGreen;
            font-weight: bold;
            margin-top: -30px;
        }
        .cardp:nth-child(4){
            font-family: Arial, Helvetica, sans-serif;
            font-size: 20px;
            color: MediumAquamarine;
            font-weight: 50;
            margin-top: -30px;
        }
        .list {
            list-style: none;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-around;
            margin-top: 50px;
        }
        .listli{
            font-size: 18px;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: 50;
            color: LightSeaGreen;
        }
        .list.fa-map-pin{
            font-size: 25px;
            margin-right: 15px; 
            color:  DarkCyan;   
        }
        .list.fa-square-instagram{
            font-size: 25px;
            margin-right: 15px; 
            color:  LightSeaGreen;   
        }
        .rectangulo {
        width: 499px;
        height: 80px;
        position: relative;
        margin-top: 20px;
        } 
        .mitad-izquierda,
        .mitad-derecha {
        width: 50%;
        height: 100%;
        position: absolute;
        }
        .mitad-izquierda {
        left: 0;
        background-color: GhostWhite;
        border: 2px solid LightSteelBlue;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        }
        .mitad-izquierdah1{
            margin-top: 20px;
            color: LightSteelBlue;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 20px;
            margin-bottom: -20px;
            font-weight: 800;
        }
        .mitad-izquierdap{
            margin-top: 20px;
            color: CadetBlue;
            font-family: Arial, Helvetica, sans-serif;
            font-size:20px;
            font-weight: 300;
        }
        .mitad-derecha{
        right: 0;
        background-color: GhostWhite;
        border: 2px solid LightSteelBlue;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        }
        .mitad-derechah1{
            margin-top: 20px;
            color: LightSteelBlue;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 20px;
            margin-bottom: -20px;
            font-weight: 800;
        }
        .mitad-derechap{
            margin-top: 20px;
            color: CadetBlue;
            font-family: Arial, Helvetica, sans-serif;
            font-size:20px;
            font-weight: 300;
        }
        .rectangulo-2{
        width: 498px;
        height: 93px;
        position: relative;
        margin-top: 0px;
        background-color: SkyBlue;
        border: 2px solid LightSteelBlue;
        }
        .rectangulo-2h1{
            display: flex;
            justify-content: center;
            font-family: Arial, Helvetica, sans-serif;
            color: whitesmoke;
            font-size: 25px;
            position:relative;
            top: 10px;
            
        }>

2️⃣ Aplique un diseño responsive cuando se vea en dispositvos mayores a 768 px, haciendo cambio en las dimensiones y colores. Teniendo así un dark moode.

🖍️📿 Este es el código CSS

@media (min-width: 768px) {
  body{
    background-color: DarkSlateGray	;
  }
  .section.card {
    background-color: black; /* Cambio de color de fondo */width: 800px;
    height: 1200px;
  }
  .section.foto{
    width: 400px;
    height: 300px;
  }
  .section.fotoimg{
    border: 10px solid black;
    left: 170px;
  }
  .section.cardp:nth-child(3){
    color:DarkOrchid;
    font-size: 40px;
  }
  .section.cardp:nth-child(4){
    color: Thistle;
    font-size: 25px;
  }
  .card.listli{
    color: DarkOrchid;
    font-size: 30px;
  }
  .card.list.fa-map-pin{
    color: Thistle;
    font-size: 35px;
  }
  .card.list.fa-square-instagram{
    color: Thistle;
    font-size: 35px;
  }
  .card.rectangulo{
    width: 799px;
    height: 120px;
    top: 30px;
  }
  .rectangulo.mitad-izquierda{
    background-color: black;
    border: 2px solid DarkSlateGray;
  }
  .rectangulo.mitad-izquierdah1{
    color: Thistle;
    font-size: 30px;
  }
  .rectangulo.mitad-izquierdap{
    color: DarkOrchid;
    font-size: 32px;
  }
  .rectangulo.mitad-derecha{
    background-color: black;
    border: 2px solid DarkSlateGray;
  }
  .rectangulo.mitad-derechah1{
    color:Thistle;
    font-size: 30px;
  }
  .rectangulo.mitad-derechap{
    color: DarkOrchid;
    font-size: 32px;
  }
  .card.rectangulo-2{
    width: 798px;
    height: 120px;
    background-color: DarkSlateBlue;
    border: 2px solid DarkSlateGray;
    top: 35px;
  }
  .card.rectangulo-2h1{
    color: lavender;
    font-size: 40px;
    top: 0px;
  }
}

3️⃣ Y para los dispositivos que vean la página en 510px o menos, solo adecué los tamaños para que no perdiera su forma y orden, maneje los mismos colores.

Este es el código CSS 🖼️👩‍🎨

<@media (max-width: 510px) {
.section.card {
width: 280px;
height: 450px;
}
.section.foto{
width: 100px;
height: 100px;
}
.section.fotoimg{
border: 5px solid GhostWhite;
top: -60px;
left: 80px;
}
.section.cardp:nth-child(3){
color:DarkSeaGreen;
font-size: 18px;
margin-top: -45px;
}
.section.cardp:nth-child(4){
color: MediumAquamarine;
font-size: 15px;
margin-top: -20px;
}
.card.listli{
color: LightSeaGreen;
font-size: 12px;
margin-top: -20px;
}
.card.list.fa-map-pin{
color: DarkCyan;
font-size: 15px;
margin-right: 5px;
margin-left: -20px;
}
.card.list.fa-square-instagram{
color: DarkCyan;
font-size: 15px;
margin-right: 5px;
}
.card.rectangulo{
width: 280px;
height: 60px;
top: 10px;
}
.rectangulo.mitad-izquierda{
background-color: GhostWhite;
border: 1px solid LightSteelBlue;
}
.rectangulo.mitad-izquierdah1{
color: LightSteelBlue;
font-size: 15px;
}
.rectangulo.mitad-izquierdap{
color: CadetBlue;
font-size: 15px;
}
.rectangulo.mitad-derecha{
background-color: GhostWhite;
border: 1px solid LightSteelBlue;
}
.rectangulo.mitad-derechah1{
color:LightSteelBlue;
font-size: 15px;
}
.rectangulo.mitad-derechap{
color: CadetBlue;
font-size: 15px;
}
.card.rectangulo-2{
width: 280px;
height: 60px;
background-color: SkyBlue;
border: 1px solid LightSteelBlue;
top: 12px;
}
.card.rectangulo-2h1{
color: whitesmoke;
font-size: 18px;
top: 0px;
}
}>

Espero que pueda servirles, y serles de ayuda para comprender mejor como hacer responsive nuestros proyectos. 🚀👩‍🚀

Algo que fue muy importante para mi y al inicio, me dificultaba el poder aplicar los cambios en mi código fue que
no tenía la sección y todos los divs con una clase asignada, y al hacerlo en css si era necesario por prioriad y
especificidad tener las clases asignadas. 📝💻

Saludos!! 😃

hace un año