Desarrollador frontend: sitios web en HTML/CSS/JavaScript - curso 18.000 rublos. de Coddy School of Programming for Children, capacitación 3 módulos (meses)

Miscelánea / by admin / December 03, 2023

click fraud protection

Edad: 11-14 años

Nivel: para principiantes.

Duración: a partir de 3 módulos (meses), a partir de 24 horas*.

Formato: lecciones individuales y grupales, offline y online (tiempo real).

Número de niños: de 1 a 8.

Precio:

desde 750 rublos/hora en grupo online,
desde 850 rublos/hora en un grupo fuera de línea,
desde 1050 rublos/hora individualmente en línea,
desde 1980 rublos/hora individualmente fuera de línea.

En el mundo moderno, cualquier empresa seria se esfuerza por adquirir su propio sitio web, porque es una especie de “tarjeta de presentación” en Internet, sin la cual hacer negocios ya parece obsoleto, frívolo y desesperanzado.

En los últimos años, la profesión de webmaster ha subido a lo más alto del ranking de las profesiones más atractivas y demandadas en el campo de las tecnologías de la información. En este sentido, actualmente cada vez hay más personas dispuestas a formarse en la creación de sitios web con rascar y dominar esta prestigiosa especialidad para poder tener una vida estable y digna ganancias. ¡Nuestra escuela de programación CODDY le recomienda no retrasar e inscribir a su hijo en el curso "Desarrollador frontend: sitios web en HTML/CSS/JavaScript" ahora mismo! El propósito de este curso es enseñar a los niños cómo crear sitios web modernos y presentarles los conceptos básicos de la profesión de desarrollador de interfaces.

instagram viewer

¿Qué es el webmastering y cómo convertirse en webmaster?

Webmastering es un conjunto de actividades para el desarrollo, creación, optimización y promoción de sitios web. Todo lo que de una forma u otra esté relacionado con la producción y mantenimiento de sitios. Esta es toda una ciencia que requiere ciertas habilidades y conocimientos en muchas áreas, como programación web, diseño, redacción publicitaria, SEO y otras.

En la Internet moderna, cualquiera puede crear su propio sitio web. Pero, por regla general, la calidad de los proyectos web deja mucho que desear. Para que un sitio web sea competitivo, es necesario abordar el tema de manera competente e involucrar a profesionales en el trabajo. Utilizando un lenguaje de programación, el programador crea páginas de sitios web y las combina en un solo objeto, después de lo cual las diseña para que se muestren correctamente en los navegadores. Se debe prestar especial atención a la interfaz del futuro sitio, garantizando su correcto funcionamiento y seguridad. Entonces, ¡un webmaster profesional hace todo lo anterior por sí mismo! Es programador, diseñador web, maquetador, administrador y moderador y, a veces, redactor SEO, todo en uno.

¿Qué conocimientos y tecnologías necesitas dominar para convertirte en webmaster?

Antes de convertirse en webmaster, debe familiarizarse y estudiar muchas tecnologías, programas y sistemas. Estos son los pasos principales que sentarán las bases de su futura profesión:
1. Aprender HTML - Lenguaje de marcado de hipertexto.
Una vez que comience a aprender HTML, comprenderá la estructura de un documento web y aprenderá a crear sitios web sencillos.

2. Aprender CSS – lenguaje de estilo de visualización de la página web. Gracias a la introducción de estilos CSS en el documento, el sitio adquiere su propio sabor y apariencia única. Puede configurar el color, tamaño, fondo y mucho más de la página web.

3. Introducción al CMS – sistema de gestión de contenidos o “motor” del sitio.

4. Dominar Adobe Photoshop – un editor gráfico con una increíble cantidad de posibilidades. Muchos especialistas lo utilizan para dibujar diseños y crear sus propios diseños originales y de alta calidad.

5. Conocimiento básico de lenguajes de programación. La gran mayoría de sitios web utilizan PHP y JavaScript. La velocidad del sitio, su seguridad, posible escalabilidad y el soporte de desarrolladores externos dependen de la calidad de los scripts escritos. En otras palabras, debe poder escribir código de calidad.

