Верстка сайта основные ошибки начинающих 

Много негативных коментов, и многие из них вполне резонны. Но, не знаю, заметили ли вы, автор говорит с новичками на языке новичков? Да, Sorax разложил бы круче и терминология добавила б экшна, но новичок его поймет не сразу, если вообще поймет. Данный видос точно нельзя назвать бесполезным, автор хорошо изъясняется, на доступном уровне под начинающих. А отцов верстки попрошу выносить свой опыт и энергию в своих проекты, а не в обгаживание видео-уроков. Ездили 10 лет на ланосе, второй месяц как пересели на кэмри и запели песню "ланосы для лахов!! ведра гаечные! ". Спасибо, лайк.

Не нашёл подобного коммента, поэтому пишу сам. Собственно, о чём в ролике идёт речь: 1) стоит использовать современные текстовые редакторы с плагинами или полноценные IDE; 2) следует называть классы по-английски без сокращений и так, чтобы название отражало суть объекта; 3) не нужно создавать классы для блоков, теги которых уже имеются в html (header, footer, nav, main и т.д.); 4) выносите стили в css, а не прописывайте их в атрибуте "style" для тегов; 5) тег на странице должен быть только один; 6) используйте строчные элементы внутри блочных, а не наоборот (подробнее на 5:22); 7) используйте атрибут "alt" для изображений, описывая в нём контекст; 8) проверяйте страницы валидатором.

Я как интересуешься личность новичок очень понравился. Не мямлил, не бросался слишком много умных слов которых не поймешь, коротко и ясно, все самое нужное объяснил для начинающих. чтобы не наступали на эти грабли. Даже появился желания учится под его уроки. Большой лайк. пусть старается в том же духе и больших успехов в этом.

Спасибо огромное тебе за твои труды!!! Крепкого здоровья! Все очень приятно и информативно!)

Вообще красава, всё чётко и по сути. Допольнительный плюс за то, что упомянул сео оптимизацию). Работаю сео оптимизатором, исправляю on-page после недоумковатых разработчиков которые пользуются H-тегами для визуального украшения текста

Думал бесполезный видос окажется но последняя инфа стала приятной неожиданостью, неезнал про этот сервис, спасибо.

Еще совет. В больших проектах под цаета и шрифты используйте разные классы, например class="my-block my-block-color my-block-font" Заказчик может попросить поиграться со шрифтами и цветами, а когда один цвет и шрифт присущ нескольким элементам, менять их стили можно довольно быстро

Кратко и по делу, спасибо) Особенно полезно была таблица сравнения html4 и html5 Респект автору)👍

Спасибо. Дельные советы.

Век живи, век учись. Спасибо за подсказку про редактор.

Классный канал, молодец парень, доходчиво все и быстро объясняет. Плюсую

Спасибо! Доступно и понятно.

Полезно. Большое спасибо за видео!

Если не нравится sublime и у вас винда, то попробуйте Visual Code, он более приближен к ide типа idea или eclipse. Мне, как программисту java c# он понравился больше.

Отличное видео! Познавательно, доступно. И вдохновляет на продолжение обучения)

Начало на 1:40

Я из тех людей которые пользуются переводчиком чтобы назвать класс)

если картинка используется в качестве элемента дизайна, то семантически это должен быть не тег img с пустым alt, а div со стилем background-image

Отличное видео, спасибо!

Интересно, спасибо.

Все, на что НЕ ругается валидатор W3, является правильной разметкой в том числе и строчный в котором лежит куча

Спасибо, мне было интересно

Три. Три типа элементов :) Строчные, блочные и элементы с медиа-содержанием ;)

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

Grazie mille Fratello!)

Спасибо!!

пасиб за советы.

Охх. Да ошибки надо изучать сначала пути. Я вообще 2 месяца ерундой занимался. Прикольной но ерундой))) даже видео на канале записал тоже можете глянуть. Всем рад. Спасибо много информации. Я выучил сам html css. Bootstrap и все с нуля. И теперь сайты делаю. Делюсь на своем канале ссылками и уроками. Думаю любой пройдя этот путь сможет. Автор красава. Лайк и подписка.

Спасибо за советы ! (Поддерживаю) примерно месяц назад перешел на sublime text, установил нужные мне плагины, и почувствовал как он в разы упрощает работу.

Классный контент.мне понравилось

Спасибо за видео! Не знал, что можно только 1 раз юзать.

Спасибо за советы, полезно. Хорошее видео!

Если у картинки нет alt и она несет декоративный характер, то задают её через css.

Валидатор это костыль, лучше просто использовать полноценные среды разработки. Я FullStack и просто пользуюсь PhpStorm, где уже есть все как под бэкэнд, так и под фронтэнд

