Раздел №1. Введение
Урок №1. Как проходить курс?
Урок №2. Что такое вёрстка?
Урок №3. Необходимое ПО
Задание №1
- Установите все необходимые программы.
Раздел №2. HTML
Урок №1. Что же такое HTML?
Урок №2. Создание HTML-страницы
Задание №1
Создайте первую страницу:
- Напишите основные HTML-теги (doctype, html, head, body).
- Поставьте кодировку страницы utf-8.
- Сделайте заголовок страницы.
- Выведите 2 заголовка 1-го и 3-го уровня.
- Проверьте валидность и исправьте ошибки (если они появились).
Урок №3. Работа с текстом в HTML
Задание №1
- Напишите основные HTML-теги (doctype, html, head, body).
- Поставьте кодировку страницы utf-8.
- Сделайте заголовок страницы.
- Выведите 3 абзаца произвольного текста.
- Сделайте первый абзац полностью жирным.
- Часть текста из второго абзаца сделайте курсивом.
- Сделайте третий абзац полностью жирным и курсивом.
- Проверьте валидность и исправьте ошибки (если они появились).
Примечание: Не надо копировать все html-теги из прошлого урока,
- всё напишите ещё раз, причём на этот раз постарайтесь никуда не подсматривать.
Урок №4. Работа со списками в HTML
Задание №1
- Напишите основные HTML-теги (doctype, html, head, body).
- Поставьте кодировку страницы utf-8.
- Сделайте заголовок страницы.
- Выведите нумерованный и ненумерованный список, в каждом по 3 элемента в виде текста.
- Проверьте валидность и исправьте ошибки (если они появились).
Урок №5. Работа с изображениями в HTML
Задание №1
- Напишите основные HTML-теги (doctype, html, head, body).
- Поставьте кодировку страницы utf-8.
- Сделайте заголовок страницы.
- Добавьте 3 картинки на страницу, шириной 500,400, 250 пикселей.
- Задайте у каждой картинки разные значения атрибутов title и alt.
- Проверьте валидность и исправьте ошибки (если они появились).
Урок №6. Работа с ссылками в HTML
Задание №1
- Создайте 3 страницы.
- Добавьте на каждую страницу заголовок 1-го уровня, изображение, немного текста. Сделайте это всё уникальным (разный текст и изображения).
- Поставьте ссылку с 1-го страницы на 2-ю.
- Поставьте ссылку с 3-й страницы на 1-ю.
- Поставьте ссылку со 2-й страницы на 1-ю.
- Поставьте ссылку со 2-й страницы на 3-ю.
- Всё проверьте на работоспособность.
- Проверьте валидность и исправьте все возникшие ошибки.
Урок №7. Работа с таблицами в HTML
Задание №1
Создайте поле игры "Морской бой".
В первой строке должны идти буквы (за исключением 1-й ячейки).
Во второй строке должны идти цифры (за исключением 1-й ячейки).
Во всех остальных ячейках поставьте пробел.
Задание №2
- Создайте таблицу, состояющую из 3-строк и 3-х столбцов.
- Сделайте 1-ю строку шириной в 3 столбца.
- 1-ю ячейку 2-й строки сделайте высотой в 2 строки.
- Сделайте 3-ю строку шириной в 3 столбца.
Урок №8. Работа с формами в HTML
Задание №1
Создайте форму регистрации со следующими полями:
- Имя (текстовое поле).
- Логин (текстовое поле).
- E-mail (текстовое поле).
- Пол (радио-кпопки).
- О себе (текстовая область).
- Согласие с правилами (checkbox).
- Аватар (поле с выбором файла).
- Откуда пришли (select со следующими значениями: Google, Яндекс, Другое).
- Кнопка "Регистрация".
Урок №9. Работа с блоками
Задание №1
- Добавьте заголовок 1-го уровня.
- Добавьте изображение.
- Добьваьте немного произвольного текста.
- Выделите всё это в отдельный блок div.
Урок №10. Спецсимволы
Задание №1
- Вывести на страницу HTML-код: <р>Моя <Ь>Страница</Ь></р>
Раздел №3. Первая вёрстка
Урок №1. Знакомство с шаблоном
Задание №1
- Ознакомьтесь с Вашим шаблоном для вёрстки.
Продумайте структуру.
Урок №2. Создание структуры HTML-кода
Задание №1
- Напишите структуру HTML-кода.
Урок №3. Реализация структуры HTML-кода
Задание №1
- Реализуйте структуру HTML-кода.
Урок №4. Кроссбраузерность
Задание №1
- Добейтесь адекватного отображения во всех необходимых браузерах.
Урок №5. Адаптация под разные разрешения экрана
Задание №1
- Добейтесь того, чтобы страница хорошо отображалась на ширине 1024 пикселя и больше.
Урок №6. Проверка валидности
Задание №1
- Проверьте валидность, и если есть ошибки, то исправьте
Раздел №4. CSS
Урок №1. Что такое CSS?
Урок №2. Синтаксис CSS
Урок №3. Подключение стилей к странице
Задание №1
- Подключите любой стиль (можете взять из урока) через тег <link>.
- Подключите стиль через атрибут style.
Примечание: Это 2 основных способа, которые надо выучить наизусть, поэтому постарайтесь это всё написать, не подглядывая в урок.
Урок №4. Селектор по элементу
Задание №1
- Добавить 3 ссылки на страницу.
- Все ссылки через селектор элемента сделать красными.
Урок №5. Контекстный селектор
Задание №1
- Добавить абзац текста.
- Внутри абзаца сделать часть текста с курсивом, а другую часть курсивом и жирным.
- Сделать ту часть, которая и курсивная, и жирная красного цвета, при этом ту часть, которая просто курсивом никак не менять.
Урок №6. Селектор CLASS
Задание №1
- Сделать задачу из прошлого урока, но с помощью селектора CLASS.
Урок №7. Селектор по ID
Задание №1
- Добавить блок, в котором будут находиться: заголовок 1-го уровня и текст.
- Через селектор ID сделать у этого блока фон зелёного цвета.
Урок №8. Селектор по параметру
Задание №1
- Добавить таблицу из 2-х строк и 2-х ячеек.
- Сделать в двух произвольных ячейках выравнивание содержимого по центру.
- С помощью селектора параметров сделать фон ячеек, содержимое которых выравнено по центру, красного цвета.
Урок №9. Псевдоэлементы
Задание №1
- Добавить абзац, в котором разместить текст и ссылку.
- Сделать ссылку при наведении мыши чёрного цвета.
- Изменять фон цвета у абзаца на зелёный при наведении мыши на абзац.
Урок №10. Принцип наследования
Раздел №5. Основной набор CSS-свойств
Урок №1. Задание вида текста
Задание №1
- Добавить абзац с произвольным текстом.
- Поставить шрифт Arial и Times New Roman.
- Сделать через CSS текст жирным, курсивным.
- Поставить отступ абзаца в 15 пикселей.
- Добавить ссылку на страницу.
- Убрать подчёркивание ссылки (которое присутствует по умолчанию).
- Сделать размер ссылки в 1.5 раза больше базового.
Урок №2. Задание цвета
Задание №1
- Добавить ссылку на страницу.
- Сделать ссылку красным цветом через 1б-ти ричную систе
Урок №3. Задание рамки
Задание №1
- Добавить контейнер и внутрь него заголовок 1-го уровня.
- Сделать пунктирную рамку у контейнера цветом #есесес толщиной в 2 пикселя.
- Сделать сплошную рамку у заголовока 1-го уровня цветом #0а0а0а толщиной в 1 пиксель.
Урок №4. Задание фона
Задание №1
- Задайте сплошной фон любого цвета на странице.
Задание №2.
- Сделайте фон страницы с текстурой (приложена к диску).
Задание №3.
- Добавьте 2 контейнера на страницу.
- Через любой из типов селекторов сделайте один контейнер с красным фоном, а другой с фоном в виде текстуры.
Урок №5. Задание отступов и полей
Задание №1
- Добавьте блок, внутри которого ещё один блок.
- Внутри внутреннего блока добавьте абзац (тег <р>) текста.
- Уберите отступы у тега <р>.
- Добавьте поля со всех сторон у внешнего блока.
- Добавьте поля у внутренного блока слева и справа по 20 пикселей, а сверху и снизу 10 по пикселей.
Урок №6. Плавающие блоки
Задание №1
- Добавьте ненумерованный список с ссылками (Главная, 0 нас, Контакты).
- Сделайте его вертикальным (а не горизонтальным как по умолчанию).
- Поместите данный список в блок.
- Выравняйте блок по центру экрана.
Примечание: Задача очень хорошая, поскольку взята из практики. Очень часто верхнее меню делается с помощью списков, элементы которых сделаны "плавающими".
Урок №7. Выравнивание
Задание №1
- Добавьте блок, внутри которого сделайте таблицу (2 на 2).
- В каждую ячейку добавьте ссылку.
- Выравняйте содержимое ячеек по центру.
- У любых двух ячеек сделайте выравнивание по низу, а у других двух по верху.
Примечание: Как и раньше, можете использовать абсолютно любые типы селекторов.
Урок №8. Некоторые псевдоэлементы
Задание №1
- Добавить 2 ссылки и один абзац текста на страницу.
- Сделать цвет посещённых и непосещённых ссылок зелёным цветом.
- Убрать подчёркивание у ссылок.
- При наведении курсора мыши на ссылку делать их красным цветом и размеров в 2 раза больше базового.
- У абзаца сделать первую букву размеров в 3 раза больше базового и жирным начертанием.
Раздел №6. Блочная вёрстка
Урок №1. Знакомство с шаблоном
Задание №1
- Ознакомьтесь с Вашим шаблоном для вёрстки.
- Продумайте структуру.
Урок №2. Подготовка к вёрстке
Задание №1
- Создайте все необходимые файлы и папки.
- Напишите основные HTML-теги.
- Подключите файл стилей.
Урок №3. Шапка и фон
Задание №1
- Сделайте градиент.
- Добавьте шапку сайта и верхнее
Урок №4. Центральная часть сайта
Задание №1
- Сделайте центральную часть сайта (от шапки до подвала).
Урок №5. Подвал
Задание №1
Сделайте нижнее меню.
Урок №6. Кроссбраузерность
Задание №1
- Добейтесь адекватного отображения во всех необходимых браузерах.
Урок №7. Адаптация под разные разрешения экрана
Задание №1
- Добейтесь того, чтобы страница хорошо отображалась на ширине 1024 пикселя и больше.
Урок №8. Проверка валидности
Задание №1
- Проверьте валидность, и если есть ошибки, то исправьте их.
Раздел №7. Вёрстка реального сайта
Урок №1.Знакомство с шаблоном
Задание №1
Ознакомьтесь с шаблоном.
Мысленно обдумайте, как будете верстать эту страницу (какие блоки, какие таблицы, где они будут находиться и так далее).
Урок №2. Нарезаем шаблон
Задание №1
- Вырезать все картинки, которые Вам потребуются.
Примечание: 99.9% того, что Вы вырежите не всё, и это совершенно нормально. Впоследствие Вы будете нарезать ещё, но чем больше картинок Вы сделаете уже сейчас, тем больше времени сэкономите потом.
Урок №3. Голова документа
Задание №1
- Создайте необходимые файлы и папки.
- Напишите основные HTML-теги.
- Подключите файл стилей.
Урок №4. Добавление логотипа и контактов
Задание №1
- Выведите логотип сайта.
- Выведите набор ссылок сверху.
- Выведите форму поиска.
Урок №5. Верхнее меню
Задание №1
Урок №6. Шапка сайта
Урок №7. Меню и форма поиска
Урок №8. Таблица с товарами
Задание №1
- Сделайте фон центральной части страницы как в дизайне.
- Выведите центральную часть страницы.
Урок №9. Нумерация страниц
Задание №1
- Сделайте блок с нумерацией страниц.
Урок №10. Подвал
Задание №1
- Выведите подвал (все блоки, ссылки и копирайты).
Урок №11. Кроссбраузерность
Задание №1
- Посмотрите на свой сайт в основных браузерах.
- Определитесь, в каких браузерах возникают проб
- Подумайте, как эти проблемы можно решить.
Урок №12. Адаптация под IE8, IE7 и IE6
Задание №1
- Адаптируйте свою страницу под все основные браузеры так, чтобы она везде смотрелась адекватно.
Урок №13. Проверка сайта под разными разрешениями
Задание №1
- Адаптируйте свою страницу под ширину экрана в 1024 пикселя.
Урок №14. Проверка валидности
Задание №1
Примечание: Если будут какие-нибудь ошибки, то исправьте их, и обязательно ещё раз проверьте, всё ли хорошо во всех браузерах при ширине 1024 пикселя и больше.
Раздел №8. Заключение
- Подводим итоги
- Собственно заключение...
