14. Front-End розробка. Урок 1. Робота в Front-End-і. Вступ до HTML та перші налаштування
H1
H2
H3
H4
H5
H6
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Привіт! Після креативного тижня дизайну можна подумати, що програмування його не перевершить. Або, можливо, дизайн був тобі не до смаку і ти навпаки хочеш спробувати писати код. У будь-якому випадку, цей тиждень перенесе тебе у світ Front-End розробки.
Спершу варто зазначити, що Front-End одночасно простий і складний. На початку буде складно, бо налаштування робочого середовища включає багато дрібних нюансів. Але як тільки ти запам'ятаєш, де знайти все потрібне, розв'язання задач стає цікавим і приносить задоволення. Професійні Front-End розробники не зберігають все на своїй мозковій "локальній машині" — вони користуються допоміжними джерелами, зберігаючи лише посилання на те, де шукати рішення. До речі, це теж має місце і назву в програмуванні :)
Отже, почнімо. Цього тижня ми створимо мінімалістичну веб-сторінку та переглянемо її у браузері.
Орієнтовний час на опрацювання теорії: 90+ хвилин.
Орієнтовний час на виконання практики: 90+ хвилин.
Завдання на тиждень
Усі чотири уроки ти працюватимеш над створенням свого першого вебсайту з зображеннями:
У першому уроці ми встановимо VScode та розберемось з першими кроками в HTML. На практиці створимо сайт-галерею для улюблених зображень (майже Інстаграм :)
У другому уроці розглянемо як за допомогою CSS додати кольорів і стилю нашому сайту;
У третьому уроці дізнаємось що таке Flexbox та як спростити життя з його допомогою;
У четвертому уроці ще трошки поговоримо про CSS та як за допомогою більш просунутих команд прокачати наш сайт.
Структура уроку
Встановлення програми (середовища) для написання коду
Досліджуємо HTML
Практика
Виконане завдання
Важливість пошуку в документації та мережі
Встановлення програми (середовища) для написання коду
У відео до цього уроку ти ознайомишся з теоретичною базою та загальними поняттями. Зверни увагу, що приклади у відео є лише зразком застосування певного функціонала і не містять точних інструкцій для виконання домашніх завдань. Спершу розглянь, як працює певна технологія — і тоді буде зрозуміліше, як застосувати її до конкретного практичного завдання.
Поняття front-end розробки та базові інструменти
Зазвичай ми створюємо папку на комп’ютері з HTML, CSS (і, можливо, JS) файлами. Потім відкриваємо цю папку в редакторі коду (VSCode тощо). HTML — це мова розмітки для опису частин веб-сторінки, а CSS — це каскадні таблиці стилів для надання елементам HTML візуальної привабливості.
Будь-який браузер може зчитувати HTML-файли. Перетягни чи відкрий HTML-файл у вікні браузера і переглянь свою сторінку, або скористайся розширенням VSCode Live Server (рекомендовано).
Тепер правий клік миші на HTML файлі (index.html) в інспекторі та обери Open with Live Server.
4. Обов'язково увімкни Auto Save → afterDelay у налаштуваннях VSCode, щоб автоматично зберігати файл приблизно щосекунди. (Інакше доведеться постійно зберігати вручку після внесення змін, а це забирає чимало часу і не рекомендується для роботи).
Вітаємо, все готово для роботи!
Досліджуємо HTML
1. Будь ласка, переглянь відео
Вступ до HTML
2. Створи папку і файл index.html для свого сайту, потім відкрий папку у VSCode. Запусти HTML-файл через Live Server.
Можеш залишати коментарі в коді — вони невидимі для браузерів або будь-яких середовищ виконання. Ми використовуємо коментарі, щоб пояснити складні частини коду або залишаємо примітки для подальшої роботи. Будь ласка, прочитай наші коментарі у коді та розберись, що вони означають:
Надані нижче підказки ти можеш скопіювати у свій текстовий редактор і запустити у браузері (або у випадку таблиць стилів, під'єднати до свого HTML-документа і потім запустити). Поглянь, як працює цей блок коду і що можна взяти з його роботи для практичного завдання.
Встав цей приклад до index.html і спробуй щось змінити.
Практика
Маєш світлини рідних місць? Чи може теплі спогади, як-от перше катання на ковзанах, поїздка до Англії чи зображення твого кота? Усе це підійде для нашої наступної функції. Ми створимо сайт-галерею для твоїх улюблених зображень!
Хедер (шапка) галереї
Додай заголовок (title) до сайту. Наприклад, Secret Gallery;
Додай своє ім'я чи нікнейм під ним жирним шрифтом. Наприклад, By Sam Ros;
Додай посилання Message Me (прикріпи свою соцмережу або псевдопосилання);
Картка галереї
Додай title до кожної картки в галереї;
Додай опис;
Згрупуй усі теги, пов'язані з однією карткою, в div. Це гарний спосіб сказати браузеру, що теги стосуються одного елемента. Для стилів це потім теж знадобиться, тож заглядаємо наперед ;)
Зображення в картках
Тепер коли маємо структуру, можна додати зображення до кожної картки в галереї:
Створи папку images у Project Folder;
Тепер можеш розмістити свої зображення у цій папці. Будь ласка, називай файли читабельно і перейменовуй, якщо потрібно. Дивись приклад нижче:
Тепер можеш додати зображення "./images/stadium.jpeg" до тегу img (атрибут src).
Молодець! Зображення можуть бути завеликими, але скоро ми це виправимо!
Перейшовши за посиланням, відкривай index.html файл, в якому міститься весь код до завдання:
Проводячи тестовий запуск цього курсу минулого року, ми отримували типові запити від студентів. Відповіді на них ми зібрали в одному файлі. Можливо, запитання, на яке ти шукаєш відповідь, вже можна знайти ось тут.
Пам'ятай, що основне при виконанні домашнього завдання - це зрозуміти, наскільки тобі цікаво займатись цією спеціальністю та продовжувати розвиватись в подальшому. Щось не так з текстом/відео/посиланнями? - звернись до координатора курсу в телеграмі
*в ось такому форматі "Привіт, в домашньому завданні : "Project Management. Урок 2" не дуже розумію що таке юзер сторіс..."
Важливість пошуку в документації та мережі
Хороший веб-розробник має знати де і як шукати необхідну інформацію.
Ці сайти (два посилання нижче) будуть для тебе першою невідкладною допомогою під час використання HTML-тегів. Також можна і варто гуглити питання — у галузі всі так роблять:
