Уроки Flexbox Практика - Делаем header и навигацию сайта
HTML-код
- Опубликовано: 23 июн 2017
- Мы продолжаем уроки 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
Видео про заработок на RUclips - goo.gl/VxdirI
Создаем интернет магазин на PrestaShop - goo.gl/jop7M4
Уроки jQuery - goo.gl/tjAs41
========================================================
ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - goo.gl/6mO5GL
========================================================
Ваше кайф, в 3 часа ночи смотрю тебя и делаю сайт свой первый)
Ваше видео все ещё живёт и помогает людям!!
Спасибо за ваше видео, было очень позновательно🙂
Здравствуйте! Спасибо огромное! Сделайте пожалуйста несколько видео верстки header-оф, разной сложности, с адаптивом? Просто, в основном у всех верстка целых лендингов по 2 часа и для новичка многое остается не усвоенным, не понятным и утомительным. А у вас здесь очень внятно и лаконично получилось.
2 часа шапку не мог сделать на flexbox. Автору спасибо
Лайк поставили? =)
Тоже не получалось. Тупил почему не получается, в итоге понял что делал глупую ошибку из раза в раз
@@SuprunAlexey конечно)
Очень помогают твои уроки. особенно лайк за норм дикцию. хоть слушать приятно
спасибо очень сильно помог, успехов тебе
Отличные уроки. Прояснил для себя некоторые вещи. Спасибо!
Спасибо что смотрите!
Спасибо, что напомнили про flexbox! Очень помогло при создании сайта!!!
За 8 мать его минут шикарное меню леко и доступно, чел, ты шикарен
давно заметил, что показатель хорошего урока по разработке слова автора в начале ролика - "а сейчас займёмся практикой". , . респект за такие уроки!👌😎😎😎👍
Спасибо большое!!!
да, легко и зашло, спасибо
Да видно ты спец в своем деле, доходчиво объясняешь, но не мог бы ты поставить livereload и разделить редактор с браузером пополам для наглядности изменений в каждом свойстве. Так было бы еще быстрей для компиляции инфы, учащемуся мозгу)))
Спасибо за идею, обязательно воспользуюсь!
Спасибо очень интересные уроки! )
Спасибо дружище!
Спасибо огромное! Ты мне очень помог)
Вопрос, а можно ли как-то сделать hover bg на весь размер меню по высоте без подбора по пикселям?
Спасибо большое
Спасибо
Лайк за видео! Только не могли вы показать, как делается адаптивное меню?
спасибо
как быть если картинки разной ширины/высоты?
Спасибо, действительно быстро
Рад помочь
Очень хорошо! Только макета не хватает под видео, как примера
Покажите, пожалуйста адаптивный вариант!
Нестыковочка, класс написал неправильно а курсор сработал, и еще вопрос как вторая секция окозалась в правом углу?
Нет вопросов по теории и применению флексов в целом, но структура документа - это боль.
А что не так? Прост я не шарю, только учусь.
@@KRLL9586 Много дивов в докуменациях следует использовать теги HTML 5
thanks
Посмотрите теперь практику верстки сайта. Выбирайте любой плейлист на канале
почему автор ссылки влаживает в div а не в список?
Зачем ссылки в див ложить если нав их поставит горизонтально и останется только их расставить как надо?
Здраствуйте , у меня слово новости и другие слова в аш рефе не выводяться, подскажите пожайлуста в чём причина.
Спасибо за урок, с меня лайк. А можно адаптировать этот же дизайн под телефоны с помощью флексбоксов?
А почему нельзя?
Еще срочный вопрос - я заметил в этом видео навигацию ты сделал дивами с ссылками, а в другом ролике ты использовал тег nav с ссылками внутри, для флексбоксов неприемлемо делать навигацию обычным списком ul li ?
Делай как тебе удобно!
Ну просто поинтересовался как семантически будет правильно. Мне понравился вариант в этом видео, не знал что можно делать как-то иначе чем обычным списком с inline-block
Что-то я не понял каким образом у тебя первая секция прибилась к одному углу, а вторая к противоположному? Ведь space-between равномерно распределяет пространство между элементами
То есть, я так понимаю, если элемента ДВА, то он раскидает их по углам, а если ТРИ, то второй элемент будет посередине?
Примерно так
Здравствуйте! Спасибо вам огромное, ваш видео урок очень ясные и понятные, я учусь писать сайт с нуля. Ваши уроки с Flexbox, очень крутые!! Вас даже охотно пересматривать вас и выучить как сделать шапку и не только с flexbox. То что мне не хватало для создания сайтов. Я даже подписался на вас!! Вы очень классные
На данный момент информация устарела, сейчас применяются современные теги header, nav, а также ul список для элементов, вместо большого кол-ва div'ов.
написал стили для ссылки и хедера и текст пропал
красава
header__section является блоком, а не элементом, то есть должен писаться через дефис или я что-то не понимаю?
это класс
Почему пункты меню не списком?
Ребята, я написал ". header__section {
display: fixed;
align-items: center ;
}
Не получается (
Первые 3 слова выравневались как надо, а вот " бизнес, настройки и войти" тупо по середине собрались. Не знаю что делать. Помогите пожалуйста кто сможет
Как я понял тут ошибка в display. У вас display: fixed , а нужно display: flex.
Как сделать сайтадаптивном. Давай снимай видео для адаптивного сайта
Спасибо, интересные уроки, только не понял почему лого не обернул в ссылку? и элементы блоками а не списком
Это пример)
понял, уроки отличные подача материала качественная продолжай!
какая разница блоками или списком ?
@@MrRyzubex семантическая
Подскажите почему в этом варианте если вставить ссылку вместо # она не открывается?
в хэштег нужно прописать найди чтобы при использовании он нормально работал например хэштег 1 или 2 по твоему выбору:))
А почему не через ul и li? Так много классов, немного неудобно на это смотреть, и правильней ли это за списки?
За ответ спасибо?
никто уже списками не делает, прошлый век
@@MrRyzubex но причины в этом нет, то есть вчера еще было нормально а сегодня прошлый век, а главное причины реально как таковой нет
@@wockywocky3109 вообще это неправильно семантику все таки нужно соблюдаться не говнокод писать
Как сделать бэкграунд колор при ховере на всю высоту хедера, а не в рамках ссылки???
расширить "рамки" ссылки "на всю высоту хедера"?
Vladimir Shokhin именно)))
"WDB" стоило бы оставить без выделения
как растянуть сайтбар на 100% высоты страницы, чтобы секции располагались в начале и в конце страницы
?
знаю ,что уже вряд ли актуально ,но width ? xd
Тебе придётся добавить в css
Без точки
body {
margin: 0;
}
Что вы думаете о меню из таблицы?))()*:_)?
Не делает синий цвет. И текст на месте остался
5:11 5:25
Это что
Спасибо большое
Сделай адаптивным это все.
Ок
ПОЧЕМУ , ПОЧЕМУУУУ, HeaderbItton А НЕ bUtton
"я хочу сделать это", "я хочу сделать то"... а где урок?
все разобрался
Это главное