1. Новые покупки

    23.04.2018: Пассивная схема доход от 75 000 в месяц

    23.04.2018: Юмор Начало 2.0 Развитие чувства юмора - Павел Воля (2018)

    23.04.2018: Специалист по трафику, трафик-менеджер - Convert Monster (2018)

    23.04.2018: WordPress для верстальщика - Исламов (3.2018)

    23.04.2018: Еnvаtо Еlеmеnts - слив подписки 2017 [1,3 Терабайта годноты]

    22.04.2018: Нейро-мио-фасциальные манипуляции в комплексной мануальной терапии - Сапир (2017)

    22.04.2018: [SilverStone] Имитация камня

    21.04.2018: Опционы На Старт! - Пурнов (2017)

    21.04.2018: Видео Омоложение - Эрик Томпсон (обновлённая версия 2018)

    21.04.2018: [Udemy.com] Взламываем сайты / Тестирование на проникновение с нуля - Все 7 частей!

    21.04.2018: АНИМАЦИОННЫЙ ВИДЕО-ПРОРЫВ 2.0 - Сергей Панферов

    21.04.2018: Бизнес молодость "Метаморфозы" Базовый курс

    20.04.2018: [НЛП] Архетипы - Чекчурин, Парханович (2018)

    20.04.2018: Инженер тендерного отдела - Черняк на Udemy (2018)

    19.04.2018: Схема пассивного заработка от 800р в сутки с одного потока (2017)

    18.04.2018: Прибыльная стратегия продаж на Amazon – Online Arbitrage (2017)

    17.04.2018: Обучение в мастер-группе по ударной раскрутке сайтов - Новосёлов (2018)

    17.04.2018: Курс Максима Солдаткина по веб-дизайну и UX/UI с трудоустройством Дизайнер 2.0

    16.04.2018: Взламываем сайты / тестирование на проникновение с нуля - часть 2 из 7

    15.04.2018: EdmarketConf - конференция по онлайн-образованию (2018)

    14.04.2018: Монетизация Вконтакте 2.0 - Сычёв (2018)

    14.04.2018: Секреты мужской психологии - Бахтиозина Татьяна (2016)

    13.04.2018: ИНСТАКУРС 6: С НУЛЯ ДО ПРОФИ - Делай деньги (2018)

    13.04.2018: [Претекст] 70 книг: продажи, управление, влияние, бизнес, психология, маркетинг, коучинг

    12.04.2018: Введение в BlockChain и смарт-контракты. За что программистам платят 150.000 рублей в месяц+ БОНУС

    12.04.2018: Как защититься от мужских измен - Бахтиозина Татьяна(2016)

    12.04.2018: Как стать женщиной, которую одаривают мужчины- Бахтиозина Татьяна (2016)

    12.04.2018: Деньги (крупные суммы) из товарных дорвеев - Авторская (2018)

    11.04.2018: Как зарабатывать на картинках от 1500 руб в день (2018)

    11.04.2018: [БМ-Бизнес Молодость] - Реальный YouTube 2018

    10.04.2018: Как запустить свою онлайн-школу с доходом 100 000 - 300 000 рублей в месяц - Борисов

    06.04.2018: Пресеты LR Сергей Кабанков и Анюта Рай

    06.04.2018: Курс Моделирование женского платья (fashionelement)

    06.04.2018: Технология производства изделий из каменной крошки

    06.04.2018: Дорвеи для нищебродов - Заработок без вложений (2017)

    05.04.2018: Страх подхода — решение для интровертов - Джеймс Маршалл (2018)

    04.04.2018: Магия сексуальности (интенсив, пакет Жрица) - Мирная (2017)

    04.04.2018: Английский. Живая Разбериха - Счастливая (2017)

    03.04.2018: Рождественская раздача - 45 вебинаров! - Бауман

    01.04.2018: Основы блокчейн - Pluralsight (Полный перевод 2018)

    31.03.2018: Денежный магнит -Бахтиозина Татьяна (2018)

    30.03.2018: Как оставаться любимой для одного и желанной для многих - Чернозем (2016)

    30.03.2018: Сценарии жизни людей - Клод Штайнер (2018)

    30.03.2018: Mirantique 2 - Достижение цели проще - KimEvolution (2018)

    29.03.2018: Магия Влюбления - Бахтиозина Татьяна (2016)

    29.03.2018: Как создавать статейники (mfc) на копипасте - Громов (2018)

    29.03.2018: Искусство таро. Полный курс - Попов

    28.03.2018: Курс разработки на блокчейне Ethereum, создания смартконтрактов и сайтов для ICO

    28.03.2018: Как зарабатывать с одного сайта более 300К рублей в месяц - Квасов (2018)

    28.03.2018: Содание организационной политики и накопление знаний в компании - Торбосов

    28.03.2018: Пошив базового гардероба с нуля

    26.03.2018: Фитнес модель за 4 месяца - 4.0 (2017, ФМ4М)

    25.03.2018: Основы дизайна интерьеров - Highlights (2017)

    25.03.2018: MemberShip под ключ (+ транскрибация) - Юрий Черников (2018)

    23.03.2018: Выйди из зоны комфорта - Брайан Трейси (Аудиокнига + Рабочая тетрадь)

    23.03.2018: Порно - Почему оно разрушит твою сексуальную жизнь - Джеймс Маршалл (2018)

    23.03.2018: Секреты хакеров! Полный курс по кибербезопасности - Udemy (2017)

    22.03.2018: Руководство по быстрому запуску и продвижению магазина на etsy (2018)

    22.03.2018: [OpenCart] МегаПак 79 шаблонов от Pavothemes +200 модулей и 20 шаблонов от opencart2x

    22.03.2018: Госзаказ от теории до контракта (2017)

    22.03.2018: Как разобраться со своим гневом? Семинар - Бурхаев (2018)

    20.03.2018: Backend Интернет-Магазина (Веб Разработка, 2 четверть) - GeekUniversity (2018)

    19.03.2018: 20 Золотых процессов на все случаи жизни - Саянов (2017)

    19.03.2018: Как женщине вернуть свою силу и энергию - Бахтиозина (2017)

    15.03.2018: Обучение торговли криптовалютам - Яковенко

    10.03.2018: Поставщики [Оптовик 8.0] Бизнес с Китаем от А до Я всего за 1 месяц

    10.03.2018: Курс по личной эффективности - Сорокин aka Smart (2017)

    10.03.2018: Копирование крупных сайтов - Авторская (2018)

    08.03.2018: Схема по созданию кредитной карты на гражданина USA профит от 1000$

    08.03.2018: Vip Ключ Jackpot - Клинг

    04.03.2018: Секреты современного программирования - [email protected] (2017)

    03.03.2018: Как открыть свой обменный пункт электронных денег и криптовалют - Monta

    03.03.2018: Взламываем сайты / тестирование на проникновение с нуля - часть 3 из 7

    02.03.2018: Чёрная автоматика - Корнилов ака kote.ws (2018)

    02.03.2018: Изготовление сабвуферов Стелс - Туманов (2017)

    28.02.2018: Набор иконок в разных форматах - Font Awesome 5 PRO (Line, Solid, Regular)

    28.02.2018: Как уличить жену в измене - Женские секреты

    28.02.2018: Автонаполняемый новостной портал World news [ English ]

    28.02.2018: Большой Интенсив Александра Писаревского

    24.02.2018: Криптотрейдинг от практика ( CryptoInside )

    24.02.2018: Обучение Бизнесу с Китаем от 100$ к 10.000$ за 2 месяца коучинг 21 (Версия Платинум)

    23.02.2018: Рецепт от рака из Третьего Рейха , продления жизни и 25 других серьезных заболеваний 4/6

    19.02.2018: Криптобизнес 2.0

    18.02.2018: Design GYM 4.0 Курс Данила Фимушкина

    17.02.2018: Заработок криптовалюты с помощью двух сервисов - Якупов

    17.02.2018: Курс Максима Солдаткина по веб-дизайну и UX/UI с трудоустройством Дизайнер 2.0 (2-ой месяц)

    15.02.2018: Супердоходные сайты от А до Я - Деригина (2017)

    13.02.2018: Прибыльные ниши на Etsy - Федосенко (2017)

    12.02.2018: Аналитика данных. Онлайн-курс.

    12.02.2018: Контрактные автозапчасти - Гордеев

    04.02.2018: Instagram-аккаунт для роста вашего бизнеса (2017)New!

    29.01.2018: Интернет-профессия “Мастер анимационного видео”

    28.01.2018: Программирование - Дуйко (2018)

    27.01.2018: Как новичку с нуля начать зарабатывать от 7000 рублей в день.

    27.01.2018: [Практика] Уникальный белый заработок на услуге до 90 т.р. в месяц (2017)

    25.01.2018: Крипто-портфель на 2018 год

    25.01.2018: Факультет по Веб Разработке (1: Frontend ИнтМаг) - GeekUniversity (2017)

    24.01.2018: Ликвидация склада StratoПлана 2017

    21.01.2018: Как начать майнить и получать доход (от 1500 до 5000 рублей в месяц) со своей видеокарты

    20.01.2018: Порталы Судьбы - Клинг

  2. Получи максимум инфопродуктов, оформи подписку всего за 295 рублей!
    Скрыть объявление

