Видеокурс "HTML и CSS для начинающих"
-
ПОДРОБНОЕ ОПИСАНИЕ
Автор(ы): Михаил Русаков
Бесплатный курс по HTML и CSS для начинающих даст Вам всё, что нужно знать по HTML и CSS для успешной вёрстки сайтов. Помимо уроков, Вы получите и много различных упражнений для закрепления материала из уроков.
HTML и CSS для начинающих. Урок №1. Как проходить курс? (Михаил Русаков) -
День 1. Введение
- Урок 1. Как проходить курс?
- Урок 2. Что такое вёрстка и каковы её задачи?
- Урок 3. Как выглядит Web-страница изнутри?
Задания
- Задание 1.
Откройте исходник любой Web-страницы в Интернете и внимательно изучите, из чего она состоит.
День 2. Изучаем HTML
- Урок 1. Установка редактора
- Урок 2. Создание первой Web-страницы
- Урок 3. Добавление заголовков
- Урок 4. Теги для текста
Задания
- Задание 1.
Установите редактор
- Задание 2.
Создайте простейшую Web-страницу
- Задание 3.
Добавьте на страницу заголовки 3-х различных уровней (на Ваш выбор).
- Задание 4.
Выведите несколько абзацев рыбного текста (рыбный текст, который часто используют дизайнеры и верстальщики - это любой произвольный текст).
- Задание 5.
Выделите любую часть текста курсивом, другую часть жирным, третью подчеркните, четвёртую выделите одновременно жирным, курсивом и перечеркните.
- Задание 6.
Выведите на страницу химическую формулу серной кислоты: H2SO4.
- Задание 7.
Выведите на страницу квадратное уравнение: 5 * x2 + 5 * x + 2 = 0
День 3. Изучаем HTML
- Урок 1. Добавление списков
- Урок 2. Добавление изображений
- Урок 3. Добавление ссылок
Задания
- Задание 1.
Выведите ненумерованным списком 7 различных категорий в магазине (например, "Телевизоры", "Компьютеры", "Бытовая техника" и так далее).
- Задание 2.
Сделайте элементы списка из предыдущего задания в виде ссылок, ведущих на другие страницы, за исключением пункта "Телевизоры".
- Задание 3.
Добавьте в подпункт "Телевизоры" нумерованный список, состоящий из следующих пунктов: "LG", "Phillips", "Samsung". Все эти пункты сделайте ссылками.
- Задание 4.
Создайте страницу, на которую будет вести ссылка "Компьютеры".
- Задание 5.
На странице "Компьютеры" выведите заголовок "Компьютер" и меню из предыдущей страницы. Так же на этой странице добавьте 3 произвольных изображения.
- Задание 6.
Сделайте вставленные изображения ссылками, которые будут открывать эти изображения в отдельной вкладке.
День 4. Изучаем HTML
- Урок 1. Организация контента на странице
- Урок 2. Элемент iframe
Задания
- Задание 1.
Используя теги для организации контента на странице, создайте примерный шаблон своей со следующими элементами: шапка сайта (вставьте картинку), заголовок, текст какой-нибудь статьи с изображениями, подвал с копирайтами.
- Задание 2.
Выведите в написанной статье iframe, в котором загрузите страницу https://myrusakov.ru - размер iframe сделайте на своё усмотрение.
День 5. Изучаем HTML
- Урок 1. Таблицы
Задания
- Задание 1.
Выведите таблицу с 3 столбцами: "№", "Наименование" и "Цена, руб.". В строках добавьте 5 пунктов. Например, "1", "Помидоры", "150".
- Задание 2.
Выведите таблицу.
День 6. Изучаем HTML
- Урок 1. Формы
Задания
- Задание 1.
Создайте форму регистрации со следующими элементами (вместе с label): имя, e-mail, пароль, подтвердите пароль, телефон, выпадающий список с городами, ваши пожелания (textarea), подписка на новости (checkbox), кнопка отправки формы.
День 7. Изучаем HTML
- Урок 1. Добавление видео
- Урок 2. Добавление аудио
Задания
- Задание 1.
Добавьте любой аудио-файл на Web-страницу и поставьте автовоспроизведение. Не забудьте подключить разные форматы файла.
- Задание 2.
Скройте панель управления аудиоплеером, чтобы аудиофайл воспроизводился на странице в фоновом режиме.
- Задание 3.
Добавьте видео на страницу (не забудьте сделать несколько форматов).
- Задание 4.
Сделайте видео зацикленным, чтобы по завершению оно воспроизводилось заново.
День 8. Изучаем HTML
- Урок 1. Добавление favicon
- Урок 2. Мнемоники в HTML
Задания
- Задание 1.
Найдите favicon, как это было сделано в уроке, и подключите её к Web-странице.
- Задание 2.
Выведите символы: &, ©, <, >, " и «, - используя мнемоники.
День 9. Изучаем CSS
- Урок 1. Основы CSS
- Урок 2. Как подключить CSS
- Урок 3. Подключение шрифтов
Задания
- Задание 1.
Выберите понравившийся шрифт в Интернете и скачайте его.
- Задание 2.
Сконвертируйте его в необходимые форматы.
День 10. Изучаем CSS
- Урок 1. Внешний вид текста
- Урок 2. Единицы измерения
Задания
- Задание 1.
Выведите несколько абзацев рыбного текста.
- Задание 2.
Сделайте текст большого размера.
- Задание 3.
Сделайте текст зелёным цветом.
- Задание 4.
Сделайте отступы у первых строк абзацев.
- Задание 5.
Добавьте ещё текст в теге div и сделайте его жирным.
- Задание 6.
Выравняйте текст в div по правому краю.
День 11. Изучаем CSS
- Урок 1. Селекторы
Задания
- Задание 1.
Создайте меню, сделав у каждой ссылки свой id. Затем для каждой ссылки с помощью селектора ID укажите свой цвет.
- Задание 2.
Сделайте так, чтобы при наведении курсора мыши на ссылку, размер её текста увеличивался.
- Задание 3.
Используя селектор параметра, увеличьте размер кнопки submit у формы, увеличьте размер надписи и измените цвет, а при наведении курсора мыши добавьте сплошную рамку толщиной 5px серого цвета.
- Задание 4.
Добавьте 3 абзаца текста с атрибутом class="red" и 3 абзаца текста с атрибутом class="green".
- Задание 5.
Сделайте у всех элементов class="red" красный цвет текста, а у всех элементов с class="green" - зелёный.
День 12. Изучаем CSS
- Урок 1. Внешний вид списков
- Урок 2. Внешний вид блоков
Задания
- Задание 1.
Выведите с помощью ul список Ваших дел на завтра.
- Задание 2.
Замените маркер по умолчанию на какую-нибудь небольшую картинку.
- Задание 3.
Выведите блок header и footer, добавив туда текст.
- Задание 4.
Добавьте отступы и поля в header и footer на своё усмотрение, а также выравняйте их содержимое по центру.
- Задание 5.
Внутри header добавьте div, а после задайте у него ширину, высоту, рамку и тень на своё усмотрение.
- Задание 6.
Растяните header и footer на 100%, а блок div внутри header выравняйте по центру.
День 13. Изучаем CSS
- Урок 1. Задание фона
- Урок 2. Градиент
Задания
- Задание 1.
Найдите какое-нибудь не слишком большое изображение у себя на компьютере или в Интернете.
- Задание 2.
Сделайте фон в виде множества этих изображений у body, также убрав margin и padding у него.
- Задание 3.
Выведите большим размером текста заголовок на странице и несколько абзацев текста под ним.
- Задание 4.
Сделайте линейный градиентный фон у заголовка и круговой фон у всех абзацев.
День 14. Изучаем CSS
- Урок 1. Обтекание блоков
- Урок 2. Позиционирование блоков
Задания
- Задание 1.
Выведите 5 блоков (добавив ширину, высоту и цвет фона у каждого) в одну горизонтальную линию.
- Задание 2.
Выведите ещё 5 блоков ниже, но уже в одну вертикальную линию (то есть без float).
- Задание 3.
Сделайте горизонтальное меню с помощью ul и свойства float из 5 ссылок. Сделайте их внешний вид на своё усмотрение, стараясь использовать, как можно больше различных свойств. Обязательно добавьте hover-эффект для ссылок.
- Задание 4.
Закрепите горизонтальное меню сверху экрана (с помощью position: fixed;). Убедитесь в этом, промотав страницу вниз (меню всегда должно отображаться вверху экрана, независимо от положения скролла).
День 15. Изучаем CSS
- Урок 1. Анимация
- Урок 2. Трансформации
- Урок 3. CSS-спрайты
Задания
- Задание 1.
Выведите блок, задайте у него ширину, высоту и цвет фона.
- Задание 2.
Сделайте плавное изменение цвета рамки у блока при наведении на него курсора мыши. Длительность анимации поставьте 1.5 секунды.
- Задание 3.
Выведите 4 изображения на страницу и примените к ним 4 трансформации (по одной трансформации на каждое изображение): rotate, scaleX, scaleY, skew.
- Задание 4.
Найдите в Интернете (в крайнем случае, возьмите из исходников) любой CSS-спрайт. В CSS-спрайте должно быть, по крайней мере, 5 иконок.
- Задание 5.
Добавьте на страницу 5 блоков и сделайте у них фон любой иконки из CSS-спрайта. У каждого блока должен быть свой фон.
-
HTML и CSS для начинающих. Урок №1. Как проходить курс? (Михаил Русаков)