Веб-розробка – одне з найбільш затребуваних напрямків програмування. Яку б професію не вибрала ваша дитина в майбутньому, вміння створювати сайти точно стане в нагоді в майбутньому!
На цьому курсі учні освоять роботу з HTML, CSS, мовою програмування JavaScript і популярним фреймворком jQuery. Діти навчаться верстати веб-сторінки і освоять ази веб-дизайну. В результаті підлітки підготують свої індивідуальні digital-проекти – повноцінний сайт, розміщений на хостингу, і веб-додаток з адаптивною версткою.
Цілі курсу “Створення сайтів для дітей”:
- Познайомитися з особливостями побудови сайтів на основі HTML5.
- Навчитися створювати власні стилі СSS і користуватися популярними CSS-фреймворками.
- Оволодіти основами програмування на мові 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.