Мы в сети

VK
FB

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

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

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

Курс Видеокурс "Веб-дизайн+Верстка". (Даниила Волосатова и Дениса Булыга - 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)
  • Похожие видеокурсы по теме:
    Видеокурс Бесплатный видео урок
    Видеокурс Бесплатный видео урок
    Видеокурс Курс
    Видеокурс Бесплатный видео урок
    Видеокурс Бесплатный видео урок
    Видеокурс Видео урок
  • Смотрите бесплатное видео по теме:
    Промо ролики видеокурса Full-Stack практика. Создание JavaScript блога. (Владилен Минин - Webformyself)
    Промо ролики видеокурса JavaScript. Быстрый старт. (Владилен Минин - Webformyself)
    Промо ролики видеокурса Server Side Rendering с Nuxt.js. Быстрый старт. (Владилен Минин - Webformyself)
    Промо ролики видеокурса PSD to HTML5 и CSS3. Верстка макета с нуля. (Денис Булыга - Webformyself)
    Промо ролики видеокурса React JS. Основы. (Владилен Минин - Webformyself)
    Промо ролики видеокурса WordPress – основы создания тем. (Андрей Кудлай - Webformyself)

Добавить комментарий


Защитный код
Обновить