6. Trabajar con bases de datos.

Y lo más importante: el webmaster debe crear sitios originales. Con la llegada de soluciones listas para usar para todos los CMS populares, un sitio web con un diseño original y sin plantilla tiene más demanda que nunca. Un webmaster profesional no sólo puede trabajar con un conjunto de programas ya preparados, sino también escribir estos programas ya preparados. Para alcanzar este nivel tendrás que trabajar duro. Y nuestro curso “Desarrollador frontend: sitios web en HTML/CSS/JavaScript” ayudará a su hijo a dar los primeros pasos con confianza en esta difícil tarea. Bajo la guía de profesionales de la enseñanza con experiencia, aprenderá a crear sitios web informativos que presenten un diseño gráfico original.

Durante el proceso educativo se estudiarán los siguientes temas:

1. Conceptos básicos del lenguaje de marcado de hipertexto (HTML) y hojas de estilo en cascada (CSS)

2. diseño de sitios web modernos

3. estudio en profundidad de las características del diseño de páginas web

4. conceptos básicos para trabajar con Adobe Photoshop y trabajar con diseños de sitios web

En la etapa inicial, nos familiarizaremos con los conceptos básicos de la profesión de desarrollador de interfaces web y estudiaremos las reglas. construir la estructura y la lógica de los sitios web, adquiriendo habilidades prácticas de programación interfaces web. Cada estudiante aprenderá los conceptos básicos de escribir código HTML y CSS.

Al finalizar este tema, su hijo creará su propio sitio web moderno.

El segundo módulo incluye un estudio en profundidad de las herramientas de programación de interfaces web. En este módulo continuaremos nuestra introducción a HTML y CSS. Los estudiantes se familiarizarán con el algoritmo y la estructura de la creación de sitios web modernos en la práctica, crearán de forma independiente una galería de imágenes interactiva y publicarán su proyecto en Internet.

Durante el tercer módulo, continuaremos familiarizándonos con la profesión de desarrollador web, adquiriremos habilidades prácticas para trabajar con Adobe Photoshop y estudiaremos herramientas modernas de diseño web. En la etapa de creación de un diseño de sitio web, el estudiante adquirirá habilidades básicas para trabajar en un editor gráfico. Analizaremos varias opciones de diseño de sitios web, discutiremos las ventajas y desventajas de cada una y descubriremos cómo se puede mejorar el diseño.

Al final del curso, mis alumnos y yo crearemos un sitio web utilizando un diseño ya preparado utilizando las últimas herramientas de programación web y publicaremos el resultado de nuestro trabajo en Internet.

Ella T.

cursos

Profesor del curso:
“Minecraft: Introducción a la Inteligencia Artificial”, “Unity 3D”, “Desarrollador Frontend: Sitios web HTML/CSS/JavaScript”, “Dibujo en estilo anime”, “Programación para los más pequeños”, “Programación Minecraft”, “Design Thinking”, “Bots en Python”, “Diseño gráfico en Photoshop”, "Videoblog"

Educación:

Numerosos cursos para mejorar las habilidades TI en empresas internacionales (Chatbot Hackathons, Prototyping en el campo de la inteligencia artificial, arquitectura TI, etc.). Universidad de Heilbronn, Heilbronn, Alemania (Maestría en Administración de Empresas). Universidad Económica Estatal de Bielorrusia, Minsk, Bielorrusia (Maestría en Administración de Empresas).

Experiencia:

Se dedica a la consultoría de clientes sobre sistemas jurídicos, sistemas para soluciones de auditoría y automatización de procesos, trabaja en el campo innovador de TI y es una empresa emergente en Alemania en una empresa internacional.

Intereses:

Desarrollo personal, pasión por compartir conocimientos, networker, abridor de mundos, diseñador de vida, activista deportivo.

“Hoy el mundo entero está interconectado: personas, países, economías, tecnologías, etc. La programación es una competencia clave del futuro. Le ayuda a comprender mejor el mundo del futuro, darle forma activamente y ser un miembro innovador de una sociedad apasionante sin fronteras. La capacidad de codificar abre infinitas puertas al futuro de nuestros niños en este mundo y los convierte en embajadores de las nuevas tecnologías”.

Serguéi T.

cursos

Educación:

Numerosos cursos para mejorar las habilidades informáticas en empresas internacionales (SAP, automatización de procesos, comercio electrónico). Universidad FOM de Stuttgart, Stuttgart, Alemania (Maestría en Administración de Empresas) Universidad Técnica Estatal de Karaganda, Karaganda, Kazajstán.

Experiencia:

Fundador de una exitosa tienda de electricidad en línea en Alemania, dedicada a la consultoría de clientes en campo de la automatización de procesos de ventas, trabaja en el campo de las ventas de TI en Alemania en el ámbito internacional compañías.

Intereses:

Viajar, pescar, deportes, ajedrez.

I. Goethe dijo: “Sólo puedes aprender lo que amas”

1er módulo

El primer día

Conceptos básicos de diseño de páginas web

estructura del documento HTML
Primera página web que utiliza lenguaje de marcado HTML
Presentamos el editor Sublime Text 3

Resultado de la lección: Creé la primera página web, aprendí formas básicas de marcar texto usando etiquetas.
Tarea práctica: Crear una página web utilizando el lenguaje de marcado HTML.

Segundo día

Atributos de etiquetas y elementos div

Trabajar con el inspector web
Crear un sitio web de varias páginas
Aprender nuevos elementos y atributos de etiquetas

Resultado de la lección: aprendí a agregar enlaces e imágenes al sitio, agregué atributos a las etiquetas
Tarea práctica: cree su primer sitio web de varias páginas.

Día tres

Hojas de estilo en cascada

Introducción a las hojas de estilo en cascada
Estilo de elementos HTML
Usando selectores
Instalar y trabajar con el complemento Emmet y agregar texto de Lorem

Resultado de la lección: Aprendí a cambiar el color de fondo y el color del texto de los elementos HTML, usar dos tipos de selectores, crear texto Lorem usando el complemento Emmet.
Tarea práctica: cambie la apariencia de la página usando propiedades CSS.

Día cuatro

Creación de sitio web jaguar

Creación de un sitio web de Jaguar de varias páginas.
Crear una estructura de archivo de proyecto
Trabajar con relleno y relleno de elementos.

Resultado de la lección: Aprendí a trabajar con un archivo CSS externo, me familiaricé con el relleno externo e interno de los elementos.
Tarea práctica: Cree un sitio web Jaguar de varias páginas.

2do módulo

El primer día

Modelo de caja en CSS

Modelo de caja en CSS
Creando bloques de formas inusuales
Trabajar con la propiedad box-sizing para cambiar cómo se calculan el ancho y el alto de un elemento

Resultado de la lección: Aprendí a crear bloques de formas inusuales, a usar la propiedad box-sizing con el valor del border-box para calcular correctamente el ancho de un elemento y a establecer los tamaños de los elementos en diferentes unidades de medida.
Tarea práctica: cree tarjetas con texto utilizando diferentes valores de propiedad de tamaño de cuadro.

Segundo día

Manipulación avanzada de texto en CSS

Diferentes tipos de fuentes
Elegir fuentes para sitios web
Crear nuevos estilos que le permitan personalizar la visualización del texto en un nivel avanzado

Resultado de la lección: Creó una página usando diferentes tipos de fuentes, mejoró la apariencia y legibilidad del texto usando las propiedades pasadas.
Tarea práctica: Cree una página utilizando tipos de fuentes básicos.

Día tres

Posicionamiento de elementos en CSS

Trabajar con la propiedad flotante
Tipos de posicionamiento de elementos en la página.
propiedad de posición

Resultado de la lección: aprendí a trabajar con las propiedades flotante y de posición, a crear texto que envuelve imágenes
Tarea práctica: crear una página web y colocar elementos en ella usando propiedades flotantes y de posición

Día cuatro

Creando una página de blog

Creando una página de blog
Propiedades de posicionamiento de elementos para colocar menús y publicaciones en la página.
Etiquetas semánticas

Resultado de la lección: Aprendí a trabajar con etiquetas semánticas usando propiedades de posicionamiento, coloqué los componentes principales del blog en la página.
Tarea práctica: crear una página de blog usando etiquetas semánticas

3er módulo

El primer día

Pseudoclases y trabajo con imágenes en CSS.

Usar imágenes de fondo en una página web
Pseudoclases flotantes, activas y visitadas
Cambiar el estilo de un elemento al activar una pseudoclase en otro elemento
Creando patrones de fondo

Resultado de la lección: aprendió a trabajar con imágenes de fondo, estudió las propiedades para trabajar con imágenes
Tarea práctica: agregue cambios externos a los elementos cuando pasa el cursor del mouse sobre ellos.

Segundo día

FlexBox en CSS

Trabajar con el diseño de caja flexible CSS
Propiedades para alinear elementos en un contenedor Flex
Juego educativo flex-rana

Resultado de la lección: aprendió a trabajar con la tecnología Flex para crear diseños flexibles, completó el juego flex-frog para consolidar el material cubierto
Tarea práctica: completa el juego flex-frog para consolidar el material cubierto

Día tres

Desarrollo del sitio web de la tienda de zapatillas. Parte 1

Crear una estructura de sitio con modelos.
Conexión a un sitio de fuentes
Propiedades del encabezado del sitio y sus elementos secundarios.
Funciones para crear un fondo de página degradado

Resultado de la lección: Creó una estructura de sitio con modelos, conectó la fuente al sitio.
Tarea práctica: seleccione y descargue imágenes con modelos, agregue una sombra al encabezado del sitio

Día cuatro

Desarrollo del sitio web de la tienda de zapatillas. Parte 2

Completando el trabajo en el sitio.
Creando un bloque con tarjetas
Cambiar el comportamiento de los elementos al pasar el cursor sobre ellos
Tecnología FlexBox para posicionamiento de tarjetas

Resultado de la lección: creó un sitio web con tarjetas modelo
Tarea práctica: agregar una galería usando la tecnología FlexBo

4to módulo

El primer día

Diseño de cuadrícula en CSS

Introducción al sistema Grid
Crear una página usando una cuadrícula
Propiedades para trabajo avanzado con celdas de Grid

Resultado de la lección: Estudió el sistema de diseño bidimensional (CSS Grid Layout), aprendió a colocar las celdas de la cuadrícula en la página.
Tarea práctica: Completa el juego del jardín de cuadrículas para consolidar el material cubierto.

Segundo día

Pseudoelementos antes y después

Pseudoelementos antes y después.
Combinando una imagen con texto dentro.
Elementos con pseudoelementos de primera letra y primera línea

Resultado de la lección: Aprendí a trabajar con pseudoelementos antes, después, primera letra y primera línea, combiné pseudoelementos con diferentes propiedades para crear hermosos bloques.
Tarea práctica: cree un elemento utilizando los pseudoelementos posteriores y anteriores.

Día tres

Animaciones y transformaciones en CSS.

transformaciones CSS
Aplicar transformaciones a elementos HTML
Crear bloques animados en CSS
Aplicar funciones de sincronización a fotogramas clave

Resultado de la lección: Aprendí a trabajar con transformaciones en CSS, crear infinitas animaciones en CSS.
Tarea práctica: cree un botón, agréguele transformaciones cuando esté suspendido.

Día cuatro

Practica la creación de animaciones en CSS.

Aplicación de la animación y la transformación en la práctica.
Creando un sistema orbital animado de planetas en nuestro sistema solar.

Resultado de la lección: Creó una página que demuestra el movimiento de los planetas en el sistema solar y un fondo animado.
Tarea práctica: crear un sistema orbital animado de planetas en nuestro sistema solar.

5to módulo

El primer día

Creación de una tienda en línea.

¿Qué es una tienda en línea?
Crear una estructura de proyecto
Configuración del proyecto