Скачать WebForMySelf | Фреймворк Bootstrap практика адаптивной верстки от А до Я (2016)

Тема в разделе "Создание сайтов", создана пользователем Gustav, 5 мар 2016.

  1. Gustav

    Gustav Команда форума Администратор

    Сообщения:
    10.206
    Симпатии:
    22.962
    WebForMySelf | Фреймворк Bootstrap практика адаптивной верстки от А до Я (2016)
    Автор: Андрей Кудлай (WebForMySelf)

    f9148a90dc6c177f9fcf38bbc3b67801.jpg

    Описание:
    Кроме непосредственного изучения Bootstrap`a, курс охватывает все базовые знания верстки. Поэтому он будет ценен также для начинающих пользователей, которые только приступили к изучению HTML и CSS, поскольку в курсе можно найти множество приемов современной верстки с использованием HTML5 и CSS3.

    Все дополнительные знания по верстке, включая наиболее актуальные знания из HTML5 и CSS3, которые могут понадобиться для изучения курса, входят в данный курс в виде бонусов.

    Этим обеспечена СИСТЕМНОСТЬ изучения курса даже для полного новичка.

    А если вы уже опытный верстальщик, то благодаря курсу вы менее чем за 30 дней ГАРАНТИРОВАННО сможете повысить скорость верстки буквально в разы – без какой-либо потери качества.

    Огромным преимуществом при использовании Bootstrap’a является то, что он уже по умолчанию дает нам адаптивность, т.е. возможность сайта подстраиваться под различные расширения и устройства: от мобильных телефонов и планшетов до ноутбуков и огромных десктопных мониторов.

    Основная часть курса включает в себя 3 части:

    Теория фреймворка Bootstrap
    Практика. Верстка макета интернет-магазина StyleTour
    Практика. Верстка макета лендинга Eventide

    Курс состоит из 49 уроков
    Общая продолжительность курса около 17 часов
    Средняя продолжительность урока - 15-20 минут

    Подача материала, как и всегда, построена по принципу "от простого к сложному". В курсе вы найдете, как теоретическую часть (это первая часть курса), так и практические, где мы закрепим теорию на практике. Изучив курс, вы не только освоите работу с фреймворком Bootstrap, но и научитесь использовать его на практике, создавая шаг за шагом типовые сайты. В частности, в практических частях курса мы сверстаем главную страницу интернет-магазина, а также одностраничник, так называемый лендинг.

    Кроме изучения непосредственно самого фреймворка, курс будет полезен также для пользователей, которые только изучают верстку или имеют незначительный опыт верстки. В этом случае в курсе вы найдете множество приемов современной верстки с HTML5 и CSS3. Изучив курс, вы сможете гораздо проще и быстрее верстать сайты и страницы, использую фреймворк Bootstrap. К тому же, использование Bootstrap’a уже по умолчанию дает нам адаптивность, т.е. возможность сайта подстраивается под различные расширения.

    Часть 1. Теория фреймворка Bootstrap

    1. Вводный урок
    В первом уроке курса мы пройдемся по организационным моментам, рассмотрим структуру курса, узнаем основные источники документации, с которой будем работать на протяжении всего курса. Также обозначим необходимое программное обеспечение (редактор, версия фреймворка Bootstrap). Кроме всего прочего, мы поговорим о вопросе: "А нужны ли нам вообще CSS фреймворки"?

    2. Установка Bootstrap
    В этом уроке мы рассмотрим варианты установки фреймворка Bootstrap и установим фреймворк для последующего изучения и дальнейшей работы с ним. Также мы узнаем, зачем нужны исходники фреймворка, с которыми будем работать в одном из следующих уроков.

    3. Сетка Bootstrap. Теория
    В этом уроке и на протяжении нескольких следующих уроков мы с вами будем знакомиться с сеткой фреймворка Bootstrap. Собственно, сетка - это то, из-за чего нам в первую очередь и нужен фреймворк. Именно сетка позволяет с легкостью верстать различную структуру страниц и при этом эти страницы будут изначально адаптивными, т.е. будут подстраиваться (адаптироваться) под различные разрешения устройств, на которых страница просматривается.

    4. Сетка Bootstrap. Практика. Часть 1
    В этом уроке мы продолжим изучение сетки Bootstrap’a и от теории перейдем к практике, на простых примерах изучая возможности сетки фреймворка.

    5. Сетка Bootstrap. Практика. Часть 2
    Еще один урок мы посвятим закреплению на практике работы с сеткой Bootstrap. Здесь мы уже будем придумывать и решать задачи посложнее.

    6. Сетка Bootstrap. Верстка простого макета
    Этот урок подобьет определенный итог трех предыдущих уроков. Здесь от простых примеров мы перейдем к реальному практическому примеру и сверстаем схематичный макет каталога товаров. Это будет 2-хколоночный макет сайта, в сайдбаре будет находиться меню, в контентной части - карточки товаров. При этом верстка такого макета по сути займет считанные минуты, и здесь мы напишем всего пару собственных стилевых правил. Все прочие стили будут стилями фреймворка. Конечно, в результате мы получим схематичный сайт, некий скелет, но это уже будет адаптивное решение, которое останется только оформить должным образом, чтобы получить в результате законченное готовое решение. И на создание макета из урока мы затратили, как уже отмечалось, считанные минуты.

    7. Компоненты Bootstrap
    Кроме своей основы - сетки - Bootstrap предлагает массу дополнительных готовых решений в виде компонентов. Именно готовые решения, которые целиком и полностью можно использовать на различных проектах. Среди прочего это: формы, кнопки, постраничная навигация, модальные окна, слайдер-карусель, вкладки, аккордеон и многое-многое другое.

    8. Кастомизация Bootstrap. Часть 1
    В этом уроке мы продолжим изучение всевозможных компонентов, которые предлагает нам Bootstrap из коробки.

    9. Кастомизация Bootstrap. Часть 2
    В этом уроке мы с вами научимся кастомизировать Bootstrap, т.е. изменять его под себя. Именно для этого и нужны исходники, которые Bootstrap предлагает нам скачать вместе с файлами самого фреймворка. Именно эти исходники мы и можем изменять, кастомизируя фреймворк. Сделать этом можно несколькими способами: внося правки в исходники less или sass и компилируя новый файл фреймворка или же воспользоваться онлайн-инструментом кастомизации от самого фреймворка. Об этих способах вы и узнаете из данного урока.

    Часть 2. Практика. Верстка макета интернет-магазина

    1. Анализ шаблона
    Верстку любой страницы желательно начинать с ее анализа, что мы и сделаем в этом уроке. При анализе желательно разбить в уме страницу на кусочки (блоки) и продумать способ верстки каждого из кусочков. Касательно Bootstrap'a, здесь желательно продумать, какие классы использовать для верстки общей структуры (шапка, сайдбар, контент, футер...), продумать, как должен вести себя макет при изменении ширины экрана, как должны при этом перестраиваться элементы сайта и т.д.

    2. Верстка верхнего меню
    В данном макете у нас присутствует несколько различных меню. В частности, в шапке сайта у нас будет 2 меню, в каждом из которых будет довольно много пунктов. В этом уроке мы сверстаем самое первое меню страницы. Это будет пока только верстка, оформлением мы займемся уже в следующем уроке.

    3. Оформление верхнего меню
    Итак, в предыдущем уроке мы сверстали первое меню нашего макета. Собственно, как вы могли заметить, сделать это было довольно просто. Поскольку Bootstrap предлагает нам отличную документацию со множеством примеров, мы взяли наиболее подходящий нам пример меню из документации и немного поправили его под себя. В итоге у нас на странице появилось уже практически готовое меню. Нам осталось лишь оформить его, что мы и сделаем в текущем уроке.

    4. Установка слайдера
    Одной из изюминок макета, выбранного нами для верстки, является слайдер в шапке. Этот слайдер, в отличие от прочих элементов страницы, должен тянуться на всю ширину экрана. Также оформление слайдера и его элементов на макете несколько отличается от стандартного оформления карусели Bootstrap. Именно поэтому работа со слайдером будет хорошей практикой по работе с компонентом карусели, так и по кастомизации данного компонента.

    5. Меняем эффект слайдера
    По умолчанию в слайдере Bootstrap слайды меняются с эффектом именно карусели, т.е. текущий слайд уезжает влево, а его место занимает слайд, выезжающий справа. Мне кажется, такой эффект не очень современен и он на любителя. В этом уроке мы попробуем изменить эффект slide на эффект растворения - fade, который смотрится более привлекательно.

    6. Добавление контента слайдера
    В этом уроке мы продолжим работу со слайдером и добавим, а также оформим согласно макета содержимое слайдов.

    7. Индикаторы слайдера
    В этом уроке мы поработаем с индикаторами слайдера, которые показывают количество слайдов, а также позволяют переключаться между ними.

    8. Верстка основного меню
    Текущий урок будет посвящен верстке второго меню шаблона, которое находится в слайдере. Особенностью этого меню является то, что в нем находится логотип сайта, который по умолчанию не совсем вписывается в меню на мобильной версии сайта. Попробуем найти оригинальное решение для того, чтобы на мобильных устройствах все смотрелось достаточно удобно и хорошо.

    9. Оформление основного меню
    В этом уроке мы продолжим работу с основным меню сайта и добавив оформление для него в стиле нашего шаблона.

    10. Дополнительные варианты меню
    Текущий урок мы посвятим дополнительным вариантам работы меню. Поскольку меню у нас имеет много пунктов, то на мобильных устройствах некоторым может не понравится расположение меню в два ряда. К тому же еще в меню находится и поиск, который также не очень может вписываться в меню на мобильных устройствах. Попробуем что-то сделать с этим, добавив оригинальное оформление и немного магии jQuery.

    11. Структура контентной части
    В этом уроке мы проанализируем контентную часть шаблона, попробуем сформулировать общую структуру разделения шаблона на сайдбар и контент, зададим необходимые классы, тем самым разделив шаблон на сайдбар и контент.

    12. Виджеты сайдбара
    В этом уроке мы сверстаем блоки виджетов сайдбара, которые представлены в виде меню категорий. Также мы зададим для них ряд стилевых правил, добиваясь нужного оформления для той или иной ширины устройства.

    13. Завершаем разметку сайдбара
    В этом уроке мы допишем необходимую разметку для сайдбара. Здесь мы набросаем разметку для слайдера в сайдбаре, блока рекламы, а также блока О магазине.

    14. Оформление слайдера сайдбара
    Слайде в сайдбаре кардинально отличается от слайдера в шапке и поэтому в данном уроке нам потребуется написать новые стили для оформления нового слайдера на создаваемой странице.

    15. Завершаем оформление сайдбара
    В этом уроке мы завершим работу с сайдбаром, добавив недостающие стили и проверив итоговую работу на адаптивность.

    16. Верстка карточки товара
    Основой любого интернет-магазина или каталога товаров являются карточки товаров, ведь товары это именно то, на что пользователь обращает особое внимание. В этом уроке мы с вами создадим разметку карточки товаров для нашего сайта.

    17. Оформление карточки товара. Вариант 1
    В предыдущем уроке мы создали разметку для карточки товара на нашем сайте. В результате мы получили в целом неплохой вариант, который осталось оформить согласно имеющегося у нас шаблона, чем мы и займемся в данном уроке.

    18. Оформление карточки товара. Вариант 2
    Итак, мы завершили с оформлением карточки товара и получили необходимый нам результат. В этом уроке мы рассмотрим еще один вариант оформления карточки товара, который вы можете использовать в своих проектах. Это довольно популярное на сегодня решение, которое заключается в скрывании части информации на карточке и показе ее при наведении на саму карточку.

    19. Завершаем верстку контента
    В этом уроке мы завершим верстку и оформление контентной части страницы. Также мы протестируем полученную верстку на адаптивность, добиваясь хорошего отображения как на десктопах, так и на мобильных устройствах.

    20. Разметка формы подписки
    В макете имеющегося у нас шаблона есть форма подписки, которую мы и сверстаем в данном уроке. В процессе верстки мы ближе познакомимся с формами в Bootstrap и поработаем с ними.

    21. Оформление формы подписки
    В этом уроке мы будем оформлять сверстанную в предыдущем уроке форму подписки, добиваясь нужного оформления и отображения формы на различных типах устройств.

    22. Слайдер в футере
    Еще одним динамичным элементов создаваемой страницы является слайдер, который находится перед футером сайта. Это специфичный элемент и для его создания мы воспользуемся сторонним плагином для создания слайдеров. В ходе урока мы рассмотрим нюансы создания подобных слайдров на адаптивных сайтах.

    23. Разметка футера
    Последние два урока мы посвятим финальной части в верстке сайта - это будет верстка и оформление футера. Футер у нас, можно сказать, является типовым для современных сайтов. В нем размещено много ссылок и данных: копирайт, иконки социальных сетей, способы оплаты и т.д. В этом уроке мы сверстаем содержимое футера.

    24. Оформление футера
    Последний урок будет посвящен оформлению футера и итоговому тестированию получившейся верстки в целом.

    Часть 3. Практика. Верстка лендинг пейдж

    1. Анализ макета
    Начнем мы курс, как обычно, с урока по анализу макета. Здесь мы сформулируем не только некие общие правила, которые непосредственно касаются имеющегося макета, но и правил, которые относятся в целом к лендингам.

    2. Верстка секции шапки
    Итак, переходим к первой секции лендинга - секции шапки. По задумке данная секция должна занимать всю доступную ширину и высоту экрана. То есть, на каком бы устройстве мы не открыли сайт, всюду первая секция должна занимать ровно 100% ширины и высоты. Кроме того, контент секции должен быть центрирован как по горизонтали, так и по вертикали. В этом уроке мы сверстаем секцию, а в дальнейших оформим ее и рассмотрим несколько вариантов решения поставленных выше задач.

    3. Задаем общие стилевые правила
    Поскольку одностраничник разбит на секции, можно предположить, что каждая из секций должна иметь некие одинаковые правила оформления. И это действительно так. В этом уроке мы выделим такие правила и опишем их в стилях сайта.

    4. Оформление секции HEADER
    В этом уроке мы оформим первую секцию сайта - шапку. Также мы рассмотрим несколько вариантов решения задачи, когда секция должна занимать 100% ширины и высоты экрана.

    5. Верстка первой части секции Спикеры
    Следующая секция, которую мы должны реализовать - секция спикеров. Это достаточно длинная и объемная секция, поэтому для ее создания мы выделим несколько уроков. В этом уроке, среди прочего, мы поработаем с созданием вкладок, используя для этих целей оригинальный компонент Bootstrap.

    6. Оформление первой части секции Спикеры
    В этом уроке мы оформим первую часть секции спискеров, сверстанную в предыдущем уроке.

    7. Верстка второй части секции Спикеры
    Вторая часть секции будет посвящена созданию карточек докладчиков. Это относительно сложный элемент в данном макете, который предполагает наличие как фронтальной стороны карточки, так и обратной ее стороны.

    8. Оформление второй части секции Спикеры
    В этом уроке мы оформим вторую часть секции спикеров, добавив динамичности к карточкам спикеров: при наведении курсора мыши на карточку сотрудника его фото будет затемняться и будет проявляться обратная сторона карточки сотрудника.

    9. Модальные окна в Bootstrap
    Очевидно, что клик по карточке сотрудника должен предполагать некие действия. В качестве такого действия мы будем использовать компонент Bootstrap для модальных окон. Именно в модальном окне и будет открываться дополнительная информация по докладчику.

    10. Верстка первой части секции Event
    Секция событий на макете является также достаточно объемной. При ее верстке мы вновь столкнемся с вкладками. Также мы поработаем с аккордеоном в Bootstrap, немного дописав работу с его событиями в jQuery. Также мы увидим, насколько просто Bootstrap позволяет вставлять на страницу адаптированные видео.

    11. Оформление первой части секции Event
    В этом уроке мы оформим сверстанную первую часть секции событий.

    12. Состояние переключения аккордеона
    В этом уроке мы научимся отслеживать события открытия и закрытия аккордеона. Это необходимо для того, чтобы изменять иконку индикатора аккордеона с плюса на минус и обратно.

    13. Вторая часть секции Event
    Во второй части секции событий очередной новинкой будет необходимость создания адаптивного видео на странице. Остальное содержимое будем простым и уже знакомым нам.

    14. Третья часть секции Event
    В этом уроке мы сверстаем и оформим заключительную часть секции, добавив несколько стилевых правил для этого.

    15. Верстка секции Form
    Несколько следующих уроков мы посвятим созданию формы. Сложность задачи заключается в наличии, согласно макета, нестандартного выпадающего списка, а также в необходимости валидации формы.

    16. Валидация формы
    В этом уроке мы решим задачу валидации формы. Решить задачу можно двумя способами: написать собственный скрипт валидации или же воспользоваться готовыми решениями. Мы обратимся к стороннему компоненту, коих для Bootstrap имеется масса. Данный компонент для валидации позволит нам легко внедрить его в дизайн шаблона, а также имеет массу настроек.

    17. Выпадающий список формы
    Следующий элемент формы, для которого мы используем стороннее решение, это выпадающий список. Для него мы используем специальный компонент, который гибок в настройках и позволит оформить select формы в необходимом нам стиле.

    18. Секция спонсоров и карта
    В этом уроке мы реализуем сразу две небольшие секции - это секция с логотипами спонсоров, а также секция с изображением карты.

    19. Верстка футера
    Традиционный финал практически любой страницы - ее футер. Футер в нашем макете довольно прост: блок контактов, блоки информации для пользователя, а также копирайт. В этом уроке мы сверстаем футер.

    20. Оформление футера
    В данном уроке мы займемся оформлением футера.

    21. Добавляем эффекты анимации
    Верстка сайта готова и на этом можно было бы завершать основную часть сайта. Но давайте сделаем наш сайт еще чуть более динамичным и приятным для посетителей. Для этого мы добавим к нему эффектов анимации. Такие решения часто применяются на лендингах: при прокрутке страницы на ней плавно появляются всевозможные элементы и блоки. Для нашего решения мы используем библиотеку animate.css, позволяющую добавить эффекты анимации, а также плагин, воспроизводящий эффекты при скролле страницы.


    Продажник:

    Скачать:


     
    Последнее редактирование модератором: 1 янв 2017
    Нищий, wakariio и Tristram нравится это.
  2. webomania

    webomania PRO Unlimited

    Сообщения:
    148
    Симпатии:
    8
    а исходник psd где находится?
     
    Нищий нравится это.
  3. evgeniy12

    evgeniy12 Пользователь

    Сообщения:
    3
    Симпатии:
    3
    Автор перезалейте пожалуйста. Яндекс забанил файл.
     
    Нищий нравится это.
  4. Gustav

    Gustav Команда форума Администратор

    Сообщения:
    10.206
    Симпатии:
    22.962
    Ссылка обновлена
     
    Нищий и evgeniy12 нравится это.
  5. t_factory

    t_factory PRO Unlimited

    Сообщения:
    107
    Симпатии:
    2
    Возможно ли обновить ссылку? Блокировка...
     
    Нищий нравится это.
  6. Gustav

    Gustav Команда форума Администратор

    Сообщения:
    10.206
    Симпатии:
    22.962
    Ссылка обновлена
     
    Нищий нравится это.
  7. djanskiy

    djanskiy PRO Unlimited

    Сообщения:
    25
    Симпатии:
    14
    Вполне достойный курс. Верстальщик-стажер, который у меня работает, как раз проходил обучение по этому курсу. Очень хвалил.
    Конечно, он потом еще много учился "в поле" и по началу бегал за вопросами к опытному кодеру. Но. Как для старта - вполне подойдет.
     
    Нищий и webomania нравится это.
  8. juraa

    juraa Пользователь Новичок

    Сообщения:
    38
    Симпатии:
    13
    Если с Bootstrap'ом только начинаете знакомиться, рекомендую, аналог азбуки (в хорошем смысле) доходчиво и понятно.
     
    Нищий и djanskiy нравится это.

Похожие темы
  1. Warlage
    Ответов:
    0
    Просмотров:
    878
  2. Gustav
    Ответов:
    1
    Просмотров:
    869
  3. Gustav
    Ответов:
    5
    Просмотров:
    1.742
  4. Gustav
    Ответов:
    2
    Просмотров:
    1.242
  5. Gustav
    Ответов:
    4
    Просмотров:
    1.254
Загрузка...