Створення сайтів на мовах 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.