CSS Tooltip Magic - классная реализация всплывающих подсказок (tooltip) при наведении на элемент на чистом CSS c плавной анимацией появления и исчезновения.

#CSS #HTML

Базовый курс по Git.

Базовый видео курс по Git от Devcolibri. Git — распределённая система управления версиями. Изначально проект был создан Линусом Торвальдсом для управления разработкой ядра Linux. Git поддерживает быстрое разделение и слияние версий, включает инструменты для визуализации и навигации по нелинейной истории разработки. Этот курс научит Вас быстро ориентироваться при работе с ветками, сделаете свой первый коммит, отмените его, посмотрите историю коммитов и узнаете многое другое.

#Курсы

Numl – Альтернативный язык разметки и стилизации для веб.

Numl это язык разметки, который объединяет в себе функции CSS-фреймворка, JS-фреймворка без композиции и Дизайн-системы, и предоставляет набор готовых элементов, каждый из которых имеет обширный набор свойств для кастомизации.

Язык основывается на нативном браузерном API Custom Elements из спецификации Web Components, и совместим с популярными JS-фреймворками, такими как Vue, Svelte, Angular и React. Отличительной (и я бы даже сказал "уникальной") чертой Numl является то, что все стили для интерфейса он генерирует в runtime, что позволяет выжать максимум из CSS и добиться огромной гибкости в стилизации и кастомизации элементов.

Возможно, в скором времени этот язык может стать стандартом при разработке веб-интерфесов, а пока можете с ним ознакомиться.

Denzel. - HTML шаблон персональной страницы.

Denzel. - креативный, элегантный и модный личный шаблон резюме / портфолио. Вы можете использовать его для многих веб-сайтов, особенно лучше всего использовать для личного портфолио и креативных сайтов агентства. Шаблон построен на Bootstrap 4.

#Шаблоны

Cursors CheatSheet

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

#CSS

Выберите правильный ответ ниже. Этот и другие вопросы по разработке можно всегда обсудить в нашем чате.

Чек лист правильной верстки проекта.

- Внешний вид и работоспособность сайта
1. Целостность верстки, соответствие техническому заданию.
2. Внешне сайт выглядит как макет. 
3. Подключены необходимые шрифты.
4. Все интерактивные элементы работают в соответствии с техническим заданием:
5. Интерактивные элементы имеют состояния при наведении, клике и выделении (:hover, :active и :focus). 
6. Кроссбраузерность.
7. Адаптивность верстки. 
8. Оптимизация скорости загрузки страницы

- Качество кода
1. Валидность.
2. Семантичность верстки. 
3. Доступность. 
4. Единообразие и аккуратность кода. 
5. Сайт должен корректно работать при добавлении текстового контента. 
6. Базовая работоспособность сайта должна сохраняться при выключенном javascript.

#Статьи

Quickly — бесплатный онлайн инструмент для генерации совершенно разных векторных фигур. С возможностью экспорта в SVG для Вашего веб проекта.

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

Materialize - современный адаптивный фреймворк, который использует большое количество стилей, элементов, компонентов, анимации и, конечно, принципы Материального дизайна от Google.

#HTML #CSS #JavaScript

Наше сообщество по веб-разработке разрослось уже почти до 5000 человек. Хочу поблагодарить каждого из Вас, кто читает данный канал! У нас есть новости для Вас и все они хорошие)

1) Мы открыли дополнительно 2 канала.
Плохой Хороший Программист - подготовка к собеседованию
IT Входит в меня - IT юмор

2) Наш ламповый чат приближается к отметке в 200 человек, где уже решено много проблем при разработке. Спасибо всем активным!

3) С понедельника мы начинаем новый этап разработки. Хотим выпустить для Вас набор UI элементов (кнопки, бэйджы, прогрессбары, вкладки...), которые с легкостью можно интегрировать в свой проект. Единственное, надо придумать креативное название. Если есть идеи - пишите в чате.

4) Немного изменили название канала с CodeRoll | Веб-разработка на CodeRoll | Web & Design. Как оказалось, у нас многие интересуются не только разработкой, но и веб-дизайном.

Lodash - одна из самых популярных и полезных JavaScript библиотек. Она берёт на себя все хлопоты по работе со строками, массивами, объектами и прочим. На данный момент её рейтинг на GitHub составляет 45 000 звёзд.

Полезные функции:
- Итерация по строкам, объектам и массивам.
- Создание композитных функций.
- Управление значениями и их тестирование.

#JavaScript

Выберите правильный ответ ниже. Этот и другие вопросы по разработке можно всегда обсудить в нашем чате.

W3C Validator - сервис для проверки таблиц каскадных стилей (CSS) и документов (X)HTML с таблицами стилей.

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

W3C обладает интерфейсом SOAP (RESTful API), с помощью которого достаточно легко использовать его в приложениях.

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

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

1) Quickly — бесплатный онлайн инструмент для генерации совершенно разных векторных фигур.
2) Cursors CheatSheet - шпаргалка с демонстрацией различного состояния курсора.
3) Denzel. - HTML шаблон персональной страницы.
4) CSS Tooltip Magic - классная реализация всплывающих подсказок (tooltip).
5) Базовый видео курс по Git от Devcolibri.

Всем успешной разработки! Ваш CodeRoll | Web & Design

#Лучшее

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

Написанный в модулях es6 с нулевыми зависимостями, API имеет много общего с ThreeJS.

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

#JavaScript

Octicons - это набор качественных интерфейсных иконок в формате SVG, созданных GitHub'ом для GitHub :)

#Иконки

Креативная реализация формы Авторизации / Регистрации.

При нажатии на чекбокс, меняется сторона формы. Такой вид анимации позволит сэкономить место на Вашем веб-проекте, а также приятно удивит ценителей качественных интерфейсов. Форма сделана на Bootstrap 4.

#HTML #CSS

Курс по основам React в одном видео на примерах и практике от Владилена Минина. React — jаvascript-библиотека с открытым исходным кодом для разработки пользовательских интерфейсов. React разрабатывается и поддерживается Facebook, Instagram и сообществом отдельных разработчиков и корпораций.

#Курсы