Разработка

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

HTML5 и CSS3 откроют для вас неповторимый мир frontend-разработки. Начните создавать современные веб-страницы, делайте их красочными, яркими и запоминающимся. Научитесь самостоятельно разрабатывать первоклассные посадочные страницы (landing page) и зарабатывайте на этом.

Когда:

12 Июля — 22 Августа

Формат:

Онлайн

Стоимость:

18 000 ₽

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

Подпишитесь на наши соцсети и получите скидку 10%

20 000 ₽

18 000 ₽

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

Кто учится

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

Кто выбирает

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

Кто начинает

Если у Вас ещё нет опыта, на курсе можно познакомиться с профессиональным 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 – верстки. Реальная задача, которая начинается с формулировок ТЗ, детализации задания, поэтапное выполнение и реализация современной страницы.

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

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

Вы научитесь

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

Вы получите

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

Инструменты которые вы освоите

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 ₽