Привіт! Марафон з основ frontend-розробки стартував: бажаємо успіхів у перших кроках у програмуванні та сподіваємося, тобі сподобається свій результат роботи! Тут ти знайдеш підказки та "шпаргалки" до матеріалу, який вивчаєш на заняттях. Вони будуть корисні для виконання домашніх завдань. Пам'ятай: ти завжди можеш переглянути відео, почитати конспекти або звернутися з питаннями до спільноти та куратора у спеціальному чаті в Телеграмі. Успіхів!

Підготовка до марафону

Переконайся, що до початку занять у тебе налаштовані всі потрібні інструменти для роботи з кодом та виконання домашніх завдань. Перш за все завантаж WebStorm для тієї операційної системи, якою користуєшся. Встанови програму та запусти її. Конспект до марафону "Frontend з нуля": створюємо соцмережу для домашніх улюбленців - 1 При запуску з'явиться вікно, в якому можна вибрати варіант некомерційного використання. Конспект до марафону "Frontend з нуля": створюємо соцмережу для домашніх улюбленців - 2 Увійдіть у свій обліковий запис JetBrains або створіть новий. Прийміть "Угоду про підписку на Toolbox для некомерційного використання". Конспект до марафону "Frontend з нуля": створюємо соцмережу для домашніх улюбленців - 3 Тепер все готово!

Конспект до заняття #1

На цьому занятті ми познайомилися з Figma — онлайн-сервісом для спільної роботи над дизайном інтерфейсів та прототипування. Він дозволяє дизайнерам створювати та редагувати макети сайтів, додатків та інших дизайнерських продуктів прямо у браузері. Наш макет соцмережі для домашніх улюбленців зібраний у Figma. Щоб розпочати роботу над домашнім завданням, не забудь:
  • зареєструватися у Figma
  • встановити та підключити плагін Inspect Styles для відображення стилів у макеті
  • скопіювати макет сторінки
  • само собою, відкрити WebStorm та розпочати написання першого коду!

Ключові поняття, які варто знати

HTML (HyperText Markup Language) — мова розмітки, яка використовується для створення структурних елементів вебсторінок. Він дозволяє додавати тексти, зображення, посилання та інші елементи на вебсторінку. HTML — це щось на зразок креслення автомобіля, який визначає (розмічає), де і що буде знаходитися. CSS (Cascading Style Sheets) – мова стилів, яка використовується для оформлення та дизайну вебсторінок. З його допомогою можна змінювати кольори, шрифти, розміри та розташування елементів на сторінці. CSS робить сайт красивішим. Уяви, що CSS – це “фарба” та декор для автомобіля, які роблять його гарним. Конспект к марафону “Frontend с нуля”: создаем соцсеть для домашних любимцев - 1 Теги в HTML – це спеціальні маркери, які використовуються для створення та організації елементів вебсторінки. Вони вказують браузеру, як відображати текст, зображення та інші елементи. Теги закриваються в кутові дужки, наприклад, <tagname>. Конспект к марафону “Frontend с нуля”: создаем соцсеть для домашних любимцев - 2 Ось декілька основних тегів в HTML:
  • <h1>...<h6> – теги заголовків, де <h1> – найбільший заголовок, а <h6> – найменший.
  • <p> – тег абзацу, використовується для створення текстових блоків.
  • <a> – тег посилання, використовується для створення гіперпосилань.
  • <img> – тег зображення, використовується для додавання зображень на сторінку.
  • <div> – тег блоку, використовується для групування елементів та створення контейнерів.
  • <span> — тег для виділення частини тексту або іншого вмісту всередині елемента без зміни його зовнішнього вигляду.
Приклад:
HTML

<h1>Головний заголовок сторінки</h1>
<h2>Підзаголовок рівня 2</h2>
<h3>Підзаголовок рівня 3</h3>
<p>Це перший параграф тексту. Він містить деяку кількість інформації.</p>
<p>Це другий параграф тексту. Він відокремлений від першого параграфа.</p>
<p><a href="https://www.example.com" target="_blank">Посилання на Example.com</a></p>
Kotlin

Правила оформлення HTML-тегів

1. Відкриваючий та закриваючий теги: у більшості HTML-тегів є відкриваючий тег та закриваючий тег. Скажімо, <p> — відкриваючий тег для абзацу, а </p> — закриваючий тег для його завершення. Контент розташовується між цими тегами. Приклад:
HTML

