Бесплатный видеокурс "HTML и CSS для начинающих". (Михаил Русаков)

Это бесплатный видеокурс
705
Бесплатный видеокурс

  • Автор(ы): Михаил Русаков

    Бесплатный курс по HTML и CSS для начинающих даст Вам всё, что нужно знать по HTML и CSS для успешной вёрстки сайтов. Помимо уроков, Вы получите и много различных упражнений для закрепления материала из уроков.

  • День 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-спрайта. У каждого блока должен быть свой фон.

  • ВСЕ МАТЕРИАЛЫ АВТОРА

    Видеокурс
    Видеокурс "PHP и My...

    Бесплатный видеокурс
    Бесплатный видеокур...

    Видеокурс
    Видеокурс "Создание...

    Бесплатный видеокурс
    Бесплатный видеокур...

    Видеокурс
    Видеокурс "Написани...

    Бесплатный видеокурс
    Бесплатный видеокур...

    Видеокурс
    Видеокурс "Программ...

    Бесплатный видеокурс
    Бесплатный видеокур...

    Видеокурс
    Видеокурс "Программ...

    Бесплатный видеокурс
    Бесплатный видеокур...

    Бесплатный видеокурс
    Бесплатный видеокур...

    Видеокурс
    Видеокурс "Создание...

    Бесплатный видеокурс
    Бесплатный видеокур...

    Видеокурс
    Видеокурс "Программ...

    Видео урок
    Видеокурс "Программ...

    Курс
    Бесплатный видеокур...

    Бесплатный видеокурс
    Бесплатный видеокур...

    Видеокурс
    Видеокурс "Создание...

    Видеокурс
    Видеокурс "WordPres...

    Видеокурс
    Видеокурс "Создание...

    Видеокурс
    Видеокурс "Программ...

    Видеокурс
    Видеокурс "Вёрстка ...

    Видеокурс
    Видеокурс "Своя Web...

    Видеокурс
    Видеокурс "PHP и My...

    Видеокурс
    Видеокурс "Joomla 3...

    Видеокурс
    Видеокурс "React JS...

    Видеокурс
    Видеокурс "Создание...

    Видеокурс
    Видеокурс "Создание...

    Видеокурс
    Видеокурс "Фреймвор...

    Видеокурс
    Видеокурс "WordPres...

    Видеокурс
    Видеокурс "Заработо...

    Видеокурс
    Видеокурс "Создание...

    Видеокурс
    Видеокурс "HTML5 и ...

    Видеокурс
    Видеокурс "Создание...

    Видеокурс
    Видеокурс "JavaScri...

    Видеокурс
    Видеокурс "PHP и My...

    Видеокурс
    Видеокурс "Вёрстка ...

    Видеокурс
    Видеокурс "Создание...

    Бесплатный видеокурс
    Бесплатный видеокур...

    Бесплатный видеокурс
    Бесплатный видеокур...

    Бесплатный видеокурс
    Бесплатный видеокур...

    Бесплатный видеокурс
    Бесплатный видеокур...

    Бесплатный видеокурс
    Бесплатный видеокур...

    Бесплатный видеокурс
    Бесплатный видеокур...

    Бесплатный видеокурс
    Бесплатный видеокур...

    Бесплатный видеокурс
    Бесплатный видеокур...

    Бесплатный видеокурс
    Бесплатный видеокур...

    Бесплатный видеокурс
    Бесплатный видеокур...

    Бесплатный видеокурс
    Бесплатный видеокур...

    Бесплатный видеокурс
    Бесплатный видеокур...

    Бесплатный видеокурс
    Бесплатный видеокур...

    Бесплатный видеокурс
    Бесплатный видеокур...

    Бесплатный видеокурс
    Бесплатный видеокур...

    Бесплатный видеокурс
    Бесплатный видеокур...

    Бесплатный видеокурс
    Бесплатный видеокур...

    Бесплатный видеокурс
    Бесплатный видеокур...

  • Распродажа в честь дня рождения от Михаила Русакова. Скидка от 50% до 81%

    Распродажа в честь дня рождения от Михаила Русакова. Скидка от 50% до 81%
    МЕРОПРИЯТИЕ ОКОНЧИЛОСЬ
    михЗдравствуйте! 11-го июля мне исполняется 31 год, и в честь этого небольшого события я решил устроить распродажу всех своих курсов с отличной скидкой от 50% до 81% (чем больше курсов заказываете, тем выше скидка). Подробности распродажи Распродажи я ...