Курс: HTML верстка сайтов 2-й уровень
Программа обучения
Курс состоит из тренингов, тренинги состоят из уроков, уроки состоят из: видео, текста, проверочных тестов и домашних заданий.
В среднем наши ученики проходят курс "HTML верстка сайтов 2-й уровень" за 120 часов, включая время на домашние задания.
Вы можете проходить тренинги в любом удобном для вас порядке.

Тренинг: HTML и CSS для продвинутых и адаптивная верстка
- Вводный урок в HTML для продвинутых
- css-tricks.com и другие полезные ресурсы для frontend-разработчика
- Раздел 1. HTML5 extended
- Полный список тегов, которые обязательно надо знать
- Тег А - создаем якоря
- Теги embed и object
- Отличия HTML 5 от HTML4
- HTML5 header и footer
- Тег nav
- Теги section, aside, main, article
- fieldset и legend - теги для группировки элементов форм
- HTML5 элементы форм
- Аудио и видео. Адаптивное видео с Ютуба на сайте
- Мнемоники в HTML и HTML сущности
- Меняем цвет браузера на Android 4+ с помощью мета тега meta theme color
- Плавно меняем цвет браузера на Android 4+ (meta name theme-color)
- HTML5 теги в ФиксМед
- Раздел 2. CSS extended
- Все CSS селекторы
- Список CSS свойств который должен хорошо знать каждый верстальщик сайтов
- CSS свойство animation - анимация на чистом CSS
- CSS переходы transition
- Трансформация и Преобразования в CSS. transform, translate, rotate и другие
- Отзывчивость в CSS
- Перенос слов в CSS и проблемы с длинными словами
- Нормализация стилей. Роль файла normalize.css, reset css
- CSS переменные
- Высота 100% Height
- Курсоры на сайте
- Позиционирование элементов css
- Примеры css анимации
- Анимированный border
- Задание на CSS анимацию (бегать по квадрату)
- Задание на CSS анимацию (бегать по диагонали)
- Задание на CSS анимацию (менять цвет и размер)
- Организация отступов в верстке
- Делаем красивый input[type=file] для адаптивного сайта
- Кастомные чекбоксы checkbox по правильному
- Стилизуем placeholder при помощи CSS.
- Снежинки на чистом CSS3 без Javascript на сайт
- сalc() в CSS3
- Как изменить цвет и фон выделения на сайте в html5
- Задание: Кричащая кнопка
- CSS currentColor
- Красивые фоны для сайта на чистом css 3
- Креативные эффекты анимации и переходов для ссылок и меню
- 5 методов создания выпадающего меню Dropdowd Menu
- Раздел 3. Обзор редакторов кода и графических редакторов с точки зрения верстальщика
- HTML верстка сайта в Figma
- Adobe Photoshop для верстальщика
- Avocode - онлайн редактор PSD для верстальщика
- Sublime text самые горячие клавиши
- Сниппеты в Sublime Text
- Установка emmet на Sublime Text
- Выбор и настройка IDE для верстальщика
- Сравнение программ для работы фронтенд-разработчика
- Раздел 4. Адаптивная верстка. Теория и практика.
- Про маштабирование сайта в браузере и в Виндовс
- Media запросы в CSS - азы адаптивной верстки
- Тег meta viewport
- Что такое адаптивная верстка
- Как убрать горизонтальную прокрутку 3 метода
- Макет РезиноМед сверстать
- Проект Клад. Делаем чужую верстку адаптивной. Что делать с двумя сайдбарами
- Сверстать магазин суши
- Адаптивность и еще раз адаптивность
- Сверстать фитнес клуб Вова
- Раздел 65. Оптимизация работы верстальщика: task менеджеры, сборщики и др
- Как правильно и быстро верстать сайты
- Что должен уметь HTML верстальщик
- Основы Gulp
- Сверстать фитнес клуб Рубикон
- Раздел 6. Препроцессоры SASS и другие
- SCSS и Sass
- HAML
- Сверстать Балтику
- Верстка интернет-магазина пиццы
- Ваши предложения
- Раздел 7. Изображения extended
- SVG
- WebP
- Оптимизация изображений в вебе по взрослому
- Создание собственного шрифтового набора иконок Icon Pack с помощью Fontello
- Наборы иконок: fontAwesome и другие
- CSS Фильтры над изображениями
- CSS спрайты
- DataURI Base64 для изображений. Онлайн конвертеры.
- Ваш отзыв
- Раздел 8. Полезности
- Задача на Зафиксированное меню и решение
- Сверстать магазин Суши и Роллы 2
- Адаптивная верстка email писем с Foundation for Emails
- Шикарная CSS анимация для кнопок
- БЭМ (Блок-Элемент-Модификатор) и другие методологии web-разработки
- Анимация CSS вертикальный переворот флип vertical flip
- Google Page Speed Insights 100 из 100 Часть 1
- Google Page Speed Insights 100 из 100 Часть 2
- CSS clip-path
- Кнопки Напомнить и Поделиться от Яндекса
- Виджет Вконтакте для сайта вставляем адаптивный
- Делаем особую нумерацию списков
- Делаем геометрические фигуры на CSS
- 3D объекты на чистом CSS
- Что дальше?
- Загрузка шрифтов FOUT, FOIT, FOFT
- CSS object-fit
- Неочевидные возможности Chrome DevTools для верстки
- css appearance - стилизация под операционную систему
- Единицы измерения в CSS: px, %, em, rem и другие
- Принудительное обновление кэша браузера со стороны сайта

