Tooling

VS Code

Extensiones VS Code

 

Extensiones Chrome

Opcionales

Emmet

MDN Docs

Marcado de contenido

Etiquetas para crear secciones de la página - header

<header>
	<h1>Título principal</h1>
</header>

Etiquetas para crear secciones de la página - seccion & article

<seccion>
	<article>
       <h2>Título de un artículo</h2>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
         Nulla sit amet nisi dignissim diam efficitur lacinia posuere ut est. 
         Donec blandit imperdiet neque, quis porttitor ex elementum sit amet. 
         Donec vel placerat arcu. Nulla malesuada auctor feugiat. 
         Etiam vitae dapibus diam. Nunc condimentum ipsum dolor.
      </p>
    </article>
</header>

Etiquetas para crear énfasis em & strong

<seccion>
	<article>
       <h2>Título de un artículo</h2>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
         Nulla sit amet nisi dignissim diam efficitur lacinia posuere ut est. 
         Donec blandit imperdiet neque, quis porttitor ex elementum sit amet. 
         Donec vel <em>enfatizando algo del documento</em>malesuada auctor feugiat. 
         Etiam <strong>enfatizando algo vocalmente</strong> vitae dapibus diam.
      </p>
    </article>
</header>

Etiquetas para crear listas 

<seccion>
	<article>
       <h2>Título de un artículo</h2>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
         Nulla sit amet nisi dignissim diam efficitur lacinia posuere ut est. 
         Donec blandit imperdiet neque, quis porttitor ex elementum sit amet. 
         Donec vel <em>enfatizando algo del documento</em>malesuada auctor feugiat. 
         Etiam <strong>enfatizando algo vocalmente</strong> vitae dapibus diam.
      </p>
    </article>
    <aside>
  		<h2>Descripción de algo</h2>
      <ul>
        <li>Paso 1</li>  <!-- Enumerar lista de elementos -->
      	<li>Paso 2</li>
      </ul>
  	</aside>
    <dl>    <!-- Definition list -->
      <dt>Elementos de una página</dt> <!-- Definition term / describir terminos y descripciones -->
      <dd>Encabezado</dd> <!-- Definition detail / parrafos, imagenes, enlaces, listas -->
      <dd>Contenido</dd>
      <dd>Pie de página</dd>
  </dl>
</seccion>

Ejercicio

Baseline

  • Tipografía
  • Paleta de colores
  • Moodboard
  • Organización de proyecto
  • Styleguide

Tipografía

Paleta de colores

Moodboard

Organización de proyecto

Styleguide

Crea la base de tu proyecto

Tooling

By Michel Ventura

Tooling

Tooling básico para crear la base del proyecto

  • 44