Передмова

Що таке “фронтенд” і хто такий фронтенд-розробник?

Фронтенд — це досить широке поняття, що описує ту частину системи, з якою безпосередньо взаємодіє користувач. В розумінні вебу — це “обличчя” сайту чи веб-застосунку або ж інтерфейс користувача (англ. UI). Власне, це все те, що ви бачите та з чим взаємодієте як користувач, коли відкриваєте сторінки в інтернеті. Та, звісно, фронтенд не тільки про зовнішність, це також може бути і досить складна система, яка керує цим “обличчям”.

Часто, дуже умовно, фронтенд поділяють на дві складові: верстка і програмування. Верстка — це процес розмітки веб-сторінки або веб-застосунку мовою HTML та додавання стилістичного оформлення за допомогою CSS, результатом якого і є користувацький інтерфейс. Програмування, в розумінні фронтенду — це створення механізму керування UI сайту або веб-застосунку.

Думаю, що інтуїтивно вже зрозуміло, що фронтенд-розробник — це той, хто займається версткою та програмуванням UI. Насправді, фронтенд-розробник може займатися як тільки версткою, так і тільки програмуванням, в залежності від вмінь і задач. І задача посібника “Притомний фронтенд” — допомогти всім, хто хоче опанувати обидві складові або одну із них.

З чого починати?

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

База

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

Тут є статті по трьом китам, на яких стоїть весь фронтенд:

Розділ HTML містить набір статей про те, як правильно користуватися цією мовою і зрозуміло пояснює, що і як потрібно робити для розмітки веб-сторінки.
CSS — перелік матеріалів про головну магію ✨ веба, що робить його таким привабливим. Добре доповнює розділ про HTML!
JavaScript — головна технологія сучасного фронтенду, буде цікаво!

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

Туторіали

Це інструкція, часто покрокова, що дозволяє розібратися в певній не особливо об’ємній темі; це лайфгаки в технологіях; це практичні поради і пояснення.

Воркшопи

Це цикл туторіалів, об’єднаних в один проєкт за певною темою, виконання якого наблизить вас впритул до реального фронтенд-проєкту.