Спасибо, я хоть и новичок, но этих ошибок не совершаю )

Если использовать webstorm, например, можно обойтись без валидатора, потому что валидатор встроен в ide, и многие плагины, которые надо ставить в саблайм, в шторме есть из коробки уже

информативно !

Ну однозначно лайк

Я бы еще добавил, что начинающие не пользуются инструментами разработчика в браузерах. например не смотрят разметку элементов. Делают разметку "на глаз" и не понимают какие отступы и поля получаются, какие атрибуты вообще не используются и их можно банально удалить, как мобильных устройствах выглядит страница.

Ожидала услышать именно ошибки в приемах верстки (которые влияют на адаптивность, на гибкость кода в плане его изменения в будущем), про некорректные "некрасивые" приемы. Именно с этим у меня, как у новичка, больше всего проблем.

Не могли бы вы напомнить есть ли отдельный урок по тому какими тегами лучше выделять разные смысловые части страницы и вообще какая стандартизация при верстке (например как с было тегом (про его разовое использование) ) ?

Толково)

5:23 div внутри a для того чтобы создать кнопку тоже неправильное использование? Просто я всегда так делаю и не понимаю как можно иначе.

спасибо

По большому счёту согласен со всем.

когда это тег стал строчным?

li - это блочный элемент переходить с css на scss использовать вебпак w3c валидатор - не панацея, тот же синтаксис vue он будет считать инвалидным, для отображения ошибок есть ide и линтеры

В 2019 уже можно настроить Sublime text так, что он будет сам показывать незакрытую скобку, ковычку и тд

Сделайте видео о всех семантических тегах с подробными примерами о том какую информацию можно помещать в тот или иной тег. А то везде указывается,как пример, что в стоит помещать новостную статью, а о других видах информации для ничего нет.

Привет подскажи по семантике. Напимер

Я согласен про ошибки, не все, но всё же. Сам писал в notepad, сейчас работаю в Sublime Text. Поэтому и начал курсы fortend и backeng.

Я бы добавил как ошибку начинающего это не смотреть как сделано у других. Нужно всегда "вставать на плечи" предыдущим работам, и копипаст копипаст, конечно с разбором позаимствованной идеи для развития себя.

Братаник сделай видос по позиционированию, отдельной темой.

Самая главная ошибка: учится вёрстке на твоём канале, аргументы: 1) частое использование идентификаторов не по смыслу 2) переопределение стилей, потому что забыл что раньше задавал 3) Засорение глобальной области видимости 4) Неуместное использование флексов где можно было обойтись без него 5) Стили который не нужны для блока, например в плейлисте адаптивная вёрстка для блока задаётся width: 100%; и margin: 0 auto 6) стили по умолчанию Не стоит задавать height: auto, если по умолчанию оно и так auto 7) Использование фиксированный высоты блока, высота блока должно формироваться в зависимости от содержания внутри блока 8) не очищается блоки (clearfix) после использования свойства float 9) Привязка функции прямо на html документа 10) вёрстка не по БЭМ 11) это можно не считать аргументов но стоит сказать: надо показывать промежуточные результаты того что ты написал а не писать 100 строк кода и показать результат работы в браузере, новичков ведёшь а ступор

li is block element not inline

пользуюсь модифицированным SciTE и мне этого хватает. называю классы как хочу и не путаюсь. никогда не пользуюсь симантическими тегами. прописываю стили в атрибуте style для большенства случаев. не пользуюсь тегами. добавляю блочные элементы в строчные. плевать хотел на атрибут alt. а лучший валидатор это я сам. за все эти годы проблем с производительностью не возникало никогда, а если кто то не может разобраться с моей вёрсткой то это его проблемы

Все на понятном доступном языке. Я использую редактор Geany, мне как-то в нем более удобно. По валидатору не согласен в корне, то что вы подгоните под валидатор код никак не отразится на лучшей индексации или лучшем ранжировании вашего сайта (страниц) в поисковиках. То есть валидатор, это как получить ачивку, типа вот у меня нет ошибок согласно валидатору и мы получаем счетчик типа проверено и все круто, то есть порадоваться для себя и не более.

Спасибо, видео грамотные с точки зрения обучающегося, много полезного понятно объяснено/>

h1 тег вроде можно несколько раз использовать, eсли каждый раз внутри тега hgroup на ряду с другими h

Дякую. Стараюся робити так як ти сказав.

Можно запилить современные методики при верстке, в т.ч. адаптивной. Например, везде задают размеры шрифта в rem и прочее подобное. Ну а саблайм какаха конечно. В том же VSCode эммет искаропки работает.