Тренинг: JavaScript для начинающих
- Введение в JavaScript
- Первый скрипт - Привет, мир!
- Внешние скрипты и подключение js файлов
- Ждем загрузки документа: DOMContentLoaded, load, beforeunload, unload
- Порядок загрузки скриптов и асинхронные скрипты: defer/async
- Структура JS кода и точка с запятой
- Комментарии в JavaScript
- Современный стандарт и use strict
- Переменные, имена переменных и константы в JavaScript
- Как правильно назвать переменную?
- Шесть типов данных в JS
- Оператор typeof
- Основные операторы и термины: «унарный», «бинарный», «операнд»
- Операторы сравнения и логические значения
- Взаимодействие с пользователем: alert, prompt, confirm
- Условные операторы: if и ? (тернарный)
- Азы отладки JS и console.log()
- Задача: калькулятор prompt
- Логические операторы в JavaScript
- Преобразование типов
- Циклы while, for
- Задача: калькулятор prompt 2
- Конструкция switch
- Создание собственных функций в JavaScript
- Функциональные выражения Function Expression
- Рекурсия и стек
- Генерация случайного числа Math.random()
- Контрольная работа №1 по JavaScript
- Введение в методы и свойства
- Работа с числами в JavaScript
- Работа со строками в JavaScript
- setTimeout и setInterval
- DOM и BOM
- Дерево DOM
- Навигация по DOM-элементам
- getElementById или просто id
- getElements*
- querySelectorAll, querySelector и другие
- innerHTML и outerHTML
- Атрибуты, *Attribute и DOM-свойства
- Калькулятор расчета стоимости часа на JS
- Изменение документа
- Задача: проход по таблице и печать
- Работа с CSS стилями, style, getComputedStyle. CSS свойства узлов
- Задача на перенос строк таблицы
- Задача на скрытие блоков Знаю
- VK API
- Размеры и прокрутка элементов, offset*, client*, scroll*
- Размеры и прокрутка страницы
- Координаты в окне
- Координаты относительно document
- Подведение итогов и Контрольная работа №2 по JS
- Введение в браузерные события
- Действия браузера по умолчанию и отмена событий
- Отправка формы: событие и метод submit
- Задача: Генератор шаблонов и генерация ZIP архива на JS
- Курсовая работа по JavaScript
- Бонусы

Тренинг: Bootstrap для начинающих
- Вводный урок
- Что такое Bootstrap и зачем он нужен?
- Установка Bootstrap
- Поддерживаемые браузеры
- Bootstrap v4. Сетка. Layout grid System. Подробное руководство
- Скрытие элементов в Bootstrap 4, утилиты управления css display, margin and padding
- Как в Bootstrap 4 сделать Блоки одинаковой высоты
- Bootstrap горизонтальное и вертикальное выравнивание
- Контент в Bootstrap: типографика, текст, изображения, таблицы и пр
- Alerts для уведомлений, сообщений и пр
- Адаптивное меню navbar bootstrap
- Модальные окна bootstrap modal
- Цвета в bootstrap colors
- Кнопки и ссылки Bootstrap buttons
- Верстка форм на бутстрап bootstrap forms
- Хлебные крошки breadcrumb в Bootstrap 4
- Bootstrap cards карты, карточки
- Задача: первая практика верстки на Bootstrap 4
- Bootstrap badges
- Пагинация pagination
- Уведомления, toasts
- Делаем правки в адаптивном сайте работаем с Bootstrap
- Сверстать Лендинг на бутстрап 4
- Сверстать фитнес клуб на bootstrap 4
- Сверстать Балтик на бутстрапе
- Практика верстки интернет-магазина пиццы на bootstrap 4
- Bootstrap 4 генератор или как подключить к проекту только нужные компоненты и части
- CSS переменные в Bootstrap
- Фитнес клуб. Часть 2
- Сброс стилей - reboot и несколько советов
- Кратко про остальные разделы официальной документации

