No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Creando la estructura del proyecto

6/20
Recursos

Aportes 16

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Using emmet:

*nav+main+footer

   <nav></nav>
    <main></main>
    <footer></footer>

  • button*3>svg
        <button>
            <svg></svg>
        </button><button>
            <svg></svg>
        </button><button>
            <svg></svg>
        </button>

There are many other time-saving combinations.
check this https://docs.emmet.io/cheat-sheet/

Recomendaci贸n 鉁煠

Chicos, les dejo la estructura html para su uso

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap" rel="stylesheet">

</head>
<body>
    <nav class="navbar">
        <p>Eco-Store</p>
        <button class="profile">
            <svg></svg>
        </button>
        <button class="wishlist">
            <svg></svg>
        </button>
        <button class="cart">
            <svg></svg>
        </button>
    </nav>
    <main class="main-section">
        <article>
            <div class="info-section">
                <h1>Impacto ecologico</h1>
                <p>Debido al impacto ambiental siendo las acciones humanas las que  modifican el ambiente, Eco-store se compromete a elaborar sus productos de manera artesanal y con materiales que favorecen al cuidado del medio ambiente.</p>
                <button>Conoce mas</button>
            </div>
            <div class="image-section">
                <img src="" alt="">
            </div>
        </article>
        <section class="product-section">
            <div class="healthcare">
                <h2>Cuidado de la salud</h2>
            </div>
            <div class="furniture">
                <h2>Decoracion del hogar</h2>
            </div>
        </section>
        <section class="info-section">
            <div class="about-us">
                <h2>驴Por qu茅 nosotros?</h2>
                <div class="earty">
                    <img src="" alt="">
                    <p></p>
                </div>
                </div>
            </div>
            <div class="gallery">
                <h2>Galer铆a de estilos</h2>
            </div>
            <div>

            </div>
            <div>

            </div>
            <div>

            </div>
            <div class="location">
                <h2>Encu茅ntranos</h2>
                <div class="map">
                    <img src="" alt="">
                </div>
                <p></p>
            </div>
        </section>
    </main>
    <footer>
        <h3>Eco-store</h3>
        <p>Careers</p>
        <p>Careers</p>
        <p>Careers</p>
        <div class="social-media">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
        </div>
    </footer>
</body>
</html>

馃槷 si escribes un punto y seguido escribes el nombre de la clase te escribe el div. Para mi es nuevo馃お

.hola
<div class="hola"></div>

en el min 6:05 la profe dice que es mas f谩cil manipular una imagen cuando esta dentro de un div, porque el div es un block e img es inline, esto lo pueden checar en https://htmlreference.io/

pueden usar Shift + alt +flechita abajo y asi se crean copias rapidas lo seleccionado

pueden poner button.cart y se crea todo el button con la clase

Yo implement茅 en mi proyecto la metodolog铆a BEM as铆 tener m谩s control sobre las modificaciones de las clases en CSS. Les dejo una preview de como se ver铆an.

<header>
        <nav class="navbar">
            <p>Eco-Store</p>
            <button class="navbar__profile-btn">
                <svg></svg>
            </button>
            <button class="navbar__wishlist-btn">
                <svg></svg>
            </button>
            <button class="navbar__shopping-btn">
                <svg></svg>
            </button>
        </nav>
    </header>

Que buena clase, por alguna extra帽a raz贸n comprendo mucho m谩s facilmente la estructuraci贸n en HTML que en los cursos especialistas en este lenguaje de marcado. Muchas gracias Ana.

No hay nada en la seccion de recursos
con lo aprendido hasta ahora en el curso se puede maquetar en figma una pagina ?

. tengo una duda como puedo hacer que mi sitio se quede estatico? ya que si yo me desplazo hacia la derecha todavia se ve mas del background y quiero que solo este al borde de la imagen y no se desplace m谩s hacia la derecha

En esta parte estar铆a bueno que en vez de decir "impact" podria ser "Hero Section" Ya que es la primera secci贸n que nos aparece cuando estamos visualizando la interfaz por primera vez.

Para los que le interesa aprender mas sobre Emmet
aqu铆 les dejo el enlace a su documentaci贸n.

https://docs.emmet.io/

Me encanta como ense帽a la profe 鈾