HTML / CSS с нуля

Вы изучите основы языков HTML и CSS, научитесь создавать адаптивные HTML страницы Вашего сайта.

HTML / CSS с нуля
65 уроков65 уроков
СертификатСертификат
РусскийРусский
beONmax

Описание:

Вы получите знания и навыки:

  • Основы HTML и CSS
  • Полноценная верстка страниц сайтов, на примере сайта о кино
  • Работа в редакторе кода SublimeText
  • Практическое применение основных тегов HTML
  • CSS-верстка текста: цвет и размер шрифта
  • Позиционирование блоков на сайте
  • Работа с изображениями
  • Правильная HTML-разметка для SEO
  • Адаптивная верстка под мобильные устройства
  • Специальные классы для адаптивности
  • Полезные инструменты для frontend-разработчика

Программа курса:

1. Введение

  • 1.1 Вводная часть. Знакомство.

2. Подготовка к работе. Установка редактора кода

  • 2.1 Подготовка компьютера к работе. Установка редактора кода и инструментов
  • 2.2 Тестирование
  • 2.3 Тестирование

3. Основы HTML И CSS. Базовая разметка, HTML-теги, CSS-стили

  • 3.1 Базовая разметка HTML
  • 3.2 Интерактивное задание
  • 3.3 Теги <h1>, <p>, <strong>
  • 3.4 Тестирование
  • 3.5 Интерактивное задание
  • 3.6 Интерактивное задание
  • 3.7 Интерактивное задание
  • 3.8 Познакомимся с новыми html-тегами <div>, <span>. Базовый синтаксис CSS
  • 3.9 Интерактивное задание
  • 3.10 Интерактивное задание
  • 3.11 Тестирование
  • 3.12 Тестирование
  • 3.13 Теги <ul>, <li> и этапы создания веб-сайта

4. Создание сайта на практике. Главная страница - верхняя часть (HEADER) и меню.

  • 4.1 Подключение css стилей в отдельном файле
  • 4.2 Интерактивное задание
  • 4.3 CSS свойства: margin, padding, height, font-size и другие
  • 4.4 Тестирование
  • 4.5 Тестирование
  • 4.6 Интерактивное задание
  • 4.7 Тестирование
  • 4.8 Интерактивное задание
  • 4.9 Интерактивное задание
  • 4.10 Тестирование
  • 4.11 Стилизация ссылок с помощью CSS
  • 4.12 Тестирование
  • 4.13 Тестирование
  • 4.14 Интерактивное задание
  • 4.15 Создание горизонтального меню
  • 4.16 Тестирование
  • 4.17 Стилизация горизонтального меню
  • 4.18 Тестирование
  • 4.19 Интерактивное задание

5. Создание сайта. Главная страница - правый блок.

  • 5.1 HTML Form. Создание форм
  • 5.2 Интерактивное задание
  • 5.3 Right Block. Начнем создавать панель справа
  • 5.4 Тестирование
  • 5.5 Right Block. Продолжение
  • 5.6 Right Block. Часть 3
  • 5.7 Интерактивное задание

6. Создание сайта. Главная страница - нижняя часть (FOOTER)

  • 6.1 Footer. Часть 1
  • 6.2 Footer. Часть 2
  • 6.3 Интерактивное задание

7. Создание сайта. Главная страница - фильмы сериалы, блог

  • 7.1 Content главной страницы
  • 7.2 Главная страница. Записи блога

8. Создание сайта. Страница просмотра фильмов

  • 8.1 Страница просмотра фильмов
  • 8.2 Страница просмотра фильмов. Блок информации о фильме
  • 8.3 Страница просмотра фильмов. Блок с описанием фильма
  • 8.4 Страница просмотра фильмов. Блок с отзывами к фильму
  • 8.5 Интерактивное задание
  • 8.6 Страница просмотра фильмов. Форма отправки отзывов к фильму

9. Создание сайта. Страницы фильмы и рейтинг фильмов 

  • 9.1 Страница Фильмы
  • 9.2 Интерактивное задание
  • 9.3 Страница Рейтинг фильмов
  • 9.4 Тестирование
  • 9.5 Интерактивное задание

10. Создание сайта. Адаптивная верстка

  • 10.1 Адаптивная верстка. Инструменты разработчика
  • 10.2 Адаптивная верстка. Media queries, тэг viewport
  • 10.3 Адаптивная верстка. Правила адаптивной верстки
  • 10.4 Тестирование
  • 10.5 Адаптивная верстка. Продолжение
  • 10.6 Адаптивная верстка. Заключительная часть