Разработка

Верстка на HTML5 & CSS3

HTML5 и CSS3 откроют для вас неповторимый мир frontend-разработки. Начните создавать современные веб-страницы, делайте их красочными, яркими и запоминающимся.
Научитесь самостоятельно разрабатывать первоклассные посадочные страницы (landing page) и зарабатывайте на этом. Запуск курса доступен только в формате b2b для групп более 10 человек.
Когда:
30 Июня — 10 Августа
Формат:
Онлайн
Стоимость:
18 000 ₽

Ограниченное предложение

Подпишитесь на наши соцсети и получите скидку 10%
20 000 ₽
18 000 ₽
Другие курсы Brainskills в удобном формате ежемесячной подписки от 500 рублей в месяц доступны на нашем новом сайте. Переходи по ссылке, выбирай наиболее интересное направление и освой одну из самых востребованных IT-профессий под руководством опытных экспертов!

Кому идеально подойдет этот курс?

Кто учится
Кто учится
Если Вы получаете образование и хотите выгодно отличаться при устройстве на работу, открыть возможность дополнительного или даже основного заработка с нуля.
Кто выбирает
Кто выбирает
Если Вы молоды и выбираете своё будущее, то за короткий срок можно получить полный и детальный обзор направления, определиться с перспективной профессией. Ваш возраст - ваше преимущество.
Кто начинает
Кто начинает
Если у Вас ещё нет опыта, на курсе можно познакомиться с профессиональным SMM и понять насколько это направление актуально.
Потребность в специалистах по профессиональной верстке, знанию языков HTML5 и CSS3 стабильно высокая, а кандидатов на соответствующие вакансии найти всё труднее. Заработок HTML/CSS разработчика может составлять от 50 тыс. ₽ в месяц на первом этапе и сильно возрастать по мере роста квалификации - от 180 тыс. ₽ и выше.
~140 200₽
Средняя зарплата HTML/CSS + JS разработчика за 2018 г. по данными группы компаний HeadHunter
  • 80 Пульс нашего выпускника после устройства
    на работу
  • Выпускной проект
  • 100% прокачки
    скиллов
  • > 100 000 ваш будущий заработок
  • Стоимость 17000 руб.
  • 180+ + довольных
    выпускников

Что вы изучите?

1неделя
Введение в Photoshop. Введение в HTML
Знакомство с Photoshop. Работа со слоями. RGB модель, фильтры, основные инструменты. Образец создания макета сайта. Рассмотрение HTML и CSS на примере существующего сайта.
2+3 часов практики
2+2 часов теории
Подробнее

Вебинар [2 часа]. Введение в Photoshop


Задача. Создать макет landing page в PS
Задача. Шаблонная верстка макета
Видео-лекция. "Photoshop to HTML and CSS Tutorial"
Видео-лекция. "Основы Photoshop"
Статья. "Создание макета сайта"
Статья. "Верстка psd макета" 

Вебинар [2 часа]. Введение в HTML


Задача. Создать сайт с возможностью навигации
Задача. Оформить страницы по примеру Википедии
Кейс. Создание навигационного меню на примере известного интернет-магазина
Презентация. "HTML и CSS. Начало"
Видео-лекция. "Якоря и ссылки"
Видео-лекция. "HTML and CSS Tutorial"
Книга. Новая большая книга CSS "HTML и CSS"
Книга.  HTML5, CSS3 и JavaScript. Исчерпывающее руководство "Создание простой страницы"
Статья. "Работа с ссылками и якорями"


Тест. Элементы HTML
2неделя
Модульная сетка. Гибкая сетка. Saas
Верстка на различных сетках. Циклы Saas. Наследование Saas. Coala.
2+4 часов практики
2+3 часов теории
Подробнее

Вебинар [2 часа]. Верстка на модульной и гибкой сетках


Задача. Сверстать страницу на модульной и гибкой сетках
Кейс. Работа с модульными сетками на примере простой страницы
Видео-лекция. "Grid сетка"
Статья. "CSS сетка"
Статья. "Понимание сеток"
Книга. Новая большая книга CSS "Система модульной верстки Skeleton"

Вебинар [2 часа]. Saas


Задача. Создание landing page с использованием Saas
Задача. Добавление на страницу Flex, сеток и адаптивного дизайна
Кейс. Работа с препроцессором на примере landing page
Презентация. "Saas"
Видео-лекция. "Работа с Coala"
Статья. "Что такое Saas"
Книга. Новая большая книга CSS "Профессиональный дизайн с помощью Saas" 

Тест. Saas
3неделя
Подключение CSS. Блочная модель. Строчные элементы. Таблицы
Добавление графики и CSS, работа с простейшими свойствами: цвет, фон, шрифт, свойства ссылок и списков. Основы блоков и строк. Рассмотрение шаблонных примеров.
2+5 часов практики
2+2 часов теории
Подробнее

Вебинар [2 часа]. Подключение CSS


