300 Сайдбаров ► Как сверстать структуру сайта? 

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, чтобы на них навешивать уже отличающиеся свойства? Я понимаю, что автор может быть только в уроке так пишет, чтобы не затягивать видео, но если это смотрит новичок, то он будет делать точно также, даже не зная о том, что совершает ошибку.

Как всегда класс! Отлично, что есть такой канал! Ждём ещё вёрстки! Спасибо за труд!

Спасибо! Очень долго возился с контентом и сайдбаром!

Побольше таких уроков по html+css

Таких бы уроков по практике побольше!) Считаю что по подобным уроках луче всего приходит понимание написания кода))

Автору спасибо! Всё доступно и понятно. Мне пригодилось, а по поводу HTML5 и CSS3, то что писали ниже, предлагаю автору записать отдельный ролик, т.к. мало кто может так доступно и подробно объяснять!!! ;-)

Очень крутой урок, благодарочка!) что насчет полного курса по верстке сайта с нуля с применением gulp или grunt, на бутстрапе (подобные ролики уже есть, но ты круто объясняешь, хочется услышать и увидеть в твоем исполнении). Хотел еще узнать каким стеком ты владеешь? и чем более детально?

Хауди, ю амєйзинг! Огромное спасибо за твои видео,все понятно! Больше уроков по html и css! ))

Замечательный туториал. Побольше бы видосов, касающихся верстки.

Хауди Хо спасибо тебе большое, спасибо что помогаешь, спасибо за старания, спасибо за всё!

Спасибо, Хауди! еще бы подробный урок по верстке, чтобы там была какая-то витрина товаров (или разделов каталога) в контентной части.

круто. то что мне нужно было знать. Спасибо Хауди.

спасибо за такие видео .Благодарен тебе за твои уроки!!!

Хауди, как всегда красавчик. И по больше видео по вёрске пожалуйста. Было бы не плохо если бы про BootStrap видосик сделал.

Спасибо за урок. Немного отличается от того, что я уже насмотрелся, оно и понятно. 3 года прошло, причем почти ровно. Сейчас вижу, что многие на флексах верстают. Но данное видео - это идеальный вариант начать свою практику по верстке. Немного замудрено на мой взгляд с кучей вложенных дивов, но лайк 100%! Буду пересматривать и закреплю свои знания по флексам и флоатам. Попробую и так, и так. Спасибо.

шикардос. вот практика это лучше тысячи слов!!! однозначно палец вверх!

Спасибо огромное за качественный контент, всё предельно ясно и понятно Автору 5+ за работу

Благодарю, Хауди. Для новичка самое то.

Большое спасибо. Ты очень круто все рассказал .

Нашел то что искал. Все кратко и по делу!

Большое спасибо, очень полезный ролик для начинающих.

Хорошее видео! Побольше бы таких особенно сейчас актуально учитывая как оно устарело.

Быстро,понятно и по делу! Хауди ты лучший блогер!!!

Хауди, спасибо за урок :) Нет предела твоей крутости. Скажи пожалуйста, какими аддонами Sublime Text ты пользуешься( я только Emmet узнал в видео)

Спасибо за видео! А все-таки сложный и не понятный этот сlearfix! Я это проще решал...под блоками с float ставил пустой div и его классу свойство clear:both...

все доступно и просто, молодец

Мне очень нравятся твои видео! :) Понятней и лучше никто больше не объясняет) Сделай пожалуйста уроки по flex и grid.

Хоть урок и устаревший, но все равно единственный нормальный, который я нашел. Остальные чето мусолят на час, иногда сами не понимают темы. Хотя то, что урок устаревший, в какой-то степени даже плюс, т.к. надо самому брать куски кода, улучшать его, экспериментировать, и т.д., а это практика. Это хорошо))

спасибо за урок потому что я тоже задался тем же вопросом как склеить разные части в одно целое.Найдя ваше видео я подумал наконец то появилось видео простое о сложном!!!Спасибо за потраченое время на нас!!!

Очень хорошее видео, сильно помог

