Розробка веб сайту Meta Quest 2"
Завдання полягало у розробці головної сторінки для веб-сайту та створенні gulp-збірки для оптимізації сайту. Веб-сайт "Meta Quest 2" - це інтерактивна платформа, розроблена для просування та продажу віртуальної реальності. На цьому сайті користувачі можуть ознайомитися з описом продукту, його особливостями, перевагами та доступними акціями.
Використані технології:
HTML/CSS/JavaScript: Основні мови програмування для створення структури, дизайну та функціональності веб-сайту.
SCSS: Препроцесор CSS, який дозволяє зручно організовувати стилі та швидше оформлювати дизайн.
Gulp: Інструмент автоматизації для збірки, оптимізації та розгортання проекту. Використовується для компіляції SCSS в CSS, конкатенації та мініфікації JavaScript-файлів, оптимізації зображень та автоматичного оновлення веб-сторінок під час розробки.
gulp-sass, gulp-concat, gulp-uglify-es, gulp-autoprefixer, gulp-clean, gulp-avif, gulp-webp, gulp-imagemin, gulp-newer, gulp-fonter, gulp-ttf2woff2, gulp-svg-sprite, gulp-include: Розширення Gulp для різноманітних завдань, таких як компіляція SCSS, оптимізація зображень, конвертація шрифтів тощо.
Процес розробки:
Створення макету сторінки: Розробка статичних сторінок за допомогою HTML/CSS для відображення контенту та графіки.
Додавання функціональності: Реалізація інтерактивних елементів та додаткової функціональності за допомогою JavaScript.
Оптимізація зображень та шрифтів: Використання Gulp для оптимізації мініфікації зображень та конвертації у формати AVIF та WebP, а також конвертації шрифтів у WOFF2 для покращення продуктивності веб-сайту.
Тестування та налагодження: Перевірка роботи сайту на різних пристроях та веб-браузерах, виявлення та виправлення можливих помилок.
Розгортання готового веб-сайту на веб-сервері для доступу користувачів.
Використані технології:
HTML/CSS/JavaScript: Основні мови програмування для створення структури, дизайну та функціональності веб-сайту.
SCSS: Препроцесор CSS, який дозволяє зручно організовувати стилі та швидше оформлювати дизайн.
Gulp: Інструмент автоматизації для збірки, оптимізації та розгортання проекту. Використовується для компіляції SCSS в CSS, конкатенації та мініфікації JavaScript-файлів, оптимізації зображень та автоматичного оновлення веб-сторінок під час розробки.
gulp-sass, gulp-concat, gulp-uglify-es, gulp-autoprefixer, gulp-clean, gulp-avif, gulp-webp, gulp-imagemin, gulp-newer, gulp-fonter, gulp-ttf2woff2, gulp-svg-sprite, gulp-include: Розширення Gulp для різноманітних завдань, таких як компіляція SCSS, оптимізація зображень, конвертація шрифтів тощо.
Процес розробки:
Створення макету сторінки: Розробка статичних сторінок за допомогою HTML/CSS для відображення контенту та графіки.
Додавання функціональності: Реалізація інтерактивних елементів та додаткової функціональності за допомогою JavaScript.
Оптимізація зображень та шрифтів: Використання Gulp для оптимізації мініфікації зображень та конвертації у формати AVIF та WebP, а також конвертації шрифтів у WOFF2 для покращення продуктивності веб-сайту.
Тестування та налагодження: Перевірка роботи сайту на різних пристроях та веб-браузерах, виявлення та виправлення можливих помилок.
Розгортання готового веб-сайту на веб-сервері для доступу користувачів.