Creación de sitios web Desarrollo front-end - curso gratuito de la escuela de programación infantil online Hello World, formación 44 horas, Fecha: 3 de diciembre de 2023.
Miscelánea / / December 06, 2023
Cómo funciona Internet
Hablemos de los conceptos básicos de Internet y su arquitectura. Averigüemos qué es un dominio, alojamiento y arquitectura cliente-servidor. Configuremos el entorno de trabajo y hablemos de los tres pilares del desarrollo front-end: HTML, CSS y JavaScript.
HTML
Estructura del documento HTML
Creemos las primeras páginas HTML y veamos ejemplos de páginas web simples y complejas. Averigüemos qué bloques deberían estar en nuestra página. Hagamos que nuestras páginas se vinculen entre sí, descubramos en qué se diferencia el texto del hipertexto y qué son las etiquetas y atributos.
Trabajar con texto
Aprendamos a trabajar correctamente con texto en HTML: dividirlo en párrafos, indicar títulos y subtítulos. Aprendamos a hacer listas numeradas y con viñetas y a citar los clásicos.
Enlaces e imágenes
Conozcamos los enlaces con más detalle y también aprendamos cómo insertar imágenes y utilizarlas como enlaces.
Disposición de la mesa
Creemos nuestra primera tabla y descubramos en qué etiquetas se compone. Aprendamos a fusionar celdas, cambiar el número de filas y columnas, alinear texto y mucho más. También aprenderemos consejos básicos del diseñador sobre cómo embellecer tu mesa.
Introducción a los formularios
Creemos nuestro primer formulario, aprendamos a trabajar con campos de entrada, listas desplegables, casillas de verificación y, por supuesto, botones. Estudiemos otros elementos del formulario que nos serán útiles en el futuro.
CSS
Introducción a CSS
Recordemos qué es CSS y cómo usarlo. Aprendamos a utilizar CSS cuando trabajemos con páginas HTML. Estudiemos la sintaxis de CSS y qué son los selectores, la herencia y con qué prioridad se aplican nuestros estilos a un documento HTML.
Selectores
Estudiemos los selectores con más detalle. Aprendamos cómo acceder a uno o más elementos, cuál es la diferencia entre una clase y una pseudoclase y un elemento de un pseudoelemento. Echemos un vistazo a las pautas de CSS y descubramos qué le gusta preguntar a la gente sobre CSS en las entrevistas.
Herencia, cascada y prioridad
Aprendemos que los especialistas en retraso del crecimiento y los especialistas no pertenecen al mismo campo. Entendamos los principios mediante los cuales se aplican los estilos CSS a los elementos HTML.
Decoración de texto
Volvamos al punto de partida: al texto. Aprendamos cómo hacer que nuestro texto sea hermoso y fácil de usar usando las propiedades de CSS: negrita, cursiva, tamaño, color, fondo y otras.
Modelo de documento en bloque
Aprendamos las etiquetas div y span, así como también cómo configurar el tamaño, el relleno y los bordes de los elementos. Entendamos cómo se forma el modelo de bloques de un documento y qué capacidades tenemos para posicionar elementos.
javascript
Introduciendo JavaScript
Conozcamos el tercer pilar del desarrollo front-end: JavaScript. Averigüemos qué son las variables, los tipos de datos y por qué son necesarias. Y por supuesto escribiremos nuestro primer programa.
Condiciones
Recordemos la lógica, las operaciones lógicas y sus combinaciones. Que la fuerza y el control nos acompañen.
Ciclos
Aprendamos a hacer muchas cosas mientras escribimos poco código. Entendamos que un ciclo dentro de un ciclo es simple, pero hay que tener cuidado.
matrices
Hay masas de hielo, bosques y hay matrices en programación. Estudiaremos qué tienen en común y en qué se diferencian en esta lección. Sugerencia: los bucles de la lección anterior nos ayudarán mucho.
Funciones
Si las variables y el nombre correcto para ellas son el ABC de la programación, entonces la capacidad de trabajar con funciones y elegir nombres adecuados para ellas ya es una receta. En esta lección aprenderemos cómo dividir un programa en bloques lógicos y por qué esto es importante.
Objetos
Nos familiarizaremos con el concepto de objetos, métodos y comenzaremos a familiarizarnos con los principios de la programación orientada a objetos.
Introducción al DOM
JavaScript sería inútil si no pudiera interactuar con un documento HTML. Aprenderemos qué es el DOM (Document Object Model), pero lo más importante es que aprenderemos a trabajar con HTML y CSS a través de JavaScript.
Manejo de eventos
Ahora lo llevaremos al siguiente nivel y aprenderemos cómo reaccionar e interactuar con el usuario usando JavaScript. También aprenderemos por qué los eventos de JavaScript pueden burbujear y hundirse.
HTML5 y CSS3
HTML5: ¿qué hay de nuevo y por qué?
Averigüemos qué cambios se han producido en HTML5 y por qué. Estudiemos nuevos elementos y analicemos casos de su correcto uso.
Elementos de posicionamiento y cuadrícula
Veamos nuevas formas de estructurar páginas y colocar elementos en ellas.
formularios HTML5
Exploremos el lado oscuro del poder y practiquemos con nuevos formularios en HTML5, así como con cambios en los antiguos. Trabajemos con nuevos tipos de campos para ingresar fechas, colores, números y cómo pedirle al usuario que le haga la vida un poco más fácil.
Audio y video
En este tutorial, eres tanto el DJ como el editor. No tendremos tiempo para crear nuestro propio Youtube durante esta lección, pero nos esforzaremos mucho en crear un prototipo con funcionalidad básica.
Trabajar con texto en CSS3
Averigüemos qué oportunidades existen y recomendaciones para formatear texto en la última versión del estándar.
Efectos de transición y transformación en CSS3
Aprendamos a crear animaciones y varios efectos usando CSS3. Conozcamos los peligros al crear tales efectos.
Diseño adaptativo
Averigüemos por qué es necesario diseñar de forma adaptativa y cuándo es innecesario y puede causar daño. Veamos la sintaxis básica y, por supuesto, practiquemos el diseño adaptativo.
Cuadrícula Flexbox y CSS
Aprenderemos sobre los enfoques modernos para el diseño de bloques, así como las dificultades que existen al usarlos.
Preprocesadores CSS: LESS y SASS
¿Quieres utilizar variables en CSS? ¡Fácilmente! Descubra qué cosas interesantes puede hacer utilizando los preprocesadores CSS.
JavaScript en un nuevo nivel
ES-2015+
¿Qué es JavaScript moderno, "modo estricto" y cómo vivir con todo ello?
Programación orientada a objetos en JavaScript
Estudiemos cómo se estructuran las clases en JavaScript moderno y por qué se usan si todo se puede hacer usando funciones. Cómo funciona la herencia y qué otras formas de crear clases existen en JS.
Funciones en detalle
Averigüemos qué son la Declaración de función y la Expresión de función y aprendamos a llamar a una función sin nombre. Veamos la frase "vinculación de contexto".
AJAX y JSON
Llevémonos a un nuevo nivel como desarrolladores, aprendamos cómo realizar solicitudes HTTP y aprendamos cómo el servidor y el cliente pueden comunicarse entre sí y no pelear.
Expresiones regulares
"Si tienes un problema y lo vas a resolver con expresiones regulares, entonces ya tienes dos problemas". Aprendamos cómo evitar dispararse en el pie usando expresiones regulares.
Constructores, ejecutores de tareas y gestión de dependencias.
Bower, npm, gulp, Grunt, webpack y compañía. No hay nada complicado en esto, pero tendrás que resolverlo.
Pruebas en JavaScript
Donde hay código, siempre hay errores. Aprenderá cómo minimizar su número y qué prácticas y herramientas nos ayudarán con esto.
Algoritmos
Aprenderemos a escribir código para que luego el procesador y el navegador no experimenten un dolor insoportable al iniciar su programa.
reaccionarjs
Introducción a ReactJS
Conozcamos ReactJS, aprendamos a escribir componentes simples y compárelos con otros marcos populares. Conozcamos el concepto de DOM virtual.
Arquitectura y configuración de aplicaciones React.
Averigüemos qué acciones debemos realizar para no solo escribir en React, sino también hacerlo de la manera más eficiente y conveniente posible.
Creando la primera aplicación en ReactJS
Echemos un vistazo más de cerca a JSX, ReactComponent, ReactDOM.render y la función Render. Configuramos y lanzamos la primera aplicación, establecemos relaciones entre componentes y procesamos eventos.
Enrutamiento y ReactJS
¿Qué es el enrutamiento? Conozcamos ReactRouter y su funcionalidad; Organizamos el enrutamiento en nuestra aplicación.