- УРОК №1. CSS фреймворки. Установка фреймворка Bootstrap
Из этого урока вы узнаете, что такое CSS фреймворки. Также вы узнаете, в чем заключаются преимущества использования фреймворка Bootstrap перед обычной версткой, без использования CSS фреймворков, а именно: Bootstrap позволяет ускорить процесс верстки и полученная верстка будет аккуратной, ровной и, главное, адаптивной, то есть будет хорошо смотреться на любых типах устройств – смартфонах, планшетах, ноутбуках и десктопах. Как итог урока мы создадим базовый шаблон Bootstrap, подключим необходимые файлы фреймворка, а также подключим шрифт с сервиса Google Fonts. Т.е. произведем установку Bootstrap.
- УРОК №2. Верстка навигационной панели
Начиная с текущего урока, мы приступим к верстке имеющего у нас макета – сайт-портфолио. Навигационная панель, которую нам необходимо сверстать, довольно непроста, с учетом того, что итоговый результат должен быть полностью адаптивным. Однако Bootstrap позволит значительно ускорить процесс ее верстки. Как итог урока мы создадим верстку навигационной панели – наиболее сложного элемента текущего макета.
- УРОК №3. Оформление навигационной панели. Часть 1
В этом уроке мы займемся стилизацией навигационной панели согласно требованиям имеющегося у нас макета. В результате урока мы оформим сверстанную навиационную панель, чтобы ее внешний вид соответствовал нарисованному макету.
- УРОК №4. Оформление навигационной панели. Часть 2
В этом уроке мы добавим интересное решение для социальных иконок, скрывая их и заменяя одной иконкой при просмотре сайта на маленьких экранах. Также мы добавим немного магии jQuery, чтобы открыть социальные иконки при необходимости. В результате урока мы оформим навиационную панель для маленьких экранов и практически завершим работу с ней.
- УРОК №5. Оформление навигационной панели. Часть 3
В этом уроке мы добавим несколько последних штрихов к оформлению компонента навигационная панель и в итоге получим идеальный результат – navbar будет отлично показан на различных типах устройств. В результате урока мы закончим работу с навигационной панелью. Это самый сложный элемент текущего макета – он адаптивен и отлично работает на любой доступной ширине экрана.
- УРОК №6. Верстка контентной части
В данном уроке вы научитесь работать с контентной частью нашей страницы.Здесь мы немного познакомимся с понятием сетки фреймворка Bootstrap. Именно благодаря сетке нам в первую очередь и интересен Bootstrap, и именно сетка позволяет очень просто создавать страницы любой сложности, которые необходимым образом будут подстраиваться (адаптироваться) под различную ширину экрана. В результате урока мы сверстаем область контента, которая благодаря сетке Bootstrap’a будет изначально адаптивной.
- УРОК №7. Оформление контентной части
В этом уроке мы займемся оформлением контентной части. Благодаря сетке Bootstrap контентная часть уже адаптивна и нам достаточно будет написать всего несколько дополнительных правил, чтобы получить отличный результат. Также в уроке мы используем еще один компонент Bootstrap – Pagination. Используя данный компонент, мы получим отличный современный вариант пагинации, потратив на это минимум времени. В результате урока мы завершим работу с областью контента и получим полностью адаптивный ее вариант.
- УРОК №8. Верстка и оформление футера
В этом уроке мы сверстаем и оформим последний элемент нашего макета – футер. Это самый простой элемент на макете, поэтому урок будет самым коротким и простым. В результате урока мы завершим работу над версткой сайта и получим его итоговый вариант, который будет целиком и полностью адаптивным.
