Уроки Flexbox Практика - Делаем header и навигацию сайта

  Переглядів 88,130

Web Developer Blog

Web Developer Blog

6 років тому

Мы продолжаем уроки flexbox практика и в этом уроке flexbox css я покажу как сделать header и навигацию для сайта. Обратите внимание насколько быстро и легко получится сделать данный вариант навигации сайта да и вообще как сделать сайт с применение 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
Видео про заработок на UKposts - goo.gl/VxdirI
Создаем интернет магазин на PrestaShop - goo.gl/jop7M4
Уроки jQuery - goo.gl/tjAs41
========================================================
ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - goo.gl/6mO5GL
========================================================

КОМЕНТАРІ: 89
@zeleniyelf9909
@zeleniyelf9909 5 років тому
Ваше кайф, в 3 часа ночи смотрю тебя и делаю сайт свой первый)
@volodymyr6296
@volodymyr6296 6 років тому
2 часа шапку не мог сделать на flexbox. Автору спасибо
@SuprunAlexey
@SuprunAlexey 6 років тому
Лайк поставили? =)
@user-up1zb8lx8x
@user-up1zb8lx8x 2 роки тому
Тоже не получалось. Тупил почему не получается, в итоге понял что делал глупую ошибку из раза в раз
@user-up1zb8lx8x
@user-up1zb8lx8x 2 роки тому
@@SuprunAlexey конечно)
@user-ek7vf7iu4v
@user-ek7vf7iu4v Рік тому
Ваше видео все ещё живёт и помогает людям!! Спасибо за ваше видео, было очень позновательно🙂
@happylife2345
@happylife2345 3 роки тому
Здравствуйте! Спасибо огромное! Сделайте пожалуйста несколько видео верстки header-оф, разной сложности, с адаптивом? Просто, в основном у всех верстка целых лендингов по 2 часа и для новичка многое остается не усвоенным, не понятным и утомительным. А у вас здесь очень внятно и лаконично получилось.
@timurkurmanov9568
@timurkurmanov9568 6 років тому
Отличные уроки. Прояснил для себя некоторые вещи. Спасибо!
@SuprunAlexey
@SuprunAlexey 6 років тому
Спасибо что смотрите!
@Woyax
@Woyax 6 років тому
Очень помогают твои уроки. особенно лайк за норм дикцию. хоть слушать приятно
@ifrqme-5493
@ifrqme-5493 4 роки тому
спасибо очень сильно помог, успехов тебе
@yarrigmain
@yarrigmain 5 місяців тому
Спасибо, что напомнили про flexbox! Очень помогло при создании сайта!!!
@rmgear6845
@rmgear6845 2 роки тому
За 8 мать его минут шикарное меню леко и доступно, чел, ты шикарен
@jamescartman9314
@jamescartman9314 6 років тому
Да видно ты спец в своем деле, доходчиво объясняешь, но не мог бы ты поставить livereload и разделить редактор с браузером пополам для наглядности изменений в каждом свойстве. Так было бы еще быстрей для компиляции инфы, учащемуся мозгу)))
@SuprunAlexey
@SuprunAlexey 6 років тому
Спасибо за идею, обязательно воспользуюсь!
@sqite1733
@sqite1733 3 роки тому
Вопрос, а можно ли как-то сделать hover bg на весь размер меню по высоте без подбора по пикселям?
@orangedragonthebestraper
@orangedragonthebestraper Рік тому
давно заметил, что показатель хорошего урока по разработке слова автора в начале ролика - "а сейчас займёмся практикой". , . респект за такие уроки!👌😎😎😎👍
@mrtwo8658
@mrtwo8658 6 років тому
Спасибо очень интересные уроки! )
@SuprunAlexey
@SuprunAlexey 6 років тому
Спасибо дружище!
@user-lx5vv3uu8u
@user-lx5vv3uu8u 2 роки тому
Спасибо большое!!!
@boleole8702
@boleole8702 3 роки тому
да, легко и зашло, спасибо
@malykhan9743
@malykhan9743 2 роки тому
Спасибо огромное! Ты мне очень помог)
@user-hw9hi3sm4h
@user-hw9hi3sm4h 3 роки тому
Спасибо
@user-dd3lb9dh2x
@user-dd3lb9dh2x 2 роки тому
Спасибо большое
@user-bc7eg4ro3j
@user-bc7eg4ro3j 2 роки тому
спасибо
@khalilmutallibov
@khalilmutallibov 3 роки тому
Лайк за видео! Только не могли вы показать, как делается адаптивное меню?
@KuKu_RuKu88
@KuKu_RuKu88 4 роки тому
Спасибо, действительно быстро
@SuprunAlexey
@SuprunAlexey 4 роки тому
Рад помочь
@renegvd
@renegvd 6 років тому
как быть если картинки разной ширины/высоты?
@user-kz3pn7ru8o
@user-kz3pn7ru8o 6 років тому
Нет вопросов по теории и применению флексов в целом, но структура документа - это боль.
@KRLL9586
@KRLL9586 6 років тому
А что не так? Прост я не шарю, только учусь.
@user-qg6vm4np8n
@user-qg6vm4np8n 5 років тому
@@KRLL9586 Много дивов в докуменациях следует использовать теги HTML 5
@user-cp2lz1hh2m
@user-cp2lz1hh2m 4 роки тому
thanks
@SuprunAlexey
@SuprunAlexey 4 роки тому
Посмотрите теперь практику верстки сайта. Выбирайте любой плейлист на канале
@kasskasse6604
@kasskasse6604 3 роки тому
красава
@webhero42
@webhero42 6 років тому
Еще срочный вопрос - я заметил в этом видео навигацию ты сделал дивами с ссылками, а в другом ролике ты использовал тег nav с ссылками внутри, для флексбоксов неприемлемо делать навигацию обычным списком ul li ?
@SuprunAlexey
@SuprunAlexey 6 років тому
Делай как тебе удобно!
@webhero42
@webhero42 6 років тому
Ну просто поинтересовался как семантически будет правильно. Мне понравился вариант в этом видео, не знал что можно делать как-то иначе чем обычным списком с inline-block
@wockywocky3109
@wockywocky3109 3 роки тому
А почему не через ul и li? Так много классов, немного неудобно на это смотреть, и правильней ли это за списки? За ответ спасибо?
@MrRyzubex
@MrRyzubex 3 роки тому
никто уже списками не делает, прошлый век
@wockywocky3109
@wockywocky3109 3 роки тому
@@MrRyzubex но причины в этом нет, то есть вчера еще было нормально а сегодня прошлый век, а главное причины реально как таковой нет
@F1_Shorts07
@F1_Shorts07 2 роки тому
@@wockywocky3109 вообще это неправильно семантику все таки нужно соблюдаться не говнокод писать
@konstantinromanov9555
@konstantinromanov9555 4 роки тому
Покажите, пожалуйста адаптивный вариант!
@dre._
@dre._ Рік тому
почему автор ссылки влаживает в div а не в список?
@probaur86
@probaur86 Рік тому
Очень хорошо! Только макета не хватает под видео, как примера
@ezrocky1028
@ezrocky1028 6 років тому
Спасибо за урок, с меня лайк. А можно адаптировать этот же дизайн под телефоны с помощью флексбоксов?
@SuprunAlexey
@SuprunAlexey 6 років тому
А почему нельзя?
@webhero42
@webhero42 6 років тому
Что-то я не понял каким образом у тебя первая секция прибилась к одному углу, а вторая к противоположному? Ведь space-between равномерно распределяет пространство между элементами То есть, я так понимаю, если элемента ДВА, то он раскидает их по углам, а если ТРИ, то второй элемент будет посередине?
@SuprunAlexey
@SuprunAlexey 6 років тому
Примерно так
@user-ei2st1rj7o
@user-ei2st1rj7o 6 років тому
header__section является блоком, а не элементом, то есть должен писаться через дефис или я что-то не понимаю?
@F1_Shorts07
@F1_Shorts07 2 роки тому
это класс
@Rivixal
@Rivixal 2 роки тому
Здравствуйте! Спасибо вам огромное, ваш видео урок очень ясные и понятные, я учусь писать сайт с нуля. Ваши уроки с Flexbox, очень крутые!! Вас даже охотно пересматривать вас и выучить как сделать шапку и не только с flexbox. То что мне не хватало для создания сайтов. Я даже подписался на вас!! Вы очень классные
@realjam7578
@realjam7578 2 роки тому
На данный момент информация устарела, сейчас применяются современные теги header, nav, а также ul список для элементов, вместо большого кол-ва div'ов.
@user-vs5bn1eh1i
@user-vs5bn1eh1i Рік тому
Здраствуйте , у меня слово новости и другие слова в аш рефе не выводяться, подскажите пожайлуста в чём причина.
@goldwynmayer5709
@goldwynmayer5709 Рік тому
Нестыковочка, класс написал неправильно а курсор сработал, и еще вопрос как вторая секция окозалась в правом углу?
@artemzhuravlev7334
@artemzhuravlev7334 6 років тому
Спасибо, интересные уроки, только не понял почему лого не обернул в ссылку? и элементы блоками а не списком
@SuprunAlexey
@SuprunAlexey 6 років тому
Это пример)
@artemzhuravlev7334
@artemzhuravlev7334 6 років тому
понял, уроки отличные подача материала качественная продолжай!
@MrRyzubex
@MrRyzubex 3 роки тому
какая разница блоками или списком ?
@artemzhuravlev7334
@artemzhuravlev7334 3 роки тому
@@MrRyzubex семантическая
@qwqw6346
@qwqw6346 4 роки тому
Зачем ссылки в див ложить если нав их поставит горизонтально и останется только их расставить как надо?
@user-eb7lr9mo2o
@user-eb7lr9mo2o 6 років тому
написал стили для ссылки и хедера и текст пропал
@onwizard
@onwizard 3 роки тому
Подскажите почему в этом варианте если вставить ссылку вместо # она не открывается?
@F1_Shorts07
@F1_Shorts07 2 роки тому
в хэштег нужно прописать найди чтобы при использовании он нормально работал например хэштег 1 или 2 по твоему выбору:))
@DieMoorsoldaten
@DieMoorsoldaten 3 роки тому
Почему пункты меню не списком?
@azimjonazimov8083
@azimjonazimov8083 4 роки тому
Ребята, я написал ". header__section { display: fixed; align-items: center ; } Не получается ( Первые 3 слова выравневались как надо, а вот " бизнес, настройки и войти" тупо по середине собрались. Не знаю что делать. Помогите пожалуйста кто сможет
@user-hg7pi5lr6j
@user-hg7pi5lr6j 4 роки тому
Как я понял тут ошибка в display. У вас display: fixed , а нужно display: flex.
@toooisss7321
@toooisss7321 4 роки тому
Как сделать сайтадаптивном. Давай снимай видео для адаптивного сайта
@user-hw3um4le3b
@user-hw3um4le3b 6 років тому
Как сделать бэкграунд колор при ховере на всю высоту хедера, а не в рамках ссылки???
@vladimirshokhin2948
@vladimirshokhin2948 6 років тому
расширить "рамки" ссылки "на всю высоту хедера"?
@user-hw3um4le3b
@user-hw3um4le3b 6 років тому
Vladimir Shokhin именно)))
@maltamagistro
@maltamagistro Рік тому
Что вы думаете о меню из таблицы?))()*:_)?
@user-wl5jq2mx7d
@user-wl5jq2mx7d 5 років тому
как растянуть сайтбар на 100% высоты страницы, чтобы секции располагались в начале и в конце страницы ?
@peterhryhoruk
@peterhryhoruk 5 років тому
знаю ,что уже вряд ли актуально ,но width ? xd
@Rivixal
@Rivixal 2 роки тому
Тебе придётся добавить в css Без точки body { margin: 0; }
@antonfilinkov
@antonfilinkov 3 роки тому
5:11 5:25
@SuprunAlexey
@SuprunAlexey 3 роки тому
Это что
@user-qi7th9vk2k
@user-qi7th9vk2k 2 роки тому
Спасибо большое
@user-wj8kh2st5c
@user-wj8kh2st5c 2 роки тому
"WDB" стоило бы оставить без выделения
@vizitgame5582
@vizitgame5582 4 роки тому
Сделай адаптивным это все.
@SuprunAlexey
@SuprunAlexey 4 роки тому
Ок
@reys8949
@reys8949 2 роки тому
Не делает синий цвет. И текст на месте остался
@twicetwo5990
@twicetwo5990 Рік тому
ПОЧЕМУ , ПОЧЕМУУУУ, HeaderbItton А НЕ bUtton
@user-eb7lr9mo2o
@user-eb7lr9mo2o 6 років тому
все разобрался
@SuprunAlexey
@SuprunAlexey 6 років тому
Это главное
@MrRyzubex
@MrRyzubex 4 роки тому
"я хочу сделать это", "я хочу сделать то"... а где урок?
I PUT MY ARMOR ON (Creeper) (PG Version)
00:19
Sam Green
Переглядів 5 млн
Responsive web design in 37 minutes + layout. You don’t need Bootstrap!
36:44
Фрілансер по життю
Переглядів 1 млн
May Release Notes
1:33
ArchFormation
Переглядів 38
FLEXBOX начало. Флексбокс верстка.
44:38
От 0 до 1
Переглядів 45 тис.
CSS функция clamp(). Адаптивный размер текста. Прощайте медиазапросы
12:04
ВебКадеми | Юрий Ключевский
Переглядів 10 тис.