<p>Це перший параграф тексту. Він містить деяку кількість інформації.</p>
<p>Це другий параграф тексту. Він відокремлений від першого параграфа.</p>
2. Деякі теги одиночні: у деяких тегах закриваючий тег не потрібен. До них відносяться <img> для зображень та <br> для перенесення рядка.
  • src — вказує шлях до зображення
  • alt — описує зображення, що корисно для пошукових систем і для випадків, коли зображення не може бути завантажено
Приклад: 

<img data-max-width="512" data-id="edb57226-1285-4ee4-b02e-616fabfedeb1" src="https://cdn.javarush.com/images/article/edb57226-1285-4ee4-b02e-616fabfedeb1/512.jpeg" alt="example image">
HTML

<img src="cat.jpg" alt="Опис зображення">
3. Атрибути тегів: теги можуть містити атрибути, які надають додаткову інформацію. Атрибути пишуться всередині відкриваючого тегу та закриваються в лапки. Тег <a> використовується для створення гіперпосилань. Приклад:
HTML

<a href="https://www.example.com" target="_blank">Перейти на Example.com</a>
4. Правильна вкладеність тегів: переконайся, що теги правильно вкладені один в одного і не перетинаються. Правильний приклад: 

<div>
<p>Абзац всередині блоку div.</p>
</div>
Не правильний приклад: 

<div>
<p>Абзац всередині блоку div.</div>
</p>

Створення нового проєкту у WebStorm

Нагадаємо, як створити проєкт у WebStorm, з яким ти будеш працювати протягом декількох днів марафону:
  1. Створи папку для проєкту: це можна зробити будь-де, хоч і на робочому столі — для зручності.
  2. Запусти WebStorm.
  3. Натисни File (Файл) - Open Folder...
  4. Вибери створену папку і натисни Select Folder
  5. Створи новий файл: натисни правою кнопкою миші в області Project (Проєкт) та вибери New - HTML File. Дай ім'я новому файлу: index.html.
Все готово — можна писати код.

Базова структура проєкту

Коли ти створюєш новий файл у WebStorm, з'являється щось на зразок цього: 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

</body>
</html>
Не будемо заглиблюватися в пояснення, але все ж пройдемося по основним елементам цієї структури:
  • <!DOCTYPE html>: визначає тип документа як HTML5.
  • <html lang="en">: початок HTML-документа та вказівка мови контенту (в даному випадку англійська).
  • <head>: секція документа, де розміщуються метадані, такі як кодування символів, параметри перегляду та заголовок сторінки.
  • <meta charset="UTF-8">: вказує кодування символів, щоб забезпечити правильне відображення тексту.
  • <title>Title</title>: заголовок сторінки, який відображається у браузері.
  • <body>: основна частина документа, де розміщується весь видимий контент сторінки.
Саме з такої базової структури починається створення вебсторінки.

Домашнє завдання №1

  1. Зробити свою копію макета в онлайн-редакторі Figma та створити новий проєкт у WebStorm.
  2. Перенести в проєкт декілька блоків тексту зі сторінки:
    • Ім'я (заголовок сторінки, <H1>)
    • Блоки “Про мене”, “Мій господар” та вітальний текст
    • Завдання із зірочкою: додати в проєкт блок “Улюблені ігри”

Конспект до заняття #2

На цьому занятті ми продовжили роботу з HTML-версткою та перенесли весь текстовий контент сторінки (з основного блоку та сайдбару) до себе в проєкт. Більшість потрібної для цього завдання теорії ми вже розкрили в конспекті до першого заняття, проте з'явилися нові теги, про які тобі варто знати.

Як структурувати контент на вебсторінці

Для нашого проєкту нам знадобиться всього 2 теги:

<main>

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

<aside>

Тег <aside> використовується для позначення додаткового вмісту, який пов'язаний з основним, але не є його частиною. Зазвичай це бічні панелі з додатковою інформацією, рекламою, посиланнями на пов'язані матеріали тощо. У нашому проєкті — це сайдбар (бічна панель) з фотографією профілю, друзями та інтересами.

Як оформити списки в HTML

1. Нумерований список <ol>:
  • Використовується для створення впорядкованого списку.
  • Кожен елемент списку всередині <ol> відзначається тегом <li>.
Приклад:
HTML

<ol>
<li>Перший пункт</li>
<li>Другий пункт</li>
<li>Третій пункт</li>
</ol>
2. Маркований список <ul>:
  • Використовується для створення невпорядкованого списку.
  • Кожен елемент списку всередині <ul> відзначається тегом <li>.
Приклад:
HTML

<ul>
<li>Пункт перший</li>
<li>Пункт другий</li>
<li>Пункт третій</li>
</ul>

