cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <ul>
  <li>Presentación del curso
    <ul>
      <li>Temario</li>
      <li>Objetivos</li>
      <li>Requisitos</li>
      <li>Material</li>
    </ul>
  </li>
  <li>Introducción a HTML + CSS
    <ul>
      <li>Historia
        <ul>
          <li>Tim Berners Lee: Creador del HTML</li>
          <li>Html desde 1970</li>
          <li>Fundado el W3C</li>
        </ul>
      </li>
      <li>Orígenes</li>
      <li>Usos</li>
      <li>Ejemplos BOOTSTRAP</li>
      <li>Alcances</li>
    </ul>
  </li>
  <li>Dreamweaver CS5
    <ul>
      <li>Uso de Dreamweaver
        <ul>
          <li>Interfase</li>
          <li>Menus</li>
          <li>Distribucion recomendada</li>
        </ul>
      </li>
      <li>Herramientas
        <ul>
          <li>Herramientas de uso frecuente</li>
          <li>Escritura de codigo asistida</li>
          <li>Formato de codigo e indentado</li>
          <li>Paneles de lectura y herramientas de revisión </li>
        </ul>
      </li>
      <li>Ventanas y sub herramientas
        <ul>
          <li>Herramientas de Insertar (Explicar más comunes)</li>
          <li>CSS y definicion de styles</li>
          <li>Estilos CSS (Shift F11)</li>
          <li>Panel de archivos</li>
          <li>Definicion de sitio para conexion con servidor</li>
          <li>Estructura de directorios</li>
        </ul>
      </li>
      <li>Desarrollo de velocidad de lectura de codigo. Metodo probado por varias generaciones que garantiza mejora de lectura de código.</li>
    </ul>
  </li>
  <li>Etiquetas HTML
    <ul>
      <li>Introduccion a formato de etiquetas HTML
        <ul>
          <li>Apertura &ldquo;&lt; &gt;&rdquo; Cierre &ldquo;&lt;/ &gt;&rdquo;</li>
          <li>Análisis de Etiquetas – Tags</li>
        </ul>
      </li>
      <li>Formato: &lt;nombre atributo1=&rdquo;etc&rdquo; atributo2=&rdquo;etc&rdquo;&gt;contenido&lt;/nombre&gt;</li>
      <li>&lt;html&gt;
        <ul>
          <li>Versión y estandares online</li>
          <li>style=&rdquo;&quot;</li>
        </ul>
      </li>
      <li>&lt;head&gt;
        <ul>
          <li>&lt;meta /&gt;
            <ul>
              <li>http-equiv=&rdquo;&quot;
                <ul>
                  <li>content-type=
                    <ul>
                      <li>text/html;</li>
                      <li>charset=utf-8;</li>
                      <li>charset=iso-8859-1;</li>
                    </ul>
                  </li>
                  <li>expires</li>
                  <li>refresh</li>
                </ul>
              </li>
              <li>name=&rdquo;&quot;
                <ul>
                  <li>keywords</li>
                </ul>
              </li>
              <li>content=&rdquo;&quot;</li>
              <li>description</li>
            </ul>
          </li>
          <li>&lt;link /&gt;
            <ul>
              <li>href=&rdquo;&quot;</li>
              <li>rel=&rdquo;&quot;
                <ul>
                  <li>stylesheet</li>
                  <li>icon</li>
                </ul>
              </li>
              <li>type=&rdquo;&quot;
                <ul>
                  <li>text/css</li>
                  <li>x-icon</li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>&lt;body&gt;
        <ul>
          <li>&lt;p&gt; </li>
          <li>&lt;strong&gt; &amp; &lt;B&gt;</li>
          <li>&lt;em&gt; &amp; &lt;I&gt;</li>
          <li>&lt;a&gt;
            <ul>
              <li>href=&rdquo;&quot;</li>
              <li>target=&rdquo;&quot;</li>
              <li>title=&rdquo;&quot;</li>
              <li>rel=&rdquo;&quot;</li>
              <li>Anclas</li>
            </ul>
          </li>
          <li>&lt;img&gt;
            <ul>
              <li>src=&rdquo;&quot;</li>
              <li>width=&rdquo;∞&rdquo;</li>
              <li>height=&rdquo;∞&rdquo;</li>
              <li>alt=&rdquo;&quot;</li>
            </ul>
          </li>
          <li>&lt;table&gt;
            <ul>
              <li>cellpadding=&rdquo;∞&rdquo;</li>
              <li>cellspacing=&rdquo;∞&rdquo;</li>
              <li>border=&rdquo;∞&rdquo;</li>
              <li>width=&rdquo;∞&rdquo;</li>
              <li>height=&rdquo;∞&rdquo;</li>
              <li>&lt;td&gt;</li>
              <li>&lt;tr&gt;</li>
              <li>&lt;th&gt;</li>
            </ul>
          </li>
          <li>&lt;div&gt;</li>
          <li>&lt;span&gt;</li>
          <li>&lt;ul&gt;
            <ul>
              <li>li</li>
            </ul>
          </li>
          <li>&lt;ol&gt;
            <ul>
              <li>style=&rdquo;list-style-type:___;&rdquo;</li>
            </ul>
          </li>
          <li>&lt;HTML5&gt;
            <ul>
              <li>Novedades del nuevo estandar</li>
              <li>Audio</li>
              <li>Video</li>
              <li>Canvas</li>
              <li>Form validation</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Otras variaciones de HTML
    <ul>
      <li>XHTML</li>
      <li>XML</li>
    </ul>
  </li>
