🧠 Як мислить розробник

Коли ти починаєш вивчати фронтенд або будь-який напрям у розробці, перша помилка — думати, що головне це запам’ятати команди. Насправді головне — **навчитись правильно мислити**. Програміст — це не той, хто знає всі теги, а той, хто **вміє вирішувати задачі логічно та спокійно**.

🔍 Як підходити до задач

Кожне завдання — це наче міні-пригода. І якщо не поспішати, а йти крок за кроком, — результат буде. Не спіши писати код одразу. Ось що варто робити:

• 📖 Прочитай умову 2–3 рази. Уважно. Не здогадуйся — зрозумій.
• 🧠 Уяви кінцевий результат. Що має бути? Який вигляд? Як поводитись?
• 🔨 Розбий задачу на прості частини: що за чим треба зробити.
• ✍️ Намалюй схему або запиши словами, що треба виконати.
• 🧪 Пройди подумки “а що буде, якщо…”. І тільки тоді починай кодувати.

Так ти уникнеш 90% тупиків і не витратиш час на дурницю.

🧠 Що таке алгоритмічне мислення?

Алгоритмічне мислення — це **вміння будувати чітку послідовність дій**, яка приводить до результату. Комп’ютер — не людина. Йому треба все розказати максимально точно.

Наприклад, якщо тобі сказати “зроби бутерброд” — ти сам додумаєш, що спочатку треба взяти хліб, потім ніж, дістати масло і т.д. А комп’ютеру треба сказати _кожен крок_: “Відкрити холодильник → дістати масло → взяти ніж → намазати хліб...” — інакше він нічого не зробить.

Так і в коді: потрібно навчитись **мислити як машина**, але при цьому бачити всю картину як людина.

💡 Практичні поради, як тренувати мислення

• 🧩 Вирішуй логічні задачі або головоломки (є сайти типу codewars.com)
• 📋 Пробуй написати алгоритм словами — перед тим, як кодити.
• 👂 Поясни задачу вголос — навіть самому собі або другу.
• 🪞 Час від часу повернись до старих задач і проаналізуй: “а чи можна було краще?”
• 📘 Вчи чужий код — але завжди пояснюй собі, **чому** щось зроблено саме так.

🔎 Як правильно гуглити (шпаргалка)

Багато хто соромиться гуглити. А дарма. Гуглити — це професійний навик. І він потрібен щодня, бо ніхто не пам’ятає все.

• 🌐 Шукай **англійською** — це відкриває 100x більше інформації.
• 🔑 Вводь ключові слова: center div css, onclick change background js
• 💬 Помилки шукай у лапках: "undefined is not a function"
• 📘 Додавай сайт: site:stackoverflow.com або site:developer.mozilla.org
• 📄 Читай не тільки перший результат — іноді найцінніше глибше.

👨‍💻 Головне — **не соромитись шукати**. Шукай — і буде знання. Знання — і буде результат.

🪜 І ще трохи порад

• 🔄 Якщо щось не виходить — перепиши задачу і подивись на неї іншими очима.
• ⏸️ Зроби паузу, встань, подивись вбік — і повернись свіжим.
• ✅ Розв’язав? Збережи рішення, запиши, поясни. Так воно стане твоїм.

🔐 Запам’ятай: не треба бути генієм, треба бути послідовним. Програміст — це не “той, хто знає все”, а той, хто **вміє знайти і зрозуміти**.

🐧 Linux: Основи, Архітектура та Практичне Використання

Linux — це потужна, гнучка та безкоштовна операційна система з відкритим кодом. Вона використовується на серверах, ноутбуках, смартфонах, маршрутизаторах і навіть у холодильниках. Головна її сила — стабільність, контроль та спільнота користувачів і розробників.

📐 Архітектура Linux

1. Ядро (Kernel) — серце системи. Відповідає за керування апаратними ресурсами: процесором, памʼяттю, пристроями вводу/виводу.

2. Системні виклики (System Calls) — інтерфейс між програмами користувача і ядром. Наприклад, коли відкривається файл або створюється процес.

3. Оболонка (Shell) — текстовий інтерфейс користувача. Дає змогу вводити команди (наприклад Bash, Zsh).

4. Утиліти (Utilities) — маленькі програми (як `ls`, `cd`, `grep`), що виконують специфічні завдання.

5. Додатки (Applications) — програми, які встановлює користувач: браузери, редактори коду, тощо.

🖥️ Інтерфейси: CLI vs GUI

CLI (Command Line Interface) — це термінал. Потужний, швидкий, але страшний для новачків. Важливий для глибокого контролю.

GUI (Graphical User Interface) — графічний інтерфейс, як у Windows або macOS. Наприклад, GNOME, KDE, XFCE — це графічні оболонки.

📦 Як інсталювати Linux

Щоб встановити Linux, спершу завантаж ISO-образ (наприклад, Ubuntu, Mint, Fedora). Потім запиши його на флешку через програму Rufus або Etcher.

1. 🔧 Завантаж дистрибутив з офіційного сайту.
2. 💾 Запиши образ на флешку.
3. 🔁 Перезавантаж комп'ютер і завантажся з флешки.
4. 📋 Обери варіант інсталяції: поруч з Windows або повністю видалити все.

Рекомендую для новачків: Linux Mint або Ubuntu.

⌨️ Основи командного рядка Unix/Linux

• ls — переглянути вміст папки
• cd — перейти до папки
• pwd — показати шлях до поточної директорії
• mkdir — створити папку
• rm — видалити файл
• cp — копіювати
• mv — перемістити/перейменувати
• man — довідка по команді

Приклад: mkdir test && cd test && touch file.txt

👥 Користувачі та групи

У Linux усе базується на правах доступу. Кожен файл належить користувачу та групі.

• whoami — показує, ким ти залогінений
• adduser імʼя — створити користувача
• usermod -aG група імʼя — додати користувача до групи
• groups — переглянути, у яких групах ти є

⚠️ Команда sudo дозволяє виконувати дії як адміністратор (root). Нею треба користуватись обережно!

⚙️ Процеси

У Linux кожна програма — це процес. Можна керувати ними:

• ps — список процесів
• top — оновлюваний список у реальному часі
• kill PID — завершити процес за ID
• & — запустити процес у фоновому режимі
• jobs, fg, bg — керування фоновими задачами

💾 Памʼять і управління

• free -h — скільки оперативки доступно
• vmstat — статистика використання памʼяті
• top, htop — контроль використання ресурсів
• swap — тимчасова памʼять, коли не вистачає RAM

🗃️ Файли та файлова система

У Linux усе — це файл. Навіть пристрої (наприклад, `/dev/sda`). Коренева директорія — /. Решта — її підкаталоги:

• /home — особисті папки користувачів
• /etc — конфігураційні файли
• /bin — основні команди
• /var — логи, зміст пошти, кеш
• /tmp — тимчасові файли

Права доступу: r — читання, w — запис, x — виконання. Команда chmod змінює їх.

🔧 Bash скрипти: автоматизація

Bash — оболонка, яку часто використовують для створення сценаріїв (script).

Приклад простого скрипту:

Збережи файл як hello.sh, зроби виконуваним: chmod +x hello.sh, і запусти: ./hello.sh.

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

🧠 Принципи філософії Linux

Linux дотримується принципів UNIX-філософії:

• ✅ "Усе є файл" — навіть пристрої, сокети, процеси, порти.
• ✅ "Роби одну річ, але добре" — кожна команда робить мінімум, але ефективно.
• ✅ "Команди мають бути комбінаційні" — команди з’єднуються пайпами:

ps aux | grep firefox

🔧 У цьому прикладі ps aux виводить процеси, а grep фільтрує їх.

📁 Глибше у файлову систему

Файлова система Linux схожа на перевернуте дерево:

/
                ├── bin      → Базові утиліти (ls, cat)
                ├── boot     → Завантажувач системи
                ├── dev      → Пристрої, як /dev/sda
                ├── etc      → Конфігураційні файли
                ├── home     → Домашні директорії (напр. /home/viktor)
                ├── lib      → Системні бібліотеки
                ├── media    → Зовнішні носії
                ├── proc     → Інфо про процеси
                ├── sys      → Інфо про ядро
                ├── tmp      → Тимчасові файли
                ├── usr      → Додаткові програми
                ├── var      → Змінні файли, логи

• ✅ /etc/passwd — інфо про користувачів
• ✅ /etc/shadow — зашифровані паролі

🧑‍💼 Користувачі та root

У Linux root — це головний адміністратор.

• sudo — дозволяє тимчасово діяти як root
• /etc/sudoers — визначає, хто має доступ до sudo

sudo adduser andrii
                sudo passwd andrii
                sudo usermod -aG sudo andrii

🔐 Права доступу

ls -l
                -rwxr-xr-- 1 viktor users 1234 сер 3 10:10 script.sh

• - — файл (d — директорія)
• rwx — власник: читання, запис, виконання
• r-x — група: читання, виконання
• r-- — інші: тільки читання

🔧 Зміна прав:

chmod 755 script.sh

📇 Пайпи та перенаправлення

ls -l /etc > config.txt
                cat config.txt | grep ssh

🧬 Процеси

• ps aux — перегляд процесів
• kill -9 PID — зупинити процес
• sleep 60 & — запуск у фоні
• jobs, fg, bg — фонові процеси

🧹 Bash змінні, умови, цикли

name="Viktor"
                echo "Привіт, $name!"
                
                if [ "$name" == "Viktor" ]; then
                  echo "Твоя система — крута!"
                fi
                
                for file in *.txt; do
                  echo "Файл: $file"
                done

⏲️ Cron: Автоматизація

crontab -e
                
                # хв год день_місяця місяць день_тижня команда
                0 3 * * * /home/viktor/backup.sh

💡 Встановлення програм

# Debian/Ubuntu/Mint
                sudo apt update
                sudo apt install git curl htop
                
                # Arch/Manjaro
                sudo pacman -S git curl
                
                # Fedora
                sudo dnf install git curl

💼 Менеджери пакетів

• apt — Debian-системи
• pacman — Arch
• snap, flatpak, AppImage — нові формати

💽 Монтування дисків

mount /dev/sdb1 /mnt/usb
                umount /mnt/usb

/etc/fstab — автоматичне монтування

📡 Мережа

ip a
                ping google.com
                traceroute google.com
                netstat -tuln
                ss -tuln

🧠 /etc/hosts — локальні псевдоніми для IP

🔍 Логи та журналювання

• /var/log/syslog — загальний лог
• /var/log/auth.log — лог доступу
• journalctl -xe, tail -f

🪡 Безпека: SELinux / AppArmor

SELinux — Fedora/Red Hat. AppArmor — Ubuntu/Debian. Контроль доступу до файлів, мереж, системних ресурсів.

🛠️ Корисні команди

• alias — псевдонім
• history — історія
• !! — повтор останньої
• df -h, du -sh * — простір на диску
• uptime, uname -a

✅ Висновок

Linux — це не просто ОС. Це інструмент повного контролю, свободи й надійності. Вчися, досліджуй, автоматизуй, і ти зможеш будувати все — від сайтів до датацентрів.

📌 На завершення

Linux — це світ, який відкриває величезні можливості. Спершу може здаватися складним, але варто трохи заглибитися — і ти зрозумієш, наскільки потужною може бути операційна система. Починай з малого: вчи команди, експериментуй у безпечному середовищі, створюй скрипти, працюй із правами. І поступово відкривай нові горизонти.

🔐 Завжди роби резервні копії. 📚 І читай офіційну документацію — це найкращий друг у світі Linux.

Термінал 🖥️ — ваш прямий шлях до управління комп’ютером

Термінал — це текстовий інтерфейс, який дозволяє взаємодіяти з операційною системою безпосередньо, вводячи команди з клавіатури. Це не просто «чорне вікно з текстом», а потужний інструмент, який дає змогу виконувати безліч завдань швидко і ефективно, обходячись без графічних елементів.

Для початківців робота в терміналі може здатися складною, але саме вона відкриває глибоке розуміння того, як функціонує комп’ютер. Ви отримуєте можливість керувати файлами, папками, процесами, програмами, мережевими з’єднаннями і навіть налаштовувати систему до дрібниць — усе це за допомогою текстових команд.

