Робота з сайтом repl.it

Під час дистанційного навчання виконання завдань з програмування в Python, а також робота з Web технологіями (11 клас) буде вестись за допомогою сайту https://repl.it/

Після переходу на сайт бачимо головну сторінку і тиснемо Sign up (у випадку, коли ви вже зареєстровані, то Log in)

Вводимо бажане ім’я користувача (англійською!) та адресу електронної пошти (бажано Gmail, в цьому випадку в подальшому щоб залогінитись вам буде достатньо натиснути на значок Google) і бажаний пароль.

Після реєстрації переходимо в Gmail (чи інший поштовий сервіс, якщо ви використали іншу поштову службу) та підтверджуємо адресу електронної пошти натиснувши Complette Verification, або посилання нижче.

Далі для початку роботи вам потрібно буде створити новий repl (проект) натиснувши +New repl

Обрати мову програмування (для 7 – 10 класів це буде Python).

Для 11 класу це буде HTML, CSS, JS.

Даємо їм’я нашому проекту (раджу давати такі імена, щоб ви могли орієнтуватися в своїх проектах, коли їх стане більше ніж декілька).

Далі нам відкриється вікно в якому ми пишемо код (текст програми).

Щоб подивитись результат виконання програми достатньо натиснути кнопку “Play” (зеленого кольору в правому нижньому кутку, впевнений, що ви вже з досвіду користування музичними плеєрами здогадалися для чого вона)

Натиснувши, отримуємо результат виконання програми 😉

Повернутись до коду програми можна натиснувши на кнопку Code внизу екрану.

Одинадцятикласники будуть працювати в двох, а потім і трьох файлах (html, css та пізніше і в js). Перемикатись між ними можна натиснувши вкладку Files в правому верхньому кутку

Вже знайомий нам HTML (сайт вже дає нам базову розмітку як це ми робили натискаючи “! + Tab” в VS Code. До того, як ми перейдемо до вивчення JavaScript тег script в кінці сторінки можна прибрати, або залишити його так, щоб він був в самому кінці перед закриваючим тегом body. Додаємо до базової розмітки свою (на скріншоті це заголовок першого рівня Hello!), тиснемо “Play” (зелена кнопочка)

І отримуємо результат!

Переключившись на файл CSS

Можемо почати стилізувати свою веб сторінку (наприклад, пофарбуємо заголовок в червоний колір)

Знову тиснемо “Play” (зелена кнопочка) і бачимо, що все працює!

Перемикатись між кодом і результатом його виконання можна по кнопкам внизу: Code (ваші html, css ) та Web (результат). Про вкладку Console поговоримо при вивченні JavaScript.

Таким чином, вивчення програмування та веб технологій не вимагає встановлення спеціального програмного забезпечення. Достатньо всього лиш смартфону з доступом до мережі Інтернет та браузеру (працездатність сайту протестована мною в браузерах Google Crome, який є у більшості з вас, Mozzila Firefox та Opera). Якщо є можливість працювати не з смартфоном, а з комп’ютером чи ноутбуком, то це буде значно зручніше, але це вплине лише на зручність і не є необхідною умовою.

Бажаю успіхів у навчанні!