Курсы html

Качающееся меню на CSS

Качающееся меню — меню с использованием свойств transition и transform

Ролик о создании простого меню на CSS стал популярным на канале, потому возвращаемся к теме и создаём качающееся меню на CSS. Если вы знакомы с темой построения выпадающих меню, следует смотреть видео с момента рассказа о добавлении свойств перехода — transition и transform.  Прочитать больше

Изменение dropdown меню Bootstrap

Изменение dropdown меню Bootstrap

Изменение dropdown меню Bootstrap

Понадобилось изменить стандартное отображение dropdown меню Bootstrap. По основам Bootstrap есть целый список роликов, а по компонентам не нашёл время заснять. Итак,  исходный компонент находится тут, но можно воспользоваться навигационным баром она же навигационная панель меню. Результат, к который должен получится, виден на гиф-анимации к заметке (кажется переборщил с мельканием 🙂 ). Прочитать больше

Зависимые списки

Зависимые списки с JavaScript

Зависимые списки с JavaScript

Зависимые списки — часто используемое решение для улучшения пользовательского интерфейса. Пользователю не нужно вводить/рассматривать огромную массу информации. Достаточно выбрать нужны элемент списка в первом списке, а через JavaScript построить второй список, зависимый от первого. Это могут быть сочетания Автокомпания — Марка машины, название языка программирования — курсы по этому языку программирования. Прочитать больше

JavaScript анимация кнопки вызова диспетчера

JavaScript анимация кнопки вызова диспетчера

JavaScript анимация кнопки вызова диспетчера

JavaScript анимация кнопки вызова диспетчера или менеджера через Skype или другой мессенджер выполнятся через таймеры JavaScript. Верстаем заготовку кнопки, позиционируем её (в нашем случае нижняя правая часть страницы); в атрибуте href прописываем псевдопротокол skype и название учётной записи, на которую будет осуществлён звонок. Прочитать больше

Autocomplete в HTML

Autocomplete в HTML (Автозавершение)

Autocomplete в HTML (Автозавершение)

Автозавершение (Autocomplete) ввода — удобный механизм помочь посетителю сайта выбрать нужный пункт для ввода и сократить время на обработку данных (на стороне сервера данные проверяются всё равно, но при правильном вводе посетитель сэкономит время). В HTML-элементе input есть возможность создания атрибута autocomplete, который подключает или отключает подсказку вводимых ранее значений. Прочитать больше

Brackets и Emmet

Brackets Emmet

Brackets Emmet

Популярный кроссплатформенный текстовый редактор Brackets (бесплатный, для работы с HTML, CSS, JavaScript) от Adobe позволяет подключать плагин быстрой верстки Emmet в несколько нажатий. Достаточно открыть окно плагинов, ввести в поисковую строку ключевую фразу «emmet» и нажать ссылку «Установить». Важно помнить, что Emmet начинает работать только на HTML-странице или в CSS-файле, если вы создаёте CSS-свойства — во вновь созданном пустом документе без расширения ничего сделать не получится. Прочитать больше

Emmet и CSS-свойства

Emmet и CSS-свойства

Emmet и CSS-свойства

В заметке об Emmet, мы описали чем хорошо этот плагин для создания структуры HTML-страницы, блоков, меню и т.д. Надо признаться, что Emmet и CSS-свойства — тоже очень дружат. При помощи огромного набора сокращений, можно «развернуть» любое CSS-свойство в считанные секунды. Попробуйте ввести в Emmet: «bg+» или «f+» (без кавычек) и Вы увидите, как появятся полные записи: background: #fff url() 0 0 no-repeat; и font: 1em Arial,sans-serif; Оцените по достоинству возможности Emmet! Прочитать больше

Яндекс.Карты (Static API)

Яндекс.Карта

Яндекс.Карта

Яндекс.Карты — популярный картографический сервис от компании Яндекс. С его помощью можно отмечать месторасположение объектов на карте, строить маршруты, вставлять фрагменты карты разного масштаба на своём сайте при помощи статического API или работать с картой при помощи JavaScript. Речь пойдет о том, как использовать статический API (программный прикладной интерфейс).  Прочитать больше

CSS-селектор дочернего элемента

Селектор дочернего HTML-элемента

Селектор дочернего HTML-элемента

Когда мы работаем с HTML, между элементами существуют связи «родительски-дочерний«, «соседние элементы», «предок», «потомок». Всем этим связям можно поставить в соответствие CSS-селектор. Один из селекторовCSS-селектор дочернего элемента. Этот селектор выбирает такие HTML-элементы внутри других, что первые находятся на самом первом уровне вложенности. Другими словами HTML-элементы с большими уровнями вложенности не выбираются. Прочитать больше

Emmet

Emmet и HTML

Emmet и HTML

Emmet — плагин для быстрой верстки HTML-страниц. Записывая названия HTML-элементов мы можем их превращать в разметку гораздо быстрей, чем писать каждый тег вручную. Например, div превращается в <div></div>, а div>p в <div><p></p></div>. Начинающему разработчику на первый момент может показаться, что все запутано и не стоит возиться с набором новых обозначений. Но на практике верстальщик создаёт HTML-страницу гораздо быстрее, когда владеет этим плагином. Прочитать больше