Що таке термінал і для чого він потрібен?

Коли ви працюєте в графічному інтерфейсі (GUI), багато дій відбувається «за кадром», у фоновому режимі. Термінал же дає прямий доступ до ядра системи через командний рядок (CLI). Це означає, що ви можете:

• Контролювати і налаштовувати систему на найнижчому рівні;
• Автоматизувати рутинні задачі за допомогою скриптів і команд;
• Швидко керувати файлами і каталогами без зайвих кліків мишкою;
• Отримувати докладну інформацію про стан системи;
• Встановлювати, оновлювати та видаляти програмне забезпечення;
• Працювати з віддаленими серверами через мережу;
• Налагоджувати й тестувати власні програми або вебсайти;
• Вирішувати технічні проблеми, які недоступні через графічні інструменти.

Це означає, що знання роботи з терміналом розширює ваші можливості і підвищує ефективність.

Основні компоненти роботи в терміналі

Після запуску терміналу ви бачите рядок запрошення (prompt), який зазвичай містить ім’я користувача, ім’я комп’ютера і поточний шлях. Це сигнал, що система готова прийняти команду.

Команда — це інструкція, яку ви вводите, щоб система виконала певну операцію. Команди можуть бути простими, наприклад, ls, що показує вміст папки, або складними з численними параметрами.

Кожна команда має власний синтаксис і опції (ключі), які можна комбінувати для більш точного виконання задачі.

Поширені базові команди, які варто знати кожному

• ls — перегляд вмісту каталогу (папки). Параметри можуть показувати деталі, приховані файли тощо.
• cd — зміна поточної папки. Наприклад, cd Документи переведе вас у папку «Документи».
• pwd — показує повний шлях до поточної папки.
• mkdir — створення нової папки.
• touch — створення порожнього файлу.
• cp — копіювання файлів або папок.
• mv — переміщення або перейменування файлів/папок.
• rm — видалення файлів або папок.
• cat — виведення вмісту файлу у термінал.
• man — виклик довідкової сторінки для команди.

Робота з файлами і папками — фундаментальна навичка 📂

Операційна система зберігає всі дані у вигляді файлів, які організовані у папках (директоріях). Через термінал ви можете не тільки переглядати структуру, а й створювати, переміщувати, копіювати та видаляти файли і папки.

Наприклад, щоб створити нову папку «Проекти», потрібно ввести:

mkdir Проекти

Щоб перейти в неї:

cd Проекти

Щоб побачити, що в папці, використовуйте команду ls. Якщо папка порожня, ви не побачите нічого.

Щоб створити порожній текстовий файл:

touch notes.txt

Щоб переглянути його вміст (навіть якщо файл порожній), використовуйте:

cat notes.txt

Видалення файлу:

rm notes.txt

Видалення папки разом з усім вмістом (будь ласка, обережно!):

rm -r Проекти

Різниця між GUI та CLI: чому варто знати обидва? 🤝

GUI (Graphical User Interface) — це інтерфейс, який базується на візуальних елементах: кнопках, вікнах, меню. Це зручно для початківців і для багатьох повсякденних задач.

CLI (Command Line Interface) — це текстовий інтерфейс, де все відбувається через введення команд. CLI надає більше можливостей для контролю, автоматизації, роботи на віддалених машинах, а також кращу продуктивність для досвідчених користувачів.

Обидва інтерфейси взаємодоповнюють один одного. Розуміння CLI допоможе вам стати більш універсальним і глибоко розуміти, що відбувається «під капотом» операційної системи.

Практичні поради для початківців 🛠️

• Починайте з простих команд. Не намагайтесь одразу освоїти все. Вивчайте по одній команді в день.
• Використовуйте man та --help. Вони допоможуть дізнатись, як правильно користуватись командами. Наприклад, man ls або ls --help.
• Не запускайте команди, якщо не впевнені у їхній дії. Особливо з командами видалення rm або адміністраторськими правами.
• Створіть окремий робочий каталог для експериментів. Це допоможе уникнути втрати важливих даних.
• Регулярно практикуйтесь. Краще кожного дня по 10 хвилин, ніж один раз на місяць по 3 години.
• Зберігайте власні конспекти та приклади команд. Це допоможе швидше засвоїти матеріал і повернутися до нього пізніше.

Автоматизація та скрипти

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

Це дасть вам значну економію часу і дозволить підвищити продуктивність праці.

Висновок

Термінал — це не просто інструмент для системних адміністраторів чи програмістів. Це універсальний засіб, що дає кожному користувачу можливість глибоко і ефективно керувати своїм комп’ютером. Освоєння терміналу — це інвестиція у ваші навички, які відкриють безліч нових можливостей у світі IT.

У цьому розділі ви можете зберігати власні конспекти, фотографії екрану, записи команд та пояснення, щоб закріпити знання і зробити навчання максимально продуктивним.

Git та GitHub 🧠

Git — це ваш головний інструмент, якщо ви хочете не просто писати код, а **працювати професійно**. Уявіть, що ви будівельник. Кожен цвях, який ви вбиваєте — це зміна в проєкті. Git фіксує кожен цвях, кожен поворот, і якщо будинок трісне — ви можете повернутись і побачити, що пішло не так. Git — це система контролю версій: вона запам’ятовує всі зміни, дозволяє працювати в команді, розвивати проєкт крок за кроком і не боятись помилок.

GitHub — це не просто «сайт для коду». Це світова платформа, де розробники діляться кодом, працюють над спільними проєктами, публікують бібліотеки, і навіть будують великі продукти, які змінюють світ. Ви можете створити приватні репозиторії для себе, або відкриті — щоб вчитися у спільноти.

📦 Репозиторій: ваш цифровий сейф

Кожен репозиторій — це повноцінний проєкт. Тут зберігаються:

• вихідні файли (код, стилі, шаблони);
• історія змін (коміти, гілки, теги);
• файли конфігурацій (.gitignore, README.md);
• підключення до GitHub (віддалений репозиторій);
• структура для командної роботи (issue, pull request, гілки).

⚙️ Git на практиці: щоденна рутина програміста

Уявімо, ви створюєте сайт. День перший — ви пишете HTML. День другий — додаєте CSS. День третій — змінюєте структуру. Git дозволяє повернутись до «Дня першого» будь-коли.

Цикл виглядає так:

• git init — ви ініціалізуєте репозиторій.
• git add . — додаєте зміни (усі файли) в "стейдж".
• git commit -m "Створено базовий HTML" — фіксуєте стан.
• git push — відправляєте на GitHub.

Кожен коміт — це як точка збереження в грі 🎮. Якщо все полетить — можна «завантажити» стабільну версію.

🌿 Гілки — паралельні реальності

Уявіть, що у вас проєкт з головною гілкою main. Але вам треба зробити редизайн. Не чіпаючи main, ви створюєте гілку design-redo. Тут ви експериментуєте, тестуєте. І лише після перевірки — зливаєте з основною.

• git checkout -b нова-гілка — створити та перейти
• git merge ім’я-гілки — об’єднати з основною
• git branch -d — видалити гілку після злиття

Таке ізольоване тестування — основа безпечної розробки. У великій команді кожен працює в своїй гілці: фронтендер, бекендер, дизайнер. І всі приєднуються лише після рев’ю.

🤝 Pull request — контроль і співпраця

Коли хтось закінчив роботу в гілці, він не зливає все одразу. Він створює pull request — запит на об’єднання. Інші учасники можуть:

• переглянути код
• залишити коментарі
• перевірити, чи все працює
• схвалити або відхилити злиття

Це не бюрократія — це контроль якості. Ви не допускаєте сирий або небезпечний код в основну гілку. І що головне — все публічне. Ви бачите, як хтось навчився, або де зробив помилку. Це навчання на практиці.

🚨 Конфлікти в Git: що це і як не боятися

Конфлікт — це коли двоє змінюють один і той самий рядок у файлі. Git не знає, чию версію обрати. Тоді вам доведеться вручну обрати, яка частина коду має залишитись.

<<<<<<< HEAD
ваша зміна
=======
зміна іншого учасника
>>>>>>> гілка
  

Це виглядає страшно, але насправді просто: ви обираєте правильний варіант і зберігаєте файл. Після чого комітуєте знову.

📂 .gitignore: захищай своє середовище

У Git не варто додавати все підряд. Наприклад, node_modules/ — це важкий каталог, що генерується автоматично. Також не слід викладати .env (паролі, ключі). Для цього існує .gitignore:

node_modules/
.env
.idea/
*.log
  

Так ви захищаєте себе, команду і конфіденційність.

🌐 Публікація сайту через GitHub Pages

GitHub дозволяє хостити сайти прямо з репозиторію. Це безкоштовно!

1. Створіть репозиторій.
2. Закиньте туди HTML/CSS/JS.
3. У вкладці «Pages» в налаштуваннях увімкніть GitHub Pages.
4. Отримаєте адресу типу: https://вашнік.github.io/назва

🧠 Git як інструмент мислення

Git дисциплінує. Ви починаєте думати «структурно»: логічно описуєте зміни, плануєте гілки, слідкуєте за чистотою історії. Ви не просто пишете код — ви розвиваєте проєкт, крок за кроком, кожна дія має сенс.

І найголовніше — у вас зʼявляється впевненість. Коли є Git — немає страху зламати, втратити або помилитись. Є спокій і контроль.

📊 GitHub як ваше публічне портфоліо

Ваш профіль — це більше, ніж фото. Там видно:

• ваші проєкти;
• вашу активність;
• ваші коміти, гілки, pull requests;
• з ким ви працювали;
• ваші навички у реальних умовах.

Багато HR не питають "що ти знаєш" — вони заходять на GitHub і дивляться. Справжні навички — видно з історії репозиторіїв.

✅ Підсумок

Git — ваш щоденний інструмент, як молоток у столяра або скальпель у хірурга. Без нього — ви не розробник, а гравець у рулетку. З ним — ви стаєте впевненим, структурованим, професійним.

GitHub — це не просто сайт. Це місце, де ви зростаєте. Тут ваша історія — як CV. Ваші pull request-и — як проєкти у портфоліо. Ваші зірочки — це довіра.

І головне — це все безкоштовно. Тільки беріть і користуйтесь.

HTML 🧱 — Фундамент Вебу

HTML (HyperText Markup Language) — це мова гіпертекстової розмітки, яка використовується для створення структури вебсторінок. Якщо уявити сайт як будівлю, то HTML — це його каркас, стіни, кімнати. Без нього сайт не має форми, не має змісту і не існує в очах браузера.

Усі сайти, які ви відкривали: Google, Wikipedia, Facebook, YouTube — мають HTML як основу. І навіть якщо вони складні, з тисячами функцій, — все починається з одного: <html>.

💡 HTML сам по собі не “працює” — він не обробляє дані, не реагує на дії. Він **описує**, що має бути на сторінці. Іншими словами — він каже браузеру: "Ось заголовок. Ось абзац. Тут зображення. А ось форма." І браузер слухає.

📖 Що означає "мова розмітки"?

На відміну від мов програмування (типу Python чи JavaScript), HTML — це **мова розмітки**, тобто система тегів, які розмічають вміст. Тег — це спеціальна команда, яку ви пишете в кутових дужках <>. Наприклад:

• <h1> — заголовок першого рівня
• <p> — абзац
• <img> — зображення
• <a> — посилання
• <div> — контейнер

Теги **не відображаються на сторінці**, але вони кажуть браузеру, що і як потрібно показати. Це як директиви: “ось тут буде зображення”, “ось тут починається новий абзац”.

🧱 Як виглядає HTML-документ?

Кожен HTML-документ має **однакову структуру**:

<!DOCTYPE html>
<html lang="uk">
  <head>
    <meta charset="UTF-8">
    <title>Мій перший сайт</title>
  </head>
  <body>
    <h1>Привіт, світ!</h1>
    <p>Це мій перший документ на HTML.</p>
  </body>
</html>

🔍 Пояснення:

• <!DOCTYPE html> — це вказівка браузеру, що це документ HTML5
• <html> — кореневий елемент документа
• <head> — технічна частина (тут не відображається контент)
• <meta charset="UTF-8"> — вказує на кодування, щоб не було кракозябр
• <title> — назва, яка буде відображатись у вкладці браузера
• <body> — основна частина, видима користувачу

