Цей проєкт є частиною лабораторної роботи №3 з дисципліни «Основи Front-end технологій», виконаної студентом Національного технічного університету України «Київський політехнічний інститут імені Ігоря Сікорського».
Метою роботи було ознайомлення з методами створення блочної верстки веб-сторінок за допомогою технологій float та flex у CSS3, освоєння практичних навичок роботи з відсотковими значеннями ширини елементів, а також закріплення вмінь підключати зовнішні CSS-файли та публікувати сайт на GitHub Pages.
Проєкт складається з двох частин:
-
Верстка макету за допомогою float
- Блоки сторінки розташовані за допомогою технології float.
- Використано відсоткові значення ширини блоків для адаптивного розміщення елементів.
- Структура: зліва зображення, справа текст, зверху та знизу заголовки, у центрі — додаткове зображення.
-
Верстка макету за допомогою flex
- Блоки сторінки розташовані за допомогою гнучких контейнерів (
display: flex). - Забезпечено організацію рядків та колонок, а також адаптивність макету.
- Стилі винесені у зовнішній CSS-файл
styles.css.
- Блоки сторінки розташовані за допомогою гнучких контейнерів (
- HTML5 – для створення структури сторінки.
- CSS3 – для оформлення макету (float, flex, відсоткові ширини).
- WebStorm – середовище розробки.
- Git / GitHub – система контролю версій та хостинг репозиторію.
- GitHub Pages – сервіс для публікації веб-сторінки онлайн.
- HTML5 float: https://developer.mozilla.org/uk/docs/Web/CSS/float
- CSS flex: https://developer.mozilla.org/uk/docs/Web/CSS/flex
Проєкт розміщено на GitHub Pages і доступний за посиланням:
👉 https://randomiv.github.io/lab3-frontend/
Щоб переглянути проєкт локально:
- Клонуйте репозиторій з GitHub:
git clone https://github.com/RandomIv/lab3-frontend
- Перейдіть до папки проєкту:
cd lab3-frontend
- Відкрийте файл
index.htmlу веб-браузері (Chrome, Firefox, Safari тощо).
- Ім'я: Іванишин Олександр Олександрович
- Група: ІМ-32
- Варіант: 9