Сучасні Інтернет-технології

Індивідуальне завдання з курсу «Сучасні Інтернет-технології»

Мета:

Застосування отриманих знань з верстки вебсайтів, взаємодії з макетом у Figma, адаптації макету під різні пристрої, командної роботи та публікації сайту на хостингу.

Завдання:

1. Студенти діляться на групи по три особи.
• Кожна група отримує посилання на макет сайту у Figma.
• Ознайомлюється зі структурою та дизайном.
• Визначити основні елементи для верстки: шапка, контент, підвал, зображення, кнопки тощо.
2. Розподіл ролей у групі:
• Розробник верстки (HTML): відповідає за створення структурованого коду сайту.
• Стиліст (CSS): забезпечує відповідність стилю макету, відповідальність за адаптивність і коректне відображення на різних екранах.
• Відповідальний за інтеграцію (JavaScript, інтерактивні елементи): додає анімації, інтерактивність та перевіряє функціональність.
3. Розробка сайту:
• Використати HTML5 та CSS3 для верстки сторінки за макетом.
• Забезпечити адаптивність сайту під різні розміри екранів (мобільна версія, планшет, десктоп).
• Додати інтерактивні елементи (модальні вікна, випадаючі меню, слайдери тощо) за допомогою JavaScript або CSS (за потреби).
4. Викладення сайту на хостинг:
• Оберіть безкоштовний хостинг (наприклад, GitHub Pages, Netlify або інші сервіси).
• Налаштуйте репозиторій (наприклад, на GitHub) та завантажте проєкт до нього.
• Забезпечте правильне відображення сайту після викладення на хостинг.
• Подайте робочу URL-адресу викладеного сайту.
5. Аналіз доступності:
• Забезпечити правильну семантичну структуру HTML для поліпшення доступності.
• Перевірити сайт на відповідність стандартам WCAG (основні критерії: альтернативний текст для зображень, використання коректних заголовків тощо).
6. Презентація результатів:
• Підготувати презентацію, де кожна група продемонструє кінцевий результат своєї роботи (зокрема, як виглядає сайт на різних пристроях).
• Кожен учасник групи повинен коротко розповісти про свій вклад у проект.
• Показати робочу версію сайту через посилання на хостинг.

Критерії оцінювання:

• Відповідність сайту макету (точність верстки).
• Адаптивність сайту.
• Викладення сайту на хостинг і коректність його роботи.
• Правильне використання HTML/CSS та інтерактивних елементів.
• Командна робота та рівномірний розподіл завдань.
• Оформлення та презентація проекту.

Для зручності реалізації проєктної роботи загрузіть проєкт у систему контролю версій. Нижче наведено відео з інструкцією завантаження локального проєкту у Git Hub та корисні посилання

Git Download

Команди git:

git init

git add .

git commit -m "first commit"

git branch -M main

git remote add origin https://github.com/reshka82/myproject.git

git push -u origin main

Цей набір кроків:

1. Ініціалізує Git у папці
2. Додає файли
3. Робить перший коміт
4. Підключає твій репозиторій
5. Відправляє файли