@MelvinAguilar
Posted
Hola @AnthonySSE 👋, ¡Buen trabajo al completar este desafío y bienvenido a la plataforma! 🎉
Aquí hay algunas sugerencias que podría considerar para mejorar su código:
- Intente usar etiquetas semánticas en su código. En este caso debería tener una etiqueta <main> que agrupe todos sus elementos:
<body>
<main class="container">
<div class="panel-izquierdo">
. . .
</div>
<div class="panel-derecho">
. . .
</div>
</main>
<body>
- Agregue una etiqueta h1 a su solución. El elemento
<h1>es el encabezado principal de una página web. Solo debe haber una etiqueta<h1>por página, y siempre evite saltarse los niveles de encabezado; Comience siempre desde<h1>, seguido de<h2>, y así sucesivamente hasta <h6> (<h1>,<h2>,...,<h6>). The HTML Section Heading elements (Reference)
Solución:
<h1>Gabrielle Essence Eau De Parfum</h1>
- El contenedor no está centrado correctamente. Puede usar flexbox para centrar elementos:
body {
margin: 0;
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
Nota: Eso servirá para centrar su elemento <main> correctamente, su <main> también debería tener displar: flexbox para colocar las dos columnas: "panel-derecho" y "panel-izquierdo"
Referencias (En ingles):
- The Complete Guide to Centering in CSS.
- A Complete Guide to Flexbox (CSS-Tricks).
- How TO - Center Elements Vertically (W3Schools).
- CSS Layout - Horizontal & Vertical Align (W3Schools).
.
- Para hacer su solución responsiva, debería tener un media query que cambie la dirección de su elemento <main> de "flex-direction: row;" a "flex-direction: column;"
- Los nombre de clases en ingles es discutible, aunque si es cierto que suelen haber mas personas que saben ingles en estas plataformas.
Espero que esos consejos te ayuden.
¡Buen Trabajo!
Marked as helpful
@AnthonySSE
Posted
Hola, @MelvinAguilar. Me he pasado las últimas dos semanas investigando las formas de mejorar en cuanto a desarrollo Front End se refiere. Leí todos los artículos que me comentaste y he seguido practicando. Tus consejos son totalmente apreciados e intentaré aplicar todo lo que me has dicho. ¡Muchas gracias!
