Створення UI компонентів у Figma:
#1. Ознайомлення з поширеними станами UI компонентів | #2. Проектування UI компонентів орієнтованих на інженерні вимоги

Ця серія статей допоможе вам глибше зрозуміти, як створювати професійні UI компоненти в Figma. Ми розглянемо від знайомства з найпоширенішими станами UI компонентів, до створення компонентів, що відповідають вимогам інженерії.

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

CSS Grid Layout від Абдельфаттаха Рагаба

Ласкаво просимо до книги "CSS Grid Layout". У цій книзі ви дізнаєтеся все про модель макету CSS grid і як створювати складні та адаптивні дизайни на основі сітки. Ви ознайомитеся з усіма властивостями контейнерів сітки та елементів сітки.
Наприкінці цієї книги ви зможете використовувати макет сітки для створення адаптивних макетів та вирішувати різноманітні сценарії.
Почнемо.

Доступно на https://shop.tredition.com та https://www.amazon.com

css #css3 #grid #gridlayout #gridsystem #flex #responsivedesign #responsivelayout #modernlayouts #moderndesign #mobilefirst

Перекладено з: CSS Grid Layout by Abdelfattah Ragab… Читати далі

CSS Мультоколонковий макет від Абдельфаттаха Рагаба

Ласкаво просимо до книги «CSS Мультоколонковий макет». У цій книзі я поясню, як можна використовувати модуль Мультоколонкового макету. Це третій модуль макету після Grid і Flex. Мультоколонковий макет спеціально використовується для газет і журналів для створення елегантних і адаптивних колонок, у яких контент автоматично заповнює простір колонок.
Ви дізнаєтеся, як створювати колонки та налаштовувати властивості правил, розподіл, перерви між колонками та інше…
До кінця цієї книги ви отримаєте повний контроль над мультоколонковим макетом і зможете освоїти всі можливі сценарії.
Поїхали!

Доступно на https://shop.tredition.com та https://www.amazon.com

css #css3 #multicolumn #multicolumnlayout #newspaperlayout #magazine #magazinelayout #grid #flex

CSS Селектори та Специфічність від Абдельфаттаха Рагаба

Ласкаво просимо до книги “CSS Селектори та Специфічність”. У цій книзі я поясню різні типи селекторів — від простих селекторів елементів до складних атрибутних селекторів та псевдокласів. Ви зрозумієте, як працюють специфічність та каскадування, а також як писати CSS правила, що забезпечують передбачувані та бажані результати.
До кінця цієї книги ви будете впевнені у використанні CSS селекторів і освоїте всі можливі сценарії.
Поїхали!

Доступно на https://shop.tredition.com та https://www.amazon.com

css #css3 #селектори #специфічність #idселектор #classселектор #псевдокласи #псевдоселектор #правила #декларації #каскадністилі #відповіднийдизайн #сучаснімакети #сучаснийдизайн #мобільнийперший

Перекладено з: CSS Selectors and Specificity by Abdelfattah Ragab… Читати далі

Примітка: деякі приклади коду будуть базуватися на React. Однак концепції та патерни універсальні і не прив’язані до конкретного фреймворку.

Нічого не триває вічно

Під час роботи над проектом дуже часто ми створюємо компоненти для досягнення конкретної мети, слідуючи інструкціям клієнта. Однак, коли з’являються нові вимоги, часто потрібно внести невеликі зміни, які можуть в результаті призвести до того, що компонент перестане працювати. Настає момент, коли простіше створити новий компонент, ніж повторно використовувати вже наявний. То як уникнути цього?

Ранні етапи

Для вирішення цієї проблеми можна взяти як приклад простий і широко використовуваний компонент під назвою Input. На початку проекту наш … Читати далі

HTML форма або HTML форму́ляр — це базовий елемент у веб-розробці, який дозволяє користувачам взаємодіяти з веб-додатками.

Ці форми використовуються для збору даних від користувачів, таких як особиста інформація, відгуки або інші дані, необхідні додатку.

HTML-форма складається з різних елементів, таких як текстові поля введення, прапорці, радіо-кнопки, випадаючі списки та кнопки. Ці елементи обгорнуті в тег

Найкращі HTML шаблони для вебсайтів малих бізнесів

Створення професійного вебсайту для вашого бізнесу може бути дорогим та часозатратним процесом, що не завжди по кишені малому бізнесу. Багато готових HTML шаблонів вебсайтів пропонуються за доступними цінами, що значно пришвидшує процес розробки. У цьому статті представлені топ-3 найкращих HTML шаблонів для малих бізнесів у 2025 році.

1. HTML5 шаблон для вебсайту постачальника послуг замикання

Якщо ви володієте бізнесом у сфері послуг з виготовлення та ремонту замків, цей шаблон стане найкращим рішенням для виведення вашого бізнесу в онлайн. HTML5 шаблон для вебсайту замкових послуг містить всі необхідні сторінки, секції та елементи інтерфейсу, які … Читати далі

Привіт, з Новим Роком!

Я кілька днів був відсутній, оскільки приєднався до експериментального проєкту (я напишу ще один блог про це). Протягом трьох днів я не міг писати чи змінювати жоден рядок коду і міг тільки вносити зміни за допомогою курсора. Це був захоплюючий досвід, але, чесно кажучи, на цьому етапі курсор може виконати лише 90% чи 95% роботи.

В результаті нам вдалося завершити розробку нового проєкту, але штучний інтелект не зміг внести зміни до старого проєкту. З огляду на швидкий розвиток штучного інтелекту цього року, я справді вірю, що за наступні 5 років, програмістів початкового рівня може повністю … Читати далі

Як веб-розробники, ми часто стикаємося з обмеженнями можливостей CSS. Хоча він і є потужним інструментом, йому не вистачає гнучкості для справжньої кастомізації того, як елементи малюються і рендеряться. Ось тут на допомогу приходить CSS Houdini, відкриваючи перед нами нові горизонти майбутнього веб-дизайну та розробки.

Що таке CSS Houdini?

CSS Houdini — це загальний термін для набору низькорівневих API, які надають доступ до частин механізму рендерингу браузера, раніше недоступних для розробників. Ці API дозволяють нам втручатися на різних етапах пайплайна рендерингу та маніпулювати стилями, макетами і навіть створювати абсолютно нові методи макетування.

Потужність Paint Worklets

Однією з найбільш захоплюючих можливостей Houdini … Читати далі

Коли розробляєте додатки на React, стилізація компонентів є критично важливим аспектом для створення візуально привабливих і підтримуваних інтерфейсів користувача. Одним з найбільш популярних підходів для стилізації в React є використання styled-components, бібліотеки, яка дозволяє розробникам писати CSS безпосередньо в JavaScript. Проте часто постає питання: чи варто визначати styled-компоненти безпосередньо у файлі компонента або ж розділити їх в окремий файл стилів?

Ця стаття розглядає обидва підходи, їхні переваги та недоліки, а також коли доцільно використовувати кожен з них.

Підхід 1: Визначення Styled-компонентів всередині файлу компонента

У цьому підході styled-компоненти оголошуються безпосередньо у тому ж файлі, що і сам React компонент.

Переваги:… Читати далі