Кращі роботи фрілансерів по HTML/CSS верстці на Freelancehunt — приклади виконаних робіт фрілансерів по HTML/CSS верстці в Україні ― сторінка 157

Switch to English version?

Yes

Переключитись на українську версію?

Так

Переключиться на русскую версию?

Да

Przełączyć się na polską wersję?

Tak

Верстка сайта PARKER&SON

HTML та CSS верстання

Сайт: в хорошій зоні по Google PageSpeed, валідний, кросбраузерний останніх версій, адаптивний, оптимізований та зжатий

Dashan_chik
200 000 UAH
Yurba — українська соціальна мережа з анонімним слідом

HTML та CSS верстання

Yurba — українська соціальна мережа, зосереджена на вільному спілкуванні та можливості залишати анонімний слід. Проект створювався як відповідь на перевантажений і незручний функціонал Facebook та відсутність анонімності. Основна ідея — дати українцям свою платформу для обговорення новин, проблем і життя у власному інфополі, використовуючи інструменти, які розроблені українцями для українців.

У Yurba також активно використовуються AI-функції:
- аналіз постів і контенту для рекламодавців,
… - поліпшення рекомендацій,
- допомога користувачам (наприклад, «короткий витяг з поста» для преміум-користувачів).

Моя роль

Я — співзасновник проєкту і відповідаю за:
- UI/UX-дизайн всієї платформи,
- фронтенд-розробку (HTML, CSS, JavaScript, власна бібліотека компонентів),
- десктоп-додаток на Electron (WebView + додаткові AI-функції та інтеграції).
- Фактично веду продукт від ідеї та прототипів до реалізації інтерфейсу та поведінки в браузері/desktop.

Технології:
Frontend: Vanilla JavaScript, HTML, CSS, власна бібліотека компонентів YurbaLib
Backend: Go (Golang), MySQL
Desktop: Electron (обгортка з додатковим функціоналом, включаючи AI-фішки)
Інфраструктура: WebSocket-повідомлення (реальний час для повідомлень і частини взаємодій)

Основний функціонал проекту:
- Стрічка дописів з можливістю форматування тексту та додавання файлів.
- Профілі користувачів.
- Коментарі, лайки, репости.
- Три теми оформлення: світла, темна і темно-синя.
- Повідомлення в реальному часі через WebSocket.
- Вбудований месенджер.
- Налаштування стрічки та профілю.
- Система Yurba Coins — внутрішня валюта для подарунків і прикрас профілю.
AI-функції:
- аналіз постів,
- рекомендації,
- короткі витяги/резюме для преміум-користувачів.

UI/UX та дизайн-система

Інтерфейс побудований на знайомій користувачам структурі, об'єднуючи найкращі ідеї Twitter, Facebook та інших соціальних мереж, але в більш чистому і логічному вигляді.
Головний екран — це три колонки:

1. Ліва колонка — навігація
меню: повідомлення, новини, профіль і ключові розділи.

2. Центральна колонка — контент
форма публікації поста з налаштуваннями форматування та прикріплення файлів,
основна стрічка постів.

3. Права колонка — налаштування стрічки
додаткові фільтри, налаштування відображення тощо.

Інтерфейс лаконічний і максимально чистий — користувачеві складно заплутатися навіть при першому відвідуванні.

Що я можу запропонувати вам на основі цього проекту:
- Розробка зрозумілих і «живих» інтерфейсів під будь-які завдання і продукти.
- Уміння підбирати кольори, що працюють, з розумінням їх впливу на сприйняття продукту.
- Структурний підхід: і код, і дизайн розбиваю на окремі блоки/компоненти, які потім легко масштабувати і кастомізувати.
- Повний цикл: від ідеї та прототипу в Figma — до готового веб- або desktop-додатку (VS Code, Git, DevTools тощо).

AndreyZeralld
Адаптивна верстка лендінгу "Holiday Resort"

HTML та CSS верстання

Верстка сайту за макетом: зручна навігація, адаптивність, семантична структура та базова доступність.