Полное совпадение с макетом никогда не нужно. Очень важна структуризация проекта. Ибо это фундамент для правильной модификации верстки...

На счет нельзя вставлять блочный внутри строчного. Если задать то можно вставлять внутрь блочные? И внутрь блочного можно вставлять одновременно строчные и блочные?

Но я почему-то везде натыкался на информацию, что при вёрстке с использованием семантических тегов HTML5 *допускается* повторное использование тега и поисковики это отлично могут понять и разобрать. Так чему верить то?

Про валидатор: охренеть, я вообще не знал о его существовании.

Всем здравия! Заранее прошу прощения за вопрос не по теме. Занимаюсь созданием интернет-магазина для торговли одеждой, обувью и аксессуарами. Приобрела шаблон сайта, написанного в стандарте wordpress (плагин woocommerce). При настройке сайта мой веб-дизайнер столкнулся с проблемой отображения цен и стоимости товара в корзине. Изначально в шаблоне была настройка отражения на сайте цен без НДС. А мне нужно с НДС. Когда веб-дизайнер сменил настройку (чтобы цена включала НДС), цены на товары в магазине стали отражаться с НДС, но при просмотре корзины со страницы отдельного товара общая стоимость выбранного товара, которая рассчитывается, исходя из количества (SUBTOTAL), по-прежнему показывается без НДС. Кроме того, если зайти в корзину для совершения покупки, в строке «общая стоимость» (TOTAL) В ОДНОЙ СТРОКЕ отражается общая стоимость товара, рассчитанная с НДС, + в скобках сумма НДС и далее идет запись, что стоимость включает НДС (масло масленое) . Это очень не удобно для восприятия клиентов. Мой веб-дизайнер говорит, что исправить нельзя (таковы возможности выбранного мною плагина). Возможно, что дело не в ограниченных возможностях настроек выбранного мною шаблона сайта, а в компетенции моего веб-дизайнера (учитывая, что вопрос с включением НДС в цену товара не является чем-то уникальным). Поэтому у меня вопрос к вам: можете ли вы посоветовать дополнительные настройки в woocommerce (как корректно настроить цены товаров, чтобы они отражались с НДС), а в случае невозможности, - дополнительный плагин (можно даже платный), который можно прикрутить к имеющемуся, чтобы в корзине товаров корректно отражались и цены товаров (с НДС), и сам НДС (отдельной строкой), и общая стоимость покупки (чтобы была просто указана общая стоимость без дополнительной информации в скобках). Заранее прошу прощения за свой птичий язык дилетанта. Надеюсь, что вы поняли мою проблему. И еще заранее благодарю всех за ответы/советы/ помощь!

В html5 можно в ссылку блочные элементы вставлять

в chrome есть расширение Validate Document. удобно

касательно Н1, даже если страница не индексируемая, то лучше сохранять ее корректность, поскольку Н1 используется скринридерами, тут ситуация аналогичная семантическим тегам -- они существуют не просто так, как и единственный Н1.

Щас бы саблаймом пользоваться))

На счёт тега main уверены, что это замена для div.content ? Где-то читал, что в main должен быть уникальный контент не повторяющийся нигде.

Я начал изучать веб-разработку. Это были иероглифы.. OST Области тьмы

я весь блок ( рекламного анонса) обертываю в

Доброе утро Кэп

Дружище, а как заказать у тебя вёрстку? Ты берёшь заказы на вёрстку? Очень понравилось что твоё мнение совпадает с моим, а то попадаются горе верстальщики которые даже к img не ставят alt и title.

Sublime,- удобный, легкий, быстрый, потому и пользуется большой популярностью у новичков!

Здравствуйте, посоветуйте я создал сайт на html и css в одном файле и заходя свой сайт он долго грузиться, не знаете от чего может быть?

Суровые прогеры пишут в notepad++ ))))

На дворе почти 2019, надо использовать современные и sublime text 3. Ok

Привет, подскажите почему у меня в одном файле html стили css работают а в другом нет . Путь проверяла открываю через хром

Алексей ,здравия , мне 40 хочу верстать , к программированию днла не имел, подскажите с чего начать для плодотворной работы, хочу. Как можно быстрее перейти к работе…

Уже 20 лет сталкиваюсь с HTML и CSS. До сих пор себя чувствую не уверенно. Стараюсь избегать вёрстки. Но, с другой стороны я занимаюсь на сайте всем: от установки сервера и необходимого ПО, до вёрстки сайта. Так что мне простительно :)

Мне кажется, что лучше, по крайней мере по началу, использовать простенькие редакторы. Например, notepad++, чтобы больше кода писалось от руки, для лучшего запоминания. Если, конечно, в этом есть нужда.

