Бесплатный видео-курс "С нуля до первого сверстанного сайта".

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

#Курсы

Фича 2. Свойство place-items в CSS Grid

Свойство place-items позволяет центрировать элемент по горизонтали и по вертикали, обходясь при этом минимальным объёмом CSS-кода.

Пример кода:
.box{
    display: grid;
    place-items: center;
}

Свойство place-items представляет собой сокращение, используемое для настройки свойств justify-items и align-items.

#Фичи #CSS

Animation Library - это библиотека анимации на чистом CSS. Появление, исчезновение, поворот элементов. Просто подключите файл библиотеки и используйте тег в HTML.

Пример кода:
<div class="u--fadeIn" >...</div>

#CSS #Animation

OmgoPass - библиотека может предоставить самое быстрое и минимальное (с точки зрения размера пакета) решение для генерации паролей.

Особенности библиотеки:
- Быстро: в 600 раз быстрее, чемpassword-generator
- Маленький: 322 байта (минимизированный и сжатый с помощью gzip)
- Безопасность: использует криптографически стойкий случайный API вместо Math.random
- Нет зависимостей
- Поддерживает Node.js

#JavaScript

The Icon of - коллекция из 1100+ отличных иконок, подходящих для любого проекта. Все иконки доступны в самых популярных форматах, включая оптимизированный веб-шрифт.

#Графика

Ungit решает все эти задачи с помощью интуитивно понятного графического интерфейса для управления Git-репозиториями. Он представляет ваш репозиторий как паутину коммитов и ветвей.

Основные особенности:
- Чистый и интуитивно понятный интерфейс для Git (что есть невероятно круто для освоения Git)
- Работает на любой платформе с установленными Node.js и самим Git
- Веб-ориентированный. Возможность запускать его в облаке.

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

Метод утенка - метод решения проблем.

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

Шаг первый – ставим перед собой желтого резинового утенка (да-да, ту саму игрушку для ванной) или мысленно представляем себе такового. 

Шаг второй – объясняем ему свою проблему или задаем интересующий вопрос (во всех подробностях!). Делать это можно устно или мысленно (как правило, если ситуация позволяет, то лучше устно). В процессе этих рассуждений и должно прийти оптимальное решение или искомый ответ. Часто бывает даже так, что они буквально лежат на поверхности, и вы сразу увидите их, как только вы начнете формулировать свой вопрос утенку.

#Советы

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

1) Переходим на темный режим
2) Git How To — это интерактивный тур, который познакомит вас с основами Git.
3) Идеи для проектов на JavaScript для начинающих.
4) Animation Library - библиотека анимации на чистом CSS
5) Landrick - отличный HTML-шаблон для множества тематик

Рекомендуйте наш канал, по возможности, друзьям. Всем успешной разработки!

#Лучшее

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

В этом расширении можно настроить номер порта и браузер по умолчанию, оно поддерживает HTTPS и прокси.

#Расширения #vscode

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

Основным преимуществом Paletton является то, что он не использует современное компьютерное и инженерное цветовое пространство RGB, а построен на классическом художественном цветовом круге, применяет классическую теорию цвета и работает в специально созданном цветовом пространстве RYB . 

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

Gulp 4 - Актуальное и исчерпывающее руководство для самых маленьких

Это обновлённый и переработанный видео-курс Gulp 4, в котором Вы детально разберёте работу с Gulp, ознакомитесь с новыми методами построения задач (тасков), узнаете, какими способами можно установить, настроить Gulp и как с его помощью автоматизировать и ускорить процесс веб-разработки. Знакомство с возможностями инструмента будет на реальном примере и будет создано удобное рабочее окружение для HTML вёрстки от А до Я. 

#Курсы

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

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

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

Eva Icons - это пакет из более чем 480 красиво оформленных иконок с открытым исходным кодом для пользовательского интерфейса. Кроме того, иконки поддерживают 4 типа анимации: zoom, pulse, shake и  flip. 

Загрузите на компьютер, чтобы использовать их в своих веб-проектах, iOS и Android. Иконки представлены также в двух визуальных видах: Fill и Outline и в нескольких форматах, в том числе png, svg, font, Sketch.

#Графика

Swiper - это самый современный бесплатный мобильный сенсорный слайдер с аппаратным ускорением переходов и потрясающим собственным поведением. Он предназначен для использования на мобильных веб-сайтах, мобильных веб-приложениях и мобильных нативных / гибридных приложениях.

Swiper поддерживает работу с React и Vue.

#JavaScript #React #Vue

Editor X — новый веб-конструктор, который включает в себе передовые технологии для верстки и прототипирования Вашего проекта.

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

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

Пример кода:

class {
onCreate() {
this.state = { count:0 };
}
increment() {
this.state.count++;
}
}

<div.count>
${state.count}
</div>
<button.example-button on-click('increment')>
Click me!
</button>

#HTML #JavaScript

Sapiens — большая бесплатная библиотека иллюстраций людей для Вашего проекта с прекрасным инструментом кастомизации любой части тела и экспортом в SVG/PNG.

#Графика

PerfectPixel — расширение для Google Chrome, которое позволяет «наложить» на веб-страницу полупрозрачную сетку и сверять по ней заданные расстояния.

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

👨‍💻 P.S. Всех с днем программиста!

#Расширения #Chrome

Be1 - комплекс инструментов для продвижения сайтов. Среди них есть инструмент «Расширение семантического ядра», который позволяет ввести URL своего сайта, а также до 10 сайтов конкурентов. Инструмент покажет запросы, по которым ранжируются конкуренты. Результат с полученными запросами можно скачать в csv. 

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