# | Название видеоурока | Видео / Тесты | Решило | Рейтинг | Доступ |
---|---|---|---|---|---|
1 |
![]() |
|
|||
На этом уроке мы узнаем, о чем курс, и что мы изучим Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 18 мин. [Показать отчёт] Научился: Аккордеон, модальное окно, бейджи, динамические кнопки, glyphicons, font awesome - всё в новинку. Оттого интереснее. |
|||||
2 | Начало - подключение bootstrap |
1 тест |
|||
На этом занятии мы создадим проект html5 и подключим
к нему библиотечку bootstrap Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 52 мин. [Показать отчёт] Научился: впервые глазами увидел NetBeans, скачал Bootstrap ver. 3.3.7 ФайрФокса не оказалось, открывал и начинал инсталлировать в ГуглХроме, к финалу урока пришлось установить и Мозиллу. Das WunderBar! |
|||||
3 | Структура сайта и сетка |
|
|||
На этом уроке мы создадим общую структуру сайта портфолио
и поработаем с сеткой - адаптивной мобильной резиновой системой разметки Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 1 час. 15 мин. [Показать отчёт] Научился: лишний раз повторили - правила для CSS тегу пиши название сразу идентификаторы (id) пиши с решетки # классы пиши с точки. Отличие атрибута id от атрибута class: id - присваивается уникальному элементу. Элемент может иметь только один ID. При иcпользованиее одинаковых ID более, чем один раз - валидации кода страницы не видать, как своих ушей царя Мидаса. класс - это агрегатор свойств, применяемый к группе элементов. Допустимы одинаковые классы для разных элементов. |
|||||
4 | Навигационное меню |
|
|||
На этом уроке создадим адаптивное навигационное меню
Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 34 мин. [Показать отчёт] Научился: Троекратное <span class="icon-bar"></span> рисует на кнопке три черты горизонтальные. Где-то я это видел )) В версии videosharp.info на смартфоне - вот где эти кнопки! Урок отличный! |
|||||
5 | Фиксированная панель и субменю |
1 тест |
|||
На этом уроке мы поиграем с положением навигационной панели и
сделаем субменю для нескольких пунктов Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 1 час. 9 мин. [Показать отчёт] Научился: Разделитель divider появился лишь со второй попытки, просто перенабрал. Хотя перед этим сличал - всё знак в знак. Вот такое колдунство наблюдал вечером воскресенья. |
|||||
6 | Подготовка картинок для портфолио |
|
|||
На этом уроке мы подготовим картинки для портфолио (2-х размеров)
Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 1 час. 33 мин. [Показать отчёт] Научился: XnView установил, скриншоты наваял. |
|||||
7 | Рефакторинг страницы |
1 тест |
|||
На этом уроке мы проведем рефакторинг кода,
и реализуем структуру, запланированную для header, в навигационной панели Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 58 мин. [Показать отчёт] Научился: на курсе Tinklavimas смотрел отчеты тов. Глушкова (привет лидеру!) и любовался на красивые шрифты. Пробовал подтянуть подобные к себе в проект, да тямы не хватило. Валерий в этом уроке разжевал что к чему в использовании шрифтов Гугла - ныне красота доступна и мне. Спасибо за новые горизонты! |
|||||
8 | Размещение работ портфолио |
|
|||
На этом уроке мы создадим страницу-портфолио наших работ,
используя элемент accordeon Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 1 час. 47 мин. [Показать отчёт] Научился: Bootstrap accordion - это компонент, который организует контент в сворачиваемых элементах. Bootstrap accordion позволяет одновременно показывать только один свернутый элемент. Пункты Bootstrap accordion могут переключаться через несколько текстовых блоков одним щелчком мыши, что значительно увеличивает читабельность вашего проекта. Примеры использования Bootstrap accordion: - FAQ (Часто задаваемые вопросы), - Представление нескольких позиций, - Таблицы данных. |
|||||
9 | Подробности в модальное окно |
|
|||
На этом уроке мы создадим подробное описание каждой работы нашего портфолио
в модальном окне, а таже реализуем скачивание исходников или переход на сайт из записей портфолио Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 1 день 1 час. 1 мин. [Показать отчёт] Научился: это было натуральное Ватерлоо. Одно модальное открывалось, при попытке сделать второе, третье и т.д. экран покрывался серым фоном и браузер оживлялся лишь перезагрузкой страницы. Научился за эти сутки: Справа в NetBeans отыскивать места с ошибками в строках. Искать и находить пропущенные < или >. Находить происхождение самой заковыристой ошибки, звучавшей так: End tag for "body" seen but there were unclosed elements. Оказалось, пропустил один закрывающий </div> Натурально, это был не урок, а битва с ошибками. Спасибо за урок, Валерий! Это было что-то )))) |
|||||
10 | Работа над ошибками |
|
|||
На этом уроке мы внесем исправление в параметры панелей нашего accordeon и добьемся
хорошего отображения на различных устройствах Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 20 мин. [Показать отчёт] Научился: Сетка Bootstrap 3 поставляется в 4 уровнях ("контрольных точках"): Extra small (для смартфонов .col-xs-) Маленький (для планшетов .col-sm-) Средний (для ноутбуков .col-md-) Большой (для ноутбуков/настольных компьютеров .col-lg-). Эти размеры сетки позволяют контролировать поведение сетки по разной ширине. Пример: в сетке с 12 столбцами col-sm-3 имеет ширину 3 из 12 колонок (25%) при ширине экрана > 768 пикселей. |
|||||
11 | Оформляем footer |
|
|||
На этом уроке мы оформим блок footer с использованием
иконок font-awesome Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 2 час. 31 мин. [Показать отчёт] Научился: fontawesome обновился, с io переадресует уже на com, класс <i class="fa fa-vk"></i> изменен на <i class="fab fa-vk"></i> https://fontawesome.com/icons/vk?style=brands Много что изменилось за 2 года с момента создания видеоурока, но разобраться можно. Урок отличный. |
|||||
12 | Делаем главную страницу |
1 тест |
|||
На этом уроке мы оформим главную страницу портфолио,
сделаем "выставку" 6 последних работ, и 6 лучших, а также реализуем форму авторизации на сайте Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 2 час. 1 мин. [Показать отчёт] Научился: снова первое знакомство с предметом. Результат красив и убедителен, но требует внимания к деталюшечкам. Поставил лишнюю v после дива - всё расползлось. Что такое? Начинаешь откатывать на предыдущий работоспособный вариант - он, находишь этот баг. Брысь его - и всё снова красиво. Валерию спасибо за насыщенную эмоциями неделю. Борьба с модальными окнами была просто восхитительна. Научился следить за скролбаром справа - зеленый значок вверху - царствуй лёжа на печи, оранжевый - приготовиться, красный - иди ищи ошибки) |
|||||
Итого: 12 видеоуроков |
3 час. 55 мин. 4 теста |
15 чел. | |||
Финалисты: Максим Лапшинов, Ludmila, Сергей Соколов, Алексей Малышев, Алексей|BrisK|Кривицкий, WildOrc, Иван Воронин, Слава, Dmitry Sinitsin, Tekashnik, Андрей Гладков, Yefim, Rita, Max, Николай Денисов . |