html
(70)
Повне керівництво по Flexbox
Це повне керівництво пояснює все про flexbox, зосереджуючись на всіх можливих властивосях для батьківського елемента (контейнер flex) та дочірніх елементів (елементи flex). Воно також включає в себе історію, демонстрації, шаблони і таблицю підтримки...
Alex · 11 жовтня 2020 · 3.9K
Чому варто використовувати тег <picture> замість <img>
Використання зображень та анімацій в інтерфейсах користувача стало поширеною практикою в сучасних веб застосунках. Хоча ці приклади сучасного дизайну фокусуються на підвищенні зручності роботи з вашим застосунком, але можуть виникати проблеми якщо зо...
Alex · 14 травня 2021 · 1.4K
Маловідомі CSS-властивості
Існує багато CSS-властивостей, про які деякі дизайнери просто не знають. Або знають, але забувають використовувати ці властивості там, де вони здатні принести велику користь. Деякі з цих властивостей можуть допомогти відмовитися від використання Java...
Alex · 20 липня 2020 · 445
Гайд по CSS селекторам
CSS селектори - основа розуміння CSS. Селектори - це те, що допомагає визначити певний HTML елемент і додати до нього стилі. Тож не будемо обговорювати стилі і зосередимось на селекторах. В прикладах нижче, CSS буде знаходитись у файлі під назвою sty...
Codeguida · 10 травня 2021 · 272
Що цікавого можна зробити з checkbox
Checkbox дозволяють вибрати більше одного варіанта з запропонованих в формі. Розумно поєднуючи їх з CSS, можна отримати дивовижні речі. Ця стаття покликана продемонструвати деякі з креативних речей, що можна зробити з checkbox. Майте на увазі, в цій...
Codeguida · 16 жовтня 2021 · 255
Ресурси, що блокують рендеринг: як правильно їх позбутися
Ця стаття буде корисною, якщо Lighthouse коли-небудь казав вам «прибрати ресурси блокування рендерингу» (якщо не казав, то все одно можете дізнатись, як цього уникнути). Ресурси блокування рендерингу — поширена перешкода для швидкого завантаження ваш...
Codeguida · 21 вересня 2021 · 247
Основи Webpack: Частина 1
При створенні сайту досить стандартною практикою є мати якийсь процес збірки на місці, щоб полегшити розробку і підготовку файлів до роботи. Ви можете використовувати Grunt або Gulp, побудувавши ланцюжки перетворень, які дадуть можливість вам закинут...
Codeguida · 13 липня 2021 · 155
Різні способи написання CSS у React
Ми всі знайомі зі стандартним способом приєднання таблиці стилів у <head> HTML-документа, чи не так? Це лише один з декількох способів написання CSS. Але як це виглядає, якщо ми хочемо створити стиль в односторінковому додатку (SPA), скажімо, в проєк...
Alex · 04 серпня 2023 · 123
Як не гаяти час на завантаження невидимого контенту
Браузер не розрізняє невидимий вміст від видимого Зазвичай не весь вміст вебсторінки поміщається на одному екрані. Коли сторінка відкривається, браузер обчислює розміри та позиції всіх DOM-елементів на ній. Елементи завантажуються, навіть якщо більші...
Codeguida · 17 жовтня 2021 · 117
CSS магія - створюємо пошукову форму
У цьому уроці я хотів би обговорити, як можна прикрасити просту форму пошуку. Ми не будемо робити нічого занадто складного. Просто дослідимо чотири різних варіанти форми пошуку за допомогою CSS. У вас вже є Basic Search Box У вашому HTML файлі ви пов...
Codeguida · 05 березня 2021 · 110
Стилізація повзунка браузера на CSS
Є декілька шляхів зробити власний повзунок. Ми будемо використовувати CSS3, він найпростіший. Є jQuery плагіни, що допомагають в стилізації, проте я не люблю додавати багато JavaScript коду до свого веб-сайту. Примітка: пам'ятайте, що кастомні повзун...
Codeguida · 03 червня 2017 · 96
Bootstrap Grid за 15 хвилин
Bootstrap є найбільш поширеним frontend framework-ом на даний момент. Коли справа доходить до побудови адаптивних веб-сайтів і додатків, це перший вибір як професіоналів, так і любителів тому що з ним легко працювати. Той хто знає HTML, CSS і трохи...
Codeguida · 20 лютого 2020 · 94