CURSO DE

Material de apoyo
HTML
 CODIGO ONLINE CON
CODEPEN.IO

En la vida, unas veces se gana, otras se aprende.

Autor desconocido
 CODIFICANDO CON CODEPEN.IO

En esta plataforma puedes compartir, actualizar, ver, comentar, diseñar y

crear códigos web. "CodePen" se creó pensando en el prototipado rápido y
prueba de fragmentos de código a través de una interfaz con columnas para
probar códigos HTML, CSS y JavaScript.

"CodePen" nació con la idea de ser un “editor de código en línea, útil y

liberador para desarrolladores de cualquier habilidad, y para las personas
que aprenden a codificar”.
En términos de privacidad, todo lo que hagas en "CodePen" con la versión
gratuita será público, pero si lo que buscas es un trabajo más reservado, la
versión Pro te ofrece privacidad en tus códigos. Solo serán públicos cuando
lo desees, pero también podrás compartirlos con otras personas a través de
un enlace: “Los usuarios gratuitos pueden jugar con un solo proyecto, pero
los usuarios PRO se obtienen más proyectos, más archivos por proyecto,
más implementaciones y dominios personalizados para sus proyectos”.
Aprovechando esta importante herramienta, te comparto mi codepen para
que tengas a la mano todos los códigos html que vimos en el curso y si lo
deseas, empieces a “jugar” con el:
• Introducción a HTML: https://codepen.io/valenz74/pen/zYdrrMX
• Etiquetas o elementos de bloque: https://codepen.io/valenz74/pen/OJjMNrB
• Etiquetas o elementos de línea: https://codepen.io/valenz74/pen/WNErowK
• Enlaces o links: https://codepen.io/valenz74/details/zYdrNvZ
• Marcadores o Anclas: https://codepen.io/valenz74/pen/vYJKdKO
• Listas: https://codepen.io/valenz74/pen/porbaba
• Imágenes: https://codepen.io/valenz74/details/dyzXKVo
• Picture: https://codepen.io/valenz74/details/QWMEVyb
• Figure: https://codepen.io/valenz74/pen/wvqWErB
• Contenido Embebido: https://codepen.io/valenz74/pen/GRvqXbJ
• Tablas I: https://codepen.io/valenz74/pen/abyZREr
• Tablas II: https://codepen.io/valenz74/pen/qBXaaNp
• Formularios I: https://codepen.io/valenz74/pen/vYJXgjW
• Formularios II: https://codepen.io/valenz74/details/oNezeNo
• Formularios III-Tipos de input: https://codepen.io/valenz74/pen/GRvjMRR
• Formularios IV-Listas de Selección: https://codepen.io/valenz74/pen/KKvgyPx
• Formularios V-Atributos: https://codepen.io/valenz74/pen/MWvjrWa