Автор: Юрий Ключевский Название: Курс по обучению 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
После оплаты заказа на сайте, вам приходит ссылка на курс/тренинг/материалы на почту указанную в заказе.
Некоторые объекты, размещенные на сайте, являются интеллектуальной собственностью компании "Все онлайн курсы и тренинги vsekursi24.ru". Использование таких объектов установлено действующим законодательством РФ.
На сайте "Все онлайн курсы и тренинги vsekursi24.ru" имеются ссылки, позволяющие перейти на другие сайты. Компания "Все онлайн курсы и тренинги vsekursi24.ru" не несет ответственности за сведения, публикуемые на этих сайтах и предоставляет ссылки на них только в целях обеспечения удобства для посетителей своего сайта.
Личные сведения и безопасность
Компания "Все онлайн курсы и тренинги vsekursi24.ru" гарантирует, что никакая полученная от Вас информация никогда и ни при каких условиях не будет предоставлена третьим лицам, за исключением случаев, предусмотренных действующим законодательством Российской Федерации.
В определенных обстоятельствах компания "Все онлайн курсы и тренинги vsekursi24.ru" может попросить Вас зарегистрироваться и предоставить личные сведения. Предоставленная информация используется исключительно в служебных целях, а также для предоставления доступа к специальной информации.
Личные сведения можно изменить, обновить или удалить в любое время в разделе "Аккаунт" > "Профиль".
Чтобы обеспечить Вас информацией определенного рода, компания "Все онлайн курсы и тренинги vsekursi24.ru" с Вашего явного согласия может присылать на указанный при регистрации адрес электронный почты информационные сообщения. В любой момент Вы можете изменить тематику такой рассылки или отказаться от нее.
Как и многие другие сайты, "Все онлайн курсы и тренинги vsekursi24.ru" использует технологию cookie, которая может быть использована для продвижения нашего продукта и измерения эффективности рекламы. Кроме того, с помощь этой технологии "Все онлайн курсы и тренинги vsekursi24.ru" настраивается на работу лично с Вами. В частности без этой технологии невозможна работа с авторизацией в панели управления.
Сведения на данном сайте имеют чисто информативный характер, в них могут быть внесены любые изменения без какого-либо предварительного уведомления.
Чтобы отказаться от дальнейших коммуникаций с нашей компанией, изменить или удалить свою личную информацию, напишите нам через форму обратной связи