# | Название видеоурока | Видео / Тесты | Решило | Рейтинг | Доступ |
---|---|---|---|---|---|
1 |
![]() |
2 теста |
|||
На этом уроке мы рассмотрим, что такое bootstrap-4, рассмотрим инструменты и материалы для нашего проекта Отчёт отправил: 21090. Yaroslav Выполнено за 36 мин. [Показать отчёт] Научился: Делать подготовку к работе. Сложности: Выбрать картинки. В место brackets буду использовать PhpStorm так как он уже есть. |
|||||
2 | Основа и фреймворк |
4 теста |
|||
На этом уроке мы создадим проект лендинг-страницы и подключим к нему библиотеку bootstrap-4 Отчёт отправил: 21090. Yaroslav Выполнено за 2 час. 40 мин. [Показать отчёт] Научился: Подключать библиотеку bootstrap и сопутствующие js-библиотеки не загружая их на сервер. Сложности: Всё просто. Я так понял что можно загрузить "bootstrap" на сервер и дать ссылку bootstrap/4.2.1/css/bootstrap.min.css, то будет тоже самое подключение? Или что то будет работать иначе? |
|||||
3 | Верная навигация |
3 теста |
|||
На этом уроке мы создадим красивое адаптивное навигационное меню для нашего сайта Отчёт отправил: 21090. Yaroslav Выполнено за 46 мин. [Показать отчёт] Научился: Создавать адаптивное меню при помощи стилей Bootstrap Сложности: Понять откуда знать именование классов в Bootstrap. |
|||||
4 | Заголовок header - красивая основа |
2 теста |
|||
На этом уроке мы создадим заголовок header и зададим его стиль
Отчёт отправил: 21090. Yaroslav Выполнено за 27 мин. [Показать отчёт] Научился: Повторил задание таблицы стилей css. Сложности: Понять почему картинка высветилась без "../" двоеточия перед адресом картинки. У меня только с двоеточием. |
|||||
5 | Заголовок header - оверлей, надпись и кнопка |
2 теста |
|||
На этом уроке мы дооформим header, и разместим на нем надпись и кнопку
Отчёт отправил: 21090. Yaroslav Выполнено за 45 мин. [Показать отчёт] Научился: Создать блок overlay для матового покрытия изображения и задавать ему стиль. А также создавать кнопку при помощи стилей bootstrap Сложности: Знать наименование стилей. |
|||||
6 | Об авторе - блоки и HTML |
2 теста |
|||
На этом уроке мы создадим блок "Об авторе" и наполним его контентом
Отчёт отправил: 21090. Yaroslav Выполнено за 44 мин. [Показать отчёт] Научился: Cоздавать блок row и в нем две колонки. Сложности: Очень хороший ресурс. И про сетки bootstrap тоже есть. Может пригодится. https://html5css.ru/bootstrap4/bootstrap_grid_examples.php |
|||||
7 | Об авторе - отступы и дополнения |
1 тест |
|||
На этом уроке мы сделаем дополнения информации об авторе и начнем работу со стилями в данном блоке Отчёт отправил: 21090. Yaroslav Выполнено за 37 мин. [Показать отчёт] Научился: Продолжение работы со стилями Сложности: Запоминать. |
|||||
8 | Об авторе - отступы, цвета, закругления |
1 тест |
|||
На этом уроке мы зададим красивые цвета тексту и интересный вид картинки
Отчёт отправил: 21090. Yaroslav Выполнено за 38 мин. [Показать отчёт] Научился: задавать картинки радиальную форму Сложности: Было очень интересно. Чтобы "Веб-разработчик" не уплывал то луче задавать в процентах. А за цвет #16828c спасибо пригодился. |
|||||
9 | Товар лицом |
|
|||
На этом уроке мы создадим заготовки для портфолио (представления товара или услуг)
Отчёт отправил: 21090. Yaroslav Выполнено за 41 мин. [Показать отчёт] Научился: Создание сразу четырех одинаковых элементов. Повтор стилизации. Сложности: Всё просто |
|||||
10 | Отзывы - размещение карточек |
|
|||
На этом занятии мы создадим и заполним карточки отзывов
Отчёт отправил: 21090. Yaroslav Выполнено за 29 мин. [Показать отчёт] Научился: Продолжение создания страницы на butstrap 4 Сложности: Всё понятно. |
|||||
11 | Отзывы - стили |
1 тест |
|||
На этом уроке мы зададим стиль карточкам отзывов Отчёт отправил: 21090. Yaroslav Выполнено за 23 мин. [Показать отчёт] Научился: Задавать стиль карточки тени курсора мыши очень понравилось. Сложности: Как сделать чтобы карточки были одинаковы? |
|||||
12 | Отзывы: карты - в сетку |
4 теста |
|||
На этом уроке мы сделаем карты ровными и научимся использовать в стилях шрифты с google fonts
Отчёт отправил: 21090. Yaroslav Выполнено за 51 мин. [Показать отчёт] Научился: задавать карточкам классы col-lg и col-md, а также шрифты google fonts Сложности: Всё просто супер. |
|||||
13 | Обратная связь - создание формы |
1 тест |
|||
На этом уроке мы создадим форму обратной связи
Отчёт отправил: 21090. Yaroslav Выполнено за 52 мин. [Показать отчёт] Научился: Создавать форму с элементами bootstrap-класса Сложности: Всё понятно. |
|||||
14 | Обратная связь - стильная форма |
1 тест |
|||
На этом уроке мы зададим стили элементам формы обратной связи
Отчёт отправил: 21090. Yaroslav Выполнено за 33 мин. [Показать отчёт] Научился: Задавать стили контактной форме, менять базовые стили элементов bootstrap. Сложности: Просто и интересно. |
|||||
15 | JS-навигация |
|
|||
На этом уроке мы сделаем пункты меню активными и реализуем навигацию по сайту при помощи jQuery
Отчёт отправил: 21090. Yaroslav Выполнено за 1 час. 9 мин. [Показать отчёт] Научился: Познакомился с видом JQuery. Сложности: JQuery у меня так и не заработал корректно. Ссылки на идентификатор работают и без JS. |
|||||
16 | ФИНАЛЬНЫЙ УРОК |
без видео |
|||
Сделай видео-презентацию своей программы. На видео необходимо ответить на следующие вопросы: 0. Показать, что у тебя получилось. 1. Чему ты научился на этом курсе? 2. Что тебе понравилось, что нет? 3. Что ты ещё добавишь в свой проект? 4. Какой следующий курс ты будешь проходить? Отчёт отправил: 21090. Yaroslav Выполнено за 10 мин. [Показать отчёт] Научился: Создавать одностраничник с помощью bootstrap-4. Мне нравится адаптивная сетка вёрстки. Для полноты надо добавить PHP MySQL либо какую то CMS. Следующий курс это будет JQuery. Сложности: Правильно подобрать слова. Видеообзор: qHi4IoGcRGk |
|||||
Итого: 16 видеоуроков |
2 час. 59 мин. 24 теста |
5 чел. | |||
Финалисты: Konstantin, vip, Yaroslav, Николай Денисов, Tom . |