| # | Название видеоурока | Видео / Тесты | Решило | Рейтинг | Доступ |
|---|---|---|---|---|---|
| 1 |
 Погружение в проект
|
2 теста |
|||
|
На этом уроке мы рассмотрим, что такое bootstrap-4, рассмотрим инструменты и материалы для нашего проекта Отчёт отправил: 19475. Konstantin Выполнено за 7 час. 21 мин. [Показать отчёт] Научился: Всё скачал и установил... Осваиваю новый редактор - brackets. Сложности: фото =) - |
|||||
| 2 | Основа и фреймворк |
4 теста |
|||
|
На этом уроке мы создадим проект лендинг-страницы и подключим к нему библиотеку bootstrap-4 Отчёт отправил: 19475. Konstantin Выполнено за 1 час. 32 мин. [Показать отчёт] Научился: Добрые программисты - подскажите - правильно подключил локально? ( библиотеку bootstrap и сопутствующие js-библиотеки) Если да, то научился. Сложности: Просто, но некоторые моменты я бы вынес в отдельный урок. Не раскрыто и не понял, как подключать его локально? Попытался разобраться но не получилось - $ npm install bootstrap - что это и куда вставлять? Как с этим работать? На сайте производителя мне комментариев не хватило. Ремарки для проходящих курс: 1.Как вы можете заметить, в архиве есть 2 версии CSS и JavaScript файлов, т.е. с суффиксом min и без него. Версия файла с min ничем ни отличается от без min, она просто минимизирована (сжата). В продакшене (на рабочем сайте) лучше использовать минимизированные версии файлов. Эти файлы имеют меньший размер, и, следовательно, обеспечивают более быструю загрузку страниц сайта. Не минимизированные версии более удобно использовать при разработке, а также для изучения. 2. Файлы JavaScript лучше подключать перед закрывающим тегом body (</body>), так как это обеспечит более быструю загрузку и отображение основного контента веб-страницы. |
|||||
| 3 | Верная навигация |
3 теста |
|||
|
На этом уроке мы создадим красивое адаптивное навигационное меню для нашего сайта Отчёт отправил: 19475. Konstantin Выполнено за 33 мин. [Показать отчёт] Научился: Странно, этот урок вроде был выполнен, а почему-то отображается, как не пройденный. Я до конца не разобрался, как тесты размещать, может кому-то байты нужны - то вот вопросы к размещению: • В ЧОМ РАЗНИЦА МЕЖДУ ВЕРТИКАЛЬНОЮ И ГОРИЗОНТАЛЬНОЙ ФОРМОЙ? Вертикальная форма - это макет формы, в которой её элементы располагаются вертикально, т.е. один под другим. Данная форма создаётся без добавления класса к элементу формы (<form>). Метки и элементы управления формы необходимо размещать в блоке с классом ".form-group". Горизонтальная форма - это форма, в которой надписи и элементы управления находящиеся в одной группе (<div class="form-group">...</div>) располагаются на одной строке. • ОБЪЯСНИТЕ ТИПОГРАФИКУ И ССЫЛКИ В BOOTSTRAP. Bootstrap устанавливает основной глобальный фон, типографику и стили ссылок. • Основной глобальный фон - устанавливает "background-color: #fff" в элементе <body>. • Шрифты - используют @font-family-base, @font-size-base, и @line-height-base атрибуты. • Стили ссылок - устанавливают глобальный цвет ссылки через атрибут @link-color и применяют подчеркивание ссылки исключительно для ":hover". • ЧТО ТАКОЕ НОРМАЛИЗАЦИЯ(NORMALIZE) В BOOTSTRAP? Bootstrap использует нормализацию чтобы установить кросс согласованность для браузеров. Normalize.css это современная, HTML5 - готовая альтернатива CSS. Это небольшой файл CSS, который обеспечивает лучшую кросс-браузерную согласованность в стилях по умолчанию для HTML элементов. После этого по другому смотришь на код и вообще Brootstrap4. |
|||||
| 4 | Заголовок header - красивая основа |
2 теста |
|||
|
На этом уроке мы создадим заголовок header и зададим его стиль
Отчёт отправил: 19475. Konstantin Выполнено за 2 час. 29 мин. [Показать отчёт] Научился: Как всегда все отлично! Заодно и CSS подтяну =) Сложности: Лектор хороший, урок понятный. |
|||||
| 5 | Заголовок header - оверлей, надпись и кнопка |
2 теста |
|||
|
На этом уроке мы дооформим header, и разместим на нем надпись и кнопку
Отчёт отправил: 19475. Konstantin Выполнено за 1 день 8 час. 27 мин. [Показать отчёт] Научился: C CSSом поработал - было интересно... Сложности: Столкнулся сам со своими ошибками... Пока нашел -много времени потерял.... =( |
|||||
| 6 | Об авторе - блоки и HTML |
2 теста |
|||
|
На этом уроке мы создадим блок "Об авторе" и наполним его контентом
Отчёт отправил: 19475. Konstantin Выполнено за 1 час. 31 мин. [Показать отчёт] Научился: после урока приходит очень много разных идей, как что улучшить или проверить, или задать общее правило для картинок и т.п. Заставили мозг творчески мыслить... Сложности: Всё было интересно... |
|||||
| 7 | Об авторе - отступы и дополнения |
1 тест |
|||
|
На этом уроке мы сделаем дополнения информации об авторе и начнем работу со стилями в данном блоке Отчёт отправил: 19475. Konstantin Выполнено за 17 мин. [Показать отчёт] Научился: 1. добавлять информацию под фото автора 2. задать размер сетки для разных экранов 3. поработал со стилями about, about_me и заголовка Валерий, как всегда удивил. Многих вещей не знал. Очень понравилась работа со стилями. Сложности: Грамотно все устроено в курсе! Нет вопросов. |
|||||
| 8 | Об авторе - отступы, цвета, закругления |
1 тест |
|||
|
На этом уроке мы зададим красивые цвета тексту и интересный вид картинки
Отчёт отправил: 19475. Konstantin Выполнено за 11 мин. [Показать отчёт] Научился: 1. задавать border-radius и параметры ширины/высоты изображения 2. задавать оптимальные цвета, отступы и стили текстам блока about Сложности: Отказаться от span и решить оптимально расположив по середине <div class="text" align="center"><b>Killer</b></div>. Объекты важно размешать по трем предложенным вариантам: лева, центр, право. Тогда всё будет симметрично. А px и em - придуманы для отступов. |
|||||
| 9 | Товар лицом |
|
|||
|
На этом уроке мы создадим заготовки для портфолио (представления товара или услуг)
Отчёт отправил: 19475. Konstantin Выполнено за 1 час. 32 мин. [Показать отчёт] Научился: Всё было очень интересно, познакомился с laceholder.com Довел изображения до правильных размеров. Сложности: Было интересно =) |
|||||
| 10 | Отзывы - размещение карточек |
|
|||
|
На этом занятии мы создадим и заполним карточки отзывов
Отчёт отправил: 19475. Konstantin Выполнено за 10 час. 11 мин. [Показать отчёт] Научился: Благодарю автора курса! В этом уроке все просто и понятно. Поэтому решил "заморочиться" и поискать красивый вариант оформления данной идеи. Убежден, что что бы писать красивый код нужно : 1. Писать. 2. Смотреть реализацию понравившихся элементов кода у других. 3. Повторять. 4. Получать //МОТИВИРОВАННУЮ и НЕТ// критику на реализацию кода. Сложности: Снять видео. Бегал к другу + нет опыта в этом... Видеообзор: 9uuFQB0oKy0 |
|||||
| 11 | Отзывы - стили |
1 тест |
|||
|
На этом уроке мы зададим стиль карточкам отзывов Отчёт отправил: 19475. Konstantin Выполнено за 4 час. 20 мин. [Показать отчёт] Научился: Сейчас анализирую количество пройденных уроков по B4, и что удивительно из всего B4 узнал больше о CSS, чем о B4. Каждый раз бесценные вещи. Очень благодарен курсу. Изменил задачу оставил тень при наведении мыши, что бы тень появлялась... Так интересней. Спасибо Валерию, что разрешает творчески ко всему подходить.. Сложности: Ничего. |
|||||
| 12 | Отзывы: карты - в сетку |
4 теста |
|||
|
На этом уроке мы сделаем карты ровными и научимся использовать в стилях шрифты с google fonts
Отчёт отправил: 19475. Konstantin Выполнено за 47 мин. [Показать отчёт] Научился: Что забавно, так это то, что прошлые уроки, я это в качестве факультатива проделал. Так что, это уже сделано на прошлых уроках. Буду двигаться дальше. Сложности: А вот адекватный тест разместить не удалось... Хотел осветить пару моментов, которые на собеседовании ставят в тупик: • ЧТО ВКЛЮЧАЕТ В СЕБЯ ПАКЕТ BOOTSTRAP? Bootstrap включает включает в себя: • Scaffolding - Bootstrap предоставляет базовую структуру с табличной системой Grid System, стилями ссылок, фоном. • CSS - Bootstrap поставляется с функцией глобальных CSS настроек, основными HTML элементами, имеющими стили и улучшенных с помощью расширяемых классов, и передовой табличной системой. • Components - Bootstrap содержит более десятка компонентов многократного использовании, построенных для обеспечения иконографии, выпадающих элементов, навигации, оповещений, всплывающих панелей popovers, и многое другое. • JavaScript Plugins - Bootstrap содержит более десятка пользовательских подключаемых модулей jQuery. Вы можете легко подключить их все, или по одному. • Customize - вы можете настроить Bootstrap компоненты, LESS переменные и jQuery плагины, чтобы получить свою собственную версию Bootstrap. • КАКИЕ ОСНОВНЫЕ ИНСТРУМЕНТЫ BOOTSTRAP? Основные инструменты Bootstrap: • Сетки - заранее заданные размеры колонок, которые можно сразу же использовать, например ширина колонки 140px относится к классу ".span2" (".col-md-2" в третьей версии фреймворка), который можно использовать в CSS описании документа. • Шаблоны - фиксированный или резиновый шаблон документа. • Типографика - описания шрифтов, определение некоторых классов для шрифтов, таких как код, цитаты и т. п. • Медиа - представляет некоторое управление изображениями и видео. • Таблицы - средства оформления таблиц, вплоть до добавления функциональности сортировки. • Формы - классы для оформления форм и некоторых событий происходящих с ними. • Навигация - классы оформления для табов, вкладок, страничности, меню и тулбара. • Алерты - оформление диалоговых окон, подсказок и всплывающих окон • ЧТО ТАКОЕ CONTEXTUAL КЛАССЫ ТАБЛИЦЫ В BOOTSTRAP? Contextual классы позволяют изменить цвет фона табличных строк или индивидуальных ячеек: • .active - применяет цвет при наведении на конкретную строку или ячейку. • .success - указывает на успешное или положительное действие. • .warning - указывает предупреждение, что, возможно, потребуется действие. • .danger - указывает на опасное или потенциально негативное действие. Кто сумеет их разместить корректно в тест - заработает себе байты, а проходящим поможет шире посмотреть на данный продукт |
|||||
| 13 | Обратная связь - создание формы |
1 тест |
|||
|
На этом уроке мы создадим форму обратной связи
Отчёт отправил: 19475. Konstantin Выполнено за 59 мин. [Показать отчёт] Научился: 1. создавать блок contact-form и две колонки внутри него 2. создавать форму и и разместить три ее элементам 3. добавлять кнопку отправки, задать ей bootstrap-классы Сложности: Были сложности с разметкой... |
|||||
| 14 | Обратная связь - стильная форма |
1 тест |
|||
|
На этом уроке мы зададим стили элементам формы обратной связи
Отчёт отправил: 19475. Konstantin Выполнено за 1 час. 22 мин. [Показать отчёт] Научился: Урок замечательный! Немного теории в урок: • КАК МОЖНО УПОРЯДОЧИТЬ СТОЛБЦЫ В BOOTSTRAP? Вы можете легко изменить порядок встроенных столбцов с помощью классов-модификаторов ".col-md-push-*" и ".col-md-pull-*" в диапазоне от 1 до 11. • КАКИМИ ДВУМА СПОСОБАМИ ВЫ МОЖЕТЕ ОТОБРАЗИТЬ КОД В BOOTSTRAP? Код в Bootstrap вы можете отобразить двумя способами: • Поместить код в строковый тег <code>. • Для выделения 2-х и более строк кода используйте тег <pre>. Избегайте использования угловых скобок < и >, для корректного отображения фрагментов кода. Всегда используйте теги <pre> как можно левее в редакторе кода, так как внутри тега <pre> сохраняются все отступы и пробелы. • КАК СДЕЛАТЬ ИЗОБРАЖЕНИЯ RESPONSIVE(ОТЗЫВЧИВЫМ)? Bootstrap 3 позволяет сделать изображения отзывчивыми путем добавления класса ". img-responsive" в тег <img>. Этот класс применяет "max-width: 100%;" и "height: auto;" к изображению, так что изображение красиво масштабируется относительно родительского элемента. Желающий могут добавить в тест к уроку и заработать байты. Надеюсь полезно. Сложности: Не получилось раздвинуть. Вкралась ошибка, с которой не разобраться... Несколько вариантов пробовал... всё тщетно. Оставил эту затею - двигаюсь вперед. =) |
|||||
| 15 | JS-навигация |
|
|||
|
На этом уроке мы сделаем пункты меню активными и реализуем навигацию по сайту при помощи jQuery
Отчёт отправил: 19475. Konstantin Выполнено за 14 час. 26 мин. [Показать отчёт] Научился: НЕ ПОЛУЧИЛОСЬ =( НУЖНА ПОМОстч! Сложности: Уперся в JC Видеообзор: DHo29mTfrRs |
|||||
| 16 | ФИНАЛЬНЫЙ УРОК |
без видео |
|||
|
Сделай видео-презентацию своей программы. На видео необходимо ответить на следующие вопросы: 0. Показать, что у тебя получилось. 1. Чему ты научился на этом курсе? 2. Что тебе понравилось, что нет? 3. Что ты ещё добавишь в свой проект? 4. Какой следующий курс ты будешь проходить? Отчёт отправил: 19475. Konstantin Выполнено за 6 мин. [Показать отчёт] Научился: Отличный курс! Формула программистов это то место, где нужно учиться. Лучше посмотреть видео, там все сказано. Сложности: Оооо, по-моему у меня многое не получалось и я всех кого можно замучил. И некоторых, кого нельзя =) Видеообзор: euDzbR_12p4 |
|||||
| Итого: 16 видеоуроков |
2 час. 59 мин. 24 теста |
5 чел. | |||
| Финалисты: Konstantin, vip, Yaroslav, Николай Денисов, Tom . | |||||
+ Бесплатно, каждую субботу
+ Создание программ с нуля
+ Решение консольных задач
Планы подписки
+ 300 практических видеоуроков
+ 400 интерактивных задач
+ Видео-решения и разбор
Презентация
