Профессия верстальщика

О чём курс

Вам нужен готовый сайт, который корректно отображается в любом браузере и на любом мобильном устройстве — именно этот навык здесь разбирают от архитектуры веб-страницы до финальной сборки. Вы научитесь превращать макеты из Photoshop в полноценный код, используя современную блочную верстку, семантические теги HTML5 и стили CSS3. Внутри курса подробно разбирается, как работать с модульными сетками, оптимизировать верстку для ускорения загрузки и внедрять динамические элементы вроде слайдеров или галерей. Материал подойдет тем, кто хочет освоить базу веб-разработки и понять процесс создания сайтов с нуля до публикации.

Программа обучения

  • Урок 1. Основные понятия в веб-разработке
    • Как работает интернет, Что такое сайт, Что представляет собой веб-страница, Виды сайтов, Процесс разработки сайта, Что такое гипертекст, теги и атрибуты, Подготовка рабочего места, Простой пример HTML странички, Пример сложной веб-страницы, Горячие клавиши для перемещения по документам
  • Урок 2. Основы языка разметки документов HTML
    • Структура HTML документа, Основные теги оформления текста, Спецсимволы, Комментарии в HTML, Гиперссылки, Типы изображений для web, Загрузка изображений на страницу, Списки, Формы и их элементы. Создание таблиц, Объединение ячеек, Вложенные таблицы, Стилевое оформление таблиц
  • Урок 3. Основы языка оформления стилей документа CSS
    • Что такое CSS, Синтаксис CSS, Способы объявления CSS, Селекторы (id, class, tag), Селекторы атрибутов, Основные свойства стилей, Вложенность, наследование и группирование свойств, Приоритеты применения стилей, Псевдоклассы и псевдоэлементы
  • Урок 4. Верстка слоями (блочная верстка) - часть 1
    • Основные теги для верстки (div и span), Отступы элементов (margin и padding), Обтекаемые элементы, Позиционирование блоков, Создание структуры страницы с помощью блоков, Создание меню на основе блочной модели
  • Урок 5. Верстка слоями (блочная верстка) - часть 2
    • Создание основной разметки сайта, Применение overflow и clear в реальной вёрстке, Заполнение разметки частями макета, Приёмы позиционирования элементов, Использование модульной сетки в структуре макета, Резиновая и адаптивная верстка для мобильных устройств
  • Урок 6. Работа с макетом дизайна в формате PSD
    • Основные функции программы Photoshop, Выделение основных частей макета, Нарезка макета, Верстка макета сайта при помощи модульной сетки
  • Урок 7. Стандарты web и вспомогательные инструменты
    • Проблема «кроссбраузерности», Стандарты HTML/CSS, Валидация страниц, Будущее за стандартами HTML5 и CSS3, Грамотная, универсальная верстка, Файловая система проекта, Знакомство с фреймворком Twitter Bootstrap
  • Бонус 1. Организация работы
    • Способы ведения проекта и взаимодействие верстальщика с командой. Как подходить к поиску работы. Подготовка портфолио и составление резюме. Знакомимся с работой на фриланс биржах.
  • Бонус 2. Продвинутый CSS
    • Углубляемся в CSS. Селекторы атрибутов, псевдоселекторы, позиционирование. Возможности и спецэффекты CSS3: Переходы и анимация, Трансформация объектов, Тени, Градиенты.
  • Бонус 3. Новые HTML5 теги и ускорение работы
    • Знакомимся с HTML5 тегами для семантической разметки страницы. Внедряем инструменты для ускорения верстки. Оптимизируем рабочий процесс так чтобы максимально ускорить процесс верстки. Ускорение вашей работы до 50%.
  • Бонус 4. Оптимизация верстки, спрайты, шрифты. Динамические элементы
    • Создание спрайтов изображений, подключение дополнительных шрифтов. Знакомимся с динамическими элементы: Слайдер, Модальные окна, Вкладки, Лайтбокс, Галерея изображений.
Складчина создана 16 ноября 2015 г. · описание обновлено 3 мая 2026 г.
2 388 ₽ 11 800 ₽