Это лучшеее видео по веб дизау знаю почти все HTML и CSS но так и не знал как правильно верстать шаблон спасибо большое очень помогло в обучение

Очень круто объяснял даже 4 года назад!

Очень доступно рассказал. Спасибо большое. Ребят, хотел поинтересоваться у кого-нибудь. Сейчас стоит заменять те дивы на теги с html5: , , и прочее? Как предпочтительней и как сейчас больше делают? Спасибо за ответ

Давай побольше таких видео!

Спасибо огромное! Вы лучшый!

огромное тебе спасибо все понял все прекрасно понял спасибо еще раз !!!!

Как всегда лучший👍

Спасибо за урок!

Еще один совет, чтобы блоки имени различие по цвету через один (а не как у тебя: синие), для большей наглядности. Хотя и не для новичков, но может, где-то освятишь...смотри, ставим классы обычные и добавляем к ним, например, .wire класс и ему свойства .wire {background:gray;height:300px} .wire:nth-child(even) {background:lightgray;height:300px} Думаю, понял в чем трюк... Блогов не веду, поэтому решил поделиться, раз уж к месту..просто очень наглядно, когда каждый следующий див окрашен иначе, так легко составлять разметку. Спасибо за уроки! Все супер!

Все четко. Еще бы про то как прибить футер к низу браузерного окна и вообще огонь было бы

шикарно! огромное спасибо, а то уже успела замучиться

Вооот! Вооот! Где ж ты раньше был с этим контеном))) Я неделю рыл зарубежные сайты и форумы и переводил их, в итоге сам допер как и что сделать, да и clrfx применял по-другому. В итоге сделал всё через одно место, но оно работало. Жаль ты это раньше не выпустил)))

Спасибо за видео. А разве float сейчас используют? Вроде как про float рекомендуют забыть и использовать position

Чувак, ты гений. Аааааа😳 крутяк

Ты просто красавчик !

Возможно, это поможет тем, у кого не работает 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 ] ). Заранее приношу свои извинения если где нибудь писал неграмотно с уважение Дмитрий.

когда смотришь видос в 2020, спасибо flex :)

Спасибо Хауди, я смотрел несколько уроков до этого и ни##я не понял, но посмотрел твой урок стало всё ясно

Спасибо огроооомное!!!

Всегда с интересом смотрел твои уроки! Но могу высказать замечание ты пытаешься изложить бывает сложные вещи простыми решениями, но это бывает только усложняет процесс. Кто более менее в теми тот поймет а вот у начинающих останутся пробелы в понимании. И это в большей степени плохо ))), чем хорошо. Про clearfix нужно было по подробней написать ведь это суть всего и лучше было разбить видео на 3 часть по 10 - 15 -15 мин. Тогда получилось и компактно и материал изложенный лучше усвоился. Сохранилось и динамика и содержательность материала. Ну это мое мнения повторяюсь всегда с интересом смотрю твой канал !!!

насчет clearfix:

Хауди, Класные Видосы. Единственное скидывай ссылку на файлы(например на gulp файлы)

как раз попался такой макет с тьмой блоков и внутри них не хотели писаться margin и padding, второй день на дизморали даже не хотел подходить к вёртске а тут более-менее объясняется эта дичь и понятно что пробовать. спасибо) ещё недавно приуныл из-за новых тегов в html5 аля nav menu footer header и прочих, типо через них лучше писать, роботы быстрее находят и бла бла. а тут только-только стандартные выучил почти) если они актуальны, то можешь с ними в уроках верстать? рано или поздно они вытеснят старые сайты с div'ами из сети и хочется поспособствовать этому) Ps как жеж легко и быстро у него выходит... ничо, скоро и мы так сможем;)

Спасибо, видео оказалось очень полезным, как и все остальные, которые я посмотрел на этом канале. Лойс. Удачи в развитии канала и удачи в жизни. =)

рили помог хоть и сейчас 2021))

от души, Абрахам.

Большое спасибо

Как боженька объяснил))))

2k18 . в класс контейнер поместите контент и сайдбар ( Контент Сайдбар )после чего в css файле пишем: .container{display: flex} . все. не нужно ничего другого и float в том числе. просто задайте бэкграунд и высоту, далее смотрим :)

2 минуты видео.....на повторение ушло 3 часа хух потно го дальше

Однозначно лайк!)

Спасибо большое)

вот это реально полезное видео

Где-то давненько видел сайт-конструктор всех этих структур - задаешь ему все параметры, а на выходе получаешь файлы html и css, оформленные по всем стандартам. И не надо голову ломать. Хотя думаю, что у спецов и так под рукой имеются шаблоны под все варианты структуры сайта, чтобы на этом время не терять.

АААААААААААААААААААААААААААА, ТЫ ПРОСТО СУПЕЕЕЕЕЕЕЕЕЕЕЕЕЕЕЕЕР!!!!!! ЛУЧШИИИИИИИИИЙ КАНАААААААЛ!!!!

Крутой видос!

какое приятное видно))

огромное спасибо за видео ))) 2020г

чтобы футер встал на место достаточно задать ему свойство: clear: both; Зачем копировать кучу строк кода и создавать лишние классы в стилях, а в разметке лишние блоки лепить, когда все решается одним свойством?

А если использовать display: inline-block; ???

спасибо огромное!

лично я стараюсь так не использовать float мне по душе display inline block

Здравствуйте. Всё делал в точности по Вашему видео. Всё получилось кроме "сайдбара". Во первых не становится с права от "контента". Если меняю float left на right, становится справа как и должен но внизу под "контентом". Пробовал поднять командой "margin-top", не получается. Значения брал положительные и отрицательные. Стоит как приклеенный. Помогите пожалуйста найти ошибку! Хотя код пишу прямо в Sublime Text3 с Вашего видео.

Проблема, возникшая с начала видео (с float), можно решить с помощью убратия точки запятой в классе sidebar, после wight.

Тот момент, когда делаешь расположение блоков не при помощи флоата, а при помощи флекса xD

2020: используем грид или флекс верстку

Круто! :-)...Учись,студент! (это я сам себе)

"так не делается, но нужно делать именно так". Железная логика. Хотя бы объяснил в двух словах, почему так делается и почему нет

все четко , но прошу вас снять полный урок по созданию сайта с 0

Спасибо помог))

хотелось бы увидеть видео как витаскиват из готовова шаблона меню или вид новостей с html и css кодом и видео про движок dle как витаскиват нужное нам и ставет в другой шаблон

уже раз 5-ый пересматриваю данный видео урок - видимо где то что то я делаю не так, если каждый раз что то да не так как в видео

ты использовал фиксированую высоту для контента... из-за этого футер не до конца вниз опустился... и если float так криво работает, почему бы не использовать display: inline-block;

ХАуиди пожалуйста оставляй ссылки на хотя бы на часть кода

Ничего не понял, но очень интересно😆

Спасибо огромное

Пока смотрю,все понимаю)))

malodec chuvak vse doskonalno obyasnil na kak u drugih lay !

спасибо)

Не ожидал этого. Что сюда попаду по html. Dino 3D

Раньше. До бутстрапа на резиновых сайтах и не только я этот вопрос решал так. Контейнер основного блока имел полицию реалтайв. Контент width:100% padding-right:265px; а у сайдбара абсолютное позиционирование и контент 250 пикселей. Выходит, что основная часть адаптируется по ширине, а сайдбар всегда фиксированного размера

Спасибо

Сайдбару можно дать float: right ; margin-left 10px; и все вниз не будет уходить.

Классный обзор! А что за музыка на заднем фоне, название?

div можно не писать, если стоит emmet (хватит и .container к примеру) или это для наглядности делается?

спасибо снимай видео о том сколько зарабатывает с сайта по разным тематикам например медиа сайт, кулинарный сайт и т.д

Отличное видео! Но подскажите новичку, как сверстать так, если нужно, чтобы футер был шириной как контентная часть и упирался в сайдбар?