Сделайте пожалуйста видео о том что делается с сайтом после верстки и кто что делает ?

Для опытных людей в этой сфере sublime text уже мало, т.к нужен терминал и не только, ну а так в целом для новичков видео норм.

А Brackets можно в веб разработку?Просто мне она нравится.

здравствуйте, скажите, пожалуйста, зачем проверять код через валидатор, если редактор кода должен этим заниматься? спасибо

Веб разработка серьезного продукта довольно сложный и трудоемкий процесс, все работа сложна. Но я обычно все упрощаю, сделать что-то универсальное гораздо прибыльнее какого-то определенного направления. Взять идею, хорошую идеию которая может двигаться во всех направлениях и дальше в зависимости от предпочтений начинать движение, но естественно нужно соотношать свои средства к возможностям. Если мой бизнес будет удачен, то возможно я напишу книгу или сделаю видео туториал)

Мб курсы по Oracle или/и MS SQL Server запилишь?

Насчёт редактора, если ты только начинаешь заниматься вёрсткой то да - редактор пригодится, а если гавнокодиш уже более 10 лет то и блокнота типа нотпад++ предостаточно, ито только для подсветки синтаксиса =)) А насчёт писания стиля внутри кода не соглашусь! По хорошему да, его нужно выносить в css, но если у тебя идёт генерация и какие-то уникальные параметры задаются из админки - от этого никак не убежать! 2-также по опыту, часто бывает такое что какой-то класс используется еденично и его проще засунуть в само тело документа. чем в общий список и потом вспоминать - нафига он нужен и где он используется!

Автор, рекомендую тщательнее готовить видео. В частности на 6 минуте, где ты говоришь про блочные и строчные элементы. В качестве примера показываешь, что нельзя вкладывать в тег ссылки заголовок a>h2 в нужно h2>a так вот почитай спецификацию html5 доктайп которого ты так смело и по умолчанию пишешь уже не один год, в которой написано, что в html5 ссылкой можно оборачивать и блочные и строчные элементы. В целом про блоки и строки сказал верно, просто пример выбрал не удачный, толь от не знания толи по какой то другой не ведомой причине...

Уважаемый, Web Developer Bloger, Вы отстали от жизни. В HTML5 специально предусмотрена такая вещь, как вкладывание блочных элементов в строчные. И конкретно, для тэга . В него разрешено (и это становится всё популярней) вкладывать блочные элементы.

Основные ошибки 1. Не использование современного редактора кода : 01:40 2. Название Классов : 02:57 3. Не использование Семантических тегов : 03:46 4. Не использовать стили в html коде: 04:17 5. H1 : 04:59 6. Использование блочного элемента внутри строчного : 05:23 7. Нет 7 ошибки 8. Рекомендация использование валидатора : 06:32

в 26 норм начинать? Косо не будут смотреть работодатели, если я приду на джуниора в 28?

"БУДЬ ТЫ ПРОКЛЯТ" ))))) Я из-за ТЕБЯ решил стать программистом...Для начала - верстальщиком, а, уж потом, как карта ляжет. И это в 30+ с хвостиком...... Жил себе спокойно, не вспоминал прошлое, где когда-то баловался....не писал полноценные сложные проекты - а баловался этим, увлекался. Из-за определенных казусов и превратностей судьбинушки - пришлось забросить все и приземлиться в более просто области и профессии....И тут, нашел ТВОИ видео - чтоб тебя ))))))))))))))) Не знаю, но ТЫ, даже минусы работы программистов преподносишь так, что хочется в это все окунуться с головой.... Начал снова изучать HTML/CSS.....Даже на Javascript стал дурно косить глазом.... Кругом знакомые говорят, что я ***улся под старость. И о том, что в таком возрасте, если не стать Билл Гейтсом - никуда работать не примут, мол - слишком поздно и возраст не подходящий (внегласное правило корпораций и компаний IT). Читаю книжки, смотрю раз за разом твои видео...и понял одно, - плевать на мнение и предрассудки окружающих, прорвемся.

если конкретный тег img не контентный( служит для декора), alt все равно должен быть, но пустой=> ""; это допускается, даже рекомендуется.

Про методологию Яндекс-БЭМ, почему-то ничего не упомянули?:) При помощи неё верстка была бы ещё профессиональней и наглядней.

Мне бы это видео посмотреть 10 лет назад...

Я так и не понял, правильно или не правильно использовать h1 только один раз?

С сокращениями имен классов не согласен. Бутстрап половину сокращает до 1 буквы, html вааще весь в сокращениях, на полноименном xslt руки отобъешь набирать. Ест же firebug. Там и смотрим классы.