Создание сайтов на языках HTML, CSS, JavaScript

Веб-разработка – одно из самых востребованных направлений программирования. Какую бы профессию ни выбрал ваш ребенок в будущем, умение создавать сайты точно пригодится в будущем!

На этом курсе ученики освоят работу с HTML, CSS, языком программирования JavaScript и популярным фреймворком jQuery. Ребята научатся верстать веб-страницы и освоят азы веб-дизайна. В результате подростки подготовят свои индивидуальные digital-проекты — полноценный сайт, размещённый на хостинге, и веб-приложение с адаптивной вёрсткой.

Цели курса “Создание сайтов для детей”:

  1. Познакомиться с особенностями построения сайтов на основе HTML5.
  2. Научиться создавать собственные стили СSS и пользоваться популярными CSS-фреймворками.
  3. Овладеть основами программирования на языке JavaScript, позволяющими оживить сайт.

Под руководством опытного преподавателя ученики разработают сайт о любимой игре, супергерое, музыканте или о чем угодно.

Программа курса

1 модуль. Программирование HTML и CSS

Курс будет полезен тем, кто хочет изучить основы веб-разработки. Вы освоите основные понятия и получите представление о том, как устроены сайты и как они разрабатываются. На занятиях мы познакомимся с языком гипертекстовой разметки HTML как с основой любого сайта и добавим веб-страницам индивидуальности с таблицами стилей CSS.

Результат занятий:

  • Создадим свои первые веб-страницы с надписями, таблицами, картинками и ссылками;
  • Научимся управлять как текстом, так и отдельными элементами страницы, создадим анимацию;
  • Узнаем, как сделать сайт более удобным для экранов разной ширины;
  • По итогу курса разработаем небольшой сайт и разместим его в сети интернет.


Методический план модуля:

  • Знакомство с HTML;
  • Форматирование текста веб‐страницы;
  • Списки, графика и ссылки;
  • Разметка веб‐страниц с помощью таблиц;
  • Основы CSS;
  • Управление шрифтом;
  • Управление элементом;
  • Дополнительные свойства CSS;
  • Трансформация элементов;
  • Анимация элементов;
  • Адаптивная верстка;
  • Размещение сайта в сети.

2 модуль. Программирование JavaScript

Вы освоите основные понятия и типы данных, и научитесь писать алгоритмы для решения поставленных задач и реализовывать их на языке программирования JavaScript.

Данный курс будет полезен не только тем, кто хочет научиться писать свои скрипты на языке JavaScript, но и тем, кто начинает изучать программирование.

На занятиях мы познакомимся со всеми основными конструкциями языка JavaScript и разберем практические задачи, которые решаются с их помощью.

Результат занятий:

  • Создадим свои первые скрипты как для выполнения простых арифметических операций, так и для более сложных задач.
  • Научимся использовать различные типы данных, познакомимся с сортировкой.
  • Разберемся с такими понятиями, как алгоритм, цикл и ветвление.
  • Узнаем, как сделать сайт более интерактивным, добавив реакции на определенные действия в браузере.
  • По итогу курса мы разработаем небольшое браузерное приложение для решения уравнения и визуализации его в виде графика.

Пример занятия:

На занятии знакомимся с браузерными инструментами разработчика и отладкой программы на простых примерах. Затем, с помощью полученных знаний, создаем функцию для автоматического расчета координаты при равноускоренном движении прямо в браузере, а также функцию для добавления своей подписи к письму.

Методический план модуля:

  • Знакомство с JavaScript;
  • Условия в JavaScript;
  • Циклы в JavaScript;
  • Массивы;
  • Объекты;
  • JQuery;
  • Математические функции;
  • Сортировки;
  • Множества и сравнение массивов;
  • Библиотека Vue.js;
  • События и переходы;
  • Рекурсия.

3 модулью. Библиотека React — JavaScript

Модуль “Веб Программирование 3 – ReactJS” познакомит учеников с одной из самых популярных JavaScript-библиотек, разработчиком которой является компания Facebook. Данная библиотека используется для упрощенной разработки высокоскоростных одностраничных сайтов, целью которой является создание как небольших веб-приложений, так и больших проектов со сложной структурой.

На занятиях ребята приобретут навыки:

  • работы через командную строку;
  • создания интерактивных пользовательских интерфейсов;
  • разработки гибких веб-сайтов;
  • более удобного распределения блоков сайта на логические части.

По завершении модуля ученики будут знать, как с помощью ReactJS динамически изменять страницу, используя в одном файле одновременно HTML и JavaScript, методы жизненного цикла, позволяющие разработчику в нужный момент запускать на сайте разные процессы, включая анимацию, переходы, всплывающие окна и другие особенности данной библиотеки.

Пример занятия:

Ученики создают информационные блоки, грамотно распределяя их на сайте. Позже осуществляют динамический переход по вкладкам.

Методический план модуля:

  • ReactJS. Создание первого веб-приложения;
  • Создание компонентов;
  • Props;
  • Классовые компоненты. State;
  • CSS-модули;
  • CSS Grid;
  • Route;
  • NavLink;
  • Работа с данными ч.1;
  • Работа с данными ч.2;
  • Подготовка к защите проекта на ReactJS;
  • Защита проекта на ReactJS.