Профессиональная, быстрая и комфортная верстка сайтов

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

Программа курса

1. Модуль 3 видео, 30 минут
  • 01. Работа с редактором кода
  • 02. Работа с emmet
  • 03. Горячие клавиши

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

2. Модуль 6 видео, 1 час 17 минут
  • 01. Task-runner. Что это?
  • 02. Установка Gulp
  • 03. Настройка gulpfile.js
  • 04. Удобная структура проекта
  • 05. Создаем gulp таски
  • 06. Работа с плагином panini

Данный модуль посвящен автоматизации процессов. Установим таск-раннер Gulp, который будет выполнять 90% рутинной работы за вас - проставлять префиксы, уменьшать CSS и javascript файлы, оптимизировать изображения, удобно работать с HTML и многое другое. Научитесь использовать npm для установки библиотек. Вы узнаете как создать структуру проекта и как работать с файлами максимально эффективно.

3. Модуль 6 видео, 1 час 20 минут
  • 01. БЭМ методология
  • 02. Процесс работы с проектом
  • 03. Работа с библиотеками
  • 04. Изучаем препроцессор SASS
  • 05. Модульная работа с Bootstrap4
  • 06. Как удобно работать с @media

Данный модуль посвящен методологии БЭМ, работе с SASS, эффективной работе с проектом, работе с фреймворком Bootstrap 4 и подключению сторонних библиотек используя npm. Вы узнаете, что такое БЭМ и как с ним работать. Вы узнаете как грамотно и эффективно организовать рабочий процесс. Вы узнаете как работать с препроцессором SASS. Вы узнаете как грамотно работать с Bootstrap 4, подключая только необходимые модули.

4. Модуль 5 видео, 40 минут
  • 01. Правильная и плавная анимация
  • 02. Шрифты. Какие лучше?
  • 03. Системные шрифты - лучшее решение
  • 04. Что влияет на скорость работы сайта
  • 05. Тестируем скорость работы сайта

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

5. Модуль 2 видео, 36 минут
  • 01. Стиль написания кода
  • 02. Полезные советы

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

6. Модуль - практика 11 видео, 3 часа 08 минут
  • 01. Создаем новый проект
  • 02. Верстка шапки сайта
  • 03. Верстка центральной части
  • 04. Верстка подвала и анимация
  • 05. Стилизация модального окна
  • 06. Верстка страница "Сервисы"
  • 07. Верстка страницы "Портфолио"
  • 08. Работа со слайдером
  • 09. Адаптация сайта
  • 10. Оптимизация изображений
  • 11. Favicon для сайта

Данный модуль посвящен практике. Вы сверстаете сайт-портфолио, используя все изученные технологии, и научитесь делать это быстро и качественно. Практика работы с Gulp, SASS, БЭМ, Bootstrap 4, SVG спрайты, оптимизация и многое другое!

После прохождения курса

Научитесь эффективно работать с редактором кода. Узнаете какие плагины необходимы для работы, какие горячие клавиши использовать
Будете писать код, который не ломается, используя методологии и правила написания качественного кода. Научитесь организовывать грамотную структуру проекта
Увеличите скорость разработки проектов используя современные инструменты разработки - Gulp, SASS, npm. Пусть рутиную работу выполняют машины!
Узнаете как увеличить скорость работы сайта и что на это влияет. Узнаете на что стоит обратить внимание и от чего нужно отказаться
Узнаете что отличает начинающего верстальщика от опытного. Узнаете на что не обращают внимание 90% верстальщиков и почему они пишут плохой код
Увеличите свой скилл верстки, почувствуете себя хорошим специалистом и соответственно повысите свой заработок

Знание
HTML и CSS

Вы должны знать HTML теги, что такое CSS свойства, значения и как с ними работать

Умение верстать
простые сайты

Желательно, чтобы Вы уже сделали несколько простых проектов самостоятельно

Базовые знания
javascript / jQuery

Вы должны знать основы работы с Javascript и jQuery, уметь писать простые скрипты

Желание изучать
новые технологии

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

Что нужно для прохождения курса

Убедитесь в том, что у вас есть все требования для прохождения обучающего курса

Посмотрите короткую презентацию курса

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

Дмитрий
Валак

Front-end разработчик. Практик верстки сайтов.

Созданием сайтов занимаюсь с 2012 года. Работал в нескольких ИТ компаниях и наработал более 10 000 часов в создании сайтов различной сложности.

Веду свой youtube-канал, где делюсь опытом совершенно бесплатно!

Провожу живые курсы в городе Рига при поддержке Латвийского Университета.

Дмитрий Валак