WebUniverseGitHub. Media Query. Scroll
GITHUB:
GitHub — це сайт, де зберігають і діляться своїми проєктами.
Тут можна зберігати HTML, CSS, JavaScript файли, щоб потім показати свій сайт іншим людям.
Наші кроки на сьогодні:
1. Увійти у свій обліковий запис GitHub (або створити новий).
2. Створити новий репозиторій — це «папка» для нашого сайту.
3. Додати туди свої файли через Add file → Upload files.
4. Зробити, щоб сайт відкривався через посилання — за допомогою GitHub Pages.
1) Авторизація:
Зайди на https://github.com. Натисни Sign in, введи свій логін і пароль. Якщо акаунту немає - натисни Sign up і створи його.
2) Створення репозиторію:
Натисни у верхньому меню → New repository.
3) Додавання файлів сайту:
У своєму репозиторії натисни Add file → Upload files.
Перетягни свої файли (наприклад index.html, style.css). Пролистай вниз і натисни Commit changes.
4) Створення GitHub Pages:
Зайди у вкладку Settings свого репозиторію.
Вибери розділ Pages (ліворуч у меню).
У пункті Source вибери гілку main і папку /root. Натисни Save.
Через кілька секунд (GitHub іноді створює сторінку до 2 хвилин) GitHub створить посилання на твій сайт — воно з’явиться вгорі сторінки.
Media Query & Scroll:
Media Query - це правило в CSS, яке допомагає зробити сайт адаптивним, тобто таким, що добре виглядає на телефоні, планшеті й комп’ютері.
Коли ширина або висота екрана змінюється, сайт може отримати інші стилі.
min-width - від якої ширини екрана застосовувати стилі
max-width - до якої ширини екрана застосовувати стилі
Пояснення:
До 600px - фон рожевий (телефон)
Від 601px до 900px - фон світло-зелений (планшет)
Від 901px і більше - фон блакитний (комп’ютер)
Що таке Overflow
overflow керує тим, що робити з вмістом, який не вміщається в блок.
overflow: visible; - видно все, навіть за межами
overflow: hidden; - приховує зайвий вміст
overflow: scroll; - завжди є прокрутка
overflow: auto; - прокрутка тільки коли треба
Як змінити колір і стиль прокрутки
Ці стилі працюють у більшості браузерів (особливо в Chrome, Edge, Safari).
.scroll-box::-webkit-scrollbar - Визначає ширину або висоту смуги прокрутки.
.scroll-box::-webkit-scrollbar-track - Встановлює фон смуги прокрутки, тобто "доріжку", по якій рухається бігунок.
.scroll-box::-webkit-scrollbar-thumb - Налаштовує вигляд “ручки” прокрутки (бігунка), яку користувач рухає.
Таблиця:
| № | Тема | Приклад коду | Підсумок |
|---|---|---|---|
| 1 | @media (max-width) | | Змінює стилі, коли ширина екрана менша або дорівнює 600px (наприклад, для телефонів). |
| 2 | @media (min-width) | | Стилі застосовуються, коли ширина екрана більша або дорівнює 800px (для великих екранів). |
| 3 | @media (min-width) і (max-width) | | Стилі виконуються лише в межах заданого діапазону ширини (наприклад, планшети). |
| 4 | overflow | | Додає смугу прокрутки, коли контент не поміщається в блок. |
| 5 | ::-webkit-scrollbar | | Встановлює товщину смуги прокрутки. |
| 6 | ::-webkit-scrollbar-track | | Визначає фон доріжки прокрутки. |
| 7 | ::-webkit-scrollbar-thumb | | Задає колір і форму рухомої частини (бігунка). |
build info
- compiler
- 2.0.5.1 · 4054EF9BF6C4510A
- built
- 2026-11-08 14:31:25 UTC