</ul>
<ul>
  <li>CSS3
    <ul>
      <li>Introduccion al formato CSS
        <ul>
          <li>Formato de escritura de css: usos de simbolos &ldquo;.&rdquo;, &ldquo;#&rdquo;y llaves &ldquo;{ }&rdquo;.</li>
          <li>CLASES</li>
          <li>SELECTORS</li>
          <li>TAG DEFINITIONS</li>
        </ul>
      </li>
      <li>Aplicacion de CSS a HTML
        <ul>
          <li>CSS RESET</li>
          <li>Style Sheet externa</li>
          <li>Herencia
            <ul>
              <li>Listados CSS &lt;ul&gt;, &lt;ol&gt;</li>
              <li>Tablas CSS &lt;table&gt;&lt;td&gt;&lt;tr</li>
              <li>a:hover, a:link, a:active, a:visited</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
<ul>
  <li>Diseño Web
    <ul>
      <li>Software para imagenes y diseño: Fireworks + Photoshop (como apoyo)
        <ul>
          <li>Fireworks CS5 – Herramienta Principal
            <ul>
              <li>Herramientas básicas Fireworks</li>
              <li>Uso de estilos</li>
              <li>Capas y multi diseño por documento</li>
              <li>Formatos de compresion y tipos de archivos</li>
              <li>Resoluciónes: 300 VS. 72dpi</li>
              <li>Importacion desde .PSD, .AI, .EPS</li>
              <li>Uso de vectores</li>
              <li>Administracion de archivos originales</li>
              <li>Transparencia flat PNG</li>
              <li>Animaciones Gif</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Formatos y Layouts
    <ul>
      <li>Columnas</li>
      <li>Fluido [Responsive]</li>
      <li>Fijo</li>
      <li>980 Grid system y personalización</li>
    </ul>
  </li>
  <li>Imágenes para web
    <ul>
      <li>Medidas pixelares</li>
      <li>Resoucion y color RGB</li>
      <li>Formatos de imagen y compresión</li>
      <li>Exclusividad de formatos .jpg, gif, png</li>
    </ul>
  </li>
  <li>CSS para diseño – Manejo avanzado de Fondos
    <ul>
      <li>Control de fondos</li>
      <li>Menus de múltiple estado
        <ul>
          <li>Drop down menus</li>
          <li>CSS tooltips</li>
        </ul>
      </li>
      <li>Imágen maestra
        <ul>
          <li>Diseño web ULTRA optimizado</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
</li>
<li>
  Introducción a Programación Web
  <ul>
    <li>Javascript Basicos
      <ul>
        <li>Introducción a Javascript</li>
        <li>Formato y uso</li>
      </ul>
    </li>
</li>
<li>
  JQuery
  <ul>
    <li>Uso de libreria JQuery
      <ul>
        <li>Introduccion y usos recomendados</li>
        <li>Soporte y requerimientos</li>
        <li>Formato y Parametros</li>
        <li>Ejemplos de Jquery Basico</li>
      </ul>
    </li>
</li>
<li>JQuery para todo
  <ul>
    <li>Efectos y transciciones (fade, resize, slide)</li>
    <li>Galeria jQuery Nivo Slider</li>
    <li>Galería jQuery Colorbox [Modals]</li>
  </ul>
</li>
<li>Dando vida a tu sito
  <ul>
    <li>Fusión de plataformas: HTML +CSS3 + JQUERY</li>
    <li>Presentación de otras tecnologías para extender PHP, AJAX, JSON, CMS&rsquo;s.</li>
    <li>Alcances y proyectos experimentales</li>
  </ul>
</li>
</ul>
</ul>
            
          
!
            
              body {
  background-color: #CCC;
}
li {
  font-family: Arial, Helvetica, sans-serif;
}


            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console