dev-kucha / exam-1 Goto Github PK

Екзаменаційна робота за темою "Простий веб-сайт"

Макет мені дуже сподобався, працювати з ним було досить приємно. Чіткі розміри, приємні кольори. Проте у мене було обмаль часу на підготовку роботи, фактично це були два вечори після напружених робочіх днів. Обидва вечори затягнулись до глибокої ночі, але з дозволу вчителя вирішив відтворити не всі блоки макета, а краще сконцентруватися на якості. Віддати перевагу тому, що дійсно зможе продемонструвати мої знання - валідність коду, ховер та фокус ефекти, фавікон, курсор-поинтер, адаптивність, бургер-меню....

І. Детальніше про зовнішній вигляд:

0. У Романа дружина QC, а у мене дружина Дизайнер - тому я намагався відтворити максимальну відповідність макету дизайну - шрифти, розміри, леттер-спейсінг і т.і. ПРОДЕМОНСТРУВАТИ
1. Ховер ефекти: ПРОДЕМОНСТРУВАТИ
2. Фокус ефекти: ПРОДЕМОНСТРУВАТИ
3. Форма: пропозиції заповнення, get-запит працює ПРОДЕМОНСТРУВАТИ
4. Показати адаптивність блоків (3 брейкпоінти 1200, 1024, 768)
5. Зробив адаптивне меню з анімованим "бургером" і досить великими текстами пунктів у випадаючому блоці щоб було зручно попадати пальцями. Меню розтягується на всю висоту вьюпорта, а пункти меню алігняться флексами. Таким чином, навіть на найменших landscape-екранах всі пункти вмістяться і нормально відобразяться. При цьому кнопку бугрер (що анімовано перетворюється на хрестик) залишається доступною праворуч. ПРОДЕМОНСТРУВАТИ

ІІ. Детальніше про технології

У роботі я застосував препроцессор SASS у синтаксисі scss. Я використовував такі інструменти як:

• змінні (шрифти, кольори)
• нестінг (майже всюди оскільки класи по БЕМу, це дуже зручно)
• підключення зовнішніх файлів use (я підключив файли фонтів, стилі обнулення і стиль загального враппера для всіх блоків через окремі scss-файли). Компілював у css засобами встановленого на Linux Ubuntu sass-компілятора через npm (Node Package Manager) та командного рядка. "Немає нічого зручнішого за командний рядок - :-)"

Я використовував підхід desktop first оскільки вихідний дизайн було надано для десктоп

Майже всюди я застосував відносні одиниці rem, а кореневому елементу задав значення font-size: 10px. Це дало можливість зручно контролювати розміри текстів, відступів, інтервалів, просто змінюючи через медіаквері один параметр.

Зробив і підключив повний комплект фавіконів для всіх можливих випадків використавши онлайн-сервіс https://favicon.io/favicon-generator/ ПРОДЕМОНСТРУВАТИ

Прописав srcset-и для картинок. Нажаль, не було у роспорядженні різних ілюстрацій для різних розмірів відображення, а робити їх самотужки не вистачило часу. ПРОДЕМОНСТРУВАТИ

Scss-файл перекомпільовано через автопрефіксер https://autoprefixer.github.io/. Присутні префікси й на -ms- ПРОДЕМОНСТРУВАТИ

HTML-код та фінальний скомпільований файл css перевірено через валідатор https://validator.w3.org/