html
(71)
HTML5 шаблон: Базовий зразок для будь-якого проєкту
Що таке HTML-шаблон?
Кожен вебсайт відрізняється від іншого, але є багато речей, які, по суті, однакові для всіх вебсайт. Замість того, щоб писати один і той самий код знову і знову, варто створити вл...
04 листопада
·
1
· 65
·
3
·
Alex
Різні способи написання CSS у React
Ми всі знайомі зі стандартним способом приєднання таблиці стилів у <head> HTML-документа, чи не так? Це лише один з декількох способів написання CSS. Але як це виглядає, якщо ми хочемо створити стиль...
04 серпня 2023
·
0
· 254
·
Alex
9 порад щодо оптимізації зображень для прискорення вашого сайту
У цій статті ми розглянемо ефективні методи оптимізації зображень, які значно покращать продуктивність вашого застосунку. Почнемо з самого початку!
1. Формати зображень
Вибір правильного формату зобра...
31 липня 2023
·
1
· 59
·
Alex
Створюємо власний блог з допомогою Parse.js, частина 3
В попередній статті ви дізналися як додати дані на Parse.com і відобразити їх на вашому сайті. Ви познайомилися з поняттям об'єкт, колекція та екземпляр, і створили свій перший клас. Починаючи з цього...
30 грудня 2021
·
0
· 11
·
Codeguida
Використовуємо будь-який рядок як колір в HTML
Чи знаєте ви, що будь-який рядок може бути використаний в якості коду кольору
для HTML? Наприклад:
У наведеному вище прикладі браузер приймає "chucknorris" як колір rgb(192,
0, 0) і застосовує його дл...
30 грудня 2021
·
0
· 13
·
Codeguida
Адаптивне меню з допомогою CSS3 та jQuery
В цьому уроці ми створимо адаптивне меню за допомогою CSS3 і JQuery. Ось як це виглядатиме (перейдіть на Codepen та пограйтеся з шириною сторінки):
{full-post-img}
HTML
Ми обертаємо все в nav елемент...
27 грудня 2021
·
0
· 38
·
Codeguida
Ideal Image Slider
Метою створення Ideal Image Slider було бажання мати простий у використанні
слайдер з базовим набором функціоналу, так щоб додаткові функції можна бути
додавати в якості "розширень". Ось "ідеали" та о...
20 грудня 2021
·
0
· 17
·
Codeguida
Створюємо власний блог з допомогою Parse.js, частина 6: Редагування
####Попередні уроки:
Створюємо власний блог з допомогою Parse.js
Створюємо власний блог з допомогою Parse.js: Працюємо з даними
Створюємо власний блог з допомогою Parse.js: Авторизація користува...
14 грудня 2021
·
0
· 8
·
Codeguida
Front-end воїн - Scroll Progress
Сьогодні ми розглянемо кілька методів демонстрації прогресу прокрутки веб-
сторінки. Ця техніка використовується на багатьох сайтах, і не дарма; вона
забезпечує контекстуальне розуміння кількості інфо...
13 грудня 2021
·
0
· 44
·
Codeguida
Створюємо власний блог з допомогою Parse.js, частина 4: Додаємо новий блог
Попередні уроки:
Створюємо власний блог з допомогою Parse.js;
Створюємо власний блог з допомогою Parse.js: Працюємо з даними;
Створюємо власний блог з допомогою Parse.js: Авторизація користувачі...
08 листопада 2021
·
0
· 6
·
Codeguida
Як не гаяти час на завантаження невидимого контенту
Браузер не розрізняє невидимий вміст від видимого
Зазвичай не весь вміст вебсторінки поміщається на одному екрані.
Коли сторінка відкривається, браузер обчислює розміри та позиції всіх DOM-елементів н...
17 жовтня 2021
·
2
· 129
·
Codeguida
Що цікавого можна зробити з checkbox
Checkbox дозволяють вибрати більше одного варіанта з запропонованих в формі. Розумно поєднуючи їх з CSS, можна отримати дивовижні речі. Ця стаття покликана продемонструвати деякі з креативних речей, щ...
16 жовтня 2021
·
0
· 349
·
Codeguida
Навігація списком
Дійшовши до створення меню навігації, більшість web-розробників реалізують код
таким чином:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a...
11 жовтня 2021
·
0
· 7
·
1
·
Codeguida
7 корисних атрибутів HTML, про які ви могли не знати
HTML — наріжний камінь веброзробки. Однак багато початківців ознайомлюються з ним лише поверхнево і переходять до CSS, JS тощо, втрачаючи весь потенціал HTML.
Тож розгляньмо перелік атрибутів HTML, пр...
07 жовтня 2021
·
2
· 27
·
Codeguida
Ресурси, що блокують рендеринг: як правильно їх позбутися
Ця стаття буде корисною, якщо Lighthouse коли-небудь казав вам «прибрати ресурси блокування рендерингу» (якщо не казав, то все одно можете дізнатись, як цього уникнути).
Ресурси блокування рендерингу...
21 вересня 2021
·
2
· 280
·
Codeguida
Додаємо анімації життя
Перша ітерація - стандартне "послаблення"
Це перша версія - звичайний, рукописний CSS3 ключовий кадр анімації з
використанням всього двох клавіш:
.form {
animation: form-fly-up 0.35s ease;...
02 вересня 2021
·
0
· 16
·
Codeguida
Створюємо власний блог з допомогою Parse.js, частина 2
Минулого разу ми встановити локальний сервер (XAMPP), веб-сервер (GitHub Pages) і сервер БД (Parse.com). Також, ми маємо HTML сторінки блогу і вбудований базовий Parse.js код для підключення до бази д...
12 серпня 2021
·
0
· 15
·
Codeguida
Коротко про посилання для пропуску та «липкі» хедери
Розповідаємо, як зробити так, щоб основний вміст не перекривався липкими хедерами. Для цього скористаємось властивістю scroll-padding елемента <html>.
Чого ми хочемо уникнути: наш заголовок розрізаний...
14 липня 2021
·
1
· 12
·
Codeguida
Основи Webpack: Частина 1
При створенні сайту досить стандартною практикою є мати якийсь процес збірки на місці, щоб полегшити розробку і підготовку файлів до роботи.
Ви можете використовувати Grunt або Gulp, побудувавши ланцю...
13 липня 2021
·
0
· 256
·
Codeguida
Як зробити таби на чистому CSS, а потім ще з них зробити акордеон
Перш ніж почнемо — демо можна знайти ось тут, а сам код повністю — ось тут. Запрошую до вивчення, художнього читання на різні голоси та усіляких забав з цим кодом.
Маленький такий дисклеймер — це все...
05 липня 2021
·
0
· 29
·
Codeguida
CSS про який ви нічого не знали - ч.1
Добре, добре, я не можу точно гарантувати це, але є дуже велика можливість
того, що ви з цим ще ніразу не користувались.
Селектор root
:root { }
Використання root дозволяє вибрати найвищий батькі...
28 червня 2021
·
0
· 15
·
Codeguida
Гід по оптимізації веб-сторінок та додатків
Коли справа доходить до продуктивності, ми не маємо права примушувати
користувачів чекати і залишити веб-сторінку з негативними враженнями.
Оптимізація є основою професійного створення сайту.
Що визна...
27 червня 2021
·
0
· 57
·
Codeguida
Перша CSS змінна: currentColor
CSS змінні повільно проходили шлях від intial draft до реалізації в браузері.
Але все ж таки одна замінна перебувала у можливостях використання роками це-
currentColor. Ця СSS деталь мала хорошу брауз...
27 червня 2021
·
0
· 15
·
Codeguida
Чому варто використовувати тег <picture> замість <img>
Використання зображень та анімацій в інтерфейсах користувача стало поширеною практикою в сучасних веб застосунках. Хоча ці приклади сучасного дизайну фокусуються на підвищенні зручності роботи з вашим...
14 травня 2021
·
0
· 1.4K
·
Alex
