# | Название видеоурока | Видео / Тесты | Решило | Рейтинг | Доступ |
---|---|---|---|---|---|
1 |
![]() |
2 теста |
|||
На этом уроке мы рассмотрим, что такое bootstrap-4, рассмотрим инструменты и материалы для нашего проекта Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 31 мин. [Показать отчёт] Научился: Эммет есть, Брэкетс присутствует, картинки засолены. Будет интересно! |
|||||
2 | Основа и фреймворк |
4 теста |
|||
На этом уроке мы создадим проект лендинг-страницы и подключим к нему библиотеку bootstrap-4 Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 1 час. 1 мин. [Показать отчёт] Научился: Восклицательный знак + табуляция == заготовка html, head и body. Фича Emmeta сие есть. Отображение на лету у меня отчего-то недоступно, даже хинт выскакивает - для отображения Сохраните. |
|||||
3 | Верная навигация |
3 теста |
|||
На этом уроке мы создадим красивое адаптивное навигационное меню для нашего сайта Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 36 мин. [Показать отчёт] Научился: a.navbar-brand - титульник collapse - сжимаемый элемент страницы (li.nav-item>a.nav-link)*4 == повтори четыре раза создание в скобках, друг Эммет. |
|||||
4 | Заголовок header - красивая основа |
2 теста |
|||
На этом уроке мы создадим заголовок header и зададим его стиль
Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 46 мин. [Показать отчёт] Научился: чтобы Live Preview работало - очищай порты. В моем случае к этому уроку предпросмотр вообще отказался открывать гуглхром страницу возвращая ошибку и предложение поискать решения на гитхабе. Почитал - не нашел своего случая. Перезапуск компа не помог, очистка кэша не помогла. Решением стало отключение дельфинчика в трее (MySQL висел на потру 3306). Как послал дельфинчика отдохнуть - так и Live Preview перестал капризничать и картинки красиво нарисовались на сайте. Браво, Валерий! Даёшь стране угля! |
|||||
5 | Заголовок header - оверлей, надпись и кнопка |
2 теста |
|||
На этом уроке мы дооформим header, и разместим на нем надпись и кнопку
Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 55 мин. [Показать отчёт] Научился: удалив последнюю версию Brackets ver. sprint13 build 1.13.0-17696 release 49d29a8bc Thu Jun 14 2018 08:13:54 GMT+001 и скачав с офсайта предыдущую 12 версию - получил лайвПревью отображающее изменения в коде на лету. Рекомендации лучших собаководов. Смотрю сейчас видео урока и присматриваюсь к интерфейсу Брэкетса у Валерия - вижу в середине его экрана под значком коннекта LivePreview зеленую пиктограмму в виде коробки перевязанной ленточкой - если навести на неё даётся предложение скачать и установить глючившую у меня последнюю версию Брэкетса 13 версии. Всем, кому охота камасутры с сырым продуктом - качать незамедлительно! <h1> - крупный заголовок <p> - параграф Вторая иллюстрация - с информацией о работоспособной версии Brackets |
|||||
6 | Об авторе - блоки и HTML |
2 теста |
|||
На этом уроке мы создадим блок "Об авторе" и наполним его контентом
Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 46 мин. [Показать отчёт] Научился: <!--комментарий--> - здесь в HTML пишем комментарии в коде Сетка Бутстрапа делена на 12 полей. <img src="images/my.jpg" alt="no-image" class="img-fluid"> - вставить изображение, альт - если заданной картинки не оказалось, класс - обтекающее изображение |
|||||
7 | Об авторе - отступы и дополнения |
1 тест |
|||
На этом уроке мы сделаем дополнения информации об авторе и начнем работу со стилями в данном блоке Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 36 мин. [Показать отчёт] Научился: em - 1em – текущий размер шрифта. Можно брать любые пропорции от текущего шрифта: 2em, 0.5em и т.п. Размеры в em – относительные, они определяются по текущему контексту. <h3> - Устанавливает заголовок третьего уровня. <span> - запрет переносов, элемент объединения колонок .about h1{color: #f97300} - допустимы объединения указателей - класс About, подзаголовок h1, к примеру. |
|||||
8 | Об авторе - отступы, цвета, закругления |
1 тест |
|||
На этом уроке мы зададим красивые цвета тексту и интересный вид картинки
Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 38 мин. [Показать отчёт] Научился: допустимы применения стилей для подразделов, элементов классов примерно так: .about .about_me h3 В классе есть подкласс, так в нём ещё и выделим нужный элемент и установим ему желаемый стиль. Удобство зашкаливает, осталось лишь овладеть техникой. |
|||||
9 | Товар лицом |
|
|||
На этом уроке мы создадим заготовки для портфолио (представления товара или услуг)
Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 1 час. 21 мин. [Показать отчёт] Научился: <div class="col-sm"> - если в классе колонки не указан числовой параметр, то колонки создаются одинаковой ширины. Новшество Бутстрапа 4. https://via.placeholder.com/150 - готовые заглушки для будущих изображений |
|||||
10 | Отзывы - размещение карточек |
|
|||
На этом занятии мы создадим и заполним карточки отзывов
Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 1 час. 24 мин. [Показать отчёт] Научился: C Emmet работать - одно удовольствие. Массу рутинной работы берет на себя. Card – это компонент Bootstrap 4, который позволяет оформить контент в виде карточки. Карточка может использоваться: с заголовком (футером) или без него; с использованием картинки (её можно расположить в верхней или нижней части) или без неё; с произвольным количеством элементов и их расположением в основной части. |
|||||
11 | Отзывы - стили |
1 тест |
|||
На этом уроке мы зададим стиль карточкам отзывов Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 38 мин. [Показать отчёт] Научился: margin даст отступы box-shadow - даст объемное выделение элемента Единицу измерения после коэффициента в стилях пиши без пробела, иначе она не будет работать. Правильно: 1em; Неправильно: 1 em; hover - при движении мышки над объектом будет применяться указанный в фигурных скобках эффект cursor: pointer - даст изображение простёртой длани с указательным перстом вверх вместо стрелки курсора. |
|||||
12 | Отзывы: карты - в сетку |
4 теста |
|||
На этом уроке мы сделаем карты ровными и научимся использовать в стилях шрифты с google fonts
Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 41 мин. [Показать отчёт] Научился: Для одного элемента допустимо перечислять классы через пробел, указывая более одного. margin - внешний отступ padding - внутренний отступ fonts.google.com - склад шрифтов от Гугла Делай раз: в style.css повыше пропиши импорт шрифта с адресом его складирования на сайте Гугла. Делай два: ниже в идентификаторе пропиши его в фонт-фЭмили в одинарные кавычки. Делай три: наслаждайся красотой, спасшей твой сайт. Сложности: Жить в невежестве до этого урока не зная разницы между margin и padding. Но я справился. |
|||||
13 | Обратная связь - создание формы |
1 тест |
|||
На этом уроке мы создадим форму обратной связи
Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 50 мин. [Показать отчёт] Научился: placeholder - псевдоэлемент, с помощью которого задаётся стилевое оформление подсказывающего текста. Можно использовать свойства для изменения вида текста, задать шрифт и цвет. Пример: placeholder { color: #ffd595; } |
|||||
14 | Обратная связь - стильная форма |
1 тест |
|||
На этом уроке мы зададим стили элементам формы обратной связи
Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 1 час. 23 мин. [Показать отчёт] Научился: HTML-формы == элементы управления для сбора информации от посетителей веб-сайта. Состоят из текстовых полей, кнопок, списков. Технически формы передают данные от пользователя Серверу. Для получения и обработки данных форм используются PHP, Perl. До появления HTML5 веб-формы представляли собой набор нескольких элементов <input type="text">, <input type="password">, завершающихся кнопкой <input type="submit">. Для стилизации форм в разных браузерах приходилось попотеть. Формы требовали применения JavaScript для проверки введенных данных, были лишены специфических типов полей ввода для указания повседневной информации типа дат, адресов электронной почты и URL-адресов. HTML5-формы решили большинство проблем благодаря новым атрибутам, предоставив возможность изменять внешний вид элементов форм за счет CSS3. |
|||||
15 | JS-навигация |
|
|||
На этом уроке мы сделаем пункты меню активными и реализуем навигацию по сайту при помощи jQuery
Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 4 час. 17 мин. [Показать отчёт] Научился: Когда возникает забота оживить нарисованные на сайте кнопки и меню рисуют код javascript в отдельном файле или сразу здесь. Если файл со скриптом внешний его надо подключить в той строке от которой он может пригодиться и ниже. Подключение делаем так: <script src="JS/main.js" type="text/javascript" ><script> Если видишь в скриптовом коде знак $ - это не про зеленую бумагу, это обозначение jQuery равносильное если бы так и написали jQuery. Коротко: $ == jQuery $(document).ready(function()) - обрабатывается document когда он ready выполнить function(c параметрами в скобках ()-скобки пустые, если параметров нет, но скобки вынь да положь!) {В фигурных скобках - описание функции} navbar-fixed-top - при прокрутке лендинга исчезнет вверх fixed-top - при прокрутке лендинга НЕ исчезнет решетка для jQuery - это идентификатор id scrollTop - функция прокрутки вверх |
|||||
16 | ФИНАЛЬНЫЙ УРОК |
без видео |
|||
Сделай видео-презентацию своей программы. На видео необходимо ответить на следующие вопросы: 0. Показать, что у тебя получилось. 1. Чему ты научился на этом курсе? 2. Что тебе понравилось, что нет? 3. Что ты ещё добавишь в свой проект? 4. Какой следующий курс ты будешь проходить? |
|||||
Итого: 16 видеоуроков |
2 час. 59 мин. 24 теста |
5 чел. | |||
Финалисты: Konstantin, vip, Yaroslav, Николай Денисов, Tom . |