2

introducir la descripción de la imagen aquí

Voy a enumerar los problemas del ejercicio que he tengo:

  1. El ejercicio debería mostrarse completo en la ventana del navegador (o por lo menos eso es lo que yo quisiera que sucediera) incluyendo una parte inferior que no se muestra en este momento que contiene otro "article" y el "footer".

  2. El titulo "main" debería quedar centrado sobre los títulos "section y aside" y no de forma lateral como se ve en este momento.

  3. Dentro de la etiqueta "section" tengo dos etiquetas "article" y estas deberían poder organizarse dividiéndose dinámicamente el espacio que exista dentro de "section", como se puede observar no lo hacen en este momento.

  4. Por ultimo, como estoy aprendiendo hasta ahora, reuní en el "style.css" una sección que llame "Buenas Practicas CSS" pero no se si en realidad lo sean, me gustaría sus comentarios sobre mi código para corregir todos mis errores y así aprender mas.

Les envió el código de mi "index.html" y de mi "style.css" :

/* -- Buenas Practicas CSS -- */

html {
  font-size: 62.5%;
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

* {
  margin: 0;
  padding: 0;
}

html, body {
  min-height: 100vh;
}

body {
  font-size: 1.6rem;
  line-height: 2;
}



/* -- Globales -- */

.container {
  max-width: 120rem; 
  width: 90%;
  margin: 0 auto;
}

a {
  text-decoration: none;
}

img {
  width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  text-align: center;
}

header, nav, main, section, article, aside, footer {
  border-radius: 1.5rem;
  /* padding: 0; */
}



/* -- Body -- */

body {
  background-color: #797572;
  background-image: 
    linear-gradient(-173deg, rgba(255,255,255,0.20) 0%, #000000 100%),
    linear-gradient(72deg, rgba(255,255,255,0.25) 25%, rgba(0,0,0,0.25) 100%),
    radial-gradient(47% 102%, rgba(255,255,255,0.50) 0%, rgba(21,24,32,0.60) 120%);
  background-blend-mode: multiply;
}



/* -- Header -- */

header {
  margin-top: 1rem;
  height: 15rem;

  background-image: linear-gradient(to bottom, #BCBCBC 0%, #D9D9D9 26%, #EFEFEF 49%, #E0E0E0 74%, #D3D3D3 100%),
    linear-gradient(to bottom, #BCBCBC 0%, #D9D9D9 26%, #EFEFEF 49%, #E0E0E0 74%, #D3D3D3 100%),
    linear-gradient(to bottom, rgba(255,255,255,0.20) 0%, rgba(0,0,0,0.20) 150%),
    radial-gradient(at 50% 59%, rgba(255,255,255,0.30) 66%, rgba(0,0,0,0.30) 200%);
  background-blend-mode: multiply,multiply,screen;
}



/* -- Nav -- */

nav {
  margin-top: 0.1rem;

  background-image: radial-gradient(27% 185%, #F9F6F1 0%, #D7D0C5 100%);
}



/* -- Main -- */

main {
  height:100vh;
  display: flex;
  margin-top: 0.1rem;

  background-color: #CDDCDC;
  background-image: 
    radial-gradient(at 50% 100%, rgba(255,255,255,0.50) 0%, rgba(0,0,0,0.50) 100%),
    linear-gradient(to bottom, rgba(255,255,255,0.25) 0%, rgba(0,0,0,0.25) 100%);
  background-blend-mode: screen, overlay;
}



/* -- Section -- */

section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 70%;
  margin: 1rem 0.1rem 1rem 1rem;

  background-image: linear-gradient(-90deg, #596164 1%, #868F96 99%);
}



/* -- Article -- */

article {
  margin: 6rem 1rem 6rem 1rem;

  background:  
    linear-gradient(-180deg, rgba(255, 255, 255, 0.50) 2%, rgba(0, 0, 0, 0.50) 100%),
    radial-gradient(51% 97%, #E8E8E8 7%, #CCCCCC 97%);
  background-blend-mode: multiply;
}



/* -- Aside -- */

aside {
  width: 30%;
  margin: 1rem 1rem 1rem 0.1rem;

  background-color: #9D9B97;
  background-image:
    radial-gradient(at 50% 85%, rgba(255,255,255,0.20) 0%, rgba(0,0,0,0.20) 150%),
    linear-gradient(to top, rgba(255,255,255,0.20) 0%, rgba(0,0,0,0.20) 100%);
  background-blend-mode: normal, multiply;
}



/* -- Footer -- */

footer {
  bottom: 0;
  margin-top: 0.1rem;
  margin-bottom: 1rem;
  height: 15rem;

  background: #989898;
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%),
    radial-gradient(at 50% -100%, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 270%),
    radial-gradient(at 50% 2%, rgba(255,255,255,0.20) 0%, rgba(0,0,0,0.20) 100%);
  background-blend-mode: normal,multiply,multiply;
}



p {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 3rem;
  text-align: justify;
}

h1 {
  font-size: 3rem;
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preload" href="../src/css/normalize.css" as="style">
    <link rel="stylesheet" href="../src/css/normalize.css">
    <link rel="preload" href="../src/css/style.css" as="style">
    <link rel="stylesheet" href="../src/css/style.css">
    <link rel="shortcut icon" href="#">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>&lt;header&gt;</h1>
        </header>

        <nav class="nav">
            <h1>&lt;nav&gt;</h1>
        </nav>

            <main class="main">
                <h1>&lt;main&gt;</h1>

                <section class="section">
                    <h1>&lt;section&gt;</h1>

                    <article class="article">
                        <h1>&lt;article&gt;</h1>
                        <!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit, lacus sed hendrerit posuere, augue tellus molestie metus,
                            sed pretium erat urna non lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent venenatis quam justo,
                            eget auctor libero molestie vitae. Vivamus imperdiet, quam vel vestibulum tempus, felis dui fermentum elit,
                            ac sollicitudin eros tortor eu ex. Proin imperdiet iaculis nunc, eget ullamcorper arcu vulputate in.
                            In hac habitasse platea dictumst. Maecenas ornare sagittis lobortis. Nunc tempor consectetur neque,
                            accumsan iaculis enim tincidunt sit amet. Proin egestas ut urna eu ultricies.</p> -->
                    </article>

                    <article class="article">
                        <h1>&lt;article&gt;</h1>
                        <!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit, lacus sed hendrerit posuere, augue tellus molestie metus,
                            sed pretium erat urna non lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent venenatis quam justo,
                            eget auctor libero molestie vitae. Vivamus imperdiet, quam vel vestibulum tempus, felis dui fermentum elit,
                            ac sollicitudin eros tortor eu ex. Proin imperdiet iaculis nunc, eget ullamcorper arcu vulputate in.
                            In hac habitasse platea dictumst. Maecenas ornare sagittis lobortis. Nunc tempor consectetur neque,
                            accumsan iaculis enim tincidunt sit amet. Proin egestas ut urna eu ultricies.</p> -->
                    </article>
                </section>

                <aside class="aside">
                    <h1>&lt;aside&gt;</h1>
                </aside>
            </main>

        <footer class="footer">
            <h1>&lt;footer&gt;</h1>
        </footer>
    </div>
</body>
</html>

Agradezco su ayuda para despejar mis dudas.

3
  • 1
    Gracias por tu ayuda Jaime, no se manejar lo de los snippet.
    – Nelcho
    el 4 abr. 2022 a las 23:34
  • El punto 4 está basado en opiniones, revisa: Cómo preguntar el 6 abr. 2022 a las 19:34
  • El .container tiene un ancho de 90%. Prueba con 100%... el 6 abr. 2022 a las 19:43

1 respuesta 1

0

Aquí te dejo mis observaciones en base a mi experiencia:

  • En cuanto a tu Marcado, lo veo muy bien y no tuve problemas para entenderlo (Felicidades!), los detalles salieron en los estilos. Me dio la impresión de que colocaste "Display: flex" de más, y esto me indica que necesitas investigar más cómo funciona el Layout para comprender las cambios que aplicarás al HTML. También necesitas comprender el uso de Grid para comprender la solución que te comparto. Yo aprendí de CSS Tricks (te paso el Tip).

  • Viendo tu CSS, estás usando Flex para maquetar tu sitio (y no está mal) pero considero que es más práctico usar Grid, ya que, para estructurar tu sitio web, una galería de fotos y cosas de ese estilo, es más sencillo estructurarlos con Grid. Mientras que Flex es muy eficaz para estructurar cosas internas de cualquier componente como una tarjeta (con su imagen, títulos, párrafos, botones, etc.), un video (con sus botones de reproducción), etc. Ojo! no estoy diciendo que Grid es mejor que Flex, debes aprender a usar AMBOS layouts y verás como te será muy fácil maquetar.

  • Mencionas el uso de "Buenas prácticas" y a mi gusto personal, creo que con la experiencia (y algunos videos de EduTubers en YouTube) aprenderás a ir definiendo tu propio CSS reset, por ahora no está mal usar Normalize, pero te darás cuenta con el tiempo que es mejor ir definiendo TU PROPIO reset y dejar atrás Normalize.

Espero te sen de ayuda mis sugerencias. Ahora si... te comparto el código que realicé.

PD: Espero que el código se copie correctamente, sino avísame por favor. $4|u)0$

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  width: 100%;
  min-height: 100vh;
  background-color: darkblue;
  text-align: center;
  display: grid;
  grid-template-rows: repeat(4, 5% 5% 85% 5%);
}
header{
  background-color: lightblue;
}
nav{
  background-color: lightcoral;
}
main{
  background-color: deepskyblue;
}
.info{
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, 70% 30%);
}
section{
  display: grid;
  background-color: lightgoldenrodyellow;
}
article{
  border: 1px solid gray;
}
aside{
  background-color: lightgreen;
}
footer{
  background-color: lightpink;
}
<body>
    <header><h2>HEADER</h2></header>
    <nav><h2>NAV</h2></nav>
    <main>
        <h2>MAIN</h2>
        <div class="info">
            <section>
                <article><h2>ARTICLE 1</h2></article>
                <article><h2>ARTICLE 2</h2></article>
            </section>
            <aside><h2>ASIDE</h2></aside>
        </div>
    </main>
    <footer><h2>FOOTER</h2></footer>
</body>

1
  • Gracias por tu respuesta ZePekenho, es una solución muy simple y muy efectiva a lo que yo me estaba planteando, tus consejos también son de gran valor para mí y voy a tratar de seguirlos para continuar mi aprendizaje.
    – Nelcho
    el 7 abr. 2022 a las 13:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.