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

2018 ж. 28 Қыр.
411 132 Рет қаралды

В этом видео мы поговорим про верстку сайта. Сегодня я расскажу основные ошибки начинающих при верстке сайта. Верстка сайта html css дело не сложное, все когда-то начинали, а начало в веб разработки как раз и происходит с верстки сайтов. Вы изучаете основные теги html, далее стилизацию css, пытаетесь это объединить и начинаете верстать сайты. Для кого-то этот этап проходит очень быстро, кому-то приходится по мучатся с версткой пока не придет полное понимание происходящего. Когда верстаешь свои первые сайты, то не обращаешь внимание на некоторые ошибки и недочеты в своей работе. Так вот я покажу типичные ошибки верстки, старайтесь больше не допускать данных ошибок.

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

    @artyshock569@artyshock5695 жыл бұрын
    • С начала, хотел вступить с тобой в спор, но посмотрев на название видео желание пропало)

      @ivanpoberezhniuk9694@ivanpoberezhniuk96945 жыл бұрын
    • Щас бы ланос на газу иметь... Кому какая разница какая у тебя тачка если 100км тебе обходятся в 93 грн.

      @user-du3zt7ui8f@user-du3zt7ui8f4 жыл бұрын
    • Плохо, когда ты ездишь на Ланосе (или Приоре) и не считаешь что это гаечное ведро для лохов. Никакой самокритики - это ж отвратительно! Хотя подсознательно ты ж всё равно понимаешь, что десятки моментов тебя напрягают и бесят, но всё равно будешь кушать свой кактус, и всем рассказывать, что вот Ланос - для трушных пацанов, а камри - для бап.

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

    @user-zh3yg1kn1l@user-zh3yg1kn1l5 жыл бұрын
    • Gertsog валидатор для слабаков)

      @iwantgames@iwantgames5 жыл бұрын
    • Пасибо)

      @bekzatkamen329@bekzatkamen3295 жыл бұрын
    • 2) иногда сокращения нужны, например, кнопку можно назвать btn_green, вместо button_green. 3) можно и создать, кому как удобно. Например, nav может быть несколько, в шапке, в сайдбаре, в футере. Можно конечно писать footer nav a {идут стили} и так каждый раз для сайдбара и хедера, а можно дать один класс и отталкиваться от него, это уменьшит размер кода. Тоже самое для тегов section, их на странице может быть множество, как-то же их надо определять.

      @user-qz4pq2gu4w@user-qz4pq2gu4w5 жыл бұрын
    • Спасибо огромное, а то я уже собирался закрывать видео от излишка воды

      @lucslenovak8356@lucslenovak83564 жыл бұрын
    • @@user-qz4pq2gu4w, если вёрстка будет состоять только из одних классов, то это не вёрстка будет, а каша. Разумнее использовать и id, особенно там, где это применяется только однажды. А class использовать там, где много раз повторяются объекты, например, Главная Об авторе Статьи Обратная связь Что касается редактора, то каждый выбирает что - то своё. Я использую Notepad++ и мне он нравится больше чем раздутые до круглого пузыря редакторы. Notepad++ очень хорошо подходит для новичков. теги тоже никуда не ушли, они и до сих пор работают, и с ними тоже верстаются сайты, но их просто меньше стали использовать, а так они остались, никто не отменял их.

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

    @MsMatamune@MsMatamune4 жыл бұрын
    • Как успехи?

      @dima_govnomych@dima_govnomych3 жыл бұрын
    • @Ast Kch сегодня выложил новые проекты по строительтву на сайты по работе.

      @MsMatamune@MsMatamune2 жыл бұрын
  • Спасибо огромное тебе за твои труды!!! Крепкого здоровья! Все очень приятно и информативно!)

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

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

    @yuriypavlenko3539@yuriypavlenko35394 жыл бұрын
    • Есть такое дело

      @SuprunAlexey@SuprunAlexey4 жыл бұрын
    • background-color:это CSS-фон; img: изображение

      @user-yj7wh3zv1e@user-yj7wh3zv1e4 жыл бұрын
    • @@user-yj7wh3zv1e ахаха) ок, спасибо

      @VazheninR@VazheninR4 жыл бұрын
    • Пиздец! Нафиг это нужно?! Я против написания говнокода, но писать максимально "чистый код" не нужно. Надо делать так как легче и удобнее.

      @buturum6540@buturum65404 жыл бұрын
    • Пустые div-ы тоже не целесообразно оставлять.

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

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

    @DV_28rus@DV_28rus4 жыл бұрын
  • Начало на 1:40

    @RobertBojestvenniy@RobertBojestvenniy5 жыл бұрын
    • Начало на 0:00

      @SuprunAlexey@SuprunAlexey5 жыл бұрын
    • XD

      @ArthurIdrisov@ArthurIdrisov5 жыл бұрын
    • удивлен

      @SuprunAlexey@SuprunAlexey5 жыл бұрын
    • продлил жизнь на 1 минуту

      @ddj3625@ddj36255 жыл бұрын
    • тоже хотелось такой камент сделать, напилась воды на 1 минуту 40 сек

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

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

    @itbeard@itbeard5 жыл бұрын
    • Слишком сложно для плебса

      @user-do6hk5md9n@user-do6hk5md9n5 жыл бұрын
    • На самом деле их больше трёх: есть ещё table, grid, flex и т.д.)))

      @LavSExpert@LavSExpert4 жыл бұрын
    • Привет бороде

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

    @evgeniyperekhod9278@evgeniyperekhod92785 жыл бұрын
  • Спасибо. Дельные советы.

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

    @quantforce@quantforce5 жыл бұрын
  • Век живи, век учись. Спасибо за подсказку про редактор.

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

    @user-hi9lb2wr2v@user-hi9lb2wr2v5 жыл бұрын
  • Если у картинки нет alt и она несет декоративный характер, то задают её через css.

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

    @MxMayers@MxMayers5 жыл бұрын
    • Верно

      @SuprunAlexey@SuprunAlexey5 жыл бұрын
  • Спасибо, мне было интересно

    @lolololco911@lolololco9115 жыл бұрын
  • Отличное видео, спасибо!

    @neiros6685@neiros66855 жыл бұрын
  • Интересно, спасибо.

    @ilyao.naumenko7680@ilyao.naumenko76805 жыл бұрын
  • Полезно. Большое спасибо за видео!

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

    @selindra@selindra4 жыл бұрын
    • Спасибо!

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

    @user-wx5sh4sy3g@user-wx5sh4sy3g Жыл бұрын
  • Я из тех людей которые пользуются переводчиком чтобы назвать класс)

    @user-lx6vw7we2q@user-lx6vw7we2q5 жыл бұрын
    • чтобы

      @ba11istique40@ba11istique405 жыл бұрын
    • Всю жизнь учу Английский и так и не знаю

      @user-wh4di4xo1b@user-wh4di4xo1b5 жыл бұрын
    • как я вас понимаю)Но, есть проблема, с которой переводчик не справляется, сократил так что и не помнишь, какой класс , что обозначает. =)

      @Independent19c@Independent19c5 жыл бұрын
    • @@user-wh4di4xo1b Проблема не на Вашей стороне. Нет горе-учеников (плохих учеников), есть горе-учителя (плохие учителя). Оксфорд и кембридж и их грамматики, т.е. вся методика преподавания английского в мире от этих школ - и есть глухое попадалово. Я в этом разобрался сам и сейчас пробую объяснить это на своей странице в Fb, приглашаю.

      @vsevolodabaturov4661@vsevolodabaturov46615 жыл бұрын
    • Примерно к такой же логике (что английский неправильно преподают - только сложнее делают его изучение) я пришел сам в процессе освоения. Многое в нем вводится искусственно и только усложняет процесс изучения. @@vsevolodabaturov4661

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

    @onebytesiteit30-75@onebytesiteit30-753 жыл бұрын
  • Спасибо! Доступно и понятно.

    @user-zb5vp8me5k@user-zb5vp8me5k2 жыл бұрын
  • Не могли бы вы напомнить есть ли отдельный урок по тому какими тегами лучше выделять разные смысловые части страницы и вообще какая стандартизация при верстке (например как с было тегом (про его разовое использование) ) ?

    @Kancernik@Kancernik5 жыл бұрын
    • Есть самоучитель html

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

    @marharytahlinskaya1165@marharytahlinskaya11655 жыл бұрын
    • Про это сделаю отдельное видео

      @SuprunAlexey@SuprunAlexey5 жыл бұрын
    • как успехи спустя 9 месяцев?

      @MySergey23@MySergey234 жыл бұрын
    • Сергей а у тебя как успехи?

      @gorillatv577@gorillatv5774 жыл бұрын
    • @@gorillatv577 а у тебя как успехи?

      @branilul@branilul Жыл бұрын
    • @@branilul купил Мазерати год назад

      @gorillatv577@gorillatv577 Жыл бұрын
  • Спасибо!!

    @user-em3yi6zr7b@user-em3yi6zr7b4 жыл бұрын
  • Спасибо за видео! Не знал, что можно только 1 раз юзать.

    @hadwayx@hadwayx4 жыл бұрын
    • Это также правильный подход по отношению к SEO.

      @turtrueweb@turtrueweb4 жыл бұрын
    • @@turtrueweb судя по спецификации, то Заголовок первого уровня можно запихать несколько. Хотя раньше считалось, что нужно лишь 1.

      @Prorok1987@Prorok19874 жыл бұрын
    • @@Prorok1987, да.

      @turtrueweb@turtrueweb4 жыл бұрын
  • Привет подскажи по семантике. Напимер

    @martDKNY@martDKNY5 жыл бұрын
  • пасиб за советы.

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

    @user-lb7ff9iy9s@user-lb7ff9iy9s5 жыл бұрын
    • И жить стало легче:)

      @SuprunAlexey@SuprunAlexey5 жыл бұрын
    • :)

      @user-lb7ff9iy9s@user-lb7ff9iy9s5 жыл бұрын
    • Затем я перешёл на VS Code и жить стало ещё лучше.

      @user-vj7eo4ps5o@user-vj7eo4ps5o5 жыл бұрын
    • надо будет сделать видео по VS code

      @SuprunAlexey@SuprunAlexey5 жыл бұрын
  • Классный контент.мне понравилось

    @user-iv7ty6pu1o@user-iv7ty6pu1o5 жыл бұрын
  • когда это тег стал строчным?

    @pavelvikhristyuk3653@pavelvikhristyuk36535 жыл бұрын
    • ))0)

      @developerninja619@developerninja6195 жыл бұрын
    • ржака

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

    @user-lt9ft1mi9h@user-lt9ft1mi9h5 жыл бұрын
    • А по-моему у списков свой отдельный тип элементов. Точно не помню как называется, но точно не block

      @sergeybatura8241@sergeybatura82415 жыл бұрын
    • developer.mozilla.org/ru/docs/Web/HTML/Block-level_elements

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

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

    @Sadamitsu@Sadamitsu5 жыл бұрын
    • Яйца у тебя стальные, суп ешь вилкой и тебя боится даже Чак, ты крутой))

      @user-ei5gy6mo4g@user-ei5gy6mo4g5 жыл бұрын
    • Коммент сильного и независимого фронтера

      @droox6372@droox63725 жыл бұрын
    • Это всё круто ровно до тех пор, пока заказчик не засунет твоё творчество в валидатор, не не увидит там зелёной галки и не не примет твою работу. В итоге ты потерял время и репутацию, зато сам себе режиссёр. :)

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

    @yevheniikozkin1449@yevheniikozkin14495 жыл бұрын
    • В вёрстке практике об этом расскажу тогда, уточню эти моменты

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

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

    @wickedtorpedo75@wickedtorpedo754 жыл бұрын
    • А где посоветуешь учиться вёрстке?

      @s.p.1190@s.p.11902 жыл бұрын
  • Спасибо, я хоть и новичок, но этих ошибок не совершаю )

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

    @almostwhole7439@almostwhole74395 жыл бұрын
  • li is block element not inline

    @XATADOM@XATADOM5 жыл бұрын
  • информативно !

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

    @user-zo9jd3iz1i@user-zo9jd3iz1i4 жыл бұрын
  • Ну однозначно лайк

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

    @fullstackonpython8138@fullstackonpython81384 жыл бұрын
    • может быть FronТ-end и Back-end?)

      @alexsunrise54@alexsunrise544 жыл бұрын
    • @@alexsunrise54 не видишь он бедняга в notepad писал всё?)) оставь его, намучился уже)))

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

    @user-cl8bc9vv1r@user-cl8bc9vv1r5 жыл бұрын
    • Лучше быть в этом деле максималистом

      @SuprunAlexey@SuprunAlexey5 жыл бұрын
  • Толково)

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

    @timurkash@timurkash4 жыл бұрын
    • поэтому у на полно страшных сайтов верстают как хотят

      @liisaification@liisaification9 ай бұрын
  • Grazie mille Fratello!)

    @user-tu9bu4vt8r@user-tu9bu4vt8r3 жыл бұрын
  • Братаник сделай видос по позиционированию, отдельной темой.

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

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

    @ROTOFFLOLKA@ROTOFFLOLKA5 жыл бұрын
    • Сделаем

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

    @user-fn1xe6qk8e@user-fn1xe6qk8e5 жыл бұрын
  • спасибо

    @KuKu_RuKu88@KuKu_RuKu884 жыл бұрын
  • Спасибо за советы, полезно. Хорошее видео!

    @user-rh5fm4eu1f@user-rh5fm4eu1f5 жыл бұрын
  • h1 тег вроде можно несколько раз использовать, eсли каждый раз внутри тега hgroup на ряду с другими h

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

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

    @iwantgames@iwantgames5 жыл бұрын
    • Я тоже это в какой-то статье читал... Я думаю автор ошибся

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

    @sqqa108@sqqa1085 жыл бұрын
    • Насчёт тега

      @ArabicLang.online@ArabicLang.online5 жыл бұрын
  • По большому счёту согласен со всем.

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

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

    @AJIEKCAHDP_CEPrEEBI14@AJIEKCAHDP_CEPrEEBI145 жыл бұрын
    • Альт и тайтл прошлый век так то, если Яндекс и Гугл уже и без этого научились картинку переваривать и понимать что на ней нарисовано.

      @senditoy@senditoy5 жыл бұрын
  • в chrome есть расширение Validate Document. удобно

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

    @maypolonski1761@maypolonski17615 жыл бұрын
    • По началу нужно привыкать к нормальным современным технологиям, инструментам и методологиям и писать от руки в них.

      @charleksvikto@charleksvikto5 жыл бұрын
    • Александр Гончаров не-а, когда учишься, весь код надо писать самому, иначе это плохо усвоится и через некоторое время ты это забудешь. А когда уже изучил все и уже работаешь, то нужно использовать эти инструменты

      @STRELOK-wq6on@STRELOK-wq6on5 жыл бұрын
    • Если в детстве обои не разрисовывал, то советую именно так начинать - что ни на есть самые азы 😏

      @Sazhnikov@Sazhnikov5 жыл бұрын
    • @@STRELOK-wq6on Согласен с вами, пока учишься лучше все писать ручками, только что мешает весь код писать ручками в том же саблайме а не ломать глаза в блокноте? )))

      @Al-Mas3000@Al-Mas30005 жыл бұрын
    • @Патрик Стар лол

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

    @PashaDefragzor@PashaDefragzor5 жыл бұрын
  • В html5 можно в ссылку блочные элементы вставлять

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

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

    @ukar2@ukar25 жыл бұрын
    • Ага мне тоже заказчик дифирамбы пел, пока в спецификацию его не тыкнул.

      @galaxywork1570@galaxywork15705 жыл бұрын
    • И не только в html5 , а в xhtml transitional тоже можно было. Просто желательно так вкладывать, ну а когда нет выбора - то как есть.

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

      @sqqa108@sqqa1085 жыл бұрын
    • @@galaxywork1570 , дифирамбы - это когда хвалят, а не то, что вы имели тут в виду.

      @savel2work@savel2work4 жыл бұрын
    • подскажите, в предыдущих спецификациях вкладывание блочного в строчным было неверно семантически или такая конструкция впринципе не работала?

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

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

    @Tavda@Tavda4 жыл бұрын
    • О великий мастер. Дайте тоже советы для зеленых огурчиков.

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

    @user-hh4vp5uo3f@user-hh4vp5uo3f4 жыл бұрын
  • Щас бы саблаймом пользоваться))

    @DaemonHK666@DaemonHK6665 жыл бұрын
  • Основные ошибки 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

    @OyNice@OyNice5 жыл бұрын
    • 7 пункт не ошибка, но сеошники потом замучают своими альтами)))

      @Al-Mas3000@Al-Mas30005 жыл бұрын
    • поздно, я уже потратил свое время (

      @tamirlanomarov1140@tamirlanomarov11404 жыл бұрын
  • Про валидатор: охренеть, я вообще не знал о его существовании.

    @a4yster@a4yster4 жыл бұрын
    • Полезно

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

    @charleksvikto@charleksvikto5 жыл бұрын
    • stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct

      @charleksvikto@charleksvikto5 жыл бұрын
    • @@charleksvikto не все блоки в ссылку можно вставить...попробуй для примера вткнуть в тэг А -> article...сильно удивишься

      @Beast8833@Beast88335 жыл бұрын
    • @@Beast8833 дааа? а где это написано? ссылку на стандарт в студию! без нее твои слова всего лишь твое личное мнение, не подкрепленное ничем... и расскажи ка мне еще с аргуметом в виде ссылки чем таким страшным кроме семантической нагрузки отличается article от обычного div?

      @charleksvikto@charleksvikto5 жыл бұрын
    • @@charleksvikto ты дурач0к или прикидываешься? сделай базовую разметку и посмотри сам)

      @Beast8833@Beast88335 жыл бұрын
    • @@Beast8833 не не не, дурачек тут по ходу ты, я то разметку сделал и валидатором проверил, на всякий случай) а вот от тебя я сейчас никаких весомых аргументов не увидел) ты сначала докажи правоту своих слов а потом людей дураками называй, хотя лично я тебя не оскорблял...

      @charleksvikto@charleksvikto5 жыл бұрын
  • Дякую. Стараюся робити так як ти сказав.

    @bodamat@bodamat5 жыл бұрын
    • Отлично!

      @SuprunAlexey@SuprunAlexey5 жыл бұрын
  • На дворе почти 2019, надо использовать современные и sublime text 3. Ok

    @oldLGND@oldLGND4 жыл бұрын
  • я весь блок ( рекламного анонса) обертываю в

    @tamirlanomarov1140@tamirlanomarov11404 жыл бұрын
    • ууу, вот это уродство так делать

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

    @user-nj3fg4wt6x@user-nj3fg4wt6x3 жыл бұрын
    • Посмотрите у меня видео Верстка сайта как начать

      @SuprunAlexey@SuprunAlexey3 жыл бұрын
    • @@SuprunAlexey Благодарю,многие говорят поздно, но это выход дожить до пенсии если освоить , что скажете

      @user-nj3fg4wt6x@user-nj3fg4wt6x3 жыл бұрын
    • @@user-nj3fg4wt6x никогда не поздно

      @SuprunAlexey@SuprunAlexey3 жыл бұрын
    • Благодарю за ответ , если можно пообщаться буду рад ?

      @user-nj3fg4wt6x@user-nj3fg4wt6x3 жыл бұрын
    • @@user-nj3fg4wt6x ну пишите комментарии, буду отвечать. Под любыми видео.

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

    @makormak01@makormak014 жыл бұрын
  • Это не редактор кода саблайм и его плагины а конкретно emmet. Новичку противопоказано использовать emmet, на бумаге нет emmet-а, когда вас попросят написать код на бумаге во время собеседования, тут и все закончиться если вы использовали емет сразу по старту карьеры.

    @LuckyStar1457@LuckyStar14575 жыл бұрын
    • уже давно не пишут код на листиках, да и думаю с html проблем то особо не будет))

      @SuprunAlexey@SuprunAlexey5 жыл бұрын
    • пишут, но и проверяют общий смысл

      @rewlads@rewlads5 жыл бұрын
    • Еще как пишут. И не только html, но также и js и все остальное. И этот критерий четко отличает на собеседовании тех, кто реально что-то делает от копипастеров.

      @albat6538@albat65385 жыл бұрын
  • Саблайм текст, 2023 год. Ржу))) 8 пункт - в топку! Ставим ВСкод или Вебшторм и не паримся

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

    @_Fantom_.@_Fantom_.5 жыл бұрын
    • Notepad пользуется популярностью у новичков

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

    @alipag6810@alipag68104 жыл бұрын
    • Пойщи решение в интернете тут новички смотрят обычно

      @justvasily8762@justvasily87624 жыл бұрын
  • Сделайте пожалуйста видео о том что делается с сайтом после верстки и кто что делает ?

    @neoknight9041@neoknight90413 жыл бұрын
    • Посмотрите любой из курсов по верстке у меня на канале

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

    @metis2432@metis24325 жыл бұрын
    • удивлю тебя, но на саблайм терминал можно тоже поставить

      @SuprunAlexey@SuprunAlexey5 жыл бұрын
    • На саблайм это не то

      @metis2432@metis24325 жыл бұрын
  • Доброе утро Кэп

    @lukfo530@lukfo5304 жыл бұрын
    • Здравствуйте

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

    @gennadystolbov@gennadystolbov5 жыл бұрын
  • Эйб, ты забыл про сео-семантику в верстке рассказать! А про семантику тегов это как давно уже есть? Вроде когда я начинал учить html принято было просто div юзать

    @toyotominashimoto9963@toyotominashimoto99633 жыл бұрын
    • Давно начинал учить?

      @SuprunAlexey@SuprunAlexey3 жыл бұрын
    • В 2017м году

      @toyotominashimoto9963@toyotominashimoto99633 жыл бұрын
    • @@toyotominashimoto9963 та и тогда уже было

      @SuprunAlexey@SuprunAlexey3 жыл бұрын
    • А когда конкрентно то появился этот стнадарт?

      @toyotominashimoto9963@toyotominashimoto99633 жыл бұрын
    • @@toyotominashimoto9963 наверное в 2014 или около того, могу ошибаться

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

    @buyshark3838@buyshark38385 жыл бұрын
    • Вот так

      @SuprunAlexey@SuprunAlexey5 жыл бұрын
    • Нежелательно юзать тег img если он неконтентный, наверное больше подойдёт свойство background-image. При отключении js и css на странице не должно оставаться украшательств, свистоперделок, только контент.

      @macaronivirus5913@macaronivirus59135 жыл бұрын
    • Подскажите пожалуйста, а что лучше использовать для логотипа; img в html или background в css?

      @alexandrcorbin1709@alexandrcorbin17095 жыл бұрын
    • лучше svg

      @macaronivirus5913@macaronivirus59135 жыл бұрын
  • Мб курсы по Oracle или/и MS SQL Server запилишь?

    @fifer-ht7rd@fifer-ht7rd5 жыл бұрын
    • А есть спрос?

      @SuprunAlexey@SuprunAlexey5 жыл бұрын
    • Web Developer Blog Лично меня бы заинтересовало

      @fifer-ht7rd@fifer-ht7rd5 жыл бұрын
    • ну подумаю

      @SuprunAlexey@SuprunAlexey5 жыл бұрын
    • Web Developer Blog пхп практика обещанная когда будет?) одни видосы для рекламы и новичков( которых уже более чем достаточно) пилишь

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

    @shilka94@shilka94 Жыл бұрын
  • С CSS я не согласен. Чем больше подключаешь CSS, тем больше нагрузки идет на сервер. Кроме того, CSS нужно сжимать, для более быстрого отображения стилей. Личто я, чтобы удовлетворить тот же Google Pagespeed, стили хедера, закрываю в в. Остальные стили таким же способом перед началом блока того или иного элемента. К примеру стилям футера незачем обрабатываться в их лучше кидать в футер. Стили страницы со статьей - только в шаблоне статьи. Зачем им быть на главной странице? Слушайте, я больше самоучка, но не раз слышал о надобности подгружать новые файлы стилей под каждый блок. Зачем?

    @DeniWassulmaier@DeniWassulmaier5 жыл бұрын
    • И в случае, если тебе нужно изменить цвет фона на всех страницах, или сделать футер чуть выше, ты пробегаешь по всем страницам в редакторе и меняешь значения? Это может быть быстрее, но время твоё явно не будет экономить.

      @aquinary.@aquinary.5 жыл бұрын
    • Зачем бегать по всем страницам? Если нужно менять футер - я лезу в футер, если цвет фона на всех страницах - в хедере ищу body.

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

    @jaroslavsbriedis7769@jaroslavsbriedis77693 жыл бұрын
    • Не каждый редактор кода этим занимается

      @SuprunAlexey@SuprunAlexey3 жыл бұрын
    • Это две разные проверки. Редактор не проверяет так обширно и разносторонне.

      @stormd2902@stormd29023 жыл бұрын
  • А Brackets можно в веб разработку?Просто мне она нравится.

    @user-xt2hs9zx1t@user-xt2hs9zx1t5 жыл бұрын
    • Да пожалуйста, - пользуйтесь хоть блокнотом))))

      @SHKEd7@SHKEd75 жыл бұрын
  • Хочу добавить еще одну ошибку. CSS стили писать внутри html файла в между тегами . А также картинки, стили, скрипты хранить в корневой директории, вместо соответствующих отдельных папок каждого типа элемента.

    @user-qz4pq2gu4w@user-qz4pq2gu4w5 жыл бұрын
    • А по-русски можно?

      @dima_govnomych@dima_govnomych3 жыл бұрын
    • А то ничего не понятно:(

      @dima_govnomych@dima_govnomych3 жыл бұрын
KZhead