Программа курса
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 фреймворком.
