yaroslav
68 lines
4.8 KiB
Markdown
68 lines
4.8 KiB
Markdown
# Парт-тайм вакансія: HTML/CSS верстальник (Middle)
|
||
|
||
Ми шукаємо верстальника рівня **Middle** для створення адаптивних HTML-компонентів.
|
||
Робота віддалена, гнучкий графік, невелике стабільне навантаження.
|
||
|
||
## Що потрібно робити
|
||
- Верстати **адаптивні секції сайтів** (лендинги, промо-блоки, контентні секції).
|
||
- Верстати **UI-елементи адмін панелі** — таблиці, компонети, форми, навігаційні елементи, модальні вікна тощо.
|
||
- Працювати з існуючими дизайн-макетами або технічним описом компонентів.
|
||
|
||
## Вимоги
|
||
- Володіння **HTML5**, **CSS3**, адаптивної та кросбраузерної верстки.
|
||
- Верстка за допомогою **Flexbox**.
|
||
- Базові знання **JavaScript** (події, прості скрипти, мінімальні DOM-маніпуляції).
|
||
- Акуратність у коді, вміння підтримувати єдиний стиль.
|
||
- Досвід роботи з Git.
|
||
|
||
## Буде плюсом
|
||
- Володіння на базовому рівні фреймворком Vue3, або розуміння як пишуться Vue3 компоненти.
|
||
- Розуміння принципів UI/UX.
|
||
- Знання основ анімацій у CSS та JavaScript.
|
||
|
||
## Умови
|
||
- Парт-тайм.
|
||
- Віддалена робота.
|
||
- Оплата погодинна або за компонент.
|
||
- Використовуйте AI-інструменти, якщо це прискорює результат.
|
||
|
||
## Технічні деталі
|
||
|
||
Ми верстаємо всі сторінки або необхідні нам елементи через компоненти. Верстка компонентів передбачає створення окремої папки та двох файлів: ```[component-name].html``` і ```[component-name].css``` у ній. Для сторінок діє те саме правило, але папка сторінки повинна містити файл із такою ж назвою. Приклад - сторінка у цьому репозиторії ```src/pages/example.html```
|
||
|
||
Ви можете клонувати цей репозиторій і переглянути технічну реалізацію.
|
||
|
||
#### Швидкий старт
|
||
Якщо у вас встановлена Node.js не нижче 20-ї версії, у папці проекту виконайте наступні команди:
|
||
```bash
|
||
npm install
|
||
npm run dev
|
||
```
|
||
#### Як це працює
|
||
|
||
1. Збірка: Скрипт проходить по сторінках у папці ```src/pages```, знаходить директиви ```@@include``` і рекурсивно замінює їх на відповідні HTML-компоненти.
|
||
|
||
2. Стилі: Усі CSS-файли автоматично збираються (бандляться) в один спільний файл.
|
||
|
||
3. Hot Reload: Скрипт стежить за змінами - після редагування будь-якого файлу сторінка автоматично перезбирається.
|
||
|
||
Ця техніка дозволяє розбивати складні елементи на простіші та створювати необхідну композицію.
|
||
|
||
Отже, запущена команда сформує сторінку ```example.html``` і розмістить її в папці ```dst```. Перегляньте її або запустіть Live Server. Ви можете додати до компонента ```listbox``` кнопку за допомогою директиви ```@@include('../button/button.html')``` і переглянути результат:
|
||
```HTML
|
||
<div class="listbox">
|
||
<ul class="list-container">
|
||
<li class="list-option">New York</li>
|
||
<li class="list-option">Rome</li>
|
||
<li class="list-option list-option-selected">London</li>
|
||
<li class="list-option">Istanbul</li>
|
||
<li class="list-option">Paris</li>
|
||
</ul>
|
||
@@include('../button/button.html')
|
||
</div>
|
||
```
|
||
Якщо такий підхід зрозумілий і вам цікаво - відгукуйтесь, з радістю поспілкуємось!
|
||
|
||
## Як відгукнутись
|
||
Коротко опишіть свій досвід або надайте кілька прикладів верстки / GitHub / портфоліо і надішліть на e-mail vacancy@atmt.me
|