Блог Остапець Інни Олегівни: Проєктування та верстка вебсторінок

Уроки 13, 14

20.10.2025

Кросбраузерність

Вітаю! Сьогодні продовжуємо працювати з HTML, розглянемо поняття кросбраузерності, опрацюємо створення вебсторінок

Крок 1: Що таке кросбраузерність

Кросбраузерність - це коректна, адаптивна верстка для правильного відображення сайту на різних пристроях (комп'ютер, планшет, телефон) і браузерах (Chrome, Firefox, Opera, Safari, IE і т.д.). Реалізується вона, за допомогою інструментів для верстка сторінок сайту, таких як HTML і CSS. Залежно від ситуації і необхідності, іноді для створення кросбраузерності сайту, застосовується JavaScript.

👉Крок 2: Інструменти для якісного кросбраузерного тестування

💫LambdaTest

LambdaTest – це хмарна платформа для кросбраузерності тестування. Автоматизоване тестування знімків екрану робить масові знімки екрану з різних робочих столів та мобільних пристроїв, що працюють на різних ОС. Щоб відправити подробиці тесту, на платформі можна інтегрувати результати в Asana, BitBucket, GitHub, JIRA, Microsoft VSTS, Slack, Trello і та ін.

Для перевірки верстки необхідно обрати меню Visual UI Testing. У випадку, якщо скріншотів буде недостатньо, у пригоді стануть тести на адаптивність.

💫Browserling

Browserling представлений з розширеннями в Chrome, Firefox, Opera та Safari. Забезпечує тестування веб-додатків і сайтів в реальних браузерах, які працюють на реальних машинах. Дозволяє порівнювати скріншоти і точно визначати проблеми дизайну за допомогою інтерактивного перегляду сторінок

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

🔗Детальніше про кросбраузерне тестування

👉Крок 3: Завдання

тест

_____________________________

Уроки 11, 12

13.10.2025

Створення вебсторінок.

в ліцеї

Вітаю! Сьогодні продовжуємо працювати з HTML, опрацюємо створення вебсторінок та завантажимо наш проєкт на хостинг

Крок 1: Як зареєструватись на Netlify

Посилання на інструкцію

Крок 2: Скопіюй посилання на резюме
посилання на папки з проєктами

Приклад резюме
Приклад резюме з Netlify

Посилання

Після того як виконаєш всі завдання по інструкції, ти отримаєш посилання на свій сайт-резюме. Скопіюй його та надішли на електронну скриньку teacheritschool1@gmail.com

__________________________

Уроки 9, 10

06.10.2025

Верстка вебсторінок. Адаптивна верстка

Вітаю! Сьогодні продовжуємо працювати з HTML, розглянемо поняття верстки та що у собі має цей процес

Крок 1: Що таке адаптивна верстка?

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

Посилання на презентацію
👉Крок 2: Завдання

Працюємо з адаптивною версткою

____________________________________

Уроки 7, 8

29.09.2025

Мова гіпертекстової розмітки. Каскадні таблиці стилів

Вітаю! Сьогодні говоримо HTML як мову розмітки гіпертексту та розглянемо основні поняття, пов'язані з каскадними таблицями або CSS

Крок 1: Який будемо виконувати проєкт у темі

Ми з вами створимо сайт-резюме. Я буду публікувати завдання, які можна виконати використовуючи тільки програму Блокнот. Але, для тих, хто хоче спробувати себе у ролі розробника, буду публікувати завдання у Figma та VS Code (або SublimeText)

Крок 2: Що ж необхідно?

👉Набір "Мінімум"

Програма Блокнот або онлайн редактор, типу

👉Набір "Максимум"

VS Code або Sublimetext

Figma (посилання на заготовку)

Крок 3: Про HTML

Розгорнутий опис

Вебсайти - це основа, на якій тримається інтернет. Усі вебсайти побудовані на трьох основних технологіях: