English Excellence - це Landing page, що презентує продукт, а саме: реєстрація на курс уроків для вивчення англійської мови.
Завдання English Excellence - запропонувати відвідувачу сторінки приєднатися до групи студентів і разом з командою вчителів відкрити для себе радість вивчення англійської мови!
На сторінці English Excellence, не переходячі за посиланням по іншим сторінкам, є можливість ознайомитися з перевагами команди вчителів, загальним змістом курсу вивчення мови та самими вчителями. Наведені фото вчителів та їх експертні навички.
Сторінка передбачає можливість, за допомогою наведеної на сторінці форми, зареєструватись та обрати собі за допомогою радіокнопок вчителя.
Для зручності користувачів, в шапці та футері сторінки, наведені посилання, за якими можна переміщуватися між секціями. Починаючи з другої секції, в правому нижньому куті з’являється кнопка для переходу до шапки сторінки. Також, в шапці та футері сторінки, є посилання на соцмережі у вигляді іконок.
В якості зворотного зв’язку передбачено секцію з відгуками студентів. У футері зазначена контактна інформація (адреса та телефон).
Верстка адаптивна, окрім мобільних пристроїв. Точки перелому:
- mobile: верстка гумова від 320px, стає адаптивною з 375px;
- tablet: з 768px;
- desktop: з 1280px
Проєкт створено з урахуванням наступних вимог:
- Верстка валідна та перевірена за допомогою сервісів (https://validator.w3.org/ , https://jigsaw.w3.org/css-validator/).
- Забезпечено дотримання семантики відповідно до стандартів HTML5.
- Здійснено підключення шрифтів.
- Забезпечено оптимізацію розмірів векторної та растрової графіки.
- Забезпечено підтримку відображення картинок для retina-екранів.
- Оптимізовано завантаження зображень.
- Всі svg-іконки підключено через sprite.
- Додано відображення фавікон сторінки.
Переконайся, що на комп'ютері встановлено LTS-версію Node.js. Скачай та встанови її якщо необхідно.
Встанови базові залежності проекту в терміналі командою npm install
. ✅
- Запусти режим розробки, виконавши в терміналі команду
npm run dev
. ✅ - Перейди у браузері за адресою http://localhost:5173. Ця сторінка буде автоматично перезавантажуватись після збереження змін у файли проекту. ✅
Цей проект було створено за допомогою Vite. Для знайомства та налаштування додаткових можливостей звернись до документації.
- Файли розмітки компонентів сторінки в папці
src/partials
та імпортуються до файлуindex.html
. - Файли стилів в папці
src/css
. - Зображення в
src/img
.