Estructura del proyecto

Curso Práctico de Maquetación y Animaciones con CSS

Visión general y requisitos del curso

Hagamos un landing con super poderes CSS

Maquetación y animaciones con CSS

Maquetación del loader

Layout con CSS Grid

Navbar

Contenido principal

Contenido lateral

Footer

Maquetación con JavaScript

Cómo acceder al DOM con JavaScript

Modal: evento click con JavaScript

Slider

Continúa aprendiendo

¿Quieres aprender animaciones con JavaScript?

Recursos

Aportes 10

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Camilo Torres camayo

hace un año

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

Paolo Joaquin Pinto Perez

hace un año

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. 😄

Lucas Frezzini

hace un año

El aporte que haría acá es hablando de semántica, lo siguiente:
.
Teniendo la frase en el diseño: “Diseñ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.

Obed Paz

hace 8 meses

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 😃

Luis Alejandro Vera Hernandez

hace 10 meses

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>