- Блок №1. Верстка макета Landing Page
В первой части курса вы познакомитесь с макетом Landing Page. Эта часть включает в себя 27 уроков общей продолжительностью более 6 часов. Вы начнете с обзора того, что предстоит сверстать и увидите все составляющие макета. Далее будет показано несколько способов, как из макета Photoshop возможно экспортировать изображения для верстки. Вы увидите возможности автоматизации, пошаговую установку и настройку необходимых плагинов и, конечно же, настройку сборки при помощи Gulp 4, которую вы в дальнейшем сможете использовать для своей работы. Увидите описание HTML-разметки каждого из блоков, стилизацию и адаптацию их под различные разрешения экранов, чтобы верстка выглядела одинаково на различных устройствах. В итоге Вы увидите полноценную верстку Landing Page.
- Урок 1. Обзор PSD-макета и готовой верстки Landing Page
В этом уроке будет показана готовая верстка страницы Landing Page и разобраны все блоки и элементы из которых состоит данная страница.
- Урок 2. Экспорт изображений для верстки из Adobe Photoshop CC 2018
В данном уроке будет рассмотрено два способа экспорта изображений из графического редактора Photoshop CC 2018, а также создание иконок при помощи копирования SVG.
- Урок 3. Установка Node Js, Gulp CLI и инициализация проекта
В текущем уроке Вы узнаете, как установить утилиты Node.js и Gulp CLI глобально на ваш компьютер. Вкратце рассмотрена структура файлов и папок, инициализация проекта, и установка всех необходимых модулей для дальнейшей работы.
- Урок 4. Начало создания автоматизированной сборки при помощи Gulp 4
В этом видео Вы увидите создание сборки на Gulp 4, в которой производится декомпозиция файлов и настройка таких задач как: компиляция SCSS кода в CSS, конкатенация и минификация скриптов, копирование и удаление файлов проекта.
- Урок 5. Создание дополнительных задач по автоматизации
В данном видео сборка будет дополнена следующими задачами: минификация изображений, создание SVG-спрайтов, генерация изображений формата Web, установка слежения за изменением различных файлов и запуск сервера и автоматическая перезагрузка при помощи Browsersync.
- Урок 6. Подготовка к верстке и детальный обзор проекта
Из этого урока вы узнаете, как в несколько шагов установить необходимые модули в проект и произвести его запуск, также детально рассмотрена вся структура проекта. Особое внимание уделяется написанию стилей.
- Урок 7. Создание HTML-разметки для шапки сайта
В данном видеоуроке увидите написание HTML-разметки шапки сайта, логотипа и блока меню.
- Урок 8. Полная стилизация шапки сайта
В этом уроке добавляются все необходимые CSS-стили для шапки сайта, а также адаптация ее под все необходимые разрешения.
- Урок 9. Создание разметки для блока баннера
В этом видео начнется работа над блоком баннера и создание для него всей необходимой структуру.
- Урок 10. Стилизация баннера и написание собственного миксина
В текущем уроке Вы увидите написание полностью всего CSS-кода, включая медиа запросы для адаптивности. Также создается собственный миксин для стилизации кнопок.
- Урок 11. HTML-структура блока с преимуществами
В текущем уроке Вы увидите написание полностью всего CSS-кода, включая медиа запросы для адаптивности. Также создается собственный миксин для стилизации кнопок.
- Урок 12. Полная стилизация преимуществ
В данном уроке Вы увидите создание сетки для блока с преимуществами при помощи CSS Grid, а также полностью стилизацию и адаптацию всех его элементов.
- Урок 13. HTML-разметка блока с работами
В этом видеоуроке Вы узнаете о реализации блока Works.
- Урок 14. Написание стилей для блока работ
В этом уроке создается необходимая сетка для блока при помощи CSS Grid и верстка элементов согласно макету.
- Урок 15. Доступность интерактивных элементов и адаптация блока работ
В этом уроке будет затронута тема доступности интерфейсов. Вы узнаете почему стоит уделять ей внимание. Увидите реализацию взаимодействия с блоком работ и всей страницы в целом при помощи клавиатуры, а также адаптацию блока при помощи медиа запросов под различные разрешения.
- Урок 16. Написание структуры для информационного блока
В данном видео увидите написание HTML-разметки для блока Responsive.
- Урок 17. Полная стилизация информационного блока
В этом видео увидите стилизацию и адаптацию при помощи медиа запросов блок Responsive.
- Урок 18. Создание разметки для блока скиллов
В этом уроке увидите написание HTML-структуры блока со скиллами.
- Урок 19. Стилизация блока со скиллами
В этом видео будут написаны CSS-стили для блока скиллов и адаптация его под различные разрешения при помощи медиа выражений.
- Урок 20. Анимация линий блока прогресса
В этом видеоуроке создается JavaScript-функция, при помощи которой будет реализована плавная анимация линий прогресса элементов при прокрутке страницы.
- Урок 21. HTML-структура блока новостей
В данном видео создается HTML-разметка для блока новостей.
- Урок 22. Полная стилизация блока с новостями
В этом уроке буду написаны все необходимые стили блока новостей, адаптация его под различные разрешения, а также проверка доступности.
- Урок 23. HTML-разметка блока карусели
В этом уроке увидите создание HTML-структуры для блока с каруселью.
- Урок 24. Стилизация карусели и подключение плагина OwlCarousel
В данном видеоуроке увидите стилизацию блока карусели, установку и подключение плагина OwlCarousel, а при помощи медиа запросов и настроек карусели адаптацию ее под различные разрешения.
- Урок 25. HTML-разметка блока контактов
В этом видеоуроке увидите создание структуры блока контактов и подключения Яндекс карты при помощи конструктора карт Яндекса.
- Урок 26. Полная стилизация блока контактов
В этом уроке увидите стилизацию и адаптацию под различные разрешения блок контактов.
- Урок 27. Полная реализация подвала
В этом уроке завершается верстка страницы Landing Page.
- Блок №2. Верстка главной страницы сайта студии
Во второй части курса показана верстка главной страницы сайта студии. Данная часть включает в себя 25 уроков общей продолжительностью более 6 часов. Этот блок является более сложным по сравнению с предыдущим, т.к. его реализация будет полностью «резиновой», используя при этом адаптивную типографику, SVG-спрайты, ретинизацию изображений и многие другие возможности, о которых вы узнаете в данном блоке. Начнем с обзора макета, после чего будет рассмотрен еще один способ экспорта графики, а именно SVG из Adobe Illustrator. Далее подготовка к верстке, создание проекта и установка в него необходимых зависимостей, и шаг за шагом реализация имеющихся блоков. В результате, используя уже готовую сборку проекта при помощи Gulp 4 из предыдущего блока курса, вы полностью увидите процесс верстки главной страницы сайта студии.
В данном уроке Вы увидите PSD-макет, который в последующих уроках будет верстан. Также вкратце рассказано о некоторых особенностях, которые будут использоваться при его верстке.
- Урок 2. Экспорт SVG из Adobe Illustrator
В этом видео увидите еще один способ сохранения векторных изображений при помощи графического редактора Adobe Illustrator.
- Урок 3. Подготовка к верстке
В данном видеоуроке Вы познакомитесь со структурой проекта.
- Урок 4. HTML-разметка шапки сайта
В этом видеоуроке увидите написание HTML-структуры шапки сайта.
- Урок 5. Стилизация шапки сайта
В этом видеоуроке увидите, как создается Grid-сетка для шапки сайта, а также ее стилизация.
- Урок 6. Адаптив шапки сайта
В этом уроке увидите, каким образом будет адаптирована шапка сайта, а также добавляются двукратные фоновые изображения, используя медиа запросы.
- Урок 7. Улучшение типографики
В этом видео увидите, как создаются миксины, позволяющий динамически управлять размером шрифта в зависимости от вьюпорта и применение его для шапки сайта.
- Урок 8. Создание разметки для блока меню
В этом видеоуроке увидите создание HTML-разметки для блока меню.
- Урок 9. Стилизация блока меню
В данном уроке увидите написание CSS-стилей для блока меню и кнопки гамбургера.
В этом уроке увидите завершение реализации блока меню с добавлением JavaScript-кода.
- Урок 11. HTML-разметка блока проектов
В этом видеоуроке увидите создание HTML-разметки для блока проектов.
- Урок 12. Стилизация блока проектов. Часть 1
В данном видео Вы увидите стилизацию блока проектов. Создается сетка, распределение по ней всех элементов, а также добавление для каждого элемента фонового изображения.
- Урок 13. Стилизация блока проектов. Часть 2
Данный видеоурок является продолжением стилизации блока проектов. Добавляется CSS, отвечающий за внешний вид текстовой информации внутри каждого элемента.
- Урок 14. Стилизация блока проектов. Часть 3
В этом видео размещается информация внутри элементов на свои места согласно дизайн макета.
- Урок 15. Адаптация блока проектов
В этом видеоуроке Вы увидите полностью адаптацию блока проектов, добавление динамического изменения размеров шрифта, использование двукратных изображений и изменение сетки для различных разрешений.
- Урок 16. HTML-разметка блока студио
В данном видео добавляется разметка для блока студио.
- Урок 17. Стилизация блока студио. Часть 1
В этом видео увидите начало стилизации блока студио, создание сетки для данного блока и написание CSS для некоторых внутренних элементов.
- Урок 18. Стилизация блока студио. Часть 2
В этом видео увидите написание CSS-стилей для блока с работниками.
- Урок 19. Адаптация блока студио
В этом видео увидите полное завершение работы над блоком студио, адаптация его под различные разрешения и добавление адаптивной типографики.
- Урок 20. HTML-разметка блока с новостями
В данном видео увидите начало работы над блоком новостей и создание необходимой HTML-разметки данного блока.
- Урок 21. Стилизация блока новостей
В этом видеоуроке продолжается работа над блоком новостей, создается сетка для него и стилизация всех внутренних элементы согласно дизайн макета.
- Урок 22. Адаптация блока новостей
В этом видео увидите завершение работы над блоком новостей добавлением необходимых медиа запросы и стилей, чтобы он корректно отображался на различных разрешениях.
- Урок 23. Разметка подвала
В данном видеоуроке увидите написание HTML-структуры подвала страницы сайта.
- Урок 24. Полная стилизация подвала сайта
В этом видео увидите полную стилизацию и адаптацию подвала сайта под различные разрешения.
- Урок 25. Подключение Google maps
В данном видео познакомитесь с API Google Maps, при помощи которого будет подключена и настроена Google-карта для страницы сайта.
БОНУСЫ
- Бонус 1. Премиум-курс «Учебник по основам HTML для начинающих»
Автор: Андрей Бернацкий
Учебник призван заложить фундамент и дать базовые основы языка гипертекстовой разметки текста HTML всем новичкам, включая наиболее востребованные в верстке теги. Изученных тегов вам будет вполне достаточно для создания сайтов практически любой сложности, и при этом объем материалов будет приемлемым для качественного усвоения и запоминания, не забивая и без того перегруженную голову новичка лишними деталями. Задания для самостоятельного выполнения дадут возможность лучше изучить HTML и закрепить полученные знания на практике. В курсе разбирается форматирование текста, работа с изображениями, ссылками, списками, таблицами и формами.
- Бонус 2. Премиум-курс «Учебник по основам CSS для начинающих»
Автор: Андрей Бернацкий
При верстке веб-страниц HTML отвечает за разметку страницы, то есть за ее построение. А за оформление страницы, то есть за ее дизайн и внешний вид, отвечает CSS. В учебнике по основам CSS для начинающих подробно изучаются необходимые для создания сайтов CSS-свойства. Изученных свойств вам будет вполне достаточно для создания сайтов практически любой сложности, и при этом количество свойств будет приемлемо для качественного усвоения и запоминания. В курсе предусмотрены задания для самостоятельного выполнения, что поможет закрепить знания из курса на практике. Разделы CSS, которые изучаются в учебнике: способы подключения CSS к странице и назначения классов, оформление текста, свойства фона, размеры и отступы, границы элементов, плавающие блоки, позиционирование и видимость блоков.
- Бонус 3. Премиум-курс «Верстка сайта для начинающих»
Автор: Андрей Бернацкий
При создании сайтов этап верстки идет после этапа дизайна. В курсе по верстке сайта для начинающих есть приближение к реальной разработке, и верстается HTML-страница из готовой картинки формата PSD, созданной дизайнерами на предыдущем этапе. Курс рассчитан преимущественно на новичков в сайтостроении и верстке. Но также будет полезен и тем разработчикам, у которых уже есть знания по HTML и CSS, но не хватает навыков в верстке реальных макетов с нуля. Макет, который верстается в курсе, имеет очень распространенную, двухколоночную структуру. Поэтому, выполнив верстку данного макета и полностью разобравшись с ней, у вас больше не будет сложностей с версткой сайтов подобной структуры. В курсе пошагово показано, как выполнить верстку на примере конкретного проекта.
- Бонус 4. Премиум-курс «HTML5. Основы»
Автор: Андрей Бернацкий
В данном премиум-курсе рассматриваются основы HTML5, наиболее востребованные и актуальные в процессе верстки. HTML5 - это не полностью новая технология или полностью новый стандарт, а дополненный новыми возможностями HTML4. Поэтому все что работало в HTML4 будет работать и в HTML5. Конечно, есть некоторые конструкции, которые уже устарели и в HTML5 не вошли, о чем детально рассказано в самом курсе. HTML5 предоставляет более широкие функциональные возможности и упрощает процесс создания сайтов, нежели более устаревшие спецификации, которые все еще активно «по старинке» используются незадачливыми верстальщиками. В уроках курса продемонстрированы важные новшества, которые появились в HTML5 и которых не было в предыдущих спецификациях стандарта.
- Бонус 5. Премиум-курс «CSS3. Основы»
Автор: Денис Булыга
В данном премиум-курсе рассматриваются основы CSS3, наиболее востребованные и актуальные в процессе верстки. Основными преимуществами CSS3 являются простота использования, ускорение процесса разработки и оформления web-страниц, уменьшение размера кода, практически 100% кроссбраузерность, при этом множество свойств уже можно использовать без префиксов. Наиболее прогрессивная и «прокачанная» спецификация CSS3 предоставляет нам множество возможностей и свойств, при помощи которых можно реализовывать различные визуальные эффекты, некоторые из которых ранее применялись только с использованием JavaScript или изображений. Данный видеокурс от команды Webformyself поможем вам в изучении множества новых возможностей и свойств CSS3, которые сделают вашу работу более продуктивной и комфортной!
- Бонус 6. Премиум-курс «Теория и практика адаптивной верстки»
Автор: Денис Булыга
В данном премиальном видеокурсе будут разобраны теоретические основы и практические аспекты, касающихся реализации адаптивной верстки. Адаптивная верстка подразумевает под собой верстку, при которой внешний вид сайта удобен для взаимодействия с пользователем на различных устройствах, будь то планшет, мобильный телефон, ноутбук или настольный компьютер. Иначе говоря, при адаптивной верстке блоки сайта динамически подстраиваются под различные разрешения экрана. Также в уроках курса рассмотрены различные техники при работе с медиазапросами, изображениями, текстом, видео и другими различными элементами.
- Бонус 7. Премиум-курс «CSS Grid Layout»
Автор: Денис Булыга
В уроках премиального видеокурса мы познакомимся с очень популярным модулем под названием CSS Grid Layout, который позволяет строить двумерные сетки и создавать довольно удобные и гибкие пользовательские интерфейсы. В рамках курса будут рассмотрены основные понятия, которые нужно освоить для дальнейшей работы и осознания того из чего состоят сетки. Также мы постепенно погрузимся в изучение работы различных свойств, предназначенных для создания grid-контейнера, разметки, размеров колонок и рядов, именования grid-линий и многих других возможностей для работы с grid-элементами и grid-контейнером. По окончанию теоретической части вас ожидает практика для закрепления полученных знаний. Повторяя шаг за шагом по материалам уроков курса, вы сможете сверстать макет при помощи технологии Grid.
- Бонус 8. Премиум-курс «Flexbox»
Автор: Денис Булыга
В новом премиальном видеокурсе рассматривается CSS-модуль Flexbox, используя который можно верстать гибкие макеты различной сложности, при этом не используя float и inline-block. Если вы имеете какие-то начальные знания в области верстки, то это будет плюсом при прохождении курса, однако и новички могут осваивать данную технологию с нуля. На протяжении курса изучаются все основные свойства, которые нам предоставляет Flexbox, а также по шагам разобраны необходимые в процессе верстки полезные функции модуля. В каждом уроке разбирается не только теория, но и приводятся примеры, касающиеся изучаемых CSS-свойств Flexbox. В практической части курса показывается верстка макета с чистого листа, начиная от написания структуры HTML и заканчивая CSS-стилями.
- Бонус 9. Премиум-курс «Препроцессор Sass»
Автор: Денис Булыга
CSS-препроцессор Sass — это профессиональный инструмент, который должен освоить каждый web-разработчик. Написание кода с его использованием становится более простым и понятным, однако это является далеко не основным преимуществом препроцессора. Первое и, наверное, самое главное преимущество препроцессоров в том, что ваша разработка ускоряется в несколько раз, при этом множество однотипных операций можно выполнить всего лишь одной строкой кода. Помимо этого, появляется возможность использования переменных, вложенных селекторов, создания функций, условий, циклов, миксинов и множество других операций.
- Бонус 10. Мини-курс «Построение сеток при помощи Masonry»
Автор: Денис Булыга
В данном бонусном мини-курсе вы узнаете о JavaScript-библиотеке Masonry, при помощи которой можно создавать сетку и компактно располагать элементы внутри нее по вертикали, при этом анализируя их высоту. Также узнаете о возможных параметрах данного плагина и увидите подключение и построение сетки для макета из второго блока курса.
3D - моделирование (319)
Бизнес и заработок (416)
Графика и видео (449)
Графический дизайн (93)
Дети и их родители (84)
Духовные практики (20)
Женщина и мужчина (37)
Здоровье и спорт (192)
Инвестиции и финансы (290)
Иностранные языки (28)
Компьютер и программы (103)
Личностный рост (110)
Маркетинг и реклама (143)
Музыка и звука (21)
Программирование (92)
Работа и карьера (19)
Создание сайтов и блогов (296)
Строительство и ремонт (116)
Хобби и увлечения (158)
Разные курсы (1)
