Diseño web: Desarrollo de sitios web

Módulo 1. Introducción a HTML

Lección 1: los estudiantes aprenderán qué es una página HTML e intentarán crear su primer diseño usando las etiquetas <p><img><h1> más simples, y comprenderán qué son las etiquetas de nivel superior

Lección 2: Multimedia e incrustación. Los estudiantes aprenderán a usar etiquetas multimedia: <img>, <video>, <audio>

Lección 3: Marcos y marcado de página, aprendizaje de la etiqueta <iframe> e incrustación de elementos en su sitio y estructura del sitio

Lección 4: Introducción a CSS. Los niños aprenderán los conceptos básicos de CSS y aplicarán sus primeros estilos a la página.

Resultado: En el primer módulo, los estudiantes crearán páginas web integrando contenido multimedia y aprenderán los conceptos básicos de estilización de elementos

Módulo 2. Conceptos básicos de CSS

Lección 5: Selectores CSS. Los estudiantes aprenderán qué son los selectores y cómo establecer estilos no para todas las etiquetas, sino para un elemento específico.

Lección 6: El modelo de bloques de CSS. Elementos del modelo de bloques y líneas, qué es la visualización y todas las propiedades de los bloques

Lección 7: Enlaces y propiedades de fondo. Etiqueta <a>, enlaces internos y externos, aprender sobre la configuración de fondo y trabajar con estilos

Lección 8: Posicionamiento. Flujo de documentos y posiciones de elementos, propiedad de posición y fijación

‍Resultado: En el segundo módulo, los estudiantes dominarán temas fundamentalmente importantes para lograr un diseño web profesional, creando sus primeras páginas web en diseño moderno

Módulo 3. Prototipo y conceptos básicos de UX/UI

Lección 9: Introducción al diseño. ¿Qué es el diseño de UX y UI, cuál es su diferencia?

Lección 10: Análisis de motores de búsqueda. Estudiar los motores de búsqueda y el trabajo de Internet, el comportamiento de los motores de búsqueda para su sitio y lo que lo afecta

Lección 11: Maqueta del proyecto final: introducción a Figma, conceptos básicos de maquetación

Lección 12: Flexbox. Los niños aprenderán la propiedad más importante de CSS - Flexboxes - y cómo usarlos

Resultado: los estudiantes aprenderán los conceptos básicos del diseño de sitios web, descubrirán cómo analizar el público objetivo y seleccionarán temas en demanda para sus propios proyectos. Al final del módulo, desarrollarán el diseño de su futuro proyecto basado en conceptos de diseño modernos y su propia investigación del público objetivo

Módulo 4. Diseño

Lección 13: Diseño del sitio web, trabajo con VSC. Conociendo al editor y trabajando en tu primer proyecto

Lección 14: Finalización del proyecto. Finalizando y completando el proyecto.

Lección 15: Publicación de un proyecto. ¿Qué es GitHub y cómo publicar tu sitio? Conexión al análisis del sitio web

Lección 16: Presentación de proyectos. Aquí hay un breve resumen de lo que hicimos en cuatro módulos.

‍Resultado: los estudiantes crearán su primer sitio web, lo publicarán en línea, recopilarán comentarios de los usuarios y pondrán el sitio web a disposición de los motores de búsqueda. Para niños mayores de 14 años, con el consentimiento de los padres, es posible agregar métodos de pago para el sitio web

‍

Módulo 5. CSS Avanzado

Lección 17: Pseudoclases y pseudoelementos. Los alumnos estudiarán pseudoclases y pseudoelementos importantes y resolverán casos reales

Lección 18: Transformaciones. Explorando transformaciones, haciendo que el sitio web sea interactivo para los usuarios.

Lección 19: Animaciones. La propiedad de animación y cómo funcionan las animaciones en CSS

Lección 20: Modelo de bloques: PRO, agrega al proyecto todo lo que has aprendido sobre el módulo. Todo lo que necesitas saber sobre bloques, la diferencia entre margen y relleno. En esta lección, los niños agregarán a su proyecto todo lo que aprendieron para este módulo.

‍Resultado: los estudiantes aprenderán CSS y mejorarán su proyecto

Módulo 6. Maqueta adaptativa, cuadrículas y formularios

Lección 21: Diseño de cuadrícula. La segunda propiedad importante de CSS es el diseño de cuadrícula. ¿Cuál es la diferencia con los flex? ¿Dónde usar y cómo aplicar?

Lección 22: Variables en CSS. ¡La variable raíz que cambiará mucho nuestro sitio!

Lección 23: Diseño adaptativo y receptivo. ¿Cómo hacer que un sitio sea adaptable? ¿Cuál es la diferencia entre adaptativo y receptivo y cuál es mejor usar?

Lección 24: Interacción con la información del usuario. Formularios, cómo enviar información del usuario al servidor

‍Resultado: los estudiantes aprenderán cuadrículas más cómodas, resolverán muchos casos reales y aprenderán a hacer adaptaciones

Módulo 7. Motores de sitio y conceptos básicos de PHP

Lección 25: Servidor Local e Introducción a PHP. Aprendiendo PHP para el sitio, interactuando con HTML

Lección 26: Inmersión en PHP. Bucles de aprendizaje y matrices, cómo construir su propio sitio php

Lección 27: Wordpress. Motores de sitios y Wordpress, cómo crear un sitio a partir de bloques PHP

Lección 28: Motor del sitio y extensión de su proyecto en el motor. Pon tu proyecto en Wordpress y mejóralo

Resultado: los estudiantes aprenderán alojamiento y php, y cómo transferir su proyecto al servidor

Módulo 8. Elaboración del proyecto final

Lección 29: Elaboración del proyecto final

Lección 30: Refinamiento del proyecto, trabajo con formularios, código listo para verificar la corrección de la entrada. Agregar el menú de hamburguesas JS al sitio y trabajar en el proyecto

Lección 31: Refinando el proyecto, menú de hamburguesas, carrusel, papas fritas de JS. Completando el proyecto, agregando carrusel

Lección 32: Presentación de proyectos

Resultado: Para todos los módulos, los estudiantes trabajarán con la mejora de su proyecto, lo que les permite crear un buen producto