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
Visión general y requisitos del curso
Hagamos un landing con super poderes CSS
Estructura del proyecto
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?
Resources
Transcript
How to structure an HTML project from scratch?
Building an HTML project may seem like a monumental challenge at first, but by breaking it down into clear steps, you can handle it smoothly. The key is to understand how the design layout is structured so that you can add elements gradually. Let's explore how to break your project into manageable parts before you start coding in HTML.
How do we break down the layout into sections?
Starting with the main screen, the structure typically includes several components such as the navbar, the main content, the footer, and a side section called "side content". This initial breakdown allows for a logical organization of the HTML elements before additional styling or logic is applied:
- Navbar: Will include an image (possibly a logo) and a list of elements (ul and li).
- Main Content: May contain headings (h1, h2), paragraphs (p), and other text elements.
- Side Content: Surprisingly, in this case, it incorporates an image and a container for a background.
- Footer: It is expected to contain images and different dividers (div).
How to implement the basic structure in HTML?
The next step is to translate this logical structure into HTML code. Here is a sample of how the HTML code of your project could look like:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>MyProject</title></head><body> <div class="page"> <!-- Navbar --> <nav class="navbar"> <div class="navbar-content"> <img src="logo.png" alt="Logo"> <ul><li><a href="#">Exclusives</a></li><li><a href="#">NewLegos</a></li> <li><a href="#">New Legos</a></li><li>li><a href="#">GiftCards</a></li><li><a href="#">Finda Store</a></li> </ul> </div> </nav> <!-- Main Content --> <main class="main-content"> <h1>Designyour Super Hero</h1> <p>Loremipsum dolor sit amet....</p> </main> <!-- Side Content --> <aside class="side-content"> <p>Superman</p> <div></div> </aside> <!-- Footer --> <footer class="footer"> <div> <img src="square.png" alt="Little Blue Square"> </div> </footer> </div></div></body></html></html>How important are names and classes in HTML?
One crucial aspect is how we name our classes and tags. Using a consistent naming system not only makes the code more readable, but also makes it easier to maintain. In this case, we have used names such as navbar-content, main-content and side-content, which clearly describe the purpose of each section.
Why should we plan additional sections such as loaders and modals?
In addition to what we have already mentioned, planning additional sections such as loaders and modals from the beginning can save time and complications later in development.
- Loader: They will be represented simply as three divs to indicate a loading animation.
<div class="loader"> <div></div> <div></div> <div></div><div></div></div></div>.Developing good HTML design involves anticipating future needs while keeping the structure simple and effective. Keep exploring and practicing, because the next step is to add styles and animations that will bring your project to life. keep learning!
Contributions 12
Questions 0
Sort by:
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.
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 😃
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>
Les comparto un sitio con diferentes imágenes (por si quieren cambiar sus imágenes).
Decidí hacer mi propio diseño en figma para promocionarme como freelancer
emocionado por empezar!!😁😁😁
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
Hola muchach@s! Acá les comparto este aporte, es la estructuración del HTML que hizo la profe en la clase, para que se puedan guiar al momento de desarrollar el curso o para proyectos personales. 💚
tiempo sin ver un curso de teff code! aqui vamos, seguimos aprendiendo!
Want to see more contributions, questions and answers from the community?