#HTML/CSS/JavaScript #HTML5/CSS3/SCSS/SASS #Frontend #Adaptive/Responsive #BEM #Gulp

Vlad_nm
Верстка сайту

HTML та CSS верстання

Верстка сайту для компанії яка займається ремонтом будинків.
Website layout for a company that repairs houses.
#лендінг #лендінгпейдж #вебдизайн #версткасайту #ремонтбудинків #ремонт #будівельнакомпанія #створеннясайту #html #css #uiux #адаптивнийдизайн #корпоративнийсайт #односторінковийсайт #landingpage #webdesign #webdevelopment #houserepair #constructioncompany #homerenovation #html #css #uiuxdesign #responsive #corporatewebsite #frontend #singlepagewebsite #WordPress

maximchaploutsky
40 000 UAH
E-zoo

HTML та CSS верстання

webpack scss pug js

ixacers
10 000 UAH
Адаптивна верстка сайту хостинг провайдера

HTML та CSS верстання

Адаптивна верстка та інтеграція верстки сайту хостинг провайдера ForceVPS

lemurs
10 000 UAH
Адаптивная верстка лендинга на React

HTML та CSS верстання

Использован react+next.js

lemurs
16 000 UAH
Адаптивна верстка кондитерської майстерні

HTML та CSS верстання

Чиста адаптивна верстка кондитерської майстерні

lemurs
Wonderland Bakehous

HTML та CSS верстання

Адаптивная верстка сайта кондитерской
Использован html+css+js

Oleh_L_agency
Лайт Блог ВЕБ Верстка + Адаптивність

HTML та CSS верстання

Повністю готовий лендінг сайт невеликого блогу про країни.

Також адаптований під всі пристрої, включаючи 4К монітори.

Vistrel
8000 UAH
Millclock-style Nixie Configurator — HTML5/CSS3 + JS

HTML та CSS верстання

Nixie Clock Configurator — веб-сторінка налаштувань nixie-годинника у стилі Millclock з живим прев’ю ламп.

Задача
• Передати фірмовий темний стиль, зробити сторінку адаптивною, з живим попереднім переглядом та миттєвим застосуванням налаштувань.
… • Підтримка секунд, 12/24-формату, різних режимів розділювача, яскравості, підсвітки, Wi-Fi та NTP-синхронізації.
• Локалізація EN/DE.

Стек

HTML5, CSS3 (custom props, grid), JavaScript (ES6)

Верстка
• Архітектура: семантичний header/main/section/footer, модульні секції-картки.
• Стилі: CSS-змінні в :root (кольори, радіуси, тіні, глоу), кастомні тумблери й селекти у стилі iOS.
• JS-логіка: реактивне оновлення прев’ю (формати часу, сепаратор, яскравість, колір), м’яке блимання розділювача (~1 c).
• Адаптив: clamp-типографіка, гріди, флюїдні розміри ламп і сепаратора із збереженням пропорцій.

Обсяг функціоналу
• Time & Date: формат часу, часовий пояс, DST (US/EU/OFF), дата, Set Time.
• Display & Lighting: яскравість, LED-колір (RGB), режим сяйва/анімації, нічний режим, автозатемнення.
• Connectivity: SSID/Password, NTP, тест підключення.
• Sound & Alarms: годинний сигнал, тривоги, гучність.
• Modes & Safety: slot machine, одиниці температури, відображення температури.
• System: ім’я пристрою, оновлення, firmware, скидання.
• Separator: blinking/static/off; окремий «малий» nixie-сепаратор з варіантами «:» і «.»
• Спец-символи: °C і °F у nixie-стилі.

#Nixie #UI #UX #WebDesign #Frontend #HTML5 #CSS3 #JavaScript #SVG #Canvas #Animation #Responsive #DarkTheme #IoT #Clock #Millclock #Accessibility #Localization

pasharadio
4000 UAH
Форма которая генерирует картинки с помощью ИИ

HTML та CSS верстання

Можно выбрать:
- модель ИИ
- Сколько картинок
- размер картинок
…
И так же можно менять цветовую тему

Alecseyy

HTML та CSS верстання