Последние поступления

  • Бесплатный видеокурс
  • Видеокурс
  • Книга
  • Книга
  • Бесплатный видеокурс
  • Видеокурс

    Последние новости

    • Скидка 40%. Программирование на JavaScript с Нуля до Гуру 2.0. (Михаил Русаков)
    • Скидка на видеокурсы - Волшебные коллажи, 12 сказочных коллажей, Fatalism Start 2020, Fatalism Neon, Fatalism Art. (Фотошоп-мастер)
    • Скидка 60%. Клуб для веб-разработчиков от WebForMySelf

      Мы в сети

      VK
      FB

      Оформите подписку!

       Введите Ваш E-m@il и
      получайте свежие новости

      Видеокурс
      Видеокурс "Веб-дизайн+Верстка". (Даниила Волосатова и Дениса Булыга - Webformyself)
      Курс

      Рейтинг:

      Страница автора - Даниила Волосатова и Дениса Булыга - Webformyself

      Автор(ы): Даниила Волосатова и Дениса Булыга

      Авторский видео курс Даниила Волосатова и Дениса Булыга «Веб-дизайн+Верстка». Уникальность курса состоит в том, что Вы увидите создание дизайн-макета в Figma для современного, функционального лендинга: отдельно для десктопа и отдельно для мобильных устройств. После чего увидите, как верстается полученный макет с использованием современных и востребованных технологий верстки: HTML5, CSS3, Grid, Flexbox, Sass и других. Таким образом, в одном месте вы получаете единый комплексный процесс создания дизайна и верстки, полученного дизайн-макета. А на выходе – готовый сайт-лендинг, который сможете дорабатывать для любых коммерческих целей и поместить в портфолио. Таким образом, данный курс – это 2 в 1: Веб-дизайн+Верстка.

      Смотреть видео:

      Веб-дизайн+Верстка. (Даниила Волосатова и Дениса Булыга - Webformyself)

      Содержание:

      Раздел 1. Веб-дизайн

      • Блок №1. Figma от А до Я

      Будет разобран весь инструментарий Figma, значительно превосходящий по функциям и актуальности возможности Фотошопа, для быстрого создания веб-дизайна любой сложности. Рассмотрим все 19 инструментов, которые потребуются для создания современных дизайнов сайтов.

      • Урок №1. Скачивание программы

      В этом уроке вы увидите, как сделать аккаунт и скачать программу Figma на компьютер.

      • Урок №2. Обзор интерфейса

      В этом уроке будет разобран интерфейс Figma: что где находится и краткий обзор функциональности этого ультрасовременного продвинутого инструмента.

      • Урок №3. Frame

      Frame – это тоже самое что и монтажная область в Фотошопе, только намного продуманнее и удобнее. В этом уроке будет рассмотрен весь ее функционал.

      • Урок №4. Move и Scale

      Move – это основной инструмент, которым будем взаимодействовать при работе. Также будет рассмотрен малоиспользуемый инструмент Scale.

      • Урок №5. Инструмент формы

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

      • Урок №6. Перо и карандаш

      Большая часть этого урока посвящена инструменту Перо. Как использовать данный инструмент в веб-дизайне.

      • Урок №7. Инструмент текст

      Узнаете параметры данного инструмента и то, как с ним работать.

      • Урок №8. Комментарии

      Комментирование – это очень удобный инструмент для работы в команде. В этом уроке вы узнаете, как работать с этим инструментом.

      • Урок №9. Экспорт

      В этом уроке вы узнаете, как экспортировать различные элементы в разных форматах.

      • Урок №10. Смарт-выравнивание

      Смарт-выравнивание есть только в Figma – это очень удобная функция, которую мы разберем.

      • Урок №11. Маска слоя

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

      • Урок №12. Share

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

      • Урок №13. Модульная сетка

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

      • Урок №14. Режим смешивания

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

      • Урок №15. Стили для текста

      В Figma вы можете создавать библиотеку из текстовых стилей и быстро их использовать. Этому и будет посвященный данный урок.

      • Урок №16. Стили для цвета

      Помимо текстовых стилей вы можете еще сделать библиотеку из цветовых стилей.

      • Урок №17. Компоненты

      Компоненты – это самая важная часть при создании дизайна. В этом уроке узнаете, что это такое и как ими пользоваться.

      • Урок №18. Адаптивные элементы

      В Figma вы можете делать резиновые блоки. Как это делается, вы узнаете в этом уроке.

      • Урок №19. Прототипирование

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

      • Блок №2. Дизайн. Десктоп версия

      Из уроков блока вы узнаете, как создавать полноэкранные дизайны сайтов для настольных компьютеров и планшетов. Всего будет 6 экранов. Узнаете, как работать с фреймами, сетками и формами.

      • Урок №1. Frame и Grid

      В этом уроке создается фрейм нужного размера для поэкранного дизайна и добавляется сетка.

      • Урок №2. Перенос ТЗ

      В этом уроке переносится техническое задание из текстового файла в Figma.

      • Урок №3. Основные элементы

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

      • Урок №4. Первый экран

      В этом уроке собирается черновой вариант первого экрана. Без цветов и графики. Задача: правильно расположить все элементы.

      • Урок №5. Второй экран

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

      • Урок №6. Третий экран

      В этом уроке будет работа с формами и всплывающими элементы.

      • Урок №7. Четвертый экран

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

      • Урок №8. Пятый экран

      В этом уроке узнаете, как делать чек боксы, ползунки и кнопки. В итоге будет собран калькулятор на сайте.

      • Урок №9. Шестой экран

      В этом уроке будет сделан блок с контактами, к которым добавится текст и иконки.

      • Урок №10. Добавление цвета

      В этом уроке будут добавлены цвета для всего макета, для кнопок, текста и других элементов.

      • Урок №11. Добавление графики

      В уроке будет добавлена вся необходимая графика, фоны, изображения и т.д.

      • Урок №12. Всплывающие меню

      В этом уроке вы увидите создание отдельного экрана с выпадающим меню.

      • Урок №13. Подготовка макета для верстки

      В этом уроке увидите подготовку макета перед версткой. Будут структурированы все элементы, слои и папки.

      • Урок №14. Интерактивные элементы

      В финале вы увидите, как делать интерактивные элементы, которые также нужны перед тем, как верстать макет.

      • Блок №3. Дизайн. Мобильная версия

      В этом модуле вы увидите, как адаптировать поэкранные дизайны сайтов под мобильную версию от А до Я.

      • Урок №1. Теория о мобильной версии и бутсрап-сетка

      В этом уроке увидите технологию адаптации десктоп версии под мобильную версию со всеми нюансами.

      • Урок №2. Первый экран

      В этом уроке переносим первый экран так, чтобы он умещался на экране телефона.

      • Урок №3. Второй экран

      В этом уроке увидите, как переносить галерею с навигацией.

      • Урок №4. Третий экран

      В этом уроке увидите, как создавать отдельный вид, отличающийся от десктоп версии.

      • Урок №5. Четвертый экран

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

      • Урок №6. Пятый экран

      В этом уроке будет адаптирован и сделан удобный калькулятор для мобильной версии.

      • Урок №7. Шестой экран

      В этом уроке увидите, как перенести форму контактов и карту.

      • Урок №8. Меню

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

      Раздел №2.Верстка сайта

      В данном разделе курса показана верстка макета, который создавали в предыдущем разделе. Макет имеет нестандартную структуру – каждый логический раздел сайта занимает ровно один экран. При его верстке мы будем реализовывать различные интересные эффекты: появления дополнительного контента, калькулятор стоимости работ, галерею изображений, «поэкранную» навигацию с плавным скролом между разделами и т.д. И конечно, верстка данного макета будет адаптивной. В данном разделе последовательно, шаг за шагом показывается создание верстки страницы из макета, созданного в Figma. Показано, как описать разметку для каждого блока сайта, как стилизовать блоки, чтобы они выглядели именно так, как были нарисованы на макете, и как адаптировать каждый блок под мобильные устройства. Также показано, как подключить и использовать дополнительные библиотеки, которые необходимы для реализации эффектов, которые должны присутствовать на странице. При верстке данного макета показано использование самых последних техник и технологий верстки, такие как Flex и Grid. В итоге вы увидите, как сверстать достаточно сложный, нестандартный макет, который был создан в предыдущей части курса.

      • Урок №1. Подготовка к верстке

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

      • Урок №2. Разметка фиксированного меню и первого экрана

      В этом видео увидите создание HTML-структуры для верхнего фиксированного меню, а также первого экрана страницы лендинга.

      • Урок №3. Стилизация фиксированного блока

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

      • Урок №4. Адаптивность фиксированного блока

      В этом видео продолжается работа над фиксированным блоком, добавляются недостающие элементы в структуру HTML и прописываются необходимые медиазапросы для адаптивности данного блока.

      • Урок №5. Стилизация первого экрана

      В этом видео увидите написание необходимого CSS-кода для первого экрана страницы лендинга.

      • Урок №6. Адаптивность первого экрана лендинга

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

      • Урок №7. Подключение библиотеки Fullpage

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

      • Урок №8. HTML-разметка для экрана с проектами

      В этом видео увидите описание HTML-структуры для второго экрана лендинга.

      • Урок №9. Стилизация второго экрана

      В данном уроке увидите стилизацию блока с проектами.

      • Урок №10. Адаптивность второго экрана

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

      • Урок №11. Разметка экрана Details

      В данном видео увидите описание HTML-структурs для экрана Details.

      • Урок №12. Стилизация блока Details

      В этом видео увидите стилизацию блока Details под мобильные устройства.

      • Урок №13. Адаптивность блока Details

      В этом видео увидите адаптацию блока Details под различные разрешения экрана при помощи медиазапросов.

      • Урок №14. HTML-разметка блока List-of-works

      В этом уроке увидите описание HTML-структурa блока List-of-works.

      • Урок №15. Стилизация блока List-of-works

      В этом уроке увидите описание CSS-стилей для блока List-of-works.

      • Урок №16. Адаптивность блока List-of-works

      В этом уроке увидите добавление медиазапросов и адаптацию данного блока.

      • Урок №17. HTML-структура экрана с калькулятором

      В этом видеоуроке увидите создание HTML-разметки для калькулятора.

      • Урок №18. CSS-стили для калькулятора

      В данном уроке увидите описание CSS-стилей для калькулятора.

      • Урок №19. Адаптивность калькулятора

      В данном уроке полностью сделается экран калькулятора, добавив ему адаптивность.

      • Урок №20. HTML-разметка для экрана контактов

      В данном уроке увидите написание HTML-структуры для блока контактов.

      • Урок №21. Стилизация контактов

      В данном уроке увидите написание CSS для экрана контактов.

      • Урок №22. Адаптивность контактов

      В данном уроке доверстываются контакты, добавляется им адаптивность при помощи медиазапросов.

      • Урок №23. Реализация точечной навигации

      В данном видеоуроке увидите реализацию с нуля точечной навигации и кнопки скролла экрана.

      • Урок №24. HTML-структура главного меню

      В этом видео увидите написание HTML-структуры для главного меню.

      • Урок №25. Полная стилизация главного меню

      В этом видеоуроке завершается работа над лендингом, доделывается главное меню.

      • Практический итог

      Увидите создание дизайн-макета в Figma для современного, функционального лендинга: отдельно для десктопа и отдельно для мобильных устройств. После чего увидите, как верстается полученный макет с использованием современных и востребованных технологий верстки: HTML5, CSS3, Grid, Flexbox, Sass и других. Таким образом, в одном месте вы получаете единый комплексный процесс создания дизайна и верстки, полученного дизайн-макета. А на выходе – готовый сайт-лендинг, который сможете дорабатывать для любых коммерческих целей и поместить в портфолио.

      Бонусы к урокам по веб-дизайну

      • Бонус №1. Интерактивный прототип

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

      Количество уроков: 1

      Продолжительность курса: 00:07:37

      Автор: Даниил Волосатов

      • Бонус №2. 7 лайфхаков по работе в Figmа

      В данном бонусе будет рассказано о 7 секретных функций Figma, которые упростят вашу работу.

      Количество уроков: 1

      Продолжительность курса: 00:06:20

      Автор: Даниил Волосатов

      Бонусы к урокам по верстке

      • Бонус №3. Премиум-курс «Учебник по основам HTML для начинающих»

      Учебник призван заложить фундамент и дать базовые основы языка гипертекстовой разметки текста HTML всем новичкам, включая наиболее востребованные в верстке теги. Изученных тегов вам будет вполне достаточно для создания сайтов практически любой сложности, и при этом объем материалов будет приемлемым для качественного усвоения и запоминания, не забивая и без того перегруженную голову новичка лишними деталями. Задания для самостоятельного выполнения дадут возможность лучше изучить HTML и закрепить полученные знания на практике. В курсе разбирается форматирование текста, работа с изображениями, ссылками, списками, таблицами и формами.

      Количество уроков: 8

      Продолжительность курса: 01:57:09

      Автор: Андрей Бернацкий

      • Бонус №4. Премиум-курс «Учебник по основам CSS для начинающих»

      При верстке веб-страниц HTML отвечает за разметку страницы, то есть за ее построение. А за оформление страницы, то есть за ее дизайн и внешний вид, отвечает CSS. В учебнике по основам CSS для начинающих подробно изучаются необходимые для создания сайтов CSS-свойства. Изученных свойств вам будет вполне достаточно для создания сайтов практически любой сложности, и при этом количество свойств будет приемлемо для качественного усвоения и запоминания. В курсе предусмотрены задания для самостоятельного выполнения, что поможет закрепить знания из курса на практике. Разделы CSS, которые изучаются в учебнике: способы подключения CSS к странице и назначения классов, оформление текста, свойства фона, размеры и отступы, границы элементов, плавающие блоки, позиционирование и видимость блоков.

      Количество уроков: 10

      Продолжительность курса: 01:31:17

      Автор: Андрей Бернацкий

      • Бонус №5. Премиум-курс «Верстка сайта для начинающих»

      При создании сайтов этап верстки идет после этапа дизайна. В курсе по верстке сайта для начинающих есть приближение к реальной разработке, и верстается HTML-страница из готовой картинки формата PSD, созданной дизайнерами на предыдущем этапе. Курс рассчитан преимущественно на новичков в сайтостроении и верстке. Но также будет полезен и тем разработчикам, у которых уже есть знания по HTML и CSS, но не хватает навыков в верстке реальных макетов с нуля. Макет, который верстается в курсе, имеет очень распространенную, двухколоночную структуру. Поэтому, выполнив верстку данного макета и полностью разобравшись с ней, у вас больше не будет сложностей с версткой сайтов подобной структуры. В курсе пошагово показано, как выполнить верстку на примере конкретного проекта.

      Количество уроков: 5

      Продолжительность курса: 1:24:02

      Автор: Андрей Бернацкий

      • Бонус №6. Премиум-курс «HTML5. Основы»

      В данном премиум-курсе рассматриваются основы HTML5, наиболее востребованные и актуальные в процессе верстки. HTML5 - это не полностью новая технология или полностью новый стандарт, а дополненный новыми возможностями HTML4. Поэтому все что работало в HTML4 будет работать и в HTML5. Конечно, есть некоторые конструкции, которые уже устарели и в HTML5 не вошли, о чем детально рассказано в самом курсе. HTML5 предоставляет более широкие функциональные возможности и упрощает процесс создания сайтов, нежели более устаревшие спецификации, которые все еще активно «по старинке» используются незадачливыми верстальщиками. В уроках курса продемонстрированы важные новшества, которые появились в HTML5 и которых не было в предыдущих спецификациях стандарта.

      Количество уроков: 13

      Продолжительность курса: 02:23:17

      Автор: Андрей Бернацкий

      • Бонус №7. Премиум-курс «CSS3. Основы»

      В данном премиум-курсе рассматриваются основы CSS3, наиболее востребованные и актуальные в процессе верстки. Основными преимуществами CSS3 являются простота использования, ускорение процесса разработки и оформления web-страниц, уменьшение размера кода, практически 100% кроссбраузерность, при этом множество свойств уже можно использовать без префиксов. Наиболее прогрессивная и «прокачанная» спецификация CSS3 предоставляет нам множество возможностей и свойств, при помощи которых можно реализовывать различные визуальные эффекты, некоторые из которых ранее применялись только с использованием JavaScript или изображений. Данный видеокурс от команды Webformyself поможем вам в изучении множества новых возможностей и свойств CSS3, которые сделают вашу работу более продуктивной и комфортной!

      Количество уроков: 20

      Продолжительность курса: 04:46:02

      Автор: Денис Булыга

      • Бонус №8. Премиум-курс «Теория и практика адаптивной верстки»

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

      Количество уроков: 10

      Продолжительность курса: 02:23:44

      Автор: Денис Булыга

      • Бонус №9. Премиум-курс «CSS Grid Layout»

      В уроках премиального видеокурса мы познакомимся с очень популярным модулем под названием CSS Grid Layout, который позволяет строить двумерные сетки и создавать довольно удобные и гибкие пользовательские интерфейсы. В рамках курса будут рассмотрены основные понятия, которые нужно освоить для дальнейшей работы и осознания того из чего состоят сетки. Также мы постепенно погрузимся в изучение работы различных свойств, предназначенных для создания grid-контейнера, разметки, размеров колонок и рядов, именования grid-линий и многих других возможностей для работы с grid-элементами и grid-контейнером. По окончанию теоретической части вас ожидает практика для закрепления полученных знаний. Повторяя шаг за шагом по материалам уроков курса, вы сможете сверстать макет при помощи технологии Grid.

      Количество уроков: 6

      Продолжительность курса: 01:07:01

      Автор: Денис Булыга

      • Бонус №10. Бонусы к урокам по веб-дизайну

      Премиум-курс «Flexbox»

      В новом премиальном видеокурсе рассматривается CSS-модуль Flexbox, используя который можно верстать гибкие макеты различной сложности, при этом не используя float и inline-block. Если вы имеете какие-то начальные знания в области верстки, то это будет плюсом при прохождении курса, однако и новички могут осваивать данную технологию с нуля. На протяжении курса изучаются все основные свойства, которые нам предоставляет Flexbox, а также по шагам разобраны необходимые в процессе верстки полезные функции модуля. В каждом уроке разбирается не только теория, но и приводятся примеры, касающиеся изучаемых CSS-свойств Flexbox. В практической части курса показывается верстка макета с чистого листа, начиная от написания структуры HTML и заканчивая CSS-стилями.

      Количество уроков: 7

      Продолжительность курса: 02:02:19

      Автор: Денис Булыга

      • Бонус №11. Премиум-курс «Препроцессор Sass»

      CSS-препроцессор Sass — это профессиональный инструмент, который должен освоить каждый web-разработчик. Написание кода с его использованием становится более простым и понятным, однако это является далеко не основным преимуществом препроцессора. Первое и, наверное, самое главное преимущество препроцессоров в том, что ваша разработка ускоряется в несколько раз, при этом множество однотипных операций можно выполнить всего лишь одной строкой кода. Помимо этого, появляется возможность использования переменных, вложенных селекторов, создания функций, условий, циклов, миксинов и множество других операций.

      Количество уроков: 10

      Продолжительность курса: 02:09:49

      Автор: Денис Булыга

      Видеокурс "Веб-дизайн+Верстка". (Даниила Волосатова и Дениса Булыга - Webformyself)
      Страница курса - Веб-дизайн+Верстка. (Даниила Волосатова и Дениса Булыга - Webformyself)

      ПОПУЛЯРНЫЕ КНИГИ, КУРСЫ И ТРЕНИНГИ

      Видеокурс Видео урок
      Видеокурс Видео урок
      Видеокурс Бесплатный видео урок
      Видеокурс Бесплатный видео урок
      Видеокурс Бесплатный видео урок
      Видеокурс Бесплатный видео урок

      БЕСПЛАТНОЕ ВИДЕО, МИНИ - КУРСЫ

      Промо ролики видеокурса PSD to HTML5 и CSS3. Верстка макета с нуля. (Денис Булыга - Webformyself)
      Промо ролики видеокурса JavaScript. Быстрый старт. (Владилен Минин - Webformyself)
      Промо ролики видеокурса React JS. Основы. (Владилен Минин - Webformyself)
      Промо ролики видеокурса Server Side Rendering с Nuxt.js. Быстрый старт. (Владилен Минин - Webformyself)
      Промо ролики видеокурса WordPress – основы создания тем. (Андрей Кудлай - Webformyself)
      Промо ролики видеокурса Full-Stack практика. Создание JavaScript блога. (Владилен Минин - Webformyself)