HTML, CSS, JavaScript.

HTML

---

• Шпаргалка «HTML теги»
• Специальные символы HTML - ✍ ☂ ☎.
• Иконка домашней страницы "Домик" или "home" на CSS
• Иконка «Глаз»
• Иконка «Человек» или «Посетитель»
• Иконки загрузки на CSS
• Иконка загрузки, где заполнение происходит по кругу
• Значок play, она же иконка воспроизвести
• Значки (иконки, фавикон) других сайтов от Яндекс
• Пробел в HTML
• Линейка онлайн в см
• Как txt перевести в html
• Как посмотреть HTML код страницы сайта
• Как написать код текстом на HTML странице.
• Динамически изменяемый HTML, script, style (атрибут contenteditable)
• Комментарии в коде HTML, CSS, JavaScript, PHP
• Атрибут title
• Как вставить картинку на сайт
  1. Код изображения HTML
  2. Подпись картинки HTML
• Убрать отступ под изображением
• Что такое ссылка?
  1. Код ссылки HTML
  2. Как сделать несколько ссылок на одной картинке
  3. Как сделать кликабельный фон сайта
• Цитата HTML.
• textarea resize CSS.
• input HTML 5
  • input type=number — поле для ввода чисел
  • Всё о <input type="checkbox"/> <input type="radio"/>
  • Индикаторы (теги progress и meter), ползунок <input type="range"/>
• Теги <select>, <optgroup> и <option>
  • CSS для <select> и <option>
• html код таблицы
• Спойлер HTML (тег details)
• Заголовки (теги h1-h6)
• Установить переводчик на сайт.
• Форма поиска по сайту HTML.
• Валидация HTML.

CSS уроки

---

• Как использовать CSS
• Единицы измерения CSS (px, %, em, vw, vh, vmin, vmax) и функция calc
• CSS селекторы.
• Псевдоклассы CSS.
  1. :focus CSS
  2. :target CSS
  3. :empty и :blank CSS
• Как скрыть/показать текст щелчком мышки на ссылки.
• :before, :after и другие псевдоэлементы CSS.
• input :before или :after
• Наследование CSS (inherit initial unset), свойство all
• Как выровнять div по центру в HTML
  1. Блоки, размещённые по центру, равномерно смещаются вниз
• Выровнять текст, картинки или блоки div по ширине
• Как выровнять текст по вертикали
• Выравнивание по правому краю
• Как сделать, чтобы одна ссылка или часть текста находилась слева строки, а другая справа?
• Изображение по середине
• Вертикальный текст CSS.
• Текст по кругу CSS
• Как сделать разный стиль у букв CSS.
• Прозрачность в CSS
• Перенос слов CSS (свойства overflow-wrap, word-wrap, word-break, hyphens)
• Перенос текста CSS (свойство white-space)
• Как обрезать элемент на CSS (свойства overflow, text-overflow и clip)
• Чем отличаются display block от inline и table css.
• Невидимый элемент в CSS (свойство visibility)
• Доступно про float: left и как равномерно разместить блоки div на CSS.
• Как сделать CSS колонки: примеры с текстом и изображением.
• Колонки (div и др.блоки) одинаковой высоты
• Позиционирование CSS.
  1. z-index
  2. position: fixed; - как зафиксировать HTML-элемент в окне браузера.
  3. CSS наложение: как написать текст на изображении.
  4. IE и position: absolute.
• Разница между фиксированной, резиновой, адаптивной и отзывчивой вёрсткой
• Резиновый сайт
  1. Блок на весь экран
• Картинка или видео по размеру экрана на CSS
  1. Не работает max-width для img внутри table
  2. Изображение внутри iframe
  3. Две картинки рядом: как они себя поведут при уменьшении окна браузера
• Flexbox
  1. Размер flex-элемента (свойство flex: flex-grow, flex-shrink, flex-basis)
  2. Порядок следования flex-элементов (свойство flex-flow: flex-direction, flex-wrap)
  3. Порядок следования flex-элемента (свойство order)
• Как прижать футер к низу резиновой страницы
• Сделать ширину сайта для разных разрешений монитора.
• Вывод на печать страницы сайта/блога.
• Кернинг (свойство font-kerning)
• Расстояние между буквами (свойство letter-spacing)
• Расстояние между словами (свойство word-spacing)
• Отступ первой строки (свойство text-indent)
• Межстрочный интервал (свойство line-height)
• Вертикальное выравнивание текста (свойство vertical-align)
• Боксовая модель CSS и свойство box-sizing
• Как задать отступы CSS (свойства margin и padding)
• css рамка
  1. Граница (свойство border)
  2. Рамка картинкой (свойство border-image)
  3. Закругленные углы (свойство border-radius)
     • Чем отличается круг от шара
  4. Контур (свойство outline)
     • outline и z-index в Opera (решение)
     • Скачет меню CSS
  5. Как сделать тень css с примерами - свойство box-shadow
• Фон для сайта CSS.
  1. Как сделать градиенты на CSS.
• CSS тень текста.
• Градиент у текста
• Мигающий текст
• Ещё образцы тени (свойство box-shadow ).
• Курсор мыши в виде руки.
• Нумерация в CSS
  1. Автоматическая нумерация строк таблицы
• Прокрутка CSS
  1. Убрать сдвиг сайта при появлении полосы прокрутки
  2. Прокрутка только модального окна, а не всей страницы
  3. Индикатор прокрутки страницы
• Трансформация CSS.
• transform CSS.
  1. Трапеция
• CSS поворот.
• transform-origin CSS.
• Анимация CSS.

CSS примеры

---

• Как запретить переход по ссылке
• Double Click
• Как запретить выделение/копирование изображения
• CSS кнопки.
• Сноска
• Как сделать содержание (оглавление) в рамках статьи сайта
• Горизонтальное выпадающее меню
• Многоуровневое выпадающее горизонтальное меню на CSS
• Простое адаптивное меню для сайта
• Accordion CSS.
• Раскрывающийся список
• CSS Tabs (табы)
• Древовидный список
• Простая фотогалерея для сайта
• Галерея изображений CSS.
• Слайдер для сайта (с прокруткой)
• Слайдер CSS для сайта.
• Модальное окно на CSS.
• html pop up (только на CSS).
• Как сделать всплывающую подсказку.
• Как выделить угол на CSS.
• Как увеличить изображение: варианты на CSS.
• Увеличение картинки при наведении.
• При наведении на картинку, она меняется.
• Как сделать html код для баннера и анимацию в Фотошопе

JavaScript

---

• Вставить JavaScript в HTML страницу.
• Получить значение value из тега input в JavaScript
• Как объединить два события
• Остановить выполнение функции
• Кавычки, косая черта, &nbsp; в JavaScript.
• :hover
• Document.title: узнать или изменить title страницы
• Window.location: узнать URL текущей страницы, перезагрузить документ, перейти на другую страницу в текущей вкладке
• Document.referrer: узнать с какого URL пришёл посетитель
• Открытие нового окна window.open() или одной страницы внутри другой с помощью iframe
• Параметры URL
• Контент с другой страницы
• Как запретить переход по ссылке
• Отключить onclick для дочернего элемента
• Сохранение заполненных полей, нажатых кнопок, открытых блоков на JavaScript
• How to stop page load
• Как сделать заставку на сайт
• Всплывающее окно при входе на сайт
• AdSense для адаптивного и отзывчатого дизайна
• parseInt
• Регулярные выражения
• Как создать элемент, а потом его же удалить: appendChild(), removeChild()
• Атрибуты: как добавить, изменить значение, удалить
• Стили CSS: как узнать, добавить, изменить, удалить селектор или его значение
• Как изменить или удалить :before и :after с помощью JavaScript
• textarea и innerHTML в Internet Explorer
• Перебор for
• Фильтрация
• Смена текста
• Сменяющийся текст скрипт jQuery.
• Как автоматически подменять слово на картинку.
• Упорядочить таблицу по алфавиту на скрипте Javascript.
• Форма с вкладками без подключения библиотек.
• Прокрутить страницу при загрузки к id
• Плавная прокрутка страницы до якоря
• Как сместить содержимое iframe
• Как сделать ссылку к началу страницы (ссылку "Наверх")
• Прилипающий блок при скроллинге (прокрутки страницы)
• Координаты курсора мышки внутри элемента (div, img) | JavaScript
• Скрипт скорости загрузки сайта.
• Увеличить уменьшить размер шрифта текста.
• Скрипт калькулятора стоимости
• Последний день месяца, сколько дней в году, сколько дней осталось до конца года
• Количество недель в году, получение номера недели по дате
• Прибавить к дате день / месяц / год
• Сравнение дат на JavaScript
• Определение возраста
• Узнать число плавающей даты (праздника)
• Календарь для сайта
• Автоматическое заполнение формы

Инструменты, конвертеры, калькуляторы на JavaScript

---

• HEX в RGB или RGB в HEX
• em в px или px в em
• Generator онлайн: area map (HTML)

PHP

---

• Скрипт "Заказать обратный звонок для сайта"
• Форма обратной связи для сайта
• Multiple files
• Форма обратной связи с вложением (прикрепляется файл)
• Как прикрепить файл к письму email | функция mail() на PHP
• Как сделать отзывы на сайте | PHP
• Автоматическое обновление, получение возраста
• Счётчик кликов или как сделать свою кнопку "Нравится"

YouTube

---

• Как добавить видео YouTube на сайт.
• Поиск youtube.com на сайте.
• Как с YouTube достать превью?.
• Начать/закончить YouTube с определённого момента времени
• Остановить видео (пауза/воспроизведение) | YouTube
• Галерея видео: как объединить несколько видеороликов

SVG

---

• Фигуры: rect, circle, ellipse, line, polyline, polygon, path