Описание

Тема №1. Введение в курс 1. Этапы разработки сайта. 2. Инструменты необходимые для вёрстки сайта: редакторы кода, инспекторы, полезные веб-ресурсы. 3. Средства для просмотра веб-страниц. Виды браузеров. Горячие клавиши. Тема №2. Введение в HTM 1. Что такое HTML. Теги. 2. Структура HTML документа. Теги Doctype , html, head, body. 3. Порядок использования тегов. 4. Теги strong, br, em,p. 5. Создание заголовков h1-h6 6. Вставка спецсимволов. 7. Стандарты w3.org, html- валидатор. Тема №3. Вставка графических элементов на страницу. 1. Типы и размер изображений для web. 2. Основные параметры тега img. (src, alt, width, height) Тема №4 . Создание ссылок 1. Создание текстовых ссылок. 2. Создание графических ссылок. 3. Создание якорей. 4. Путь к файлу: относительный и абсолютный.Структура вложенностей — дерево. Слинковка html страниц. Тема №5. Упорядочение данных с помощью списков. Создание нумерованного и маркированного списков. Тема №6. Представление данных в табличном виде 1. Для чего используют таблицы сегодня. 2. Верстка элементарной таблицы. Основные параметры для создания таблицы, объединение ячеек таблицы colspan, rowspan. Размеры таблицы. 3. Форматирование таблиц: цвет и границы. Тема №7. Формы и их элементы 1. Для чего нужны формы. 2. Основные элементы форм и их типы. Тема №8. Каскадные таблицы стилей 1. Понятия каскадности и наследования. 2. Подключение CSS файла. 3. Использование “рыбы” для html и css. 4. Использование style в документе. Сброс стилей. 5. Селекторы CSS. Приоритет селекторов. Применение атрибутов class, id. 6. Форматирование текста. Тема №9. Фоновые изображения. Блоки. 1. Цвет и изображение в качестве фона. Применение фона на разных элементах. 2. Границы элементов. 3. Блочные и строчные элементы. Свойство display. Центрирование блока по горизонтали. 4.Использование внутренних и внешних отступов. Тема №10. Стилизация списков и блоков 1. Расположение блоков на странице с помощью float. 2. Расположение блоков с помощью table. 3. Варианты и применение списков. 4. Псевдоэлементы. 5. Использование CSS3. Проблемы с кроссбраузерностью. Тема № 11. Технология flexbox 1. Подключение flex 2. Понятия flex-контейнера, flex-элементов, главной и поперечной оси 3. Выравнивание flex-элементов 4. Создание структуры документа с помощью flex Тема № 12. Многоуровневое навигационное меню. Вертикальное и горизонтальное меню Тема №13. Абсолютное и относительное позиционирование. Тема №14. Шрифты. Подключение кастомных шрифтов, различия шрифтов в разных ОС. Тема №15. Использование javascript на странице 1. Использование jQuery плагинов. Общий принцип подключения интеграции скриптов. 2. Кастомизация элементов форм с момощью javascript и CSS3. Отличия. 3. Подключение javascript-галереи Тема №16. Разработка мобильного меню Тема №17. Подключение слайдера Тема №18. Порядок вёрстки веб-страницы 1. Что такое макет и для чего он необходим. 2. Стандарты PixelPerfect. Варианты проверки на соответствие с макетом. 3. Фиксированный и резиновый макет. Полурезина. 4. Стандартное расположение блоков на странице. Вложенность блоков. Тема №19. Порядок нарезки макета 1. Работа со слоями в Photoshop. 2. Визуальное разбитие страницы на основные и второстепенные элементы. Стандартное наименование блоков. 3. Нарезка макета на примере. Тема №20. Фреймы и внедрение внешних данных на страницу. Подключение google карты. Тема №21. Адаптация страницы под различные экраны. Фреймворки 1. Адаптирование страницы под различные устройства при помощи медиа-запросов. 2. Для чего применяются CSS-фреймворки и их использование для адаптации страницы под различные устройства. Требования к макетам. Обзор CSS-фреймворков. Bootstrap. Особенности отображения элементов и поведения для Android/iOS . Тема № 22. Портфолио 1. Для чего необходимо портфолио. 2. Как создать портфолио. Тема № 23. Дополнительные темы. 1. Создание и подключение фавиконки сайта. 2.Что такое SEO и почему это важно. (обзорно). 3. Как разместить сайт в сети интернет. Хостинг, домены. Тестирование