Задача. Добавление графики и CSS на landing page
Задача. Добавление фонов. Изменение шрифтов.
Презентация. "CSS. Основные возможности"
Видео-лекция. "What is CSS?"
Статья. "Немного про CSS"
Статья. "CSS Tutorial" 
Книга. Новая большая книга CSS "Создание стилей и таблиц стилей", "Форматирование текста"
Книга. HTML5, CSS3 и JavaScript. Исчерпывающее руководство "Добавление изображений"

Вебинар [2 часа]. Блочная модель


Задача. Выровнять элементы в проекте
Задача. Создать и оформить на отдельной странице таблицу. Margin. Padding. Border
Презентация. "Блочная модель"
Видео-лекция. "HTML таблицы"
Статья. "Блочная и строчная модели"
Книга. Новая большая книга CSS "Поля, отступы, границы", "Форматирование таблиц и веб-форм" 
Книга. HTML5 book "CSS-таблицы"
Книга. HTML5, CSS3 и JavaScript. Исчерпывающее руководство "Разметка таблиц"

Тест. IMG. Подключение CSS. Блочная модель
4неделя
Селекторы. Фон. Градиенты. Float элементы
Усложненные селекторы. Секреты выравнивания. Использование градиентов. Пример фотогалереи. Проблемы плавающих элементов.
2+4 часов практики
2+3 часов теории
Подробнее

Вебинар [2 часа]. Селекторы. Фон. Выравнивание


Задача. Выровнять по центру блок и текст для различных случаев
Задача. Добавить кнопки к меню на сайте
Кейс. Вертикальное и горизонтальное выравнивание на примере простой страницы
Презентация. "Хитрости выравнивания"
Видео-лекция. "CSS Background Image Tutorial"
Статья. "Выравнивание. Горизонтальное и вертикальное."
Книга. HTML5 book. "CSS-background"
Книга. Новая большая книга CSS "Селекторы", "Механизм наследования стилей", "Каскадность"
Книга. HTML5, CSS3 и JavaScript. Исчерпывающее руководство "Форматирование текста"

Вебинар [2 часа]. Градиенты. Фотогалерея. Float элементы


Задача. Создать фотогалерею с помощью плавающих элементов
Задача. Сверстать страницу на плавающих элементах
Кейс. Создание фотогалереи на примере известного сайта
Презентация. Плавающие элементы
Видео-лекция. "Применение плавающих элементов"
Статья. "Плавающие элементы"
Книга. Новая большая книга CSS "Добавление графики на веб страницы", "Макеты на основе обтекаемых элементов"
Книга. HTML5, CSS3 и JavaScript. Исчерпывающее руководство "Цвета и фон"

Тест. Проблемы плавающих элементов
5неделя
Навигация. Многоколоночность. Переходы. Анимация
Создание различных видов меню на сайте. Верстка многоколоночной модели. Применение различных видов анимации, преобразований, переходов.
2+5 часов практики
2+3 часов теории
Подробнее

Вебинар [2 часа]. Навигация. Многоколоночность


Задача. Изменить меню landing page
Задача. Создание многоколоночной страницы
Кейс. Многоколоночная верстка на примере известного сайта
Презентация. Позиционирование элементов
Видео-лекция. "Многоколоночная верстка"
Видео-лекция. "Позиционирование элементов"
Статья "Что такое многоколоночная верстка?" 
Книга. Новая большая книга CSS "Макеты на основе обтекаемых элементов", "Позиционирование элементов на странице"


Вебинар [2 часа]. Анимация. Переходы


Задача. Добавить анимации к меню сайта
Задача. Реализация различных видов переходов, преобразований
Кейс. Анимация на примере известного сайта 
Видео-лекция. "Интерактивные возможности в CSS"
Видео-лекция. "Анимации"
Статья. "Переходы"
Книга. HTML5 book. "css3-transform". "css3-transform"
Книга. HTML5, CSS3 и JavaScript. Исчерпывающее руководство "Переходы, преобразование и анимация"

Тест. Анимация. Переходы. Трансформация
6неделя
Flex. HTML элементы. Columns. Адаптивный дизайн
Основы flex верстки. Семантические элементы. Верстка на Columns. Шаблоны адаптивного дизайна.
2+4 часов практики
2+2 часов теории
Подробнее

Вебинар [2 часа]. Flex. HTML5 элементы


Задача. Сверстать страницу на Flex с использованием HTML5 (аудио)
Задача. Сверстать страницу на Flex с использованием HTML5 (видео, семантика)
Кейс. Flex-верстка на примере существующей страницы
Презентация. "Профессиональная flexbox-верстка" 
Видео-лекция. "Flex верстка"
Статья. "A complete guide to Flexbox"
Книга. HTML5 book. "html5 semantic elements" 
Книга. Новая большая книга CSS "Профессиональная flexbox-верстка"

Вебинар [2 часа]. Columns. Адаптивный дизайн


Задача. Сверстать страницу на Columns
Задача. Применить инструменты адаптивности
Кейс. Адаптивный дизайн на примере известного сайта
Видео-лекция. "Адаптивный дизайн"
Видео-лекция. "CSS Columns"
Книга. HTML5 book. "CSS3 columns" 
Книга. Новая большая книга CSS "Адаптивный веб-дизайн"

Тест. Flex элементы

ЧТО БУДЕТ НА КУРСЕ?

Занятия с экспертами
Занятия ведут практикующие эксперты в digital-индустрии. Они в доступной форме рассказывают о сложных технологиях и инструментах.
Занятия с экспертами
Практические кейсы
Практические кейсы
Задача за 6 недель помочь вам погрузиться в область, разобрать вместе конкретные практические кейсы и отрыть возможность к самостоятельному развитию по выбранному направлению.
Онлайн-консультации
Мы ценим ваше время и онлайн-формат позволяет избежать дополнительных издержек на организацию обучения. Вы можете совмещать программу с работой и заниматься где удобно.
Онлайн-консультации
Тестирование
Тестирование
Базовым понятиям мы уделяем время необходимое и достаточное, чтобы эффективно решать практические задачи. Для закрепления пройденного материала мы подготовили тесты.
Выпускной проект "Разработка landing page"
Это работа, которую вы добавите в свое портфолио или резюме. Создадите landing page с фотогалереей, анимационными элементами в меню на основе flex – верстки. Реальная задача, которая начинается с формулировок ТЗ, детализации задания, поэтапное выполнение и реализация современной страницы.
Выпускной проект "Разработка landing page"

ЧТО ВЫ ПОЛУЧИТЕ В РЕЗУЛЬТАТЕ?

Верстка на HTML5 & CSS3
Вы научитесь
  • Создавать макеты landing page в PS
  • Создавать сайты с современной навигацией
  • Добавлять графику и CSS на Landing page
  • Профессионально форматировать таблицы различных видов
  • Создавать фотогалереи с помощью плавающих элементов
  • Применять механизмы адаптации, верстать страницы на сетках различных типов
  • Использовать технологию Saas

Вы получите
  • Навык управления многоколоночными страницами, умение создавать анимационные эффекты
  • Материалы курса: статьи, видео, конспекты, лекции, ссылки на полезные сервисы

  • Возможность создавать современные странички интернет-магазинов

Инструменты которые вы освоите
Photoshop
Saas
HTML5
CSS3
Koala
Photoshop
Многофункциональный графический редактор, широко используется в веб-дизайне и маркетинге для разработки рекламных креативов
Saas
Модуль, включенный в Haml. Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей.
HTML5
Язык для структурирования и представления содержимого всемирной паутины. Это пятая версия HTML. Цель разработки HTML5 — улучшение уровня поддержки мультимедиа-технологий с одновременным сохранением обратной совместимости, удобочитаемости кода для человека и простоты анализа для парсеров.
CSS3
Формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Главной особенностью CSS3 является возможность создавать анимированные элементы без использования JS, поддержка линейных и радиальных градиентов, теней, сглаживания и прочее.
Koala
Известный инструмент для компиляции Less, Sass, Compass и CoffeeScript. Помогает веб-разработчикам использовать языки более эффективно.

Скачайте программу курса

Чтобы вам было удобнее знакомиться с программой курса, мы создали pdf документ, в котором описали всё подробно

Ограниченное предложение

Подпишитесь на наши соцсети и получите скидку 10%
20 000 ₽
18 000 ₽
Там где HTML5, там победа
Ефимов Михаил Сергеевич Ефимов Михаил Сергеевич Эксперт BrainSkills,
образование: диплом магистра МИФИ

Частые вопросы

Какие знания нужны для начала обучения?
Необходимо уверенно пользоваться интернетом, уметь регистрироваться в различных сервисах и устанавливать на свой компьютер программное обеспечение. Очень хорошо, если вы умеете организовывать работу самостоятельно, тогда каждое занятие с экспертом будет приносить пользу.
А можно оплатить частями?
Да, можно. Проконсультируйтесь по телефону 8(800)201-01-50 и мы поможем вам выбрать оптимальный способ оплаты через наших финансовых партнеров.
Чему можно научиться за 1,5 месяца?
За 1,5 месяца сложно стать профессионалом, но:
    - можно достаточно неплохо погрузиться в профессию
    - разобрать конкретные практические кейсы
    - узнать применяемые технологии и особенности использования современных инструментов
    - попробовать себя в деле
Что делать, если я пропустил занятие?
К каждому занятию есть материалы и 1,5-3 часа видео-контента для самостоятельного изучения. Также вы сможете обращаться к своему эксперту с вопросами.
Подходят ли мне digital-профессии?
Вы никогда не узнаете точно, пока не попробуете. Внимательно просмотрите программу курса, чтобы понимать, какие навыки вы получите и чем сможете заниматься.
Разработка
Верстка на HTML5 & CSS3
20 000 ₽
18 000 ₽