HTML / CSS с нуля

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

• Основы 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 Адаптивная верстка. Заключительная часть