CodeRoll | Frontend
5.04K subscribers
1.59K photos
73 videos
1 file
899 links
— Лучшее для разработчика и дизайнера / IT инструменты, курсы и книги
— Веб-разработка на JS, HTML, CSS, React, Vue,Angular

Купить рекламу: https://telega.in/c/coderoll

Чат: https://t.me/coderoll_chat

По всем вопросам пишите сюда - @yankovsky_ads
Download Telegram
Советы для создания "узнаваемого" логотипа

1. Простота. Когда дело доходит до разработки логотипа "простота является ключом к успеху." Логотип это не место, чтобы показать свои художественные навыки. Он не должен быть сложным и богатым.

2. Адаптивность. Убедитесь, что ваш логотип гибкий и адаптируемый к различным стилям и цветовых схем. Логотип должен выглядеть резким в больших и малых размерах.

3. Значимость. Каждая компания имеет свою историю за плечами, и эта история часто используется на логотипе. Логотипы, как правило, рассказывают о девизе компании и идеалах, которые они разделяют с клиентами.

Все советы читайте в полной статье.

#Статьи
Выберите правильный ответ ниже. Этот и другие вопросы по разработке можно всегда обсудить в нашем чате.
This media is not supported in your browser
VIEW IN TELEGRAM
Неоновые анимированные кнопки.

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

#HTML #CSS
БЭМ (Блок-Элемент-Модификатор) — методология web-разработки.

Когда дело доходит до поиска правильного имени класса, это может быстро привести вас в отчаяние. Даже самые опытные разработчики CSS не всегда сразу находят правильное имя класса. Этот инструмент призван помочь вам не потеряться в методологии БЭМ, предоставив вам рекомендации по наименованию некоторых наиболее распространенных веб-компонентов.

#Инструменты
Набор иконок - Tetrisly

Бесплатный набор из 266 качественных интерфейсных иконок в формате Figma, Sketch, SVG для построения пользовательского интерфейса. Данным набором могут пользоваться как дизайнеры, так и разработчики. 

#Графика
CSS Gradient Animator - онлайн инструмент, который сэкономит время на создание красивых анимированных градиентов для Вашего проекта, при этом работать с ним можно через веб-форму.

#Инструменты
Bounce.js - это бесплатный и простой в использовании онлайн-инструмент, который поможет легко создавать CSS3-анимации, просто скопируйте и вставьте экспортированный код CSS в свой файл стилей. А еще, Вы сможете развернуть такой же инструмент на своем сервере.

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

1) Griddy - онлайн инструмент для автоматического создания grid-сеток
2) Плавная прокрутка "Наверх" на чистом CSS.
2) BEM Cheat Sheet - инструмент призван помочь вам не потеряться в методологии БЭМ.
3) CSS Gradient Animator - онлайн инструмент для создания красивых анимированных градиентов
5) Неоновые анимированные кнопки..

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

#Лучшее
C3.JS - библиотека диаграмм на основе D3, которая обеспечивает более глубокую интеграцию диаграмм в веб-приложения.

C3 предоставляет различные API и обратные вызовы для доступа к состоянию диаграммы. Используя их, вы можете обновлять диаграмму даже после ее рендеринга.

#JavaScript
This media is not supported in your browser
VIEW IN TELEGRAM
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.

#Шаблоны
This media is not supported in your browser
VIEW IN TELEGRAM
Cursors CheatSheet

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

#CSS
Выберите правильный ответ ниже. Этот и другие вопросы по разработке можно всегда обсудить в нашем чате.
Ответ
Anonymous Quiz
14%
1
25%
2
41%
3
20%
indefined
Чек лист правильной верстки проекта.

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

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

#Статьи
This media is not supported in your browser
VIEW IN TELEGRAM
Quickly — бесплатный онлайн инструмент для генерации совершенно разных векторных фигур. С возможностью экспорта в SVG для Вашего веб проекта.

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