🧠 Важливі теги HTML

HTML має десятки тегів, але спочатку варто запам’ятати найосновніші:

• <h1> - <h6> — заголовки від найбільшого до найменшого
• <p> — параграф тексту
• <a href="..."> — гіперпосилання
• <img src="..." alt="..."> — зображення
• <ul>, <li> — списки (ul — маркований, ol — нумерований)
• <table>, <tr>, <td> — таблиці
• <form>, <input>, <textarea> — форми для введення
• <div> — блочний контейнер, універсальний
• <span> — стрічковий контейнер

💻 Як і де створити HTML?

HTML-файл можна створити в будь-якому текстовому редакторі:

• 📝 gedit — базовий редактор в Linux
• 🧠 Visual Studio Code — найпопулярніший серед розробників, має підсвічування синтаксису
• 📄 Notepad++ — легкий редактор для Windows
• 🌐 CodePen, JSFiddle, Replit — онлайн-редактори, які не потребують встановлення

1️⃣ Просто відкрий редактор, введи код HTML, збережи файл як index.html та відкрий його у браузері.

📱 Що таке адаптивність у HTML?

Сайт повинен виглядати добре не тільки на компʼютері, а й на телефоні. Для цього в <head> додається тег:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Це дозволяє сторінці масштабуватися під розміри екрана.

🔗 Як працює HTML з іншими технологіями?

HTML — це основа. Але щоб зробити сайт повноцінним, до нього додають:

• 🎨 CSS — для стилізації: кольори, шрифти, макет
• ⚙️ JavaScript — для динаміки: кнопки, анімації, перевірка форм
• 🔌 Фреймворки — Bootstrap (CSS), React (JavaScript), Vue, Angular
• 🖼️ SVG — векторна графіка в HTML

Все починається з HTML, і лише потім підключається усе інше.

🧪 Що варто знати новачку?

• Пишіть руками — це тренує памʼять і розуміння
• Тестуйте в браузері одразу після змін
• Використовуйте MDN Web Docs — офіційна документація з прикладами
• Не лякайтесь помилок — це шлях до розуміння
• Не поспішайте до JavaScript чи React, поки не відчуєте себе вільно з HTML та CSS

📚 Корисні ресурси:

• 📘 HTML5Book
• 🔧 CodePen — тестування коду
• 🎓 freeCodeCamp
• 📺 YouTube канали: "Фрілансер по життю", "WebDev Simplified", "The Net Ninja"

✅ Підсумок

HTML — це не просто “мова розмітки”. Це перша сходинка у вашій карʼєрі веброзробника. Навчившись HTML, ви отримаєте **силу створювати власні сайти**, навчальні проєкти, портфоліо та розуміти, як працює Інтернет.

🎯 Сьогодні ви напишете <h1>Привіт, світ!</h1>, а вже завтра знатимете, як створити повноцінну HTML-сторінку, яка працює на будь-якому пристрої. І з цього моменту ви вже не просто користувач Інтернету — ви творець.

🚀 Не зволікай. Відкрий редактор, напиши перший HTML-код і подивись, як народжується веб.

🎨 CSS — Мова стилів

CSS (Cascading Style Sheets) — це мова, яка керує виглядом веб-сторінок. Вона не змінює вміст сторінки, а лише визначає, як цей вміст має виглядати. Без CSS ваш сайт буде виглядати як проста чорна сторінка з текстом на білому фоні. 🖤

🔹 Навіщо потрібен CSS?

HTML надає структуру сторінки, а CSS — зовнішній вигляд. CSS дозволяє вам:

• Вибирати шрифти та кольори 🎨
• Створювати відступи між елементами та керувати їх розміщенням 📏
• Застосовувати стилі до різних екранів (телефони, планшети, ПК) 📱💻
• Додавати анімації та ефекти ✨

🔍 Що таке стилі? Види стилів

CSS дозволяє застосовувати стилі до елементів HTML. Існує три способи підключити CSS до веб-сторінки:

1. Вбудований стиль (Inline Style): Стиль застосовується безпосередньо до елемента в HTML.

<p style="color: blue; font-size: 20px;">Привіт, світ!</p>

2. Внутрішній стиль (Internal Style): Стиль визначається в самому HTML документі, в межах тегу <style>.

<style>
    p {
        color: red;
        font-size: 18px;
    }
</style>

3. Зовнішній стиль (External Style): Стиль зберігається в окремому файлі з розширенням .css, який підключається до HTML через тег <link>.

<link rel="stylesheet" href="styles.css">

⚙️ Як працює CSS?

CSS використовує селектора для вказівки, до яких елементів на сторінці застосовувати стилі. Потім визначаються властивості та їх значення.

селектор {
    властивість: значення;
}

Приклад:

h1 {
    color: green;
    font-size: 30px;
}

У цьому прикладі ми застосовуємо зелені кольори та збільшуємо шрифт для всіх заголовків рівня 1 (h1).

🏷️ Селектори в CSS

Селектори — це основа CSS, що визначають, до яких елементів будуть застосовуватися стилі. Ось кілька основних:

• * — універсальний селектор (вибирає всі елементи на сторінці)
• p — вибирає всі параграфи
• #id — вибирає елемент з певним id (унікальний елемент)
• .class — вибирає всі елементи з певним класом
• element1 element2 — вибирає елементи element2, які є нащадками елементів element1

🖋️ Властивості CSS

CSS має безліч властивостей, що дозволяють задавати стилі для елементів. Ось деякі з найпопулярніших:

• color — колір тексту (наприклад: color: red;)
• background-color — колір фону елемента
• font-size — розмір шрифту
• font-family — шрифт
• margin — зовнішній відступ
• padding — внутрішній відступ
• border — рамка
• width — ширина елемента
• height — висота елемента
• display — тип відображення елементів (наприклад: display: block;, display: inline;)

⚡ Flexbox — Модуль для розміщення елементів

Flexbox — це потужний спосіб вирівнювання елементів. Головний контейнер отримує властивість display: flex, і всі елементи всередині нього автоматично адаптуються під доступний простір.

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

