html
(70)
Ideal Image Slider
Метою створення Ideal Image Slider було бажання мати простий у використанні слайдер з базовим набором функціоналу, так щоб додаткові функції можна бути додавати в якості "розширень". Ось "ідеали" та основні функції, які хотілось мати: HTML5 (SEO оп...
Codeguida · 20 грудня 2021 · 6
Особливості створення гібридних мобільних застосунків на Ionic
Вступ Мета даної статті – підготувати веб-розробника до роботи з мобільною розробкою, ознайомити з нюансами, показати різницю між мобільною і веб-розробкою. Я не планував написати посібник чи документацію про роботу з Ionic. Отже, поїхали… Працюєте в...
Codeguida · 21 червня 2017 · 10
Все, що ви колись хотіли знати про inputmode
Атрибут inputmode підказує браузеру, який тип екранної клавіатури показувати на мобільних пристроях, залежно від обраного input або textarea. <input type="text" inputmode="" /> <textarea inputmode="" /> На відміну від атрибута type, inputmode не втр...
Codeguida · 4 роки тому · 10
Як react.fragment допомагає писати семантичний HTML?
import React, { Fragment } from "react" const Headings = props => { return ( <Fragment> <h1>{props.title}</h1> <p>{props.subtitle}</p> </Fragment> ) } HTML це основа вебу, тому написаний вами код має буди семантичним. Якщо ви пишете сем...
Codeguida · 02 лютого 2018 · 3
Що цікавого можна зробити з checkbox
Checkbox дозволяють вибрати більше одного варіанта з запропонованих в формі. Розумно поєднуючи їх з CSS, можна отримати дивовижні речі. Ця стаття покликана продемонструвати деякі з креативних речей, що можна зробити з checkbox. Майте на увазі, в цій...
Codeguida · 16 жовтня 2021 · 256
Введення в SVG анімацію за допомогою SMIL
На Sitepoint нещодавно був розміщений виклик - відтворити цю забавну GIF анімацію за допомогою HTML і CSS: Це виглядає дуже просто, але це важко зробити без великої кількості ключових кадрів. Я схилявся до SVG, але вже давно хотів дати можливість SM...
Codeguida · 05 квітня 2021 · 31
Нативне відкладене завантаження для вебу
З новим атрибутом loading нативна підтримка відкладеного завантаження для <img> та <iframe> стане можливою. Як це виглядає: <img src="celebration.jpg" loading="lazy" alt="..." /> <iframe src="video-player.html" loading="lazy"></iframe> Сподіваємось,...
Codeguida · 10 квітня 2019 · 5
Гайд по CSS селекторам
CSS селектори - основа розуміння CSS. Селектори - це те, що допомагає визначити певний HTML елемент і додати до нього стилі. Тож не будемо обговорювати стилі і зосередимось на селекторах. В прикладах нижче, CSS буде знаходитись у файлі під назвою sty...
Codeguida · 3 роки тому · 284
Коротко про посилання для пропуску та «липкі» хедери
Розповідаємо, як зробити так, щоб основний вміст не перекривався липкими хедерами. Для цього скористаємось властивістю scroll-padding елемента <html>. Чого ми хочемо уникнути: наш заголовок розрізаний навпіл нашим «липким» хедером Що таке посилання...
Codeguida · 14 липня 2021 · 5
Як перетворити ваш сайт в мобільний застосунок: знайомство з PWA
Ви, напевно, чули про Progressive Web Apps (PWA). Але в цій статті я не буду описувати тонкощі роботи та зазирати під капот. Лише нагадаю, що PWA — це сайти, що можна додати на домашній екран смартфона і вони будуть працювати без інтернету. Натомість...
Codeguida · 03 серпня 2017 · 21
Замінюємо Bootstrap розмітку на CSS Grid
У березні Mozilla випустила Firefox 52, куди додала підтримку CSS сітки. Якщо ви не знайомі з CSS Grid, – це двовимірна система розмітки для вебу, яка дозволяє створювати нативні шаблони розмітки для браузера. Це означає, що ми можемо створювати зна...
Codeguida · 13 червня 2017 · 4
9 причин використовувати CodePen
CodePen.io описують себе як "майданчик для front-end частини веб-сторінки." CodePen відмінно підходить для тестування багів, співпраці та отримання натхнення від представлених робіт. Він працює, дозволяючи створити "pen" \- набір HTML, CSS і JavaScri...
Codeguida · 21 лютого 2021 · 24