██ ██ ████████ ███ ███ ██ ██████ ███████ ███████ ██ ███████
██ ██ ██ ████ ████ ██ ██ ██ ██ ██ ██
███████ ██ ██ ████ ██ ██ ██ ███████ ███████ ██ ███████
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ███████ ██████ ███████ ███████ █████ ███████Curso introductorio a HTML, CSS y JavaScript.
Este contenido es desarrollado en vivo para la Cohorte 2256 Abril-Junio 2023
El material del curso se divide en tres partes, el código desarrollado en cada clase que se encuentra en este repositorio y su despliegue en githubpages; la wiki con el contenido teórico de cada clase y material de referencia y finalmente las clases sincrónicas mediante Zoom.
clic para ver el código y el despliegue en githubpages
| código | despliegue | contenido |
|---|---|---|
| clase_01 | hola mundo | primer código en html |
| clase_02 | intro_html | introducción a los elementos html |
| clase_02 | estructura_base | template para documentos html |
| clase_03 | secciones | Secciones fundamentales y favicon |
| clase_05 | hipervínculos | Hipervínculos en el mismo sitio y a paginas externas |
| clase_05 | imágenes | Imágenes desde el sitio o externas |
| clase_05 | tablas | Tablas |
| clase_05 | formulario simple | Formulario simple con input, label y submit |
| clase_05 | formulario lista desplegable | Formulario con lista desplegable de opciones |
| clase_06 | inputs especiales | inputs especiales: textarea, password, submit, reset |
| clase_06 | otros controles | otros tipos de controles: time, color, date, file |
| clase_06 | radio y checkbox | formularios: botón de radio y checkbox |
| clase_06 | iframes | iframes: google maps y YouTube |
| clase_07 | intro css | introducción a css |
| clase_07 | css externo | css externo |
| clase_08 | CSS: formato de texto | formato de texto en CSS |
| clase_08 | CSS: mas formato de texto | formato de texto en CSS |
| clase_09 | CSS: bordes | bordes |
| clase_09 | CSS: boxmodel | Modelo de caja en CSS |
| clase_10 | CSS: box-sizing | box-sizing: tamaño de caja predecible |
| clase_10 | CSS: flexbox intro | introducción a flexbox |
| clase_10 | CSS: galería flex | galería de imágenes con flexbox |
| clase_11 | CSS: max-width | max-width: tamaño de caja predecible y flexible |
| clase_11 | CSS: flexbox master | Flexbox & FontAwesome & Gradientes |
| clase_17 | CSS: navegación | Navegación |
| clase_18 | JavaScript: Introduccion | Introducción a JavaScript |
| clase_19 | JavaScript: Estructuras de control | Estructuras de control |
| clase_19 | JavaScript: input de usuario | input de usuario |
| clase_21 | JavaScript: arreglos | Arrays, index, length, push() y pop() |
código y despliegue de los labs en githubpages
| código | despliegue | contenido | especificación |
|---|---|---|---|
| lab_00 | Estructura base | Estructura y elementos básicos | 0x00-spec |
| Formularios | 0x01-spec | ||
| lab_02 | Formulario con Estilos | Formulario con estilos y efectos | 0x02-spec |
| lab_03 | Cajas Flexbox | Flexbox y Box-Model | 0x03-spec |
| lab_04 | Refactorizacion | Refactorización y DRY | 0x04-spec |
| lab_05 | Grid y Float | Grid, float, flexbox y FontAwesome | 0x05-spec |
| 0x06-spec | |||
| 0x07-spec | |||
| lab_08 | Calculadora | Grid, responsive y JavaScript | 0x08-spec |
código y despliegue del proyecto final
| código | despliegue | contenido | especificación |
|---|---|---|---|
| consigna |
