Тёмный

Уроки Flexbox Практика - Продолжаем, верстка SideBar сайта 

Web Developer Blog
Подписаться 246 тыс.
Просмотров 20 тыс.
50% 1

Мы продолжаем уроки 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
Видео про заработок на RU-vid - goo.gl/VxdirI
Создаем интернет магазин на PrestaShop - goo.gl/jop7M4
Уроки jQuery - goo.gl/tjAs41
========================================================
ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - goo.gl/6mO5GL
========================================================

Опубликовано:

 

23 июн 2017

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 34   
@markovalexander4049
@markovalexander4049 6 лет назад
Твой канал-это самородок в каналах про web-разработку.Очень нравятся твои уроки, с радостью их смотрю. Продолжай в том же духе!
@SuprunAlexey
@SuprunAlexey 6 лет назад
Спасибо огромное! Очень порадовали!
@warface8094
@warface8094 6 лет назад
Здравствуйте! У меня где сайд бар все прилепились друг к другу а у вас красиво, все делал за вами все ровно не получается что делать?
@mikhailgrinchenko5541
@mikhailgrinchenko5541 4 года назад
Спасибо большое! Мне нравиться когда ты проговариваешь занфчения и свойства. Запомнить с первого раза очень сложно, А ты напоминаешь. Спасибо!
@KuKu_RuKu88
@KuKu_RuKu88 4 года назад
Спасибо за урок, интересно выходит
@dimanazdratenko
@dimanazdratenko 6 лет назад
ты называешь классы с двойным подчеркиванием. Типа sidebar__item. Это по БЕМ? Можешь по бем сделать видео и желательно по структуре проекта, как что где распологается и хранится что бы было максимально удобно?
@catrey1
@catrey1 7 лет назад
Тег предназначен для основного содержимого документа. Для сайдбара нужен .
@dmytromahas9207
@dmytromahas9207 5 лет назад
он не использовал тег main для сайдбара, для него он использовал просто див с классом сайдбар хотя и мог тегом aside, а тег main у него просто охватывает сайдбар как содержимое сайта и + в будущем каким то контентом
@PacoOfficial
@PacoOfficial 7 лет назад
нужно было создать)
@muhtarnaymankhanov8699
@muhtarnaymankhanov8699 7 лет назад
Привет! с удовольствием смотрю виде уроки, хорошо обьясняешь и показываешь. Потом можешь еще один видео урок, с psd макета верстать, с помощью флексбоксами?
@SuprunAlexey
@SuprunAlexey 7 лет назад
Добрый день! Спасибо! Скинете psd без авторских прав?=)
@webhero42
@webhero42 7 лет назад
В сети их навалом бесплатных. Те же html academy их в рассылке скидывают)
@saint-marketolog
@saint-marketolog 7 лет назад
Отличное видео! Может лучше в следующем уроке адаптивку с FlexBox медиа запросами?
@SuprunAlexey
@SuprunAlexey 7 лет назад
Спасибо! Наверное этот будет без адаптивки, а по интереснее)
@rilt3112
@rilt3112 4 года назад
А если полоска не появляется (border-right) что делать?
@flashgordan5250
@flashgordan5250 6 лет назад
А про семантику что нибудь слышали?)
@LuckyStilet1
@LuckyStilet1 6 лет назад
Сэкшэн - это разве по верстке?)
@catrey1
@catrey1 7 лет назад
Лучше в следующем видео заадаптивь меню для мобильных устройств.
@SuprunAlexey
@SuprunAlexey 7 лет назад
Думаю тут без адаптива обойтись, и так будет интересно) А может и будет адаптив, пока думаю над этим)
@user-wl5jq2mx7d
@user-wl5jq2mx7d 5 лет назад
как растянуть сайтбар на всю высоту страницы, чтобы секции прилипали по разные стороны?
@dmytromahas9207
@dmytromahas9207 5 лет назад
в данном примере предлагаю воспользоваться калькулятором, тоесть задать высоту 100vh и отнять шапку, пример: height: calc(100vh - 83px); ну и свойство justify-content: space-between; для сайдбара прописать
@alexeyfinohenov1051
@alexeyfinohenov1051 6 лет назад
Почему у Вас два последних пункта в сайдбаре уехали ниже?
@SuprunAlexey
@SuprunAlexey 6 лет назад
+Alexey Finohenov мы же вроде так сделали
@dmdk8301
@dmdk8301 5 лет назад
@@SuprunAlexey в видео об этом ни слова
@dmytromahas9207
@dmytromahas9207 5 лет назад
@@dmdk8301 свойство justify-content: space-between; позволило двом .sidebar__section которых мы создали стать по краям нашего основного сайдбар блока. И прежде чем проходить практику по флексам ознакомтесь с теорией, дабы не задавать такие глупые вопросы.
@PacoOfficial
@PacoOfficial 7 лет назад
Дизайн похож на один немного известный сайтик )) пашка дуров так же делал
@bartoszpierdolny6978
@bartoszpierdolny6978 7 лет назад
Он не говорил, что ему не нравится, это был сарказм...
@Alex-he2gn
@Alex-he2gn 7 лет назад
можно было бы что-то заверстать внутри и под конец сделать адаптивочку уже
@SuprunAlexey
@SuprunAlexey 7 лет назад
Тут наверное без адаптивочки, будет и так интересно. Просто одно видео только на адаптивку уйдет)
@Itsme-tj5ew
@Itsme-tj5ew 4 года назад
На старый ВК похоже получилось)))
@SuprunAlexey
@SuprunAlexey 4 года назад
Возможно и так :)
@TheKathty
@TheKathty 6 лет назад
Для чего каждую ссылку в div оборачивать?
@ShelestMaks
@ShelestMaks 5 лет назад
чтобы был как отдельный блок к которому ты сможешь применить разные стили, например: border-radius
@dmytromahas9207
@dmytromahas9207 5 лет назад
@@ShelestMaks ты сможешь и без дива применять разные стили для кнопки если задашь ей display: block;
Далее
6 Advanced Flexbox Features You Probably Don’t Know
14:54
Simple Navbar With Flexbox | Navbar CSS Tutorial
5:44
Просмотров 404 тыс.