Тренинг: jQuery для начинающих
- Введение в jQuery
- Методы jQuery
- Манипуляции HTML-элементами
- События jQuery
- Методы объекта window
- Чтение и изменение CSS-свойств, классов и атрибутов
- Задача на скрытие блоков с помощью hide()
- Задача на перенос блоков Знаю используя jQuery
- Селекторы jQuery

Тренинг: UserCMS для продвинутых администраторов
- Вводный урок
- Раздел 1. Темизация UserCMS - создание своей темы. Часть 1
- Темизация UserCMS - создание своей темы. Часть 2. Константы UserCMS
- Папка pages
- Файлы темы. Если файлов тем два и более
- Раздел 2. Практика темизации. Адаптировать ФиксМед. Типичные ошибки адаптации верстки (натягивание верстки на движок)
- Обзор ошибок при разработке реального сайта
- Адаптировать верстку ClearFigure
- Адаптировать Hielo или Intelcify
- Задание на использование констант в теме ФиксМед
- Стандарт темы для UserCMS
- Задача: сделать боковое меню ФиксМед двухуровневым
- Раздел 3. Структура UserCMS, роутинг. где что находится и как найти нужный файл?
- Еще раз учимся находить и исправлять баги в UserCMS
- Usercms - видео урок - как найти и отредактировать любой элемент на сайте
- Как изменить любой элемент на сайте легко и быстро UserCMS
- Как найти и редактировать модули под себя
- Как найти и редактировать модули в Usercms на примере боковой панели и блока
- Как обновить UserCMS до последней версии
- Нельзя ничего менять в папке user_cms. Как быть?
- Добавить новости в ФиксМед, закрепляем правки ядра без изменения папки usercms
- Раздел 4. Работа с контентом и визуальные редакторы WYSIWYG
- Как вставить любой HTML, PHP или JavaScript код. Блок и плагины custom_html и custom_script. Закрепляем на Фиксмед
- UserCMS склейка внутренних страниц 301 редирект
- Установка TinyMCE, настройка, подключение файлового менеджера, практика использования
- Заполнить ФиксМед. Типичные ошибки при наполнении сайта контентом
- Установка CKEditor, настройка CKEditor и создание модуля аддона
- Еще раз про резервные копии и бэкапы в UserCMS
- Раздел 5. Перенос сайта на хостинг на UserCMS и создание резервной копии
- Как перенести сайт с одного хостинга на другой (Дом ребенка)
- Как перенести сайт если есть доступ только к FTP. Закрепляем на Фиксмед
- Как зарегистрировать домен и выложить сайт в интернет (реальный проект: экскурсии)
- Раздел 6. Практика работы с UserCMS. Доводим до идеала сайты: ищем битые ссылки с помощью программы Xenu
- Запускаем проект Работа, доводим до рабочего состояния
- Наводим порядок на проекте Экскурсии и запускаем в работу
- Разработка сайта под ключ на UserCMS с нуля. Цикл из видео уроков на 10+ часов
- Как сделать адаптивный сайт на Bootstap из уже существующего
- ФиксМед. Второй файл темы для главврача
- Раздел 7. Как разместить Элемент только на Главной. Вариант 1. В текст страницы
- Как разместить Элемент только на Главной. Вариант 2. С использованием позиций и блока
- Как разместить Элемент только на Главной. Вариант 3. Используя IS_MAIN_PAGE
- Как разместить Элемент только на Главной. Вариант 4. Несколько файлов темы.
- Как разместить Элемент только на Главной. Вариант 5. Подпапка pages в themes
- Доработать главную ФиксМед согласно макета
- Раздел 8. Разные полезности. SSL + httpS + UserCMS
- Файловые менеджеры в UserCMS и eXtplorer
- Как установить счетчик Яндекс метрики в UserCMS
- Вставить формы на сайт ФиксМед
- Обновить FavIcon на Фиксмед
- Трехуровневое выпадающее меню в ФиксМед
- ФиксМед - наводим порядок со структурой
- Курсовая: сделать сайт Персона
- Бонусы тренинга

Тренинг: Git, GitHub.com и системы контроля версий
- Что такое системы контроля версий, git и guthub com
- Словарь для всех систем контроля версий
- Установка Git
- Введение в Git и официальная документация
- Самые популярные команды для работы с Git и GitHub.com
- Работа с git для новичков UserCMS часть 2 - Pull request
- Откат коммитов, git cherry-pick, git fetch
Как проходят занятия
В случае онлайн формата, сразу после оплаты, вы получаете доступ к тренингам в личном кабинете. Вам не нужно никуда ехать, для обучения вам понадобятся самые простые наушники, компьютер и интернет.
За вами закрепляется Наставник, которому вы можете в любое время задать любое количество вопросов. Мы гарантируем, что все домашние задания будут проверены, и ни один вопрос не останется без ответа! Мы будем постепенно вести вас к цели - трудоустройству.
Пройдя курс, вы будете обладать следующими навыками:
Помимо навыков вы будете иметь:
По окончании вы получите сертификат на каждый тренинг:


Ваша программа обучения максимально эффективна
потому что мы придерживаемся 2-х простых правил
ПРАВИЛО №1: НИКАКОЙ ЗУБРЕЖКИ
Вам не нужно будет ничего зубрить, основные знания вы получите во время выполнения домашних заданий.


ПРАВИЛО №2: ПРАКТИКА И МНОГО ПРАКТИКИ
На наших курсах вы будете много практиковаться, а лучшие ученики будут допущены к реальным проектам уже во время учебы.
Сравните удобство обучения
Наш формат
Обычные курсы
Сомневаетесь в правильности выбора?
Еще не определились с профессией?
Думаете что не станете востребованным специалистом?
Вам кажется что будет сложно?
В таком случае пройдите наш тест и куратор вручную проанализирует ответы и вышлет вам результаты.
Тест займет всего 3 минуты
Дополнительных вложений и оплат не потребуется, весь софт, программы, заготовки мы предоставим бесплатно. Вам лишь потребуется любой компьютер (желательно по мощнее), можно даже планшет и хороший интернет.
Наши ученики совмещают наши курсы с работой и учебой благодаря свободному графику. В случае болезни или аврала на работе, сессии на учебе вы сможете приостановить обучение и вернуться к обучению (доступ выдается на 90 дней, при среднем прохождении тренинга за 30 дней).
Разброс зарплат большой, в первую очередь он зависит от того как вы будете проходить обучение и как выполните дипломную работу, и конечно же от вашей личной эффективности.
Гарантированное трудоустройство!
По окончании обучения и сдачи дипломной работы веб-программистам, аккаунт-менеджерам и интернет-маркетологам мы гарантируем трудоустройство! То есть мы не просто помогаем составить резюме, а даем вам настоящую работу!
Процесс происходит следующим образом: на втором курсе мы связываемся с вами и уточняем актуально ли для вас трудоустройство, поскольку половина учеников уже на первом курсе находит работу. Далее мы связываемся с нашими партнерами и гарантами, и уточняем у кого из них открыта вакансия на текущий момент. Далее предлагаем ученику на выбор несколько вариантов. После того как ученик выбрал гаранта (компанию в которой хочет работать), он связывается с ними и определяет, каких ему знаний на текущий момент не хватает. На основании требований гаранта мы корректируем программу обучения 2го и 3го уровня. На третьем уровне ученик согласовывает тему дипломной работы с гарантом, и по выполнению дипломной работы получает предложение работать.
Мы уверены в своих силах, поэтому предлагаем
Попробовать бесплатно
Онлайн+чат
- Индивидуальные занятия с куратором в Telegram
- Персональный наставник на тренинг
- Персональный чат с наставником под каждым уроком
- Ручная проверка домашних заданий с указанием ошибок, и повторной проверкой в случае переделки
- Круглосуточная обратная связь в чате
- Индивидуальный график обучения
Занятия с наставником в Skype/Telegram/Zoom/WhatsAppОфлайн занятия в офисе с наставником
ОФФлайн+Онлайн+чат
- Индивидуальные занятия с куратором в Telegram
- Персональный наставник на тренинг
- Персональный чат с наставником под каждым уроком
- Ручная проверка домашних заданий с указанием ошибок, и повторной проверкой в случае переделки
- Круглосуточная обратная связь в чате
- Индивидуальный график обучения
- Занятия с наставником в Skype/Telegram/Zoom/WhatsApp
- Офлайн занятия в офисе с наставником