# | Название видеоурока | Видео / Тесты | Решило | Рейтинг | Доступ |
---|---|---|---|---|---|
1 |
![]() |
2 теста |
|||
На этом уроке мы рассмотрим, что такое bootstrap-4, рассмотрим инструменты и материалы для нашего проекта Отчёт отправил: 30514. Tom Выполнено за 1 час. 1 мин. [Показать отчёт] Научился: Подготовил 6 картинок для проекта: header, аватарка автора и 4 аватарки для отзывов. |
|||||
2 | Основа и фреймворк |
4 теста |
|||
На этом уроке мы создадим проект лендинг-страницы и подключим к нему библиотеку bootstrap-4 Отчёт отправил: 30514. Tom Выполнено за 17 мин. [Показать отчёт] Научился: Создал папку проекта, добавил в нее файл index.html, подключил в нем css и js файлы bootstrap4. |
|||||
3 | Верная навигация |
3 теста |
|||
На этом уроке мы создадим красивое адаптивное навигационное меню для нашего сайта Отчёт отправил: 30514. Tom Выполнено за 21 мин. [Показать отчёт] Научился: Научился создавать навигационную панель, задавать ей расположение, цветовую схему. Добавил на страницу панель навигации, определил в ней пункты меню. |
|||||
4 | Заголовок header - красивая основа |
2 теста |
|||
На этом уроке мы создадим заголовок header и зададим его стиль
Отчёт отправил: 30514. Tom Выполнено за 16 мин. [Показать отчёт] Научился: Научился задавать и размещать фоновое изображение для элемента. Создал элемент header в index.html и добавил ему класс .header. Создал файл style.css, добавил правила для класса .header. Подключил файл style.css в index.html. |
|||||
5 | Заголовок header - оверлей, надпись и кнопка |
2 теста |
|||
На этом уроке мы дооформим header, и разместим на нем надпись и кнопку
Отчёт отправил: 30514. Tom Выполнено за 18 мин. [Показать отчёт] Научился: Создал div-блоки с классами overlay, desc. Добавил эти css классы в файл style.css. Добавил кнопку "Подписаться". |
|||||
6 | Об авторе - блоки и HTML |
2 теста |
|||
На этом уроке мы создадим блок "Об авторе" и наполним его контентом
Отчёт отправил: 30514. Tom Выполнено за 17 мин. [Показать отчёт] Научился: Создал блок about, разместил в нем заголовок, сетку bootstrap из двух колонок. В левой колонке разместил изображение автора. В правую колонку добавил описание. |
|||||
7 | Об авторе - отступы и дополнения |
1 тест |
|||
На этом уроке мы сделаем дополнения информации об авторе и начнем работу со стилями в данном блоке Отчёт отправил: 30514. Tom Выполнено за 17 мин. [Показать отчёт] Научился: Добавил класс about_me для оформления блока описания об авторе. В файле style.css добавил правила для классов .about .about_me. |
|||||
8 | Об авторе - отступы, цвета, закругления |
1 тест |
|||
На этом уроке мы зададим красивые цвета тексту и интересный вид картинки
Отчёт отправил: 30514. Tom Выполнено за 19 мин. [Показать отчёт] Научился: Задал значение border-radius для изображения автора. Задал отступы и цвета для рамки слева от блока описания, для блока описания. |
|||||
9 | Товар лицом |
|
|||
На этом уроке мы создадим заготовки для портфолио (представления товара или услуг)
Отчёт отправил: 30514. Tom Выполнено за 27 мин. [Показать отчёт] Научился: Создал блок портфолио, добавил в него 4 столбца равной ширины. В каждый столбец поместил изображение с сайта placeholder.com. В первый столбец загрузил картинку портфолио. Оформил блок портфолио с помощью стилей. Добавил цвет заголовка, задал ширину и отступы для изображений. |
|||||
10 | Отзывы - размещение карточек |
|
|||
На этом занятии мы создадим и заполним карточки отзывов
Отчёт отправил: 30514. Tom Выполнено за 10 мин. [Показать отчёт] Научился: Создал блок отзывов, разместил в нем 4 блока cards. В каждом блоке разместил изображение, заголовок и текст отзыва. |
|||||
11 | Отзывы - стили |
1 тест |
|||
На этом уроке мы зададим стиль карточкам отзывов Отчёт отправил: 30514. Tom Выполнено за 15 мин. [Показать отчёт] Научился: Добавил стили для блока отзывов. Установил цвет заголовка, добавил тени для карточек. Изменил цвет фона карточки и указатель курсора при hover над выбранной карточкой. |
|||||
12 | Отзывы: карты - в сетку |
4 теста |
|||
На этом уроке мы сделаем карты ровными и научимся использовать в стилях шрифты с google fonts
Отчёт отправил: 30514. Tom Выполнено за 36 мин. [Показать отчёт] Научился: Разместил карточки в сетке bootstrap. Импортировал шрифты c сайта google fonts. Установил шрифт 'Pacifico' для имени человека, оставившего отзыв. Установил шрифт 'Nanum Gothic' для ссылок в меню навигации. |
|||||
13 | Обратная связь - создание формы |
1 тест |
|||
На этом уроке мы создадим форму обратной связи
Отчёт отправил: 30514. Tom Выполнено за 19 мин. [Показать отчёт] Научился: Создал блок обратной связи, разместил в нем bootstrap сетку, две колонки по 4 и 8 столбцов. В первую колонку добавил заголовок. Во второй разместил элементы формы: имя, почту, текст для сообщения и кнопку отправить. |
|||||
14 | Обратная связь - стильная форма |
1 тест |
|||
На этом уроке мы зададим стили элементам формы обратной связи
Отчёт отправил: 30514. Tom Выполнено за 11 мин. [Показать отчёт] Научился: Задал отступы для блока обратной связи, ограничил максимальную ширину для блока элементов формы. Изменил цвет заголовка и цвет фона кнопки. |
|||||
15 | JS-навигация |
|
|||
На этом уроке мы сделаем пункты меню активными и реализуем навигацию по сайту при помощи jQuery
Отчёт отправил: 30514. Tom Выполнено за 1 час. 55 мин. [Показать отчёт] Научился: Создал файл main.js, в котором добавил обработчик события нажатия на элементы меню навигации. Реализовал переход с анимацией на разделы сайта при выборе пункта в меню навигации. |
|||||
16 | ФИНАЛЬНЫЙ УРОК |
без видео |
|||
Сделай видео-презентацию своей программы. На видео необходимо ответить на следующие вопросы: 0. Показать, что у тебя получилось. 1. Чему ты научился на этом курсе? 2. Что тебе понравилось, что нет? 3. Что ты ещё добавишь в свой проект? 4. Какой следующий курс ты будешь проходить? Отчёт отправил: 30514. Tom Выполнено за 21 мин. [Показать отчёт] Научился: В этом курсе я познакомился с bootstrap 4, научился создавать страницу лендинга, получил практику в html, css, javascript, bootstrap и jquery. Следующий курс telegram бот "Камень ножницы бумага" Видеообзор: 1-v-fUMRDic |
|||||
Итого: 16 видеоуроков |
2 час. 59 мин. 24 теста |
5 чел. | |||
Финалисты: Konstantin, vip, Yaroslav, Николай Денисов, Tom . |