1) ИМХО, более правильный вариант разметки с точки зрения html5 стандарта + seo: - создаем не div-ы с классами .header, .footer, а используем теги, заложенные в html5: , , а уже им, при необходимости можно дописывать какие-то классы, если мы на разных страницах хотим задать им разные свойства, например, цвет фона шапки на главной странице должен отличаться от цвета фона шапки на внутренних страницах, тогда уже стандартному тегу можно добавлять классы (.header_inner, .header_main). - все основное содержимое страницы опять же помещается не в какой-то див с рандомным названием, а в тег . Если нужно разбить на 2 части, то внутри него используются теги (для основного контента) + (боковая колонка). 2) Вместо float: left для .sidebar + .content, а потом костыля с clearfix, можно просто прописать для .container: font-size: 0; 3) Чтобы задавать отступ для .siderbar, не создавая кучу оберток, можно от его ширины отнять значение отступа: width: calc(30% - 10px); margin-left: 10px; 4) Плохая практика плодить названия блоков с цифрами, в таком коде легко запутаться самому и заставить запариться другого человека, если он потом будет работать с вашим кодом. 5) В стилях идет постоянное дублирование 1 и тех же свойств, что мешает, допустим, блоки .content_1 и .content_2 перечислить через запятую, чтобы задать им ширину в 50% и левый флоат? Либо задать этим блокам 1 общий класс .content, на него повесить общие свойства, а при необходимости добавить классы .content_left и .content_right, чтобы на них навешивать уже отличающиеся свойства? Я понимаю, что автор может быть только в уроке так пишет, чтобы не затягивать видео, но если это смотрит новичок, то он будет делать точно также, даже не зная о том, что совершает ошибку.
Я тот самый новичок, но который заподозрил, что Хауди усложняет =) И хочу сказать вам большое спасибо за ваши замечания и буду рада если поделитесь, вдруг вам известен какой-нибудь видео-блоггер вроде Хауди кто бы так же славно описывал ситуации, но на более современном уровне: максимально компактно, максимально красиво. Либо ссылка на хороший платный курс который, возможно, вы прошли/написали сами и можете порекомендовать (html5, css, javascript, что угодно).
"2) Вместо float: left для .sidebar + .content, а потом костыля с clearfix, можно просто прописать для .container: font-size: 0;" вот этот пункт не совсем понял. может кто объяснить?
По умолчанию между блоками создается пробел, то есть ты создаешь пробел когда в текстовом редакторе пишешь каждый div с новой строки, а font-size 0 убирает эти пробелы. Например создай 3 div блока с одинаковым классом (здесь создается пробел) (здесь создается пробел) (здесь создается пробел) задай им ширину и высоту и бэкграунд чтоб ты их видел size { background: #000; height: 300px; width: 300px; display: inline-block; } Между блоками появятся пробелы. Чтоб их убрать в класс wrapper пишут font-size: 0; .wrapper { font-size: 0; } Можно еще написать код в одну строчку так и пробелы пропадут(но это вроде плохо):
1) Не нужно смотреть устаревшую информацию о поддержке на htmlbook, это нужно делать на can i use, 97.87% браузеров поддерживают тег , это базовый тег html5 стандарта, точно такой же, как и . 2) Не нужно пользоваться float вообще, когда почти все браузеры уже поддерживают flexbox. Или используйте сетку хотя бы на inline-block-ах. 3) По поводу id vs class, гугл в помощь.
Хоть урок и устаревший, но все равно единственный нормальный, который я нашел. Остальные чето мусолят на час, иногда сами не понимают темы. Хотя то, что урок устаревший, в какой-то степени даже плюс, т.к. надо самому брать куски кода, улучшать его, экспериментировать, и т.д., а это практика. Это хорошо))
Еще один совет, чтобы блоки имени различие по цвету через один (а не как у тебя: синие), для большей наглядности. Хотя и не для новичков, но может, где-то освятишь...смотри, ставим классы обычные и добавляем к ним, например, .wire класс и ему свойства .wire {background:gray;height:300px} .wire:nth-child(even) {background:lightgray;height:300px} Думаю, понял в чем трюк... Блогов не веду, поэтому решил поделиться, раз уж к месту..просто очень наглядно, когда каждый следующий див окрашен иначе, так легко составлять разметку. Спасибо за уроки! Все супер!
Спасибо за урок. Немного отличается от того, что я уже насмотрелся, оно и понятно. 3 года прошло, причем почти ровно. Сейчас вижу, что многие на флексах верстают. Но данное видео - это идеальный вариант начать свою практику по верстке. Немного замудрено на мой взгляд с кучей вложенных дивов, но лайк 100%! Буду пересматривать и закреплю свои знания по флексам и флоатам. Попробую и так, и так. Спасибо.
Возможно, это поможет тем, у кого не работает clearfix. Для этого, вы должны добавить в футер одно свойство(В CSS файле), это свойство clear:both; После этого свойства, вы должны прописать в сайдбаре margin-bottom: Npx;(где N- любое число) Только что мы убрали обтекаемость у футера, вызванную свойством флоат в сайдбаре. Вот и всё, что нужно было сделать(я провозился с этим~час, мда...)
Прикольный видео. Но я думаю что проблема новичков состоит в том что никто не знает про стоймость сайтах. Точнее мы как новички не знаем сколько нужно брать за саит к примеру : 1) landing page + ( страница админа со всеми подписчиками) . 2) За блог (не буду ставить ссылки как пример чтоб не воспринимать как рекламу) который создаётся с помощью ( PHP , MYSQL, HTML, CSS/CSS3 , JS, JQUERY в том числе включает lightbox , gallery + админ панель который имеет обычный CRUD [ Create, Read, Update,Delete posts ] ). Заранее приношу свои извинения если где нибудь писал неграмотно с уважение Дмитрий.
Плохо ищете значит. Смотрите у WebDesign Master по плейлистам. И еще у него урок есть, как провильно искать информацию нужную. думаю вам будет полезно.
спасибо за урок потому что я тоже задался тем же вопросом как склеить разные части в одно целое.Найдя ваше видео я подумал наконец то появилось видео простое о сложном!!!Спасибо за потраченое время на нас!!!
Вооот! Вооот! Где ж ты раньше был с этим контеном))) Я неделю рыл зарубежные сайты и форумы и переводил их, в итоге сам допер как и что сделать, да и clrfx применял по-другому. В итоге сделал всё через одно место, но оно работало. Жаль ты это раньше не выпустил)))
аналогично коллега, изучил все основы, сел верстать структуру, вроде бы все логично, но то одно сползало, то второе.. я делал через контейнеры, но не так глубоко, как у автора видео.. Спасибо
это есть везде, не знаю что там можно было рыть ... в любых уроках. Мало того, не обязательно применять clearfix, можно ведь просто задать overflow: hidden
Автору спасибо! Всё доступно и понятно. Мне пригодилось, а по поводу HTML5 и CSS3, то что писали ниже, предлагаю автору записать отдельный ролик, т.к. мало кто может так доступно и подробно объяснять!!! ;-)
Здравствуйте. Всё делал в точности по Вашему видео. Всё получилось кроме "сайдбара". Во первых не становится с права от "контента". Если меняю float left на right, становится справа как и должен но внизу под "контентом". Пробовал поднять командой "margin-top", не получается. Значения брал положительные и отрицательные. Стоит как приклеенный. Помогите пожалуйста найти ошибку! Хотя код пишу прямо в Sublime Text3 с Вашего видео.
Очень крутой урок, благодарочка!) что насчет полного курса по верстке сайта с нуля с применением gulp или grunt, на бутстрапе (подобные ролики уже есть, но ты круто объясняешь, хочется услышать и увидеть в твоем исполнении). Хотел еще узнать каким стеком ты владеешь? и чем более детально?
Спасибо за видео! А все-таки сложный и не понятный этот сlearfix! Я это проще решал...под блоками с float ставил пустой div и его классу свойство clear:both...
2k18 . в класс контейнер поместите контент и сайдбар ( Контент Сайдбар )после чего в css файле пишем: .container{display: flex} . все. не нужно ничего другого и float в том числе. просто задайте бэкграунд и высоту, далее смотрим :)
чтобы футер встал на место достаточно задать ему свойство: clear: both; Зачем копировать кучу строк кода и создавать лишние классы в стилях, а в разметке лишние блоки лепить, когда все решается одним свойством?
Очень доступно рассказал. Спасибо большое. Ребят, хотел поинтересоваться у кого-нибудь. Сейчас стоит заменять те дивы на теги с html5: , , и прочее? Как предпочтительней и как сейчас больше делают? Спасибо за ответ
Где-то давненько видел сайт-конструктор всех этих структур - задаешь ему все параметры, а на выходе получаешь файлы html и css, оформленные по всем стандартам. И не надо голову ломать. Хотя думаю, что у спецов и так под рукой имеются шаблоны под все варианты структуры сайта, чтобы на этом время не терять.
Всегда с интересом смотрел твои уроки! Но могу высказать замечание ты пытаешься изложить бывает сложные вещи простыми решениями, но это бывает только усложняет процесс. Кто более менее в теми тот поймет а вот у начинающих останутся пробелы в понимании. И это в большей степени плохо ))), чем хорошо. Про clearfix нужно было по подробней написать ведь это суть всего и лучше было разбить видео на 3 часть по 10 - 15 -15 мин. Тогда получилось и компактно и материал изложенный лучше усвоился. Сохранилось и динамика и содержательность материала. Ну это мое мнения повторяюсь всегда с интересом смотрю твой канал !!!
А почему padding, а не Margin? Просто по логике ведь лучше именно внешний отступ от внешних границ, а не вминание внутреннего содержания блока паддингом? Или это как-то завязано на box-sizing?
Пример по уроку получился, но я понимаю, что сам без видео с примером, какие и где теги ставить, не разберусь. Сколько нужно времени и практики, что б научиться, без подсказок верстать простые такие "макеты" сайтов?
Извините. подскажите новичку, вот когда вы набирали # header+#content#sidebar+# footer и саблайм преобразовал это, - это какой-то специальный плагин? И как это сделать?
как раз попался такой макет с тьмой блоков и внутри них не хотели писаться margin и padding, второй день на дизморали даже не хотел подходить к вёртске а тут более-менее объясняется эта дичь и понятно что пробовать. спасибо) ещё недавно приуныл из-за новых тегов в html5 аля nav menu footer header и прочих, типо через них лучше писать, роботы быстрее находят и бла бла. а тут только-только стандартные выучил почти) если они актуальны, то можешь с ними в уроках верстать? рано или поздно они вытеснят старые сайты с div'ами из сети и хочется поспособствовать этому) Ps как жеж легко и быстро у него выходит... ничо, скоро и мы так сможем;)
напишу тут, что б там полотна небыло) 1) расскажи как нить про css reset, постоянно ли его подключать, что он может поменять в коде и т.д. 2) расскажи про схлопывающиеся отступы, вот это новичкам думаю будет полезно. а то очень большие шансы столкнутся с этой жопой на первых шагах. и методы борьбы) дада, всё гуглится, но вдруг кончатся темы для видео или захочешь рассказать про это. шота психанул с писаниной, сорь))
я пока только изучаю html & css. Но почему в данном видео процентами не выставить разделение между блоками. Допустим из 100% 1 блок 79,9% 2 блок 20%. разделение между блоками будет 0.1% без сноса крайнего блока ниже. или я что то не понимаю и в дальнейшем будут проблемы?
HELLO! у меня есть вопрос: как сделать висячий header или как там называется.. ну например как у сайта: vaadin.com. когда вниз прокрутишь наверху header остается на месте.. заранее спасибо!
Хауди, ты работаешь на Убунту. Очень интересует набор софта, который ты используешь для верстки именно под Убунту, в том числе мелкие полезные плюшки типа Colour Picker и т.д.
Желательно конечно использовать , и т.д., но у них отсутствует поддержка IE < 9, она там обеспечивается полифилами. Всё-таки Вы сами тоже должны что-то узнавать самостоятельно.
Смотри, я новичок может и не знаю истину, но бывают такие случаи, что у тебя есть тег div, и тебе нужно создать ещё один, ты создал и начинаешь в css писать ему стиль, а как css поймёт к какому диву ты обращаешься, ведь их два? Вот как мне кажется тут это подойдёт, приписать айди или класс нашему диву. Но повторяюсь я ещё новичок, если что то не так, не бейте)
Я не могу понять, как у тебя получается написал в редакторе изменение , а в браузере все сразу поменялось , не нажимая обновить, там получается автообновление какое-то стоит , подскажи пожалуйста ?
Что делать,если после того,как я даю цвет id header,а потом даю другой цвет id content,цвет content просто становится поверх предыдущего,а не под ним,паддинги и марджины не помогают.
хотелось бы увидеть видео как витаскиват из готовова шаблона меню или вид новостей с html и css кодом и видео про движок dle как витаскиват нужное нам и ставет в другой шаблон
для новичков пойдет, но за такую верстку сеошники яйцы оторвут. особенно зарубежные сеошники. ну и танцы с футером не нужны, в комментариях уже писали более простые решения. собственно в структуре разобраться несложно, берешь шаблоны wordpress/joomla/dle и т.д. и смотришь как они сделаны.
1) ИМХО, более правильный вариант разметки с точки зрения html5 стандарта + seo:
- создаем не div-ы с классами .header, .footer, а используем теги, заложенные в html5: , , а уже им, при необходимости можно дописывать какие-то классы, если мы на разных страницах хотим задать им разные свойства, например, цвет фона шапки на главной странице должен отличаться от цвета фона шапки на внутренних страницах, тогда уже стандартному тегу можно добавлять классы (.header_inner, .header_main).
- все основное содержимое страницы опять же помещается не в какой-то див с рандомным названием, а в тег . Если нужно разбить на 2 части, то внутри него используются теги (для основного контента) + (боковая колонка).
2) Вместо float: left для .sidebar + .content, а потом костыля с clearfix, можно просто прописать для .container: font-size: 0;
3) Чтобы задавать отступ для .siderbar, не создавая кучу оберток, можно от его ширины отнять значение отступа:
width: calc(30% - 10px); margin-left: 10px;
4) Плохая практика плодить названия блоков с цифрами, в таком коде легко запутаться самому и заставить запариться другого человека, если он потом будет работать с вашим кодом.
5) В стилях идет постоянное дублирование 1 и тех же свойств, что мешает, допустим, блоки .content_1 и .content_2 перечислить через запятую, чтобы задать им ширину в 50% и левый флоат? Либо задать этим блокам 1 общий класс .content, на него повесить общие свойства, а при необходимости добавить классы .content_left и .content_right, чтобы на них навешивать уже отличающиеся свойства?
Я понимаю, что автор может быть только в уроке так пишет, чтобы не затягивать видео, но если это смотрит новичок, то он будет делать точно также, даже не зная о том, что совершает ошибку.
Я тот самый новичок, но который заподозрил, что Хауди усложняет =) И хочу сказать вам большое спасибо за ваши замечания и буду рада если поделитесь, вдруг вам известен какой-нибудь видео-блоггер вроде Хауди кто бы так же славно описывал ситуации, но на более современном уровне: максимально компактно, максимально красиво. Либо ссылка на хороший платный курс который, возможно, вы прошли/написали сами и можете порекомендовать (html5, css, javascript, что угодно).
видео с вас, для новичков для тех кто не рубит, но хочет.
"2) Вместо float: left для .sidebar + .content, а потом костыля с clearfix, можно просто прописать для .container: font-size: 0;"
вот этот пункт не совсем понял. может кто объяснить?
По умолчанию между блоками создается пробел, то есть ты создаешь пробел когда в текстовом редакторе пишешь каждый div с новой строки, а font-size 0 убирает эти пробелы. Например создай 3 div блока с одинаковым классом
(здесь создается пробел)
(здесь создается пробел)
(здесь создается пробел)
задай им ширину и высоту и бэкграунд чтоб ты их видел
size {
background: #000;
height: 300px;
width: 300px;
display: inline-block;
}
Между блоками появятся пробелы. Чтоб их убрать в класс wrapper пишут font-size: 0;
.wrapper {
font-size: 0;
}
Можно еще написать код в одну строчку так и пробелы пропадут(но это вроде плохо):
Думаю доступно объяснил.
1) Не нужно смотреть устаревшую информацию о поддержке на htmlbook, это нужно делать на can i use, 97.87% браузеров поддерживают тег , это базовый тег html5 стандарта, точно такой же, как и .
2) Не нужно пользоваться float вообще, когда почти все браузеры уже поддерживают flexbox. Или используйте сетку хотя бы на inline-block-ах.
3) По поводу id vs class, гугл в помощь.
Хоть урок и устаревший, но все равно единственный нормальный, который я нашел. Остальные чето мусолят на час, иногда сами не понимают темы.
Хотя то, что урок устаревший, в какой-то степени даже плюс, т.к. надо самому брать куски кода, улучшать его, экспериментировать, и т.д., а это практика. Это хорошо))
привет эээээээм ват? Полно превосходных уроков по верстке.
он не стареет. Актуален и сегодня!
Еще один совет, чтобы блоки имени различие по цвету через один (а не как у тебя: синие), для большей наглядности. Хотя и не для новичков, но может, где-то освятишь...смотри, ставим классы обычные и добавляем к ним, например, .wire класс и ему свойства .wire {background:gray;height:300px} .wire:nth-child(even) {background:lightgray;height:300px}
Думаю, понял в чем трюк...
Блогов не веду, поэтому решил поделиться, раз уж к месту..просто очень наглядно, когда каждый следующий див окрашен иначе, так легко составлять разметку.
Спасибо за уроки! Все супер!
Спасибо за урок. Немного отличается от того, что я уже насмотрелся, оно и понятно. 3 года прошло, причем почти ровно. Сейчас вижу, что многие на флексах верстают. Но данное видео - это идеальный вариант начать свою практику по верстке. Немного замудрено на мой взгляд с кучей вложенных дивов, но лайк 100%! Буду пересматривать и закреплю свои знания по флексам и флоатам. Попробую и так, и так. Спасибо.
Ну флексы имба, на них намного проще, чем было раньше, делать костылями некоторые моменты и т. д.
Побольше таких уроков по html+css
Возможно, это поможет тем, у кого не работает clearfix.
Для этого, вы должны добавить в футер одно свойство(В CSS файле), это свойство clear:both;
После этого свойства, вы должны прописать в сайдбаре margin-bottom: Npx;(где N- любое число)
Только что мы убрали обтекаемость у футера, вызванную свойством флоат в сайдбаре.
Вот и всё, что нужно было сделать(я провозился с этим~час, мда...)
красава, гораздо лучше всяких кусков кода с разных мест
@@lukasdvorak619 Это такие страшные костыли , за которые вас по голове точно не погладит ваш тим лид . Такой контент смотреть , вредно
Мне тоже помогло, спасибо)))
Таких бы уроков по практике побольше!) Считаю что по подобным уроках луче всего приходит понимание написания кода))
Прикольный видео.
Но я думаю что проблема новичков состоит в том что никто не знает про стоймость сайтах.
Точнее мы как новички не знаем сколько нужно брать за саит к примеру :
1) landing page + ( страница админа со всеми подписчиками) .
2) За блог (не буду ставить ссылки как пример чтоб не воспринимать как рекламу) который создаётся с помощью ( PHP , MYSQL, HTML, CSS/CSS3 , JS, JQUERY в том числе включает lightbox , gallery + админ панель который имеет обычный CRUD [ Create, Read, Update,Delete posts ] ).
Заранее приношу свои извинения если где нибудь писал неграмотно
с уважение Дмитрий.
1) Недостаточно информации, в чём функционал? Или просто лэндинг?
2) От $50 до $300, в зависимости от требований заказчика к движку
Хауди, как всегда красавчик. И по больше видео по вёрске пожалуйста. Было бы не плохо если бы про BootStrap видосик сделал.
И вёрска шаблонов тоже не помешала бы
Про BootStrap в планах сделать нормальный курс.
+Хауди Хо™ - Просто о мире IT! Молодчина
Скорее бы курс по BootStrap
Плохо ищете значит. Смотрите у WebDesign Master по плейлистам. И еще у него урок есть, как провильно искать информацию нужную. думаю вам будет полезно.
Спасибо, Хауди! еще бы подробный урок по верстке, чтобы там была какая-то витрина товаров (или разделов каталога) в контентной части.
Это называется вывод материалов, примерно такой урок будет )
15:36 - float: left для sidebar_1 и sidebar_2 ? может для sidebar_1 - float: left и для sidebar_2 - float: right ?
Очень круто объяснял даже 4 года назад!
спасибо за урок потому что я тоже задался тем же вопросом как склеить разные части в одно целое.Найдя ваше видео я подумал наконец то появилось видео простое о сложном!!!Спасибо за потраченое время на нас!!!
+Работа Время Рад помочь!)
Вооот! Вооот! Где ж ты раньше был с этим контеном))) Я неделю рыл зарубежные сайты и форумы и переводил их, в итоге сам допер как и что сделать, да и clrfx применял по-другому. В итоге сделал всё через одно место, но оно работало. Жаль ты это раньше не выпустил)))
аналогично коллега, изучил все основы, сел верстать структуру, вроде бы все логично, но то одно сползало, то второе.. я делал через контейнеры, но не так глубоко, как у автора видео.. Спасибо
+1 Мне бы это оч помогло пол года назад)) сейчас все через одно место ))
это есть везде, не знаю что там можно было рыть ... в любых уроках. Мало того, не обязательно применять clearfix, можно ведь просто задать overflow: hidden
orionpro79 когда не знаешь что ищешь, это тяжело, да и на русских форумах никто не выкладывает почти, т.к. это лишний труд для многих, либо им жалко.
По его урокам вы даже не изучили основы. Если хотите быть верстальщиками, то лучше css и html на каких-нибудь htmlbook учить или у Попова.
А вместо float нельзя использовать flex?
Автору спасибо! Всё доступно и понятно. Мне пригодилось, а по поводу HTML5 и CSS3, то что писали ниже, предлагаю автору записать отдельный ролик, т.к. мало кто может так доступно и подробно объяснять!!! ;-)
Нашел то что искал. Все кратко и по делу!
Спасибо за видео. А разве float сейчас используют? Вроде как про float рекомендуют забыть и использовать position
насчет clearfix:
Замечательный туториал. Побольше бы видосов, касающихся верстки.
Здравствуйте. Всё делал в точности по Вашему видео. Всё получилось кроме "сайдбара". Во первых не становится с права от "контента". Если меняю float left на right, становится справа как и должен но внизу под "контентом". Пробовал поднять командой "margin-top", не получается. Значения брал положительные и отрицательные. Стоит как приклеенный. Помогите пожалуйста найти ошибку! Хотя код пишу прямо в Sublime Text3 с Вашего видео.
шикардос. вот практика это лучше тысячи слов!!! однозначно палец вверх!
Очень крутой урок, благодарочка!) что насчет полного курса по верстке сайта с нуля с применением gulp или grunt, на бутстрапе (подобные ролики уже есть, но ты круто объясняешь, хочется услышать и увидеть в твоем исполнении). Хотел еще узнать каким стеком ты владеешь? и чем более детально?
Спасибо за видео! А все-таки сложный и не понятный этот сlearfix! Я это проще решал...под блоками с float ставил пустой div и его классу свойство clear:both...
единственный прогррамист который пишет имена классов на человеческом языке!
2k18 . в класс контейнер поместите контент и сайдбар
(
Контент
Сайдбар
)после чего в css файле пишем: .container{display: flex} . все. не нужно ничего другого и float в том числе. просто задайте бэкграунд и высоту, далее смотрим :)
Спасибо огромное, спас. Мне все эти дивы сливаются и хрен че поймешь, а так более наглядно все становится если убрать лишнее.
@@Noob-rv3wh обращайся)
Agree
"так не делается, но нужно делать именно так". Железная логика. Хотя бы объяснил в двух словах, почему так делается и почему нет
2020: используем грид или флекс верстку
Согласен можно совмещать грид и флекс верстку
Кст как я выжу в коментах эти информации уже устарели. Тоист уже можно сделать более лёгким способом
@@basstiyofficial67 бутстрэп
@@abobus_xero Не рекомендовал bootstrap,потому что сайт будет долго загружатся.
@@flatronkujo Каким образом? И на сколько, если у тебя в нетворке выставить 3g
Чё за музыка на 9:15?
Все четко. Еще бы про то как прибить футер к низу браузерного окна и вообще огонь было бы
Чтобы при скроллинге футер оставался на месте? - display: fixed;
чтобы футер встал на место достаточно задать ему свойство: clear: both; Зачем копировать кучу строк кода и создавать лишние классы в стилях, а в разметке лишние блоки лепить, когда все решается одним свойством?
Тогда не работает margin, поэтому другой выход может и есть, но лично я его не знаю.
.group:after {
content: "";
display: table;
clear: both;
}
Интересно было бы послушать коммент Хауди насчёт clear: both; А то людям непонятно,зачем писать лишнее
да гавно этот флоат, выкручивайтесь без него, иначе багов будет куча
Очень доступно рассказал.
Спасибо большое.
Ребят, хотел поинтересоваться у кого-нибудь. Сейчас стоит заменять те дивы на теги с html5: , , и прочее?
Как предпочтительней и как сейчас больше делают?
Спасибо за ответ
Это по стандарту в Сублайме можно #Что-та обернуть в див? Или нужно что-то докачивать?
Спасибо! Очень долго возился с контентом и сайдбаром!
спасибо за такие видео .Благодарен тебе за твои уроки!!!
что-то не получилось сделать такой же отступ между сайт барами, падают в низ под контент
.content {
width: 55%;
float: left;
}
.inner-content {
background: #3d3c66;
min-height: 500px;
}
.sidebar-1 {
width: 15%;
float: left;
padding-right: 10px;
}
.inner-sidebar-1 {
background: #3d3c66;
min-height: 500px;
}
.sidebar-2 {
width: 15%;
float: left;
padding-left: 10px;
}
.inner-sidebar-2 {
background: #3d3c66;
min-height: 500px;
}
.sidebar-3 {
width: 15%;
float: left;
}
.inner-sidebar-3 {
background: #3d3c66;
min-height: 500px;
}
.footer {
margin-top: 10px;
.inner-footer {
background: #3d3c66;
height: 200px;
}
Быстро,понятно и по делу!
Хауди ты лучший блогер!!!
Он не блогир а летсплейщик
Как всегда класс! Отлично, что есть такой канал! Ждём ещё вёрстки! Спасибо за труд!
Спасибо огромное за качественный контент, всё предельно ясно и понятно
Автору 5+ за работу
Рад помочь!
Это лучшеее видео по веб дизау знаю почти все HTML и CSS но так и не знал как правильно верстать шаблон спасибо большое очень помогло в обучение
Рад помочь
Где-то давненько видел сайт-конструктор всех этих структур - задаешь ему все параметры, а на выходе получаешь файлы html и css, оформленные по всем стандартам. И не надо голову ломать.
Хотя думаю, что у спецов и так под рукой имеются шаблоны под все варианты структуры сайта, чтобы на этом время не терять.
АААААААААААААААААААААААААААА, ТЫ ПРОСТО СУПЕЕЕЕЕЕЕЕЕЕЕЕЕЕЕЕЕР!!!!!! ЛУЧШИИИИИИИИИЙ КАНАААААААЛ!!!!
Мне очень нравятся твои видео! :) Понятней и лучше никто больше не объясняет) Сделай пожалуйста уроки по flex и grid.
А если использовать display: inline-block; ???
2 минуты видео.....на повторение ушло 3 часа хух потно го дальше
Тоже самое
Хауди, спасибо за урок :) Нет предела твоей крутости.
Скажи пожалуйста, какими аддонами Sublime Text ты пользуешься( я только Emmet узнал в видео)
live reload, autofilename
Всегда с интересом смотрел твои уроки! Но могу высказать замечание ты пытаешься изложить бывает сложные вещи простыми решениями, но это бывает только усложняет процесс. Кто более менее в теми тот поймет а вот у начинающих останутся пробелы в понимании. И это в большей степени плохо ))), чем хорошо. Про clearfix нужно было по подробней написать ведь это суть всего и лучше было разбить видео на 3 часть по 10 - 15 -15 мин. Тогда получилось и компактно и материал изложенный лучше усвоился. Сохранилось и динамика и содержательность материала. Ну это мое мнения повторяюсь всегда с интересом смотрю твой канал !!!
div можно не писать, если стоит emmet (хватит и .container к примеру) или это для наглядности делается?
Хауди, ю амєйзинг! Огромное спасибо за твои видео,все понятно! Больше уроков по html и css! ))
Спасибо, видео оказалось очень полезным, как и все остальные, которые я посмотрел на этом канале. Лойс. Удачи в развитии канала и удачи в жизни. =)
круто. то что мне нужно было знать. Спасибо Хауди.
смотрел старые уроки. Ты говорил писать в type"text/css" почему тут не написал? что-то поменялось или это просто не нужно?
шикарно! огромное спасибо, а то уже успела замучиться
А почему padding, а не Margin? Просто по логике ведь лучше именно внешний отступ от внешних границ, а не вминание внутреннего содержания блока паддингом? Или это как-то завязано на box-sizing?
Пример по уроку получился, но я понимаю, что сам без видео с примером, какие и где теги ставить, не разберусь. Сколько нужно времени и практики, что б научиться, без подсказок верстать простые такие "макеты" сайтов?
Извините. подскажите новичку, вот когда вы набирали # header+#content#sidebar+# footer и саблайм преобразовал это, - это какой-то специальный плагин? И как это сделать?
Emmet
Max 2Gir oooh snak youuuu°
А если пользовать Bootstrap, то будет быстрее и удобнее верстать ? или есть свои минусы?
Хорошее видео! Побольше бы таких особенно сейчас актуально учитывая как оно устарело.
как называется у тебя док панель?
как раз попался такой макет с тьмой блоков и внутри них не хотели писаться margin и padding, второй день на дизморали даже не хотел подходить к вёртске а тут более-менее объясняется эта дичь и понятно что пробовать. спасибо)
ещё недавно приуныл из-за новых тегов в html5 аля nav menu footer header и прочих, типо через них лучше писать, роботы быстрее находят и бла бла. а тут только-только стандартные выучил почти) если они актуальны, то можешь с ними в уроках верстать? рано или поздно они вытеснят старые сайты с div'ами из сети и хочется поспособствовать этому)
Ps как жеж легко и быстро у него выходит... ничо, скоро и мы так сможем;)
напишу тут, что б там полотна небыло)
1) расскажи как нить про css reset, постоянно ли его подключать, что он может поменять в коде и т.д.
2) расскажи про схлопывающиеся отступы, вот это новичкам думаю будет полезно. а то очень большие шансы столкнутся с этой жопой на первых шагах. и методы борьбы)
дада, всё гуглится, но вдруг кончатся темы для видео или захочешь рассказать про это. шота психанул с писаниной, сорь))
Подскажите, в какой программе идет работа? Это ведь не notepad++?
Нет, это Sublime Text 3.
Благодарю, Хауди. Для новичка самое то.
А начальный урок есть? Где можно посмотреть? С уважением, совсем чайник
я пока только изучаю html & css. Но почему в данном видео процентами не выставить разделение между блоками. Допустим из 100% 1 блок 79,9% 2 блок 20%. разделение между блоками будет 0.1% без сноса крайнего блока ниже. или я что то не понимаю и в дальнейшем будут проблемы?
HELLO! у меня есть вопрос: как сделать висячий header или как там называется.. ну например как у сайта: vaadin.com. когда вниз прокрутишь наверху header остается на месте.. заранее спасибо!
когда смотришь видос в 2020, спасибо flex :)
Классный обзор! А что за музыка на заднем фоне, название?
Хауди, ты работаешь на Убунту. Очень интересует набор софта, который ты используешь для верстки именно под Убунту, в том числе мелкие полезные плюшки типа Colour Picker и т.д.
Да, на Ubuntu и фронт и бэк пишу
Скажи что это за тема у тебя стоит в sublime?
лично я стараюсь так не использовать float мне по душе display inline block
CentralS ++ этот флоат бесит, он глючный, даже если клеарфикс добавить, все равно на протяжении всей верстки будут какие-то баги
Можно подробнее ? Я новичок
Флексы лучше
Не ожидал этого. Что сюда попаду по html. Dino 3D
А есть же теги и т.д. Почему их редко используют?
Вместо div с классом?
Задаюсь тем же вопросом. Так ведь всё воспринимается более чётко и ясно
mottedli вот вот
Желательно конечно использовать , и т.д., но у них отсутствует поддержка IE < 9, она там обеспечивается полифилами. Всё-таки Вы сами тоже должны что-то узнавать самостоятельно.
Смотри, я новичок может и не знаю истину, но бывают такие случаи, что у тебя есть тег div, и тебе нужно создать ещё один, ты создал и начинаешь в css писать ему стиль, а как css поймёт к какому диву ты обращаешься, ведь их два? Вот как мне кажется тут это подойдёт, приписать айди или класс нашему диву. Но повторяюсь я ещё новичок, если что то не так, не бейте)
Чувак, ты гений. Аааааа😳 крутяк
2:03 как это сделать? И зачем записывать видео в разных редакторах кода?
Это видео старое. Используй grid сетку для создания структуры сайта.
Как сделать подобные блоки без float а на флексах либо гридах?
Какой плагин надо установить чтоб после точки, сам дописывался класс в sublime?? Подскажите пожалуйста:)
emment
Всегда пожалуйста
но в 2019годе думал все знают Emmtnt
но сам недавно узнал XD
Артур Каримуллин 😀 спасибо, прослушивая другие уроки узнал, что просто нужно было нажать таб😁
@@musaxudiyev7754 учись удачи :--)
Артур Каримуллин, спасибо и тебе удачи.
У меня все точно также, но почему после введения (и всех других блоков с inner) сайтбар съехал вниз. Помогите пожалуйста.
Я не могу понять, как у тебя получается написал в редакторе изменение , а в браузере все сразу поменялось , не нажимая обновить, там получается автообновление какое-то стоит , подскажи пожалуйста ?
слушай, а как сделать так чтобы был заголовок слайда по середине но фон был одинаковый , нужно делать несколько сайт баров
эм разве это удобно? не лучше использовать overflow:hidden; (для родителя) вместо clearfix?
это удобно только тогда, когда используешь сетку bootstrap к примеру и ты вообще не пишешь css, больше в html прописываешь.
Какой еще float? Упаси Боже! Это видео давно пора удалить, чтобы не вводило в заблуждение.
@@ganjour ты прав) пятилетнее видео
Спасибо Хауди, я смотрел несколько уроков до этого и ни##я не понял, но посмотрел твой урок стало всё ясно
А почему не через тег ?
Что делать,если после того,как я даю цвет id header,а потом даю другой цвет id content,цвет content просто становится поверх предыдущего,а не под ним,паддинги и марджины не помогают.
у меня сайд бар сместился вниз после INNer-sidebar, хотя контент стоит 70% а сайд бар 30%, в чём ошибка?
Я просто похлопаю!!! ха ах а а ааха ахах ! Гениально! Спасибо большое!!!
Хауди как ты делаешь так,что при надписи #conternt он у тебя сразу в div все помещал как на 2:28?
+Nikita Dnepr Emmet
таб точнее нажмимай после
Ребят ,подскажите ,как сделать так ,чтоб gulpfile работал и обновлял . Не могу подключить
box-sizing: border-box; Не помогло ! Что делать?
подскажите!!!!как сделать фон рамки прозрачным а содержащий в нем текст нет?
используй вложенный див, нижний делай прозрачным, а а верхнем пиши текст
А зачем создавать класс row? Если мы уже взяли contain и sidebar в один div, то их свойства float: left не будет распространятся на footer.
а какой программой ты редактирует файлы?
Ты имеешь виду текстовый редактор? Это Sublime Text.
sublime text 3
Sublime Text 3
Sublime text, если вы про код. Там даже написано, но можно использовать и notepad++ и обычный текстовик :)
Sublime text 3/2
Большое спасибо, очень полезный ролик для начинающих.
Почему для контента и сайтбара используется float: left, о не float: left и float: right соответственно? Так и Martin-right не нужно прописывать
Хауди Хо спасибо тебе большое, спасибо что помогаешь, спасибо за старания,
спасибо за всё!
Я новичок. Объясните, зачем копировать код в css, чтобы футер сместить вниз. Почему не написать в css просто clear: both для Footer?
Кто подскажет можно ли section использовать вместо div?
хотелось бы увидеть видео как витаскиват из готовова шаблона меню или вид новостей с html и css кодом и видео про движок dle как витаскиват нужное нам и ставет в другой шаблон
для новичков пойдет, но за такую верстку сеошники яйцы оторвут. особенно зарубежные сеошники. ну и танцы с футером не нужны, в комментариях уже писали более простые решения. собственно в структуре разобраться несложно, берешь шаблоны wordpress/joomla/dle и т.д. и смотришь как они сделаны.
А как надо,где посмотреть? :-)
Хауди хо, лучше знает как нужно. Так что не умничай.
Как всегда лучший👍
У меня вопрос можно ли разделить не на 90градусов а на 45градусов (под углом)