З цими властивостями:

• justify-content: space-between; — вирівнює елементи по горизонталі з відстанями між ними.
• align-items: center; — вирівнює елементи по вертикалі по центру.

🧱 CSS Grid — Сітка для компоновки

Grid дозволяє розташувати елементи на сторінці у вигляді сітки з рядами та колонками. Це дуже потужний інструмент для розташування елементів на сторінці.

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

У цьому прикладі створюється сітка з 3 колонок, що займають рівну ширину (1fr для кожної). Властивість gap визначає відстань між елементами.

📱 Адаптивний дизайн та медіа-запити

Адаптивність важлива, щоб сайт коректно відображався на будь-якому пристрої. Для цього використовуються медіа-запити (media queries), які змінюють стилі в залежності від ширини екрану.

@media (max-width: 600px) {
    body {
        font-size: 14px;
    }
    }

Цей код змінює розмір шрифта на менший, якщо ширина екрану менша за 600px (наприклад, на мобільних телефонах).

✨ Псевдокласи та псевдоелементи

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

• :hover — стиль для елемента при наведенні миші
• :first-child — вибір першого елемента в батьківському контейнері
• ::before, ::after — додавання контенту перед або після елемента

📚 Поради для вивчення CSS

• Практикуйтесь, адже це найкращий спосіб вивчити CSS!
• Використовуйте інструменти для розробників у браузері (F12), щоб бачити, як зміни в стилях впливають на сторінку.
• Читати офіційну документацію CSS — це дуже важливо для глибшого розуміння.
• Знайомтесь з фреймворками, такими як Bootstrap чи Tailwind CSS, для швидкого створення стильних веб-сайтів.

💡 Практичне завдання

Спробуйте створити просту веб-сторінку, використовуючи Flexbox для вирівнювання елементів та CSS Grid для створення сітки. Додайте адаптивність за допомогою медіа-запитів.

📌 Висновок

CSS є невід'ємною частиною кожного веб-проекту. Вивчення CSS дозволить вам створювати красиві, функціональні та адаптивні веб-сторінки. За допомогою таких інструментів, як Flexbox та CSS Grid, ви можете значно спростити розміщення елементів на сторінці, а медіа-запити дозволяють створювати сайти, які коректно виглядають на будь-якому пристрої.

Тепер, коли ви знаєте основи CSS, ви готові розпочати створення справжніх, стильних веб-сайтів. Не бійтеся експериментувати та практикуватися, адже це ключ до успіху! 🚀

JavaScript 🧠 — основи та основні поняття

JavaScript — це мова програмування, яка дозволяє створювати інтерактивні елементи на веб-сторінках. Уявіть, що ваш веб-сайт — це будинок, а JavaScript — це його мозок, який керує всіма рухами і подіями. Без JavaScript, ваш сайт буде лише статичним зображенням, але з ним ви можете робити речі, які змінюються в реальному часі, реагують на дії користувача і взаємодіють з іншими елементами сторінки!

JavaScript дозволяє додавати на сторінки різні види взаємодії, такі як кліки по кнопках, зміни кольорів, анімації, розкривні меню, інтерактивні форми, динамічні ефекти і навіть ігри. Уявіть, що без JavaScript на вашому сайті не буде можливості натискати кнопки, або ж будь-які зміни контенту на сторінці будуть неможливими! Веб-програмування без нього просто не існує!

1. Що таке скрипти? 💻

Скрипт — це невеликий фрагмент коду, який можна виконувати в браузері або на сервері. Коли ви додаєте JavaScript на свою сторінку, ви даєте йому інструкції щодо того, як має поводитись ваша веб-сторінка. Скрипти виконуються безпосередньо в браузері користувача і дозволяють зробити веб-сторінку живою та інтерактивною.

Скрипти допомагають виконувати такі дії:

• Реагувати на натискання кнопок 🔘 — створюючи інтерфейси з інтерактивними елементами.
• Змінювати текст, зображення або стилі 🖼️ — роблячи контент більш динамічним.
• Відправляти дані на сервер для обробки 📡 — зберігаючи дані користувача або відправляючи запити для отримання нової інформації.
• Створювати анімації і ефекти на веб-сторінці 💥 — додаючи плавні переходи, скролінг, зміни кольорів та інші візуальні ефекти.
• Додавати події, які запускаються в реальному часі, як, наприклад, відкриття модальних вікон, валідація форм та інше ⏱️.

2. Події в JavaScript 🕹️

Подія — це дія, яка відбувається на веб-сторінці (наприклад, натискання кнопки, прокручування, введення тексту в поле). Коли відбувається подія, JavaScript може виконати певну задачу — це називається обробкою події.

Ключові події:

• Подія click — коли користувач натискає на елемент (кнопка, зображення, посилання і т.д.).
• Подія mouseover — коли користувач наводить курсор миші на елемент.
• Подія keydown — коли користувач натискає клавішу на клавіатурі.
• Подія submit — коли користувач відправляє форму.
• Подія resize — коли змінюються розміри вікна браузера.

Щоб обробити події, вам потрібно прив'язати обробник подій до елемента. Ось приклад, як можна обробити подію click на кнопці:

document.getElementById("myButton").addEventListener("click", function() {
    alert("Кнопка натиснута!");
});
    

У цьому прикладі, коли користувач натискає на кнопку з id="myButton", спрацьовує подія "click", і з'являється повідомлення. Це лише один з багатьох варіантів того, як ви можете обробляти події на веб-сторінці!

3. DOM-маніпуляції 🌐

DOM (Document Object Model) — це структура документа HTML. Коли ви завантажуєте веб-сторінку в браузері, браузер перетворює HTML-код на модель, яка виглядає як дерево елементів. І з допомогою JavaScript ви можете маніпулювати цим деревом: додавати нові елементи, змінювати старі, видаляти або змінювати їхні атрибути.

Ось кілька корисних методів для роботи з DOM:

• getElementById() — знаходить елемент за його id.
• querySelector() — знаходить перший елемент, який відповідає селектору CSS.
• createElement() — створює новий HTML-елемент.
• appendChild() — додає новий елемент в кінець іншого елемента.
• innerHTML — дозволяє змінювати вміст елемента.

Ось як змінити текст у певному елементі на сторінці:

document.getElementById("heading").innerText = "Новий текст!";
    

А ось приклад, як додати новий елемент на сторінку:

let newDiv = document.createElement("div");
newDiv.innerHTML = "Це новий елемент!";
document.body.appendChild(newDiv);
    

4. Функції 🧑‍💻

Функції дозволяють вам упаковувати код, який можна викликати кілька разів. Вони дають можливість організувати ваш код, зробити його більш зрозумілим і зручним для повторного використання. Функція може мати вхідні параметри і виводити результат.

Ось приклад функції, яка виводить привітання:

function привітання(ім'я) {
    alert("Привіт, " + ім'я + "!");
}

привітання("Віктор");  // Викликає функцію з параметром
    

Ця функція приймає параметр ім'я і виводить повідомлення, що вітає користувача.

5. Змінні та типи даних 📊

У JavaScript є різні типи даних, такі як:

• Числа — можуть бути цілими або з плаваючою комою. Наприклад, let age = 25;.
• Рядки — текст, який обмежується лапками. Наприклад, let name = "John";.
• Логічні значення — можуть бути або true, або false.
• Масиви — колекції елементів. Наприклад, let colors = ["red", "green", "blue"];.
• Об'єкти — колекції пар "ключ-значення". Наприклад, let person = {name: "John", age: 25};.

Змінні дозволяють зберігати ці дані для подальшої роботи. Ви можете присвоїти значення змінній за допомогою оператора =.

let ім'я = "Віктор";
let вік = 30;
let активний = true;
    

6. Умовні оператори та цикли 🔁

У JavaScript ви можете використовувати умовні оператори, такі як if, щоб виконувати різні дії в залежності від умов. Це дає можливість "розгалужувати" виконання коду в різні варіанти.

let температура = 25;

if (температура > 30) {
    alert("Сьогодні дуже жарко!");
} else {
    alert("Температура нормальна.");
}
    

Цикли дозволяють повторювати дію кілька разів. Наприклад, цикл for допомагає вам повторювати певні операції для кожного елемента у списку:

for (let i = 0; i < 5; i++) {
    console.log("Ітерація №" + i);
}
    

7. Підсумки 📚

JavaScript — це основний інструмент для створення інтерактивних веб-сайтів. Його основні можливості включають маніпулювання DOM, обробку подій, роботу з масивами та об'єктами, а також можливість виконувати складні алгоритми. Ви можете створювати динамічні форми, перевіряти введені дані, працювати з API для взаємодії з іншими веб-сервісами і багато іншого.

JavaScript не обмежується лише веб-браузерами! З JavaScript ви можете також створювати серверні додатки за допомогою таких платформ, як Node.js, або навіть створювати мобільні додатки з використанням таких інструментів, як React Native.

Цей короткий огляд лише поверхнево описує можливості JavaScript. З часом, вивчаючи більше, ви зможете використовувати його для створення складних додатків, веб-інтерфейсів і навіть гри!

🖥️ Visual Studio Code — головний редактор для фронтенд-розробника

Якщо ти тільки починаєш свій шлях у веброзробці — важливо обрати зручне, просте та потужне середовище для написання коду. Visual Studio Code (VS Code) — саме те, що потрібно! Це безкоштовний, легкий, але надзвичайно функціональний редактор коду від компанії Microsoft. Він підтримує всі популярні мови програмування, зокрема HTML, CSS, JavaScript — усе, що тобі знадобиться на старті.

🔗 Завантажити програму:
👉 https://code.visualstudio.com/

⚙️ Як встановити VS Code (для Windows / Linux)

1. Перейди за посиланням вище та натисни кнопку "Download for..." (вона автоматично вибере твою ОС).
2. Скачай інсталятор і запусти його.
3. На етапі встановлення — постав ✅ на пункті “Add to PATH” (щоб можна було відкривати VS Code з терміналу).
4. Дочекайся завершення встановлення та відкрий редактор.

🌐 Як увімкнути українську мову

Базовий інтерфейс англійський, але можна легко встановити українську мову:

1. Натисни Ctrl + Shift + X або відкрий розділ "Extensions".
2. Введи в пошук: Ukrainian Language Pack.
3. Встанови розширення та перезавантаж VS Code (запропонує сам).
4. Після цього інтерфейс буде українською 🇺🇦

💡 Що таке розширення (Extensions)?

Розширення — це додаткові можливості редактора. Наприклад, підсвічування синтаксису, автодоповнення, форматування коду, підтримка фреймворків. Кожен розробник підлаштовує VS Code під свої потреби.

Обов'язкові на старті розширення:

• 📄 Live Server — запускає твій HTML у браузері в реальному часі
• 🎨 Prettier — автоматичне форматування коду
• 🔎 ESLint — допомагає писати чистий JavaScript-код

⌨️ Гарячі клавіші (швидкі дії)

Гарячі клавіші (hotkeys) — це комбінації клавіш, які пришвидшують роботу в редакторі. Ось найнеобхідніші для новачка:

• Ctrl + P — відкриття файлу за назвою
• Ctrl + ` — відкриття терміналу (всередині VS Code)
• Ctrl + Shift + P — командна палітра (виклик будь-яких дій)
• Ctrl + B — показати/сховати бокову панель з файлами
• Ctrl + S — зберегти зміни
• Ctrl + / — закоментувати рядок або виділення
• Alt + Shift + ↓ / ↑ — копіювати рядок вниз або вгору
• Ctrl + Z — 🔙 відмінити останню дію (undo)

🎯 Чому саме VS Code?

• ✅ Безкоштовний і постійно оновлюється
• ✅ Має вбудований термінал та інтеграцію з Git
• ✅ Легкий у використанні, навіть для тих, хто вперше бачить код
• ✅ Дуже гнучкий: ти сам вирішуєш, що додати, а що — вимкнути

🧑‍💻 Порада для новачка:
Після встановлення VS Code — створи простий HTML-файл і спробуй запустити його через розширення Live Server. Ти одразу побачиш результат своєї роботи в браузері — це мотивує!

🛠 Практика: Завдання для початківців у фронтенд-розробці

Практичні завдання — це найкращий спосіб закріпити знання і навчитися мислити як розробник. У цій секції ми зосередимося на базових аспектах, які допоможуть вам зробити перші кроки у світі веброзробки. Не бійтесь робити помилки — це нормальна частина навчання. Кожна помилка дає новий досвід і знання. 🚀

Ці два завдання — ваш старт. Після їх виконання ви зможете створити перший простий сайт, який вже матиме структуру та оформлення. Наступні кроки — вивчення JavaScript і інтерактивності, що робить сайти живими і зручними для користувача.

Пам’ятайте: головне — регулярність. Навіть 30 хвилин практики щодня дадуть більший результат, ніж разові марафони. Не бійтеся задавати питання і шукати допомогу, прогрес — це процес.

Успіхів вам у навчанні! 💪🔥

📚 Перевір засвоєний матеріал

🚀 Куди далі?

Якщо ти дійшов до цього етапу — 🎉 Вітаю! Ти вже подолав важливий поріг у вивченні фронтенду. Але шлях справжнього розробника тільки починається. Далі перед тобою відкривається цілий 🌍 світ можливостей, інструментів, технологій і викликів.

🧭 Наступні напрямки розвитку

• 🔧 Поглиблення в JavaScript: дізнайся більше про ES6+, замикання (closures), проміси, асинхронність та архітектурні патерни.
• 🧱 Фреймворки: обери один із популярних (наприклад React, Vue чи Svelte) і почни будувати реальні інтерфейси.
• 🎨 UI/UX дизайн: зрозумій логіку зручного інтерфейсу, вивчай Figma, аналізуй поведінку користувача.
• 🌐 API та бекенд: познайомся з REST API, Node.js або навіть Python Flask. Почни створювати повноцінні вебдодатки.
• 📦 Git та командна робота: навчись працювати з репозиторіями, pull-запитами, злиттям гілок та CI/CD.

🧠 Як мислить розробник?

Хороший розробник — це не просто технар. Це аналітик, стратег і дослідник водночас. Він:

• 📚 Постійно вчиться — нові стандарти, бібліотеки, фреймворки.
• 🔍 Вміє гуглити — шукає не просто “як зробити”, а “чому працює саме так”.
• 🧩 Розкладає задачу на менші кроки.
• 💬 Спілкується з командою, ділиться знаннями, не боїться питати.
• 🛠️ Не боїться помилок — кожен баг це нова точка зростання.

📈 Що ще варто прокачати?

• 📄 Створи портфоліо: опиши проєкти, додай посилання, зроби стильну сторінку з прикладами.
• 🗣 Вчи технічну англійську — документація, інтерв'ю, статті.
• 👥 Працюй у команді: приєднуйся до open source або зроби мінікоманду для власного стартапу.

🧪 Що спробувати наступним?

• 💼 Створити свій перший фріланс-профіль.
• 📅 Запланувати щоденну практику по 30 хв мінімум.
• 📘 Завести власний блог або нотатник зі знаннями.
• 🧠 Пройти інтерв’ю-симуляцію.

🖼 Уява — твоя суперсила

Закрий очі і уяви: ти відкриваєш VS Code, запускаєш свій проєкт, заходиш у термінал, пульсує консоль, Git фіксує нову гілку, а ти впевнено пишеш код, який незабаром змінить щось у світі... 💻🌍

⏭ Ти — наступний розробник, який вийде на новий рівень. Продовжуй будувати, помилятись, шукати відповіді — і обов'язково досягнеш своїх цілей.

🧵 І пам’ятай: кожна рядок коду — це не просто команда для машини. Це твій голос у цифровому світі.

📝 Залиште свій фідбек

Ваші відгуки та пропозиції мають вирішальне значення для розвитку цього ресурсу. Ми прагнемо створити максимально зручний і корисний портал для вашого навчання, тому цінуємо кожне ваше слово. 🙏

Якщо у вас є ідеї щодо покращення матеріалів, помічені помилки або побажання до функціоналу — не вагайтесь поділитися ними. Ваша участь допомагає робити проект кращим для всіх. 💡🛠

Приєднуйтесь до нашого Telegram-чату 💬, де можна швидко поставити питання, отримати підтримку та обговорити ідеї з іншими користувачами та авторами.

📡 Телеграм-спільноти та корисні ресурси для фронтендера

🧠 В реальному світі — мало хто ділиться справді вартісними посиланнями та джерелами. Часто через конкуренцію, страх «випустити з рук» перевагу або просто через байдужість. Саме тому у цьому курсі — тільки для вас ми підготували унікальну добірку, яка допоможе впевнено стартувати у сфері веброзробки.

📘 Вважаємо цю секцію приємним бонусом і памʼяткою для кожного початківця. Зберігайте, використовуйте, діліться з тими, кому справді треба.

💬 Телеграм-канали та групи

• 🔗 Канал з лайфхаками для кожного поважаючого себе веб-розробника
• 🔗 Прошивка для мозку програміста: гайди, меми, поради та інше🇺🇦

• ✅ W3C Validator — офіційна перевірка HTML-коду на помилки. Необхідно для чистого й правильного коду.
• 🔤 HTML Symbols — зручна таблиця HTML-символів: стрілки, знаки, значки. Застосовується щодня.
• ♿ Can I include — підкаже, чи можна один HTML-елемент вкладати в інший. Ідеально для правильного структурування.
• 📚 HTML Reference — структурована документація HTML з прикладами, поясненнями та практикою.
• 🤖 ChatGPT — персональний асистент у навчанні, пошуку помилок, генерації коду, поясненнях і шаблонах.

💡 Рекомендуємо додати ці ресурси в закладки. Це не просто посилання — це інструменти, які дозволяють працювати швидше, якісніше й професійніше.

Сертифікат

Якщо ви добросовісно пройшли даний міні-курс, засвоїли певну інформацію для себе та внесли пожертву для розвитку, ви можете звернутись до нас для отримання іменного сертифікату.
Зверніть увагу, сертифікат не надає право на працевлаштування – він створений скоріше як згадка про проходження міні-курсу та про нашу платформу.