Від HTML до GitHub Pages: Створення мого першого вебсайту - javascript.org.ua

Зображення штучного інтелекту, створене за допомогою Microsoft Copilot

Вступ

У світі технологій, що швидко розвивається, наявність онлайн-присутності вже не є просто опцією — це необхідність. Як студент комп'ютерних наук, я завжди був зацікавлений у тому, як створюються і підтримуються вебсайти. Ця цікавість привела мене до рішення створити свій перший вебсайт. Використовуючи лише базові інструменти та моє бажання вчитися, я перейшов від повного новачка у веб-розробці до хостингу функціонального сайту на GitHub Pages. Ось як розвивалася моя подорож і чому я навчився на цьому шляху.

Початок: Вивчення HTML і CSS

Моя подорож почалася з основ веб-розробки: HTML і CSS. Я був захоплений простотою і структурою HTML — мови розмітки, яка визначає структуру веб-сторінки. CSS, в свою чергу, надав магії дизайну і стилізації. Разом ці два інструменти дозволили мені створювати базові вебсторінки з заголовками, абзацами, зображеннями та кнопками.

Під час вивчення HTML і CSS я знайшов W3Schools та їх інтерактивний редактор надзвичайно корисними ресурсами. Тутешні уроки створили міцну основу, допомогли освоїти базові знання та спонукали мене заглибитися в більш складні функції. Інтерактивний редактор, доступний на їхньому сайті, дозволяв мені експериментувати і переглядати мої HTML, CSS і JavaScript безпосередньо на тій самій сторінці. І досі я користуюсь ним, коли планую додавати нові функції на свій сайт, оскільки це швидкий і зручний спосіб побачити зміни, перш ніж впроваджувати їх у файли самого сайту.

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

Додавання функціональності за допомогою JavaScript

Як тільки я засвоїв HTML і CSS, я захотів додати інтерактивність на свій сайт. Це привело мене до вивчення JavaScript — мови програмування, яка надає динамічні можливості сучасним вебсайтам. Я почав з простого: додав hover-ефекти, слайдери зображень та інтерактивні кнопки. Постійно вдосконалюючи свої навички, я перейшов до складніших функцій, таких як валідація форм і модальні вікна Lightbox.

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

Рішення хостити на GitHub Pages

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

Однак мої початкові спроби налаштувати сайт на GitHub Pages зіткнулися з труднощами. Спочатку я думав, що можна просто використовувати файли, які я мав, і GitHub автоматично згенерує для мене вебсторінку на основі репозиторію. На жаль, це не спрацювало. Я спробував стандартний метод і метод кастомізованого workflow за допомогою GitHub Actions, але обидва варіанти повертали помилки, які я не розумів. Хоча були доступні інструменти ШІ та онлайн-розв'язки, я не міг вирішити цю проблему.
Я почувався так, ніби ніколи не зможу налаштувати свій сайт на GitHub Pages.

З часом я дізнався, що для коректної роботи мого репозиторію на GitHub необхідно було додати домашню сторінку під назвою “index.html”. Як тільки я додав цей файл, все почало ставати на свої місця. Згодом були додані й інші сторінки, і я вирішив використовувати сайт як платформу для просування мого YouTube каналу та надання додаткових матеріалів.

Завдяки GitHub Student Pack я навіть зміг отримати безкоштовний кастомний домен для свого сайту. З часом він перетворився на всеосяжний каталог вебсторінок, до якого входять Python уроки з мого YouTube каналу, файли з кодом, Python міні-ігри, зображення відео та багато іншого. Це зробило сайт ідеальним супутником для мого Python Tutorial YouTube каналу.

Виклики та отримані уроки

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

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

Поточний стан і плани на майбутнє

Скріншот домашньої сторінки сайту на даний момент

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

Чому цей проєкт важливий

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

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

Поради для майбутніх веб-розробників

Для тих, хто хоче створити свій перший сайт, моя порада проста: почніть з малого і будьте терплячими. Зосередьтеся на основах HTML, CSS і JavaScript, перш ніж занурюватися в складніші фреймворки та інструменти. Платформи як freeCodeCamp та MDN Web Docs є безцінними ресурсами для початківців. Також не забувайте використовувати інтерактивні інструменти, як W3Schools, які дозволяють вчитися та експериментувати в реальному часі.

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

Погляд у майбутнє

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

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