Выполняю реальный заказ дизайн + верстка сайта на фрилансе

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

📺 YouTube

WebDEV #видео

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

Раньше я пользовался сервисом What Font и только недавно наткнулся на Fonts Ninja — сравнив их, я выбрал последний.

🌍 Сайт

WebDEV #инструменты

💡 Применяйте персонализацию

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

WebDEV #советы

WebDEV #test #HTML

Выберите правильный вариант 👇🏼

Создание сайта с крутой 3D анимацией прокрутки (HTML, CSS, JS)

Рассмотрим создание сайта с потрясающей 3D анимацией скролла, используя возможности современного HTML, CSS и JavaScript. Мы разработаем модель движения слайдов в глубину, поработаем над кастомной анимацией, плавностью, красиво оформим композицию с помощью CSS, а также поработаем с аудио и видео контентом на странице.

📺 YouTube

WebDEV #видео

🛠 Google Color & Type Tool - система материального дизайна от Google

Она предлагает огромное количество полезных инструментов, ресурсов, шпаргалок, руководств и т. д.

Особенно пригодились мне в работе сервис масштабирования шрифта и генератор палитр. Создание эстетически привлекательных палитр, к тому же уже адаптированных для обеспечения доступности, ещё никогда не было таким простым.

🌍 Сайт

WebDEV #инструменты

Веб разработка. Полное руководство

В этом видео обсуждается весь путь вхождения в IT: Frontend & Backend технологии, подготовка к собеседованию и мотивация.

Здесь вы узнаете какой компьютер, IDE нужны, получите базу по HTML & CSS и по используемым в веб-разработке технологиям.

📺 YouTube

WebDEV #видео

WebDEV #test #CSS

Выберите правильный вариант 👇🏼

💡 Используйте принцип F-паттерна

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

WebDEV #советы

🛠 ProtoPie - инструмент для веб-дизайна. Он позволяет создавать комплексные взаимодействия и невероятные интерактивные прототипы.

Отличительной особенностью ProtoPie является возможность управления сенсорами современных устройств и выполнение анимации, используя наклон, звук, компас или 3D касание. Это работает проще простого, и код не требуется.

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

🌍 Сайт

WebDEV #инструменты

Знакомство с SvelteJS

Это фреймворк, похожий на React или Vue, но с важным отличием: он преобразует компоненты в высокоэффективный код, который отлично работает с DOM, то есть, со структурой сайта.

📺 YouTube

WebDEV #видео #TypeScript

WebDEV #test #JavaScript

Выберите правильный вариант 👇🏼

Как работать с DOM в JavaScript?

В этом видео вы научитесь выполнять аж 26 задач элементами DOM (объектная модель документа) и разберёте ключевые методы работы с ним. Вот как минимум несколько из таких задач:

1. Создание и удаление элементов на странице
2. Динамическое создание HTML-разметки
3. Добавление классов к элементам
4. Использование обработчиков событий на созданных элементах

📺 YouTube

WebDEV #видео

💡 Поддерживайте модульность компонентов

Модульность. Разделите дизайн на независимые и повторно используемые модули или компоненты. Это упрощает процесс разработки и обновления сайта, а также позволяет быстро вносить изменения и добавлять новые функции.

WebDEV #советы

WebDEV #test #HTML

Выберите правильный вариант 👇🏼

Цикл событий JavaScript простым языком

Наверняка многие задумывались, как NodeJS способен обрабатывать такие серьёзные нагрузки, учитывая, что он работает всего в одном потоке. На самом деле, правда заключается в том, что большая часть времени, которую сервер тратит на обработку одного клиента, — это ожидание. Либо ожидание ответа от клиента, либо сама отправка запроса через сеть.

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

В этом видео вы узнаете, как это работает и почему это очень круто.

📺 YouTube

WebDEV #видео