Создание сайтов Юрий Ключевский - Курс по обучению HTML5 CSS3 верстке сайтов с нуля до профи за 4 недели

[Васон]

Автор: Юрий Ключевский
Название: Курс по обучению 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 плагинов: карусель, лайтбокс, сортировка, модальные окна
  

Скачать: