HTML / CSS с нуля
Вы изучите основы языков HTML и CSS, научитесь создавать адаптивные HTML страницы Вашего сайта.
Описание:
Вы получите знания и навыки:
- Основы 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 Адаптивная верстка. Заключительная часть