Последние поступления

  • Видеокурс
  • Видеокурс
  • Видеокурс
  • Видеокурс
  • Видеокурс
  • Видеокурс

    Последние новости

    • Онлайн-школа создания видео с доступом по подписке на более, чем 50 видео-курсов по теме видеопроизводства. (Сергей Панферов)
    • Уроки. Онлайн - Сервис Figma. Бесплатно с 29 октября по 4 ноября. (Даниил Волосатов)
    • Скидки до 40%. Распродажа в честь Хэллоуина. (
    • Скидка 30%. Цветокоррекция летних портретов. (Евгений Карташов и команда «Фото-монстра»)
    • Скидка 30% на курсы Александра Куртеева
    • Бесплатный вебинар «Capture One Pro. Быстрый старт». (Ильдар Хайрулин - Фотошоп-мастер)

      Мы в сети

      VK
      FB

      Оформите подписку!

       Введите Ваш E-m@il и
      получайте свежие новости

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

      Бесплатный видеокурс Бесплатный видеокурс "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 для начинающих. (Михаил Русаков)
      • Похожие видеокурсы по теме:
        Видеокурс Бесплатный видео урок
        Видеокурс Бесплатный видеокурс
        Видеокурс Бесплатный видео урок
        Видеокурс Бесплатный видео урок
        Видеокурс Бесплатный видео урок
        Видеокурс Бесплатный видео урок
      • Смотрите бесплатное видео по теме:
        Промо ролики видеокурса HTML. Базовый курс. (Евгений Попов)
        Промо ролики видеокурса PSD to HTML5 и CSS3. Верстка макета с нуля. (Денис Булыга - Webformyself)
        Промо ролики видеокурса Web Page Maker. Как сделать html сайт. (Рафаэль Кусаматов)
        Промо ролики видеокурса Основы HTML и CSS. (Дмитрий Науменко)
        Промо ролики видеокурса Практика HTML5 и CSS3 с нуля до результата за вечер. (Андрей Бернацкий - WebForMySelf)
        Промо ролики видеокурса Премиум уроки по HTML&CSS. (Андрей Бернацкий - Webformyself)

      Добавить комментарий


      Защитный код
      Обновить