Resultado de la lección: Empecé a crear una tienda online.
Tarea práctica: seleccione los iconos que se utilizarán en el sitio.

Segundo día

Crear un encabezado de tienda en línea

Variables en CSS y cómo usarlas
Conexión de fuentes a una hoja de estilo externa usando la función URL
Encabezado de tienda online, su estilo.
Agregar funcionalidad de menú adicional utilizando el lenguaje de programación JavaScript

Resultado de la lección: configuré variables globales en el proyecto, creé un encabezado multifuncional con un menú, conecté un archivo Javascript para agregar funcionalidad de menú adicional.
Tarea práctica: agregar cambiar el fondo del encabezado del sitio al desplazarse por la página

Día tres

Creando la primera pantalla con el producto principal.

Estructura HTML del bloque de presentación.
Sistema de rejilla para una correcta visualización de los elementos.
Valores de propiedad CSS usando variables
Elementos de estilo

Resultado de la lección: Creé la parte de presentación de la tienda online.
Tarea práctica: crear una presentación parte de una tienda en línea

Día cuatro

Creando un bloque con productos populares

Marcado HTML para un bloque con productos.
Estilo para tarjetas de productos
Rejilla para posicionamiento de tarjetas.
Estilización de un bloque con la historia de la empresa.

Resultado de la lección: Creó un bloque con productos populares y la historia de la empresa.
Tarea práctica: agregar relleno externo e interno a los elementos del bloque con la historia de la empresa

6to módulo

El primer día

Creación de un control deslizante con opiniones de clientes.

Bloque de revisión
Formas de crear contenedores desplazables en CSS
propiedades de comportamiento de desplazamiento y tipo de ajuste de desplazamiento
Puntos de anclaje deslizantes

Resultado de la lección: Creé un control deslizante con reseñas de clientes usando HTML y CSS.

Tarea práctica: agregue puntos de anclaje a las secciones principales del sitio y cree un desplazamiento automático a estos bloques cuando haga clic en el botón.

Segundo día

Trabajar con formularios y contenido de vídeo.

Etiquetas HTML5 para insertar contenido de video en un sitio web
Aplicar estilo a una sección con un videoclip en pantalla completa
Etiqueta de campo de entrada - y sus atributos
Etiqueta para crear formularios en HTML
Aplicar estilo a un elemento de entrada de texto

Resultado de la lección: Creé una sección con un video y un bloque con un formulario de comentarios.

Tarea práctica: crear un formulario de comentarios, diseñar los elementos

Día tres

Crear una página de galería separada

Cuadrícula personalizada para una página de galería
Agregar bloques con imágenes a la cuadrícula
Pseudoelementos y diversas animaciones de bloques con imágenes.
Filtros CSS para mejorar el diseño visual de la galería.

Resultado de la lección: creó una página separada con una galería de fotos

Tarea práctica: utilizando diferentes tipos de posicionamiento para crear un fondo translúcido inusual.

Día cuatro

Adaptación de contenidos para todo tipo de dispositivos.

Formas de adaptar contenidos para dispositivos móviles
Consultas de medios para aplicar diferentes propiedades al mismo elemento en dispositivos con diferentes anchos
Reglas CSS para tres tipos de dispositivos

Resultado de la lección: Adaptamos el sitio web para tabletas y teléfonos.

Tarea práctica: mediante consultas de medios, cambie los valores de propiedad de los elementos HTML para adaptar el contenido a todo tipo de dispositivos

7mo módulo

El primer día

Introducción al marco Tailwind SS.

¿Qué son los marcos y cómo aceleran el proceso de desarrollo del proyecto?
Instalación del marco y complementos CSS de Tailwind
Conceptos del marco CSS de Tailwind
Trabajar con tipografía y colores en Tailwind CSS

Resultado de la lección: Creó la primera página web utilizando el marco CSS Tailwind.
Tarea práctica: cree un bloque con texto, diseñe elementos usando clases de viento de cola.

Segundo día

Clases de Tailwind para crear un sitio web responsivo

Trabajar con clases de Tailwind para crear un sitio web responsivo
Clases para agregar efectos de desplazamiento y enfoque.
Clases para agregar sombras a elementos.
Clases para trabajar con tamaños de elementos.
Clases para trabajar con acolchado externo e interno de elementos.

Resultado de la lección: Creamos una página adaptable para todo tipo de dispositivos.
Tarea práctica: crear botones, agregar efectos al hacer clic en ellos usando las clases de Tailwind

Día tres

Diseño flexible de viento de cola.

Trabajar con el diseño Tailwind Flex
Clases para alinear elementos secundarios en un contenedor Flex
Crear una tarjeta con el precio de un producto
Crear indicadores de progreso
Trabajar con pseudoelementos en Tailwind CSS

Resultado de la lección: creó un contenedor Flex con tarjetas de productos
Tarea práctica: crear una tarjeta con una descripción del producto.

Día cuatro

Sistema de cuadrícula en Tailwind CSS.

Propiedades de tramo de fila y tramo de columna
Propiedades para llenar automáticamente espacios vacíos en un Grid con elementos
Página del equipo del proyecto

Resultado de la lección: Creó una página de equipo de proyecto adaptable utilizando el sistema Tailwind Grid.
Tarea práctica: agregar efectos a los elementos de la cuadrícula al pasar el cursor sobre ellos

8vo módulo

El primer día

Configuración del proyecto

Configuración del proyecto del sitio de la aplicación "Administrar"
Crear un encabezado de sitio web responsivo
Crear un menú de hamburguesas usando JavaScript
Crear una sección de presentación con un producto.

Resultado de la lección: creó la primera pantalla del sitio web de la aplicación "Administrar"
Tarea práctica: agregue una imagen de fondo a la primera pantalla.

Segundo día

Crear una sección con una descripción de la aplicación.

Sección con descripción de la aplicación y sus ventajas.
Adapta el bloque creado para todo tipo de dispositivos
Sección con operación de aplicación.
Aplicar filtros Tailwind a una imagen

Resultado de la lección: creó dos secciones del sitio "Administrar"
Tarea práctica: crear una sección adicional con el historial de creación de la aplicación

Día tres

Crear una sección sobre el equipo del proyecto.

Sección sobre el equipo.
Control deslizante usando Tailwind CSS y Javascript
Tarjetas de empleado

Resultado de la lección: creó una sección sobre el equipo del proyecto
Tarea práctica: crear una sección con un botón CTA

Día cuatro

Creando una sección con precios

Crear una sección con precios
Crear un pie de página web responsivo
Terminar el proyecto

Resultado de la lección: Completé el trabajo en el proyecto, creé el sitio web para la aplicación "Administrar".
Tarea práctica: finalizar el proyecto, poner el sitio en Internet

9no módulo

El primer día

Empieza a trabajar en tu propio proyecto.

Seleccione un tema de proyecto
Comienza a desarrollar tu propio sitio web

Resultado de la lección: Se ha elegido un tema y se ha comenzado a trabajar en el proyecto.
Tarea práctica: Trabajo de proyecto

Segundo día

Trabajo continuo en el proyecto.

Continuar trabajando en el proyecto.
Corregir errores en el proyecto.

Resultado de la lección: creación de páginas web
Tarea práctica: Trabajo de proyecto

Día tres

Elaboración de una presentación de proyecto.

Describe tu proyecto
Crea una plantilla de presentación para defender tu proyecto
Terminar el proyecto
Poner el sitio en Internet.

Resultado de la lección: preparó una presentación y ensayó el discurso.
Tarea práctica: preparar una presentación del proyecto, publicar el sitio web en Internet.

Día cuatro

Protección del proyecto.

Finalizar la presentación del proyecto.
Defiende tu proyecto frente a una audiencia

Resultado de la lección: Completamos el trabajo en el proyecto del curso y lo presentamos a los padres.
Tarea práctica: finalizar el proyecto, preparar y realizar una presentación.

Nube

Miscelánea

Clasificación

vistas

Comentarios