
Bienvenidos al curso de HTML, CSS y JavaScript.
Instalaremos un editor de código para poder seguir el curso, programando en HTML, CSS y JavaScript. También veremos un sitio web que servirá como editor de código en caso de no poder instalar el sugerido.
Antes de empezar el curso, veremos cómo buscar soluciones a problemas que puedan surgir cuando programamos en HTML, CSS y JavaScript.
Introducción al nivel 1 del curso de HTML, CSS y JavaScript.
Conocerán la estructura y etiquetas básicas de HTML y CSS.
Te introducirás a la sintaxis de CSS para luego programar en conjunto con HTML.
Conocerás las formas de escribir texto en HTML con distintos métodos. Conocerás etiquetas de párrafo y headings.
Aprenderás 4 formas de aplicar color desde CSS a elementos creados con HTML. Además entenderás cómo escribir líneas que no serán ejecutadas en el programa.
Entenderás formas de editar textos desde CSS.
Estructurarás correctamente tu primer proyecto con HTML.
Incluirás en tu proyecto de HTML imágenes y links para que el usuario pueda interactuar. Modificaremos los elementos desde CSS.
Aprenderás formas de crear listas desde HTML que podrán ser modificadas con CSS. Crearemos también una barra de navegación que haremos funcionar más tarde.
Agruparás tu contenido HTML en cajas para poder organizar tu documento.
Conocerás la forma de agregar y diseñar distintos tipos de bordes a tus elementos en HTML desde CSS.
Aprenderás formas de organizar tu documento HTML modificando desde CSS los márgenes con margin y padding.
Identificarás tus elementos con ID y Class en HTML para poder editarlos independientemente desde CSS.
Con :hover y :active pondremos interacción a nuestro sitio web desde CSS para que podamos hacer que nuestros elementos en HTML sigan ciertas órdenes.
A partir de una etiqueta de HTML agregaremos interacción a un sitio web.
Conoceremos la forma más utilizada de diseño en CSS: Grid.
Aprenderemos etiquetas extra que serán importantes de saber para seguir adelante con el curso.
Aprenderemos a publicar un proyecto en la web, a través de GitHub y Netlify.
Introducción al nivel 2 del curso de HTML, CSS y JavaScript.
Pasamos en limpio los contenidos vistos en el nivel 1 creando 2 códigos utilizando HTML y CSS.
Pasamos en limpio los contenidos vistos en el nivel 1 creando una infografía con contenido extenso de CSS, con un básico contenido de HTML.
Aprenderemos la etiqueta de <span></span> de HTML, para luego modificarla en CSS, que nos ayudará mucho para cualquier tipo de proyecto a realizar más adelante.
Realizaremos una web que contenga 5 botones en HTML con interacción, y veremos cómo modificarlos desde CSS.
Conoceremos propiedades de transformación en CSS que se verán afectadas en elementos HTML. Entenderás cómo rotar y escalar elementos en los ejes X, Y y propio eje.
Comenzaremos a aprender sobre formularios con las etiquetas <form></form> y <fieldset></fieldset> desde HTML, para empezar a crear un sistema de Sign Up.
Avanzaremos con la realización de formularios en HTML para que el usuario entienda mejor al sitio web.
Avanzaremos con la realización de formularios en HTML para que el usuario entienda mejor al sitio web. Veremos como hacer distintas opciones modificables luego en CSS.
Solucionaremos unos ejercicios de práctica para formularios en HTML.
Durante esta clase estaremos solucionando 2 problemas utilizando HTML y CSS. Esto servirá de práctica para que puedan poner a prueba los conocimientos adquiridos hasta el momento para ver de qué forma solucionarían un problema real, si fuesen contratados como desarrolladores front end.
En esta clase veremos una técnica llamada Media Query que sirve para hacer responsive design desde CSS, modificando el contenido creado en HTML. Veremos como cambiar la distribución y aspecto del contenido según el tamaño de la pantalla del dispositivo desde el que se está viendo el sitio web.
En esta clase aprenderás propiedades extra en CSS que te servirán para crear proyectos con profesionalidad garantizada.
En esta clase aprenderás etiquetas extra de HTML que conseguirán modificaciones directas hacia textos y la web general. Estas etiquetas pueden ser modificadas con CSS.
Con HTML implementaremos APIs en nuestro sitio web. Veremos los ejemplos de Google Maps, Spotify, Soundcloud y WhatsApp, aunque con el mismo método podremos aplicar todas las APIs que encuentren.
La parte gráfica es esencial para cualquier sitio web. En esta clase veremos cómo implementar Font Awesome en HTML para que nuestro proyecto sea mejor de lo que podíamos hacer hasta ahora.
Comenzaremos a crear nuestro sitio web final del nivel 2: La sección de contacto de un sitio web, utilizando HTML y CSS.
En esta clase seguiremos haciendo el proyecto final, haciendo retoques y diseño en CSS, y estando a punto de terminar el HTML.
Crearemos detalles finales usando HTML y CSS para que nuestra página luzca genial.
Esta clase es un extra, opcional para el estudiante. Agregaremos una funcionalidad rápidamente con JavaScript con fin de prepararnos para el nivel 3 del curso.
Introducción al nivel 3 del curso de HTML, CSS y JavaScript.
Pasamos en limpio todo lo visto en el nivel 2, incluyendo HTML y CSS.
Creamos nuestra primer línea de código con JavaScript.
Veremos distintas formas de crear variables en JavaScript y los tipos de datos que estas pueden almacenar.
Crearemos nuestra primera variable en JavaScript utilizando prompt y alert. Con eso podremos crear una web que funcione en base a los datos del usuario.
Aprenderemos comandos para realizar operaciones matemáticas desde JavaScript.
Veremos más operadores de verificación y de lógica desde JavaScript que serán útiles para muchos proyectos reales.
Con el modificador .innerHTML cambiaremos datos del HTML utilizando JavaScript.
Crearemos nuestra primera función, y aprenderemos de qué sirve, cuándo y cómo utilizarla correctamente en JavaScript, para que junto a HTML y CSS puedas lograr una web excelente.
Con el modificador .value podremos extraer datos de los input que hay en un HTML desde JavaScript.
Crearemos una web utilizando HTML, CSS y JavaScript con todo lo que sabemos hasta el momento, solucionando el problema propuesto en clase.
Veremos cómo cambiar valores string a int o float desde JavaScript.
Crearemos una calculadora con JavaScript que a partir de 3 incógnitas (a, b, c) nos dé como resultado un X1 y X2, utilizando la fórmula resolvente.
A partir de una etiqueta de <select></select> de HTML, podremos extraer los valores de las opciones que están adentro del select, teniendo así funcionalidad en todas las partes de un formaulario utilizando JavaScript.
Al utilizar el modificador .src podremos cambiar la ruta de las imágenes de HTML desde JavaScript.
Conocerás formas de editar una variable tipo string con funciones predeterminadas desde JavaScript.
Veremos los condicionales en JavaScript y haciendo un proyecto práctico para poner estos en práctica.
Crearemos bucles para ejecutar códigos de JavaScript siguiendo ciertas condiciones. Veremos la diferencia entre condicionales y bucles.
Crearemos 2 ejercicios de práctica utilizando tanto loops como condicionales con JavaScript.
Aprenderemos lo que es un array en JavaScript y aprenderemos a modificarlos.
Conocerás la forma de crear un array asociativo, con una puesta en práctica desde JavaScript.
Veremos for para iterar en JavaScript. Crearemos un gráfico con lo aprendido.
Aprenderás a usar switches en JavaScript para asociarlo con variables y mostrar resultados dependiendo el contenido de una variable.
Aprenderemos a crear funciones con propiedad mailto, la cual servirá para enviar emails. Esta función se ejecutará en una pestaña nueva, que aprenderemos a crear mediante window open en JavaScript.
Aprenderás a agregar parámetros a tus funciones de JavaScript. Conocerás distintas formas de crear funciones para que sea más simplificado, y en menos líneas de código.
Conocerás la funcion setInterval con la cual crearemos un cronómetro con JavaScript.
Veremos lo que es una función rest y de qué sirve return en JavaScript.
Crearemos un proyecto en JavaScript con el cual habilitaremos a ciertos alumnos de un curso. Aquellos alumnos no habilitados, serán informados de que no tienen permiso.
Crearemos un proyecto en JavaScript con el cual pasaremos lista en un curso. El objetivo es que dentro de la consola se guarde un array, que contenga varios arrays, que contengan el nombre de cada estudiante.
Introducción al nivel 4 del curso de HTML, CSS y JavaScript.
Aprenderemos un concepto sobre lo que es la Programación Orientada a Objetos, que estaremos profundizando durante el nivel 4 en JavaScript.
Crearás tu primer objeto en JavaScript. Verás la forma de crear un objeto desde la clase, pasando por el constructor y asignando propiedades. Veremos lo que estamos haciendo desde la consola y desde el mismo documento.
A partir del objeto creado en JavaScript durante la clase pasada, aprenderás la forma para construir métodos y asignarle una función a cada uno.
Veremos teoría sobre los conceptos que tiene la programación orientada a objetos en JavaScript.
Conocerás la forma de aplicar polimorfismo en programación orientada a objetos. Crearás un método que servirá para ciertos objetos y para otros no con JavaScript.
Veremos como crear una clase que contenga datos de otra clase utilizando herencia con JavaScript. Asignaremos un método para una sola clase.
Crearemos un sistema con JavaScript en el cual pondremos en práctica lo aprendido acerca de programación orientada a objetos.
Con el DOM obtendremos elementos del HTML con JavaScript.
Con el DOM modificaremos elementos del HTML con JavaScript.
Con el DOM obtendremos valores de elementos en HTML con JavaScript.
Con el DOM obtendremos valores de opciones en HTML con JavaScript.
Con el DOM cambiaremos la fuente de imágenes en HTML con JavaScript.
Con el DOM modificaremos estilos de elementos de HTML con JavaScript.
Con el DOM obtendremos datos de elementos de HTML con JavaScript.
Realizaremos un quiz para poner en práctica lo aprendido del DOM de JavaScript.
A partir de JavaScript extrearemos datos del navegador utilizando el Browser Object Model.
Introducción al nivel 5 del curso de HTML, CSS y JavaScript.
En esta primer clase del Nivel 5 aprenderás como funciona la consola y comandos básicos de JavaScript.
Seguiremos inspeccionando datos con la consola de JavaScript, conociendo nuevas funciones que ayudarán que nuestro trabajo sea mas ágil.
Verán como utilizar comandos para ver datos de arrays en JavaScript.
Conoceremos los métodos para contar funciones u objetos desde la consola de JavaScript.
Veremos la agrupación de valores en la consola de JavaScript.
En esta clase aprenderemos a utilizar funciones que ayudarán a cronometrar determinadas acciones en JavaScript.
Veremos un nuevo problema en JavaScript para resolver con lo aprendido sobre el uso de la consola.
Nos introduciremos a lo que es el uso de la ventana del navegador y el objeto window en JavaScript.
Veremos como abrir y cerrar ventanas con window, y verificar si están abiertas, desde JavaScript.
Comprobaremos las distintas acciones ejecutables en la ventana usando JavaScript.
Veremos la utilización de la ventana respecto a la pantalla de nuestra computadora con JavaScript.
Aprenderemos las funciones de desplazamiento de la página con JavaScript.
Utilizaremos la funcion de location en JavaScript.
Veremos qué son, y dónde se encuentran los eventos, para verlos luego en JavaScript.
Conocerás la forma de crear un "event listener" en JavaScript, para trabajar con eventos click.
Veremos los distintos eventos ocurridos con el mouse en JavaScript.
Veremos como utilizar los eventos del teclado con JavaScript.
Utilizaremos los eventos de carga en JavaScript en nuestra página.
Comprenderemos la interacción del usuario con la ventana y el texto con JavaScript.
Introducción al nivel 6 del curso de HTML, CSS y JavaScript.
Conoceremos el concepto de flexbox, un modelo de diseño para CSS.
Crearemos un documento básico con HTML, al cual le asignaremos propiedades de flexbox en CSS.
Veremos la propiedad flex-grow para modificar el tamaño de objetos con flexbox de CSS.
Repasaremos las propiedaded Justify Content y Align Items de Flexbox, para alinear elementos con CSS.
Aprenderemos a utilizar la propiedad flex-wrap en CSS para que nuestros objetos de flexbox respeten el tamaño de cada línea/renglón.
Conoceremos la propiedad align-content y veremos su uso en CSS mediante un ejercicio con otras propiedades de flexbox ya aprendidas.
Introducción al nivel 7 del curso de HTML, CSS y JavaScript.
Aprenderemos qué es el localStorage y desde JavaScript crearemos claves y valores, los cuales podremos mostrar en nuestros proyectos.
Aprenderemos el SessionStorage, y su principal diferencia con el LocalStorage, para manejarlos desde JavaScript.
Aprenderemos a eliminar elementos del LocalStorage desde JavaScript.
Crearemos un ejercicio de práctica en el cual podremos escribir nuestro nombre, el cual se mostrará en pantalla y se guardará en el localStorage a partir de funciones vistas en JavaScript.
Aprenderemos qué es JavaScript Object Notation (JSON), y conoceremos formas de acceder a los valores, utilizando los objetos que crearemos en clase.
Veremos qué es y cómo crear callbacks con JavaScript.
Crearemos nuestra primer promesa desde JavaScript. Conoceremos las propiedades y métodos que debe tener una promesa.
Conoceremos las peticiones con fetch desde JavaScript para extraer un backend, el cual convertiremos a JSON, y podamos acceder a ciertos datos.
Aprenderemos a manejar errores de promesas y código en general de JavaScript.
Crearemos fechas a partir del objeto Date, utilizando métodos precisos para mostrar fechas con JavaScript.
A partir del objeto Date, crearemos un reloj poniendo en práctica HTML, CSS y JavaScript.
Conoceremos el objeto Math en Javascript.
Introducción al nivel 8 del curso de HTML, CSS , JavaScript y jQuery.
Integraremos jQuery a nuestro proyecto.
Daremos nuestros primeros pasos con jQuery. Trabajaremos con el DOM, seleccionando ID y Class.
Trabajaremos en el DOM con jQuery, seleccionando atributos.
Trabajaremos en el DOM con jQuery, seleccionando etiquetas.
Trabajaremos con eventos click de jQuery.
Trabajaremos con eventos hover de jQuery.
Trabajaremos con eventos mouse de jQuery.
Trabajaremos con eventos mousemove de jQuery.
Trabajaremos con eventos de teclado en jQuery.
Aprenderemos el operador this y sus usos tanto para JavaScript como para jQuery.
Animaremos elementos del HTML con funciones básicas de animación en jQuery.
Animaremos elementos del HTML con animaciones customizadas por nosotros en jQuery.
¿Qué es jQuery UI? ¿Qué funciones tiene? Eso lo veremos en esta clase.
Descargaremos e integraremos jQuery UI a nuestro proyecto.
Veremos interacción con jQuery UI, utilizando la función draggable.
Veremos interacción con jQuery UI, utilizando la función droppable.
Veremos interacción con jQuery UI, utilizando la función resizable.
Veremos interacción con jQuery UI, utilizando la función selectable.
Veremos interacción con jQuery UI, utilizando la función sortable.
Trabajaremos con una serie de efectos animados de jQuery UI, y crearemos un "cambiador de colores" animado utilizando CSS y jQuery.
Conoceremos el método get para hacer peticiones ajax a través de jQuery.
Conoceremos el método post para hacer peticiones ajax a través de jQuery.
Conoceremos el método load para hacer peticiones ajax a través de jQuery.
Bienvenido al entrenamiento completo de Desarrollo Web utilizando los lenguajes para programación FrontEnd HTML, CSS y JavaScript. Somos Sebastián Burgio y Juan Ignacio Garcés, y seremos los instructores. Durante el paso de este curso aprenderás a realizar proyectos web desarrollados con tecnologías que conoceremos sin necesidad de conocimientos previos.
El curso está dividido en muchos niveles, en los cuales iremos aprendiendo desde cero hasta poder hacer maravillosas páginas web en cada uno de los niveles, con distintas complejidades.
Los niveles del curso irán paso a paso, con explicaciones claras y concisas, haciendo códigos de ejemplo en todas las clases. Empezaremos aprendiendo lo básico de HTML y CSS. Crearemos sitios web de a poco para ir familiarizándonos con los conceptos. En niveles más avanzados aprenderemos JavaScript, el lenguaje para agregar interacción a la web. De a poco iremos conociendo conceptos avanzados en los lenguajes, con los cuales sabremos crear y gestionar sitios web increíbles.
Los objetivos del curso son explorar sobre la sintaxis de los 3 lenguajes, identificación de etiquetas para crear proyectos profesionales, descubrir aspectos básicos y avanzados, realizar proyectos prácticos para poner a prueba los conocimientos adquiridos y entender la lógica de programación para conseguir trabajar con desarrollo FrontEnd y familiarizarse con lenguajes próximos.
El curso está dirigido a desarrolladores de HTML, CSS y JavaScript principiantes con el objetivo de aprender a programar desde cero en todos estos lenguajes. También, cualquier persona que no tenga ninguna noción de los lenguajes de programación FrontEnd serán bienvenidos a tomar el curso.
Para seguir el curso solamente necesitas una computadora con un software de programación (recomendaremos algunos gratis).
¡Nos vemos en clase!