Автор: Юрий Ключевский Название: Курс по обучению HTML5 CSS3 верстке сайтов с нуля до профи за 4 недели
Никаких скучных теорий только необходимые практические навыки и стажировка
Программа курса 7 уроков за 21 день
Как работает интернет. Что такое сайт. Что представляет собой веб-страница. Виды сайтов. Процесс разработки сайта. Что такое гипертекст. Теги и атрибуты. Подготовка рабочего места. Простой пример HTML странички. Пример сложной веб-страницы. Горячие клавиши для перемещения по документам.
Практика
Настройка рабочей среды.
Структура HTML документа. Основные теги оформления текста. Спецсимволы. Комментарии в HTML. Гиперссылки. Типы изображений для web. Загрузка изображений на страницу. Списки. Формы и их элементы. Создание таблиц. Объединение ячеек. Вложенные таблицы. Стилевое оформление таблиц.
Практика
Создаем первую HTML страницу.
Наполняем ее информацией.
Что такое CSS. Синтаксис CSS. Способы объявления CSS. Селекторы (id, class, tag). Селекторы атрибутов. Основные свойства стилей. Вложенность. наследование и группирование свойств. Приоритеты применения стилей. Псевдоклассы и псевдоэлементы
Практика
Подключаем стили к странице.
Оформляем страницу с помощью CSS.
Основные теги для верстки (div и span). Отступы элементов (margin и padding). Обтекаемые элементы. Позиционирование блоков. Создание структуры страницы с помощью блоков. Создание меню на основе блочной модели.
Практика
Верстаем макет с помощью блоков.
Учимся делать структуру страницы.
Создание основной разметки сайта. Применение overflow и clear в реальной вёрстке. Заполнение разметки частями макета. Приёмы позиционирования элементов. Использование модульной сетки в структуре макета. Резиновая и адаптивная верстка для мобильных устройств.
Практика
Осваиваем блоки, позиционирование, обтекание.
Используем сетку для верстки страницы.
Основные функции программы Photoshop. Выделение основных частей макета. Нарезка макета. Верстка макета сайта при помощи модульной сетки.
Практика
Работаем в Photoshop.
Экспортируем графику для верстки.
Проблема «кроссбраузерности». Стандарты HTML/CSS. Валидация страниц. Будущее за стандартами HTML5 и CSS3. Грамотная, универсальная верстка. Файловая система проекта. Знакомство с фреймворком Bootstrap.
Практика
Тестируем верстку.
Верстаем страницу с Bootstrap фреймворком.
Бонусные материалы 4 дополнительных урока
Способы ведения проекта и взаимодействие верстальщика с командой. Как подходить к поиску работы. Подготовка портфолио и составление резюме. Знакомимся с работой на фриланс биржах.
Практика
Оформляем структуру проекта.
Делаем портфолио и составляем резюме.
Углубляемся в CSS. Селекторы атрибутов, псевдоселекторы. Возможности и спецэффекты CSS3: Переходы и анимация. Трансформация объектов. Тени. Градиенты.
Практика
Добавляем анимацию к странице.
Делаем трансфорацию элементов.
Знакомимся с HTML5 тегами для семантической разметки страницы. Внедряем инструменты для ускорения верстки. Оптимизируем рабочий процесс так чтобы максимально ускорить процесс верстки. Препроцессор LESS. Плагины. Ускорение вашей работы до 50%.
Практика
Внедряем инструменты для ускорения работы.
Оптимизируем семантику страницы.
Создание спрайтов изображений, подключение веб- шрифтов. Шрифтовые иконки. Использование модальных окон.
Практика
Подключаем шрифты. Создаем спрайты.
Подключаем модальные окна.
Знакомимся с динамическими элементами: Слайдер, Вкладки, Лайтбокс, Галерея изображений.
Практика
Создаем галерею изображений. Делаем сортировку.
Подключаем и оформляем слайдер.
Этапы разработки проектов. Ведение, сдача, и поддержка проектов. Подготовка к собеседованию. Стратегия работы на фрилансе.
Практика
Учимся оформлять портфолио.
Готовимся к собеседованию.
Ваше резюме после обучения Так может выглядеть ваше резюме после обучения и стажировки.
Должность: HTML верстальщик
Ключевые навыки:
Свободное владение HTML и CSS, а также знания JavaScript
HTML5 и CSS3
Кроссбраузерная верстка
Оптимизация под мобильные устройства
Опыт адаптивной вёрстки
Умение разбираться в чужом коде
Понимание основ юзабилити
Результат в конце обучения короткая выжимка о курсе Прохождение курса
Месяц обучения и практической работы по курсу и бонусным материалам
Верстка современных адаптивных сайтов во время обучения
Выполнение домашних заданий с контролем, проверкой и индивидуальной обратной связью от преподавателя
Видеозаписи всех занятий
Презентации и методические пособия
Обучающие видео
Группа для общения с преподавателем и коллегами
ПРИОБРЕТЕННЫЕ НАВЫКИ
Практический опыт верстки современных веб-сайтов
Навыки работы над реальными проектами
Семантическая верстка
Верстка сайтов для мобильных устройств (адаптивная и отзывчивая верстка)
Использование современных HTML/CSS фреймворков, JS плагинов и библиотек
ТЕХНОЛОГИИ
HTML5 разметка
CSS3 таблицы стилей
Блочная модель верстки
Работа с сетками
LESS препроцессор для CSS
Адаптивная верстка макета
Bootstrap фреймворк (ex. Twitter Bootstrap)
Agile методология разработки
Работа с Sublime Text и Brackets
Работа с Photoshop с PSD макетом
Подключение и настройка jquery плагинов: карусель, лайтбокс, сортировка, модальные окна
Подробнее:
Для просмотра содержимого вам необходимо .
Скачать:
Вариант 1: Электронная доставка на email
После оплаты заказа на сайте, вам приходит ссылка на курс/тренинг/материалы на почту указанную в заказе.