В цілому на виконання завдання пішло оріентовно 4-5 робочих годих. Більшу частину з яких я експерементував як же ще покращити. Хоч я і знайомий з багатьма фреймворками, в завданні використовував свій "фреймворк". Він правда більше заточенний під фіксований розмір майбутнього шаблону під вордпрес.
Проект під gulp. Файли стилів, скриптів, зображень зберігаютсья в папці assets, в папці html - робоча версія
- В завданні було "прогресивне покращення" від іе8, але саме progressive enhancement і респонсів/адаптив з ІЕ8 неможливі в принципі (браузер просто не обробляє медіазапроси без додаткових JS бібліотек)
- В завданні було вказано, що шрифт можна знайти в онлайн бібліотеці Google, але не було вказано як їх використовувати.
- Також шрифти можна завантажувати в/з localstorage з lazy loading та замінити після рендеру сторінки. На цьому проекті я вважаю зайвим.
- Для іконок соціальних мереж я використав популярний шрифт Font Awesome, і хоча це збільшило об'єм завантажуваних шрифтів, але використання іконочних шрифтів я вважаю хорошою практикою для великих проектів. Тимбільше, що в шрифті можна залишити тільки потрібні іконки
- Як було вказано в завданні - я використовував препроцесор sass (scss). Збірку проекту здійснював за допомогою власної збірки gulp.
- Для стрілочок, я використовував не зображення, а просто UTF символи, стилізовані за допомогою css. В реальному проекті, звісно, так не робиться, але там можна домовитись з дизайнером.
- Взагалі зображення, крім контентних, я не знайшов де можна тут використовувати. Єдине що - для круглої рамки іконок соціальних мереж в ІЕ8. Хоча там об'єм невеликий і можна було б використати base64 кодування, але я зробив спрайтами.
- Усі зображення мають альтернативну версію в .webp форматі, і їх можна дуже просто підмінити замість основних.
- В папці стилів є main.uncss.css - стилі, прогнані через uncss. Версія повністю робоча, немініфікована важить більш ніж в два рази за оригінал, але я її не підключав поки.
- Не стилізував, особливо, select - не бачу в цьому особливої потреби без конкретного завдання: в сучасних браузерах відповідає дизайну, а для реалізації в застарілих доведеться костиялти велосипедом, що відобразиться на об'ємі проекту.
Можливо щось забув, можливо щось зробив не так. Я хочу показати, що знаю багато різноматних технік вигадування велосипеда, але при умові стандартів - все буде окей.