IKONS - иконки для дизайнеров и разработчиков.

Созданные вручную масштабируемые векторные иконки для дизайнеров и разработчиков.
Этот пакет содержит 300 пользовательских значков в форматах SVG, AI, ESP, PSD, CSH и PNG.
Все иконки бесплатны для личного и коммерческого использования.

Что такое якорные ссылки и для чего они нужны?
Якорные ссылки помогут направить посетителей в нужный раздел сайта.
Когда посетитель сайта нажимает на элемент, к которому добавлена ссылка на якорь, он автоматически переносится в ту часть страницы, где был добавлен якорь.

Как создать якорную ссылку?
Задаем ссылке через хэштег ссылку такого вида

<ul class="link_box">
<li><a href="#link">Ссылка</a></li>
<li><a href="#link2">Ссылка</a></li>
<li><a href="#link3">Ссылка</a></li>
<li><a href="#link4">Ссылка</a></li>
</ul>
Затем, необходимо разделу или блоку до которого надо прокрутить добавляем id с таким же именем, как href у ссылки, только уже без хэштега. Каждый id должен соответствовать своей ссылке

<div id="link">Раздел</div>
<div id="link2">Раздел</div>
<div id="link3">Раздел</div>
<div id="link4">Раздел</div>

Как настроить плавную анимацию на JS читайте в полной статье.

Mobile First подразумевает сперва разработку под мобильные системы. Это значит, что сперва разрабатывается мобильная версия сайта, а уже потом идет подготовка к созданию десктопной версии.

Проверьте, соответствует ли мобильная версия вашего сайта следующим пунктам:
- Информация отображается корректно как в книжной, так и в альбомной ориентации;
- Все кликабельные элементы работают;
- Отсутствуют тяжелые изображения, которые замедляют загрузку страницы;
- На сайте нет ничего, связанного с Flash;
- Нет всплывающих окон, которые перекрывают полстраницы;
- Нигде не задействована горизонтальная прокрутка;
- Контактный номер кликабельный или его хотя бы можно скопировать;
- Поля в форме регистрации короткие и простые, отключена функция автозаполнения (часто может подтягиваться некорректная информация);
- Все кнопки сделаны с помощью CSS, нет кнопок-изображений;
- Размер картинок меняется автоматически в зависимости от типа устройства;
- Есть возможность совершить покупку в один клик.

CSS Box shadow Generator - еще один классный, интуитивно понятный сервис генерации теней для ваших блоков. При помощи ползунков можно выставить позицию, масштаб, прозрачность, положение вашей тени и сразу же она отображается на экране.

Как подключить собственные шрифты к своему проекту.

Очень часто приходится подключать к проекту свои шрифты, чтобы как то уникализировать и выделить свой проект среди остальных и обеспечить ему максимальное удобство при чтении и использовании. В данной статье мы подробно рассмотрим способы подключения собственных шрифтов на сайт через Ваш файл стилей.

#CSS

Анимированный прелоадер для сайта на чистом CSS.

Страница любого сайта или веб-приложения не загружается мгновенно. На загрузку и отображение страницы необходимо некоторое время. При этом страница при её загрузке может видоизменяться. Обычно это происходит при загрузке стилей, шрифтов, картинок. Чтобы этот не привлекательный момент скрыть от пользователя, можно на время загрузки страницы отобразить пользователю какой-нибудь анимированный прелоадер. А после того, как страница полностью загрузится его убрать. Основная цель прелоадера — это улучшить впечатление пользователя о сайте.

#HTML_CSS

AOS — это современная библиотека, которая способна менять позиции элементов при скролле. Богатый функционал, есть возможность создавать свои анимации.

Инструкция по установке и настройке AOS
Рассмотрим на примере подключения через CDN

Шаг 1.
Подключить перед закрывающим тегом </head> CSS файл
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

Перед закрывающим тегом </body> подключить JS файл
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

Шаг 2.
Выполнить инициализацию библиотеки. Перед закрывающим тегом </body> добавить
<script>
AOS.init();
</script>

Шаг 3.
Добавляем анимацию для нашего блока. Просто добавьте к блоку data-атрибут c названием анимации
<div data-aos="fade-up-right"></div>

#JS #HTML_CSS

У нас новая рубрика, давайте не только обучаться и работать, но и отдыхать. Теперь, каждую пятницу, будем что то рекомендовать для проведения личного досуга в выходные. Но не просто проведения. а конечно c айтишным упором. И открывает эту пятницу фильм.

Игра в имитацию (2014)

1941 год. Английскому математику Алану Тьюрингу поручено расшифровать секретный код Третьего рейха – "Энигма". Тьюринг действует по поручению Британской разведки в центре, специализирующемся на взломе шифров и кодов. Для выполнения сверхсекретного задания здесь собрана целая команда талантливых ученых, которым предстоит создать первый в мире компьютер.

КиноПоиск: 7.6
IMDB: 8.0

Анимированный скролл на чистом CSS

Совсем недавно мы разбирали, что такое ссылка-якорь и как сделать плавную анимацию к блоку по клике на эту ссылку. В этом уроке поговорим о создании анимированной кнопки-скролла для привлечения пользователя вашего проекта к какому либо действию.

#HTML_CSS

Stacks - это бесплатный и простой в использовании диспетчер задач, который помогает организовать ваши задачи элегантным и интуитивно понятным способом. При использовании парадигмы канбан для управления вашими проектами, Stacks предлагает гибкий и наглядный способ организации задач. Сочетая мощные функции, такие как теги, группировка задач, быстрый поиск и вложения с красивым пользовательским интерфейсом, Stacks стремится сделать управление задачами простым и увлекательным. Скачать планировщик для своей платформы можно с официального сайта.

#Инструменты

Лучшее на канале за последнюю неделю.

1) IKONS - иконки для дизайнеров и разработчиков.
2) AOS — это современная библиотека, которая может менять позиции элементов при скролле.
3) Magic CSS3 Animations - библиотека крутых кросс-браузерных анимаций.
4) Vue.js с нуля
5) Анимированный прелоадер для сайта на чистом CSS.

Всем успешной разработки!

#Лучшее

Particles.js - библиотека для создания красивых плавающих частиц на веб-странице. Плавающие частицы данной библиотеки отлично реагируют на поведение курсора для создания интерактивности.

#JS

YoPalette - отличный сервис для подбора оптимальной цветовой гаммы при разработке шаблона или макета сайта. Просто делаете клик по цвету и он будет сразу скопирован в буфер обмена. YoPalette поможет оптимально подобрать цветовое решение с оттенками для Вашего веб-проекта.

#Инструменты

Corso - шаблон для целевой страницы.

Шаблон разработан на Bootstrap 4 и имеет таймер обратного отсчета до даты события, слайдер галереи, слайдер логотипов, лайтбокс подробностей для дополнительной информации, лайтбокс видео, слайдер текста для отзывов, раскрывающуюся навигацию, дополнительные страницы: подробности статьи, условия, политика конфиденциальности, регистрация, информационный бюллетень и контактные формы.

Corso имеет смешанный стиль дизайна со светлым и темным фоном, который создает современную обстановку для презентации вашего мероприятия вместе с контрастной черно-желтой цветовой гаммой.

#Шаблоны

Анимированная страница 404 ошибки на чистом CSS.

Одной из самых распространенных проблем, с которыми сталкиваются посетители различных сайтов является ошибка 404 Not Found. Если говорить простым языком, то он означает, что страницы с таким адресом не существует. В этом уроке мы рассмотрим как стилизовать страницу с 404 ошибкой.

#HTML_CSS

Бесплатный анимированный набор иконок от команды дизайнеров Mercury, чтобы добавить немного плавного движения в ваш свежий дизайн пользовательского интерфейса. Прилагаемый архив содержит 24 иконки в нескольких форматах и разрешениях:
- CSS SVG для Web
- PNG-спрайты для iOS и Android (версии 24 и 48 пикселей)
- Lottie JSON для React Native
- Статические иконки в PNG + SVG.

#Иконки

Курс Python 3 для начинающих от ADV-IT.

Язык программирования Python 3 — это мощный инструмент для создания программ самого разнообразного назначения, доступный даже для новичков. С его помощью можно решать задачи различных типов. Этот курс вас с основами языка, работой с запросами и данными, погружением во фреймворк Django, установкой и запуском игр.

#Курсы

Что выведет данный код? Выберите правильный ответ ниже.

Resizing — бесплатный онлайн сервис, который помогает конвертировать, оптимизировать, обрезать и изменять размеры изображений в сети одним щелчком мыши. Есть расширение для Chrome.

#Инструменты

Что такое Fallback и почему это необходимо?

С английского слово fallback можно перевести как резервный. То есть иначе говоря, вы пытаетесь оставить резервный вариант для отображения того или иного элемента в случае проблем с отображением стилей, работой jаvascript или jquery.

Банальный пример того, как все сейчас рисуют скругленные края у элементов:

#roundbox {
-webkit-border-radius: 5px; /* Safari */
-moz-border-radius: 5px; /* Firefox */
-o-border-radius: 5px; /* Opera */
border-radius: 5px;
}

В случае, если браузер пользователя не поддерживает CSS3, он увидит просто прямоугольник, обладающий всей необходимой функциональность. То есть отобразится базовый вид элемента - это и есть fallback (резервная) страховка.

#Статьи