Уроки Flexbox Практика - Продолжаем, верстка SideBar сайта
HTML-код
- Опубликовано: 23 июн 2017
- Мы продолжаем уроки flexbox практика и сегодня мы продолжим ту часть верстки которую мы сверстали в прошлом уроке flexbox. В этом уроке мы продолжим и сверстаем sidebar сайта с помощью flexbox.
========================================================
ПОДПИШИСЬ на канал "Web Developer Blog" - goo.gl/Ai4OGa
И не пропускай новые видео!!!
========================================================
ПЛЕЙ-ЛИСТЫ МОЕГО КАНАЛА:
JavaScript практика - goo.gl/rxsyeX
Основы JavaScript - goo.gl/Cw7Vqv
Уроки Bootstrap 4 - goo.gl/65gmmS
Уроки Framework для верстки Foundation 6 - goo.gl/Yi2jfc
Рубрика "Основы за 10 минут" - goo.gl/QIvpDD
Верстка сайта на Foundation 6 - goo.gl/gVS45o
Основы препроцессора SASS - goo.gl/f4BDww
Уроки по Sublime text 3 - goo.gl/SjiKM2
Видео про заработок на RUclips - goo.gl/VxdirI
Создаем интернет магазин на PrestaShop - goo.gl/jop7M4
Уроки jQuery - goo.gl/tjAs41
========================================================
ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - goo.gl/6mO5GL
========================================================
Твой канал-это самородок в каналах про web-разработку.Очень нравятся твои уроки, с радостью их смотрю. Продолжай в том же духе!
Спасибо огромное! Очень порадовали!
Здравствуйте! У меня где сайд бар все прилепились друг к другу а у вас красиво, все делал за вами все ровно не получается что делать?
Спасибо большое! Мне нравиться когда ты проговариваешь занфчения и свойства. Запомнить с первого раза очень сложно, А ты напоминаешь. Спасибо!
Спасибо за урок, интересно выходит
Тег предназначен для основного содержимого документа. Для сайдбара нужен .
он не использовал тег main для сайдбара, для него он использовал просто див с классом сайдбар хотя и мог тегом aside, а тег main у него просто охватывает сайдбар как содержимое сайта и + в будущем каким то контентом
ты называешь классы с двойным подчеркиванием. Типа sidebar__item. Это по БЕМ? Можешь по бем сделать видео и желательно по структуре проекта, как что где распологается и хранится что бы было максимально удобно?
нужно было создать)
Отличное видео! Может лучше в следующем уроке адаптивку с FlexBox медиа запросами?
Спасибо! Наверное этот будет без адаптивки, а по интереснее)
Привет! с удовольствием смотрю виде уроки, хорошо обьясняешь и показываешь.
Потом можешь еще один видео урок, с psd макета верстать, с помощью флексбоксами?
Добрый день! Спасибо! Скинете psd без авторских прав?=)
В сети их навалом бесплатных. Те же html academy их в рассылке скидывают)
Сэкшэн - это разве по верстке?)
А про семантику что нибудь слышали?)
А если полоска не появляется (border-right) что делать?
Лучше в следующем видео заадаптивь меню для мобильных устройств.
Думаю тут без адаптива обойтись, и так будет интересно) А может и будет адаптив, пока думаю над этим)
можно было бы что-то заверстать внутри и под конец сделать адаптивочку уже
Тут наверное без адаптивочки, будет и так интересно. Просто одно видео только на адаптивку уйдет)
Дизайн похож на один немного известный сайтик )) пашка дуров так же делал
Он не говорил, что ему не нравится, это был сарказм...
На старый ВК похоже получилось)))
Возможно и так :)
как растянуть сайтбар на всю высоту страницы, чтобы секции прилипали по разные стороны?
в данном примере предлагаю воспользоваться калькулятором, тоесть задать высоту 100vh и отнять шапку, пример: height: calc(100vh - 83px);
ну и свойство justify-content: space-between; для сайдбара прописать
Почему у Вас два последних пункта в сайдбаре уехали ниже?
+Alexey Finohenov мы же вроде так сделали
@@SuprunAlexey в видео об этом ни слова
@@dmdk8301 свойство justify-content: space-between; позволило двом .sidebar__section которых мы создали стать по краям нашего основного сайдбар блока.
И прежде чем проходить практику по флексам ознакомтесь с теорией, дабы не задавать такие глупые вопросы.
Для чего каждую ссылку в div оборачивать?
чтобы был как отдельный блок к которому ты сможешь применить разные стили, например: border-radius
@@ShelestMaks ты сможешь и без дива применять разные стили для кнопки если задашь ей display: block;