Estructura del proyecto

2/12
Recursos

Aportes 12

Preguntas 0

Ordenar por:

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

o inicia sesi贸n.

Esta vez quise hacerlo algo diferente
y antes de tocar codigo quise dise帽ar mi interfaz
porque la verdad soy muy indeciso con los dise帽os.
Espero aportar algo con esto
Figma


Y lo que se viene es bueno
A por toda CODIGO

El aporte que har铆a ac谩 es hablando de sem谩ntica, lo siguiente:
.
Teniendo la frase en el dise帽o: 鈥淒ise帽a tu S煤per H茅roe!鈥 con distintos estilos, no haria la separaci贸n en el html como hizo la profe de:

<p>Dise帽a tu</p>
<h1>S煤per H茅roe!</h1>

Porque para el navegador estar铆amos hablando de 2 sentencias distintas, y adem谩s jerarquiz谩ndolas. Me parece una mejor idea, plantear la frase en un mismo elemento y separarlas dentro y con estilos solo darle la jerarquizaci贸n que buscamos. Por ejemplo, se me ocurre:

<h1><span>Dise帽a tu</span> S煤per H茅roe!</h1>

De este modo, sem谩nticamente es toda una misma frase, pero visualmente la podemos acomodar como el dise帽o indique. As铆 no quedan como dos frases que por si solas no tienen ning煤n sentido.
.
Saludos.

Estructura del Proyecto


C贸digo de la clase:聽https://github.com/paolojoaquin/lego-superheroes/tree/Clase/2-estructura-del-proyecto
Esta clase me gusto, el darle la estructura primero siempre es importante y tengo intriga por saber como hacer la seccion del loader. 馃槃

En lo personal, me gusta mas ir construyendo mis sitos o aplicaciones web en componentes, no haciendo toda la estructura html de golpe.

.
Primero haria solamente el html del header, y lo estilizamos, luego avanzamos con el main y asi sucesivamente vamos acomodando cada section de nuestro sitio, precisamente como piezas de lego, de lo que va el dise帽o web de este curso 馃槂

Les comparto un sitio con diferentes im谩genes (por si quieren cambiar sus im谩genes).

Codigo html

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Document</title>
</head>
<body>
    <div class="page">
        <!-- Main Content -->
        <section class="container">
            <nav class="navbar">
                <div class="navbar__content">
                    <img src="" alt="">
                    <ul>
                        <li><a href="#">EXCLUSIVOS</a></li>
                        <li><a href="#">NUEVOS</a></li>
                        <li><a href="#">GIFT CARDS</a></li>
                        <li><a href="#">FIND A STORE</a></li>
                    </ul>
                </div>
            </nav>
             <section class="main-content">
                 <!-- <p>Dise帽a tu</p>
                 <h1>S煤per H茅roe!</h1> -->
                 <h1><span>Dise帽a tu</span> S煤per H茅roe!</h1>
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum alias molestiae illum pariatur itaque numquam, ab voluptates modi nisi cumque magni ad possimus voluptatibus repudiandae dicta laudantium natus fugiat laboriosam?</p>
             </section>
             <section class="side-content">
                <p>Superman</p>
                <img src="" alt="">
                <div></div>
             </section>
             <section>
                 <div>
                     <img src="" alt="">
                 </div>
                 <div>
                    <img src="" alt="">
                </div>
                <div>
                    <img src="" alt="">
                </div>
             </section>
        </section>
         <!-- Loader -->
         <section class="loader">
             <div></div>
             <div></div>
             <div></div>
         </section>
        <!-- Modal -->
        <section></section>
    </div>
</body>
</html>

emocionado por empezar!!馃榿馃榿馃榿

Decid铆 hacer mi propio dise帽o en figma para promocionarme como freelancer

Muy buena introduccion para maquetacion.

antes de empezar la clase decid铆 hacerlo por mi propia cuenta y as铆 me quedo



el c贸digo esta en mi github por si alguien quiere checarlo ;D

mientras lo hacia me surgi贸 una duda recuerdo que en algunas de las clases de los cursos anteriores creo se hab铆a mencionado que grid pod铆a heredar una grilla o mas bien track o al menos eso recuerdo, como sea lo investigare despu茅s por lo mientras a seguir con el curso

Este Cheat Sheet te puede ayudar a entender mas la metodologia BEM.

https://9elements.com/bem-cheat-sheet/

Espero que sirva.

tiempo sin ver un curso de teff code! aqui vamos, seguimos aprendiendo!