Опис тегів

  • <ol> (ordered list): цей тег використовується для створення нумерованого списку. Елементи всередині нумерованого списку йдуть послідовно, починаючи з номера 1.
  • <ul> (unordered list): цей тег використовується для створення маркованого (невпорядкованого) списку. Елементи в такому списку відзначаються маркерами (крапками).
  • <li> (list item): тег для позначення елементів списку, який використовується всередині <ol> та <ul>.

Як оформити контактну інформацію в HTML

Як зробити клікабельну email-адресу

Для створення клікабельної email-адреси використовують тег <a> з атрибутом href, який починається з mailto: та вказує на потрібну email-адресу. Приклад:
HTML

<a href="mailto:example@example.com">Написати нам</a>

Як зробити клікабельний номер телефону

Для цієї мети використовують тег <a> з атрибутом href, який починається з tel: та вказує на потрібний номер телефону. Приклад:
HTML

<a href="tel:+1234567890">Подзвонити нам</a>

Опис тегів

  • <a> використовується для створення гіперпосилань. Атрибут href вказує на адресу, на яку повинна вести посилання.
  • протокол mailto: використовується в атрибуті href тега <a> для створення клікабельних email-адрес.
  • протокол tel: використовується в атрибуті href тега <a> для створення клікабельних номерів телефону.

Як додати зображення в HTML

Додати зображення в HTML верстці можна за допомогою тега <img>. Це одиночний (самозакриваючийся) тег, якому потрібно кілька атрибутів для коректного відображення зображення. Ось основні атрибути, які використовуються для вставки зображення:
  • src: вказує шлях до файлу зображення.
  • alt: альтернативний текст, який відображається, якщо зображення не може бути завантажено. Також корисний для покращення доступності вебсайту.
  • width та height (опціонально): задають розміри зображення.
Приклад: 
        
<img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e" src="https://cdn.javarush.com/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="sunset">
HTML

<img src="images/sunset.jpg" alt="Фотографія красивого заходу сонця" width="800" height="500">

Опис атрибутів

  1. src: вказує URL або шлях до зображення. Це може бути відносний або абсолютний шлях.
    Приклад: src="images/photo.jpg"
  2. alt: текстовий опис зображення, яке буде відображатися, якщо зображення не завантажиться. Важливо для доступності та SEO.
    Приклад: alt="Красивий пейзаж"
  3. width та height: задають розміри зображення в пікселях. Ці атрибути опціональні.
    Приклад: width="800" і height="500"

Як оформити коментар до коду

Тут все просто — скористайся потрібною комбінацією клавіш. Гарячі клавіші для коментарів у WebStorm:
  1. Для Windows/Linux:
    • Однорядковий коментар: Ctrl + /
    • Багаторядковий коментар: виділи текст і натисни Ctrl + Shift + /
  2. Для Mac:
    • Однорядковий коментар: Cmd + /
    • Багаторядковий коментар: виділи текст і натисни Cmd + Shift + /

Домашнє завдання №2

  1. Повторити все, що зробив ментор на занятті:
    • додати в проєкт текст основного блоку сторінки, а також сайдбару
    • додати в сайдбарі картинку профілю та картинку з друзями
  2. Самостійно доверстати пункти 2 і 3 в блоці “Досягнення”.
  3. Самостійно додати блок “Улюблені ласощі” в проєкт.

Конспект до заняття #3

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

Що таке CSS стилі

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

Як додати CSS стилі в проєкт у WebStorm

Повторимо теорію з заняття. Щоб додати CSS стилі у свій проєкт, виконай такі кроки:
  1. Створи новий файл CSS:
    • клацни правою кнопкою миші на теці вашого проєкту.
    • вибери "New File" і назви його styles.css.
  2. Підключи CSS файл до HTML:
    • відкрий свій HTML файл – файл з твоїм проєктом. У нашому випадку — index.html.
    • встав наступний рядок всередині тега <head>:<link rel="stylesheet" href="styles.css"> — почни писати link, з рештою допоможе автодоповнення.
  3. Почни писати CSS код.
Відкрий styles.css та додай стилі. Наприклад: 

css
body {
background-color: lightblue;
}
h1 {
color: darkblue;
text-align: center;
}
Тепер при відкритті HTML сторінки у браузері ти побачиш стилі, які застосували в styles.css.

Як задавати CSS стилі для класу

Щоб задати CSS стилі для класу, потрібно використовувати селектор класу у вашому CSS файлі. Селектор класу починається з крапки (.), за якою слідує ім'я класу. Візьмемо клас wrapper, який ми створили в проєкті, та задамо для нього деякі стилі. У тебе є наступний HTML елемент: 

<div class="wrapper">
Вміст обгортки
</div>
Тепер ми можемо визначити стилі для класу wrapper у твоєму CSS файлі styles.css. Наприклад (у прикладі параметри випадкові, не з нашого макету): 

css
.wrapper {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
Ось що ці стилі роблять:
  • width: 80%; — ширина контейнера становить 80% від ширини батьківського елемента.
  • margin: 0 auto; — горизонтальні відступи автоматично центрують контейнер на сторінці.
  • padding: 20px; — внутрішні відступи всередині контейнера.
  • background-color: #f0f0f0; — світло-сірий фон контейнера.
  • border: 1px solid #ccc; — рамка товщиною 1 піксель сірого кольору.
  • border-radius: 10px; — закруглені кути рамки.
  • box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); — тінь під контейнером для створення ефекту об'єму.

Домашнє завдання #3

Застосувати всі потрібні стилі, повторюючи дії за ментором:
  • розділити контент на сайдбар та основну частину сторінки
  • додати потрібні відступи в сайдбарі та основній частині сторінки
  • зробити колір фону в сайдбарі відповідно до макету
  • оформити кнопки в сайдбарі (розташування одна під одною, відступи
  • встановити потрібні шрифти за допомогою Google Fonts
Java-університет

Конспект до заняття #4

На цьому занятті ми доопрацьовували імплементацію CSS стилів відповідно до макету: додавали потрібний колір бекграунду сторінки, прописували потрібні відступи між сайдбаром та основною частиною сторінки, копіювали стилі для кнопок у сайдбарі та контенту розділу “Інтереси”. Тобі вже знайома вся необхідна база теорії на даний момент марафону, тому сфокусуйся на відточуванні використання CSS стилів у вашому проєкті. Якщо виконаєш всі дії за ментором, отримаєш готовий сайдбар, як на макеті.

Домашнє завдання #4

  1. Повторити всі дії за ментором:
  2. додати стилі кнопкам
  3. розставити потрібні відступи між сайдбаром та основним блоком, між розділами сайдбару
  4. Закінчити оформлення блоку "Інтереси"

Конспект до заняття #5

На цьому занятті ми закінчили застосування всіх стилів до основного блоку сторінки. Якщо все зробиш правильно, твій проєкт буде виглядати точнісінько як макет!
При виконанні домашнього завдання зверни особливу увагу на вирівнювання контенту в блоках.
info-box та info-value — це класи, які часто використовуються у веб-розробці для структурування та стилізації інформаційних блоків на сторінці. Info-box: цей клас зазвичай використовується для обгортки інформаційного блоку. Він може містити текст, зображення та інші елементи, пов'язані з певною інформацією. Приклад: HTML: 

<div class="info-box">
<div class="info-value">42</div>
<div class="info-label">Відповідь на питання</div>
</div>
CSS: 

.info-box {
border: 1px solid #ccc;
padding: 10px;
margin: 10px 0;
background-color: #f9f9f9;
display: flex;
flex-direction: column;
align-items: center;
}
Info-value: цей клас використовується для стилізації значень всередині інформаційного блоку. Це може бути число, текст або інший елемент, який представляє собою важливе значення. Приклад CSS: 

.info-value {
font-size: 24px;
font-weight: bold;
color: #333;
margin-bottom: 5px;
}
У цьому прикладі елемент з класом info-box буде містити значення та мітку, стилізовані відповідно.

Домашнє завдання #5

  1. Повторити всі дії за ментором:
    • оформити інформацію в блоках основної частини сторінки відповідно до макету
    • доопрацювати всі необхідні відступи в основній частині сторінки
    • перевірити відповідність стилів шрифтів макету
  2. Самостійно додати стилі для третього пункту в блоці “Досягнення” та в останньому блоці на основній сторінці – “Улюблені ласощі”.

Конспект до заняття #6

Вітаємо! Твій проєкт готовий, і залишилася лише одна невелика деталь — залити готову сторінку онлайн. Для цього використовуй Netlify або GitHub. Не забудь зареєструватися на платформі та повторити всі дії за ментором. Всього кілька хвилин — і твій проєкт в онлайні, і ти зможеш поділитися посиланням на результати своєї праці з ким завгодно!

Домашнє завдання №6

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

Якщо тебе зацікавила HTML/CSS верстка, і ти хочеш піти далі у вивченні фронтенду, запрошуємо вчитися разом з JavaRush на курсі з Frontend-розробки.

Пройти шлях з нуля до Middle-розробника протягом року — реально!