Верстаем меню для сайта

Вы узнаете, как с помощью HTML и CSS сверстать типичное меню, которое подойдёт почти для любого сайта. Зачастую на сайтах меню реализовано по одинаковому шаблону, который вы и научитесь верстать.

📺 YouTube

WebDEV #видео

🛠 Blush — это сайт с иллюстрациями, созданный Пабло Стэнли, и он не похож ни на один другой.

Здесь можно целиком собрать персонажа: из десятков вариантов выбрать волосы, модель брюк, тон кожи и многое другое. Гибкость и возможности этого инструмента позволяют создать по-настоящему уникального персонажа, и даже не надо открывать Illustrator.

🌍 Сайт

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

WebDEV #test #CSS

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

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

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

📺 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 #видео