Топ-7 фишек HTML/CSS верстки сайта которые ты должен знать

แชร์
ฝัง
  • เผยแพร่เมื่อ 29 ม.ค. 2025

ความคิดเห็น • 307

  • @ivankuzmich4539
    @ivankuzmich4539 4 ปีที่แล้ว +280

    Cirklе - это сильно))

    • @web8845
      @web8845 4 ปีที่แล้ว +3

      Злорадствуете, уважаемый

    • @nurasylmelsuly1863
      @nurasylmelsuly1863 4 ปีที่แล้ว +21

      Кратко о моем уровне английского)

    • @hilight3r
      @hilight3r 4 ปีที่แล้ว +21

      rigt 😬

    • @роррголлл
      @роррголлл 4 ปีที่แล้ว +3

      О, да вы из англии

    • @1stabatvoix
      @1stabatvoix 4 ปีที่แล้ว +9

      Sirckle же!

  • @SuprunAlexey
    @SuprunAlexey  4 ปีที่แล้ว +35

    Пишите комментарии, все читаю и отвечаю ✌🏻

    • @deanArtDev
      @deanArtDev 4 ปีที่แล้ว

      Можно центровать в 2 строчки. Контейнеру display: flex; флекс-элементу margin: auto; =)

    • @hilight3r
      @hilight3r 4 ปีที่แล้ว

      Самолайк - закон успеха.

    • @MaxBondarenko
      @MaxBondarenko 4 ปีที่แล้ว

      Для это всего библиотеку script.js обязательно подключать? У вас на видео подключена

    • @SuprunAlexey
      @SuprunAlexey  4 ปีที่แล้ว +2

      Max Bondarenko ни для чего, в этом видео можете не подключать, то с прошлых уроков осталось

    • @k3Ng0T
      @k3Ng0T 10 หลายเดือนก่อน

      братан спасибо тебе, я узнал что можно написать вместо background-size bs)

  • @Artem-hd6ou
    @Artem-hd6ou 4 ปีที่แล้ว +30

    За clip-path - лайк! Всю жизнь для задач с необычными формами блоков с картинками просто использовал png, теперь смогу делать поинтереснее!)

    • @jowenerjowener8672
      @jowenerjowener8672 3 ปีที่แล้ว +2

      я тоже! спасибо автору, годный видос!

    • @gritsienkooleg3447
      @gritsienkooleg3447 2 ปีที่แล้ว

      Да, реально спасибо!

  • @stanf5488
    @stanf5488 4 ปีที่แล้ว +48

    Настоящий трудяга - почти в час ночи видео вышло.

    • @SuprunAlexey
      @SuprunAlexey  4 ปีที่แล้ว +7

      Ага, заслуживает лайка

  • @aitify6880
    @aitify6880 3 ปีที่แล้ว +4

    Ого!!!
    Про анимацию реальный респект)))
    Сделай в следующем видео переходы (like transition)

  • @romanvik
    @romanvik 4 ปีที่แล้ว +5

    Спасибо за clip-path, все ясно и понятно и ничего лишнего в видео, а то у других такое на час растягивают.

    • @romastyi83
      @romastyi83 4 ปีที่แล้ว

      Ага)) какие-то цифры делают что-то))

  • @hannasavostianova7155
    @hannasavostianova7155 4 ปีที่แล้ว +12

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

    • @l_e_g_e_n_d_a_37cehat89
      @l_e_g_e_n_d_a_37cehat89 2 หลายเดือนก่อน

      Ну че, родной, как успехи за 4 года?

  • @khalilmutallibov
    @khalilmutallibov 4 ปีที่แล้ว +4

    Большое спасибо вам! Недавно начал изучать html/css/js, я думаю это поможет. Продолжайте делать такой контент!

  • @anamillor8416
    @anamillor8416 2 ปีที่แล้ว

    Какие классные у тебя видео 👍🏻👍🏻👍🏻 Не понимаю, почему люди не ставят лайки. Можно потрудиться и коммент оставить. Мне кажется, твой контент того стоит!

  • @apache5446
    @apache5446 4 ปีที่แล้ว

    Лучше я не видел. Постарался и изложил кратко и доступно. Конечно же продолжай делать так хорошо и дальше)

  • @ДмитрийСергеев-е7ь
    @ДмитрийСергеев-е7ь 4 ปีที่แล้ว +1

    Очень крутой подход, информация прям зашла как нужно!
    Хочется увидеть урок, про стилизацию форм (radiobutton, checkbox, text) ввод формы данными и отправка заполненных данных юзером себе на почту или телеграмм. Перекопал внятного ничего на эту тему не нашел. Спасибо за урок!!!

  • @somwho_somewhere
    @somwho_somewhere 4 ปีที่แล้ว +2

    Сначала лайк, потом смотрю!

  • @ВладимирТюрин-з6е
    @ВладимирТюрин-з6е 4 ปีที่แล้ว +2

    Спасибо. Реально нужная и ценная информация. Просто, быстро и понятно! Удачи!

  • @mr.greenns6267
    @mr.greenns6267 4 ปีที่แล้ว

    Чуваки ставьте лайки, а не просто смотрите. Просто человек старается, а так вяло набираются лайки как бы тафталогично это не звучало. Тем более информация то полезная.

  • @insomniad2317
    @insomniad2317 4 ปีที่แล้ว

    Видео снова огонь . Все четко и понятно , ещё бы таймлайн под видео или хотя разбивку по темам с указанием времени и пару тем в названии о чем будет разговор в видео чтоб оно не утонуло в закладках с одинаковыми именами и было сразу видно и легко найти интересующую фишку. Лайк

  • @aibartolegenov7784
    @aibartolegenov7784 3 ปีที่แล้ว

    лучший канал, всем советую. Вот только многие ролики уже старые

  • @qaswert167
    @qaswert167 4 ปีที่แล้ว +1

    Лайк! Без воды все четко, быстро

  • @dinalytvynenko6780
    @dinalytvynenko6780 4 ปีที่แล้ว +3

    Спасибо! Рубрика классная! Продолжение будет весьма актуально.

    • @SuprunAlexey
      @SuprunAlexey  4 ปีที่แล้ว +1

      Ооооо, как нибудь сделаю

  • @_Fantom_.
    @_Fantom_. 4 ปีที่แล้ว

    Лови лайкос, амигос, фишки супер!

  • @m_mariya_mari
    @m_mariya_mari 4 ปีที่แล้ว +5

    Класс! И к черту плагины- анимашки, все ручками и головой можно сделать 👍👏

    • @extov7759
      @extov7759 4 ปีที่แล้ว +4

      К черту флексы, пойду на таблицах делать)

  • @Anastasia-oe9fr
    @Anastasia-oe9fr 4 ปีที่แล้ว +1

    Очень крутая рубрика! Спасибо, ждём ещё!!!

  • @GreatNorthernWar1700
    @GreatNorthernWar1700 4 ปีที่แล้ว +1

    Очень круто! Побольше бы такой тематики!

  • @skorotanya
    @skorotanya 4 ปีที่แล้ว

    Спасибо. Очень полезные ролики. Без воды и всё понятно.
    Хочется узнать про особенности использования svg картинок. Никак не доберусь самостоятельно.

    • @SuprunAlexey
      @SuprunAlexey  4 ปีที่แล้ว +1

      Приму к сведению

  • @andrii5575
    @andrii5575 4 ปีที่แล้ว

    Просто и понятно. Супер. Давай ещё

  • @goodirkutsk
    @goodirkutsk 4 ปีที่แล้ว

    Зачётно продемонстрировал! Заслуженный Лайк👍

  • @РоманМ-ф3р
    @РоманМ-ф3р 2 ปีที่แล้ว

    Класс! Побольше надо таких уроков ) Респект и уважуха за инфу!

  • @lolalol8404
    @lolalol8404 2 ปีที่แล้ว

    А это нормально, что привстает от уроков этого парня? Бомбический контент

  • @eleukhin
    @eleukhin 4 ปีที่แล้ว +5

    Замечание по №6: можно было transform-duration указать для transform: scale(1.3)), чтобы изображение "не прыгало", только указывать на селектор элемента, а не на :hover

  • @bigthinks2290
    @bigthinks2290 4 ปีที่แล้ว

    Рубрика пушка!🦾
    Спасибо за труд! Пили ещё!🙌🏽

  • @diar7874
    @diar7874 ปีที่แล้ว

    Это видео невероятное, спасибо

  • @ИЗБАЧИТАЛЬНЯ-ш9о
    @ИЗБАЧИТАЛЬНЯ-ш9о 3 ปีที่แล้ว

    you are cool/ больше бы таких видосов

  • @kaizadi28
    @kaizadi28 4 ปีที่แล้ว

    Спасибо. Смотрю я на это и приунываю. Вроде все и предельно понятно и непонятно сразу. Очень надеюсь за 3 месяца освоить html и css чтобы хоть зацепиться и начать работать за еду

    • @_S0MNAMBU1A_
      @_S0MNAMBU1A_ 3 ปีที่แล้ว

      Ну как ты? Освоил?

  • @АрсенийПятецкий-ы6д
    @АрсенийПятецкий-ы6д 3 ปีที่แล้ว

    Больше бы таких видео.СПАСИБО ЧТО ДЕЛИШСЯ С НАМИ ЗНАНИЯМИ for free.

  • @izi.papizi
    @izi.papizi 4 ปีที่แล้ว

    Спасибо большое за это видео. Мне как начинающему очень интересно и полезно!

  • @natalianadi
    @natalianadi 3 ปีที่แล้ว

    Спасибо! Емко и полезно. Для начинающих(типа меня) - просто фантастика.

  • @hurt7723
    @hurt7723 4 ปีที่แล้ว

    Очень круто ! 😄

  • @vovaka440
    @vovaka440 3 ปีที่แล้ว

    Да были неточности в видео, но спасибо за старание и труд, продолжай в том же духе!

  • @Anwill57
    @Anwill57 4 ปีที่แล้ว +6

    Побольше видосов с фишками! 👍

  • @za_dobro_ya
    @za_dobro_ya 2 หลายเดือนก่อน

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

  • @maxberg524
    @maxberg524 4 ปีที่แล้ว

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

  • @MegaPapoy
    @MegaPapoy 4 ปีที่แล้ว

    такие видосы как всегда пушка, добавил к себе в закладочки

  • @arturlomakin3555
    @arturlomakin3555 4 ปีที่แล้ว +56

    Идеи на следующий выпуск:
    1. Shape-outside
    2. Offset-path
    3. Сделать кастомные input.
    4. Inset
    5. Transition. Ты про анимацию рассказал, а про переходы нет.

    • @ВладФилиппов-ш6щ
      @ВладФилиппов-ш6щ 4 ปีที่แล้ว +5

      как сделать кастомный select без готовых вариантов. чтобы изменялся даже dropdown

    • @КириллАбдулов-ц8м
      @КириллАбдулов-ц8м 4 ปีที่แล้ว +1

      плюсую кастомный input

    • @sergeykazmin2795
      @sergeykazmin2795 4 ปีที่แล้ว

      @@КириллАбдулов-ц8м ::before и ::after вам поможет

    • @klmnprst777
      @klmnprst777 4 ปีที่แล้ว

      +кастомные input и всякие чекбоксы

    • @michaeldeoz
      @michaeldeoz 4 ปีที่แล้ว

      лучше кастомизацию input type="date"

  • @МаксимГринцевич-х5д
    @МаксимГринцевич-х5д 4 ปีที่แล้ว

    Классный видос, делай больше таких

  • @iga6459
    @iga6459 4 ปีที่แล้ว

    отличный фармат видео, для новичков самый раз!!!!

  • @arturkulik1024
    @arturkulik1024 4 ปีที่แล้ว +2

    Круто, спасибо!

  • @romaskhin
    @romaskhin 4 ปีที่แล้ว +1

    Привет я новичок в программировании изучаю Django, но понимаю что без html и css нормально сайт не сделать
    Но не понимаю как соединить например Django и html+css , или так же с JS, буду рад любому ответу:)
    Вопрос тупой конечно для опытных, но все с этого начинали, а так как ты очень опытный в веб разработки, принять информацию от тебя будет очень полезно))

  • @Cycle329
    @Cycle329 4 ปีที่แล้ว +1

    Клас продолжай , я узнал много

  • @mainsport7851
    @mainsport7851 4 ปีที่แล้ว

    Отличный выпуск.

  • @LectorWeb
    @LectorWeb 4 ปีที่แล้ว +1

    У clip-path подержка не очень пока, а так свойство классное, что касается пункта #5 то для лучшего эффекта, обернуть картинку в блок, задать ему размеры и overflow:hidden и так же картинки добавить плавности через transition. Будет намного круче смотреться )

  • @СергейПресняков-о4р
    @СергейПресняков-о4р 3 ปีที่แล้ว +1

    Анимацию передвижения объекта лучше делать через transform, а не через позиционирование (top, left). Иначе может кое-где подлагивать

  • @NikolaNIbel
    @NikolaNIbel 4 ปีที่แล้ว

    Ставлю 1000 лайков и жду продолжения :) 😄

  • @NikitaHoncharovv
    @NikitaHoncharovv 4 ปีที่แล้ว

    Топчик контент👍 Спасибо!

  • @Коннор-ч7е
    @Коннор-ч7е 4 ปีที่แล้ว

    думал старое видео смотрю, а тут оно только недавно вышло

  • @artemmanzhos2681
    @artemmanzhos2681 4 ปีที่แล้ว

    Много полезной информации. Спасибо!

  • @Жизнь-я3ъ
    @Жизнь-я3ъ 2 ปีที่แล้ว

    спасибо!))
    0:34 что за тема с голубой подсветкой? очень понравилась! Красный с зеленым уже достали везде((

  • @ОстапЧичигинаров-ь3ы
    @ОстапЧичигинаров-ь3ы 4 ปีที่แล้ว

    Хороший урок👍👍👍

  • @Mifuragon
    @Mifuragon 4 ปีที่แล้ว

    Полезные примеры, спасибо!

  • @elbiemdoot464
    @elbiemdoot464 4 ปีที่แล้ว

    Спасибо, достаточно познавательно, много для себя нашел

  • @РудыйАлександр-р2б
    @РудыйАлександр-р2б 4 ปีที่แล้ว +1

    5 копеек по поводу анимации. Вместо left/right где это возможно лучше использовать transform: translate. Это избавит от ненужных repaint/reflow.

  • @filiptraum9976
    @filiptraum9976 4 ปีที่แล้ว

    Харош, терь будет более интересный сайт для екзамена :) Спасибо и продолжай )

  • @25id52
    @25id52 4 ปีที่แล้ว +2

    Пасиб, как раз во время.

  • @Мурад-ы3ш
    @Мурад-ы3ш ปีที่แล้ว

    Класс, я об этом уже знал)😅

  • @happypie4859
    @happypie4859 3 ปีที่แล้ว

    Спасибо большое за видео! очень помогло

  • @lefury1337
    @lefury1337 4 ปีที่แล้ว

    Спасибо большое, очень хороший контент и подан качественно.

  • @АнтонМакаров-ъ5е
    @АнтонМакаров-ъ5е 4 ปีที่แล้ว

    Заявлялось, что скорость прокрутки заднего плана будет меньше, чем у переднего. Это подразумевает, что задний всё-таки будет скроллиться, а он встал неподвижно. Спасибо, конечно, но не совсем то, что было заявлено. Можно ли его всё-таки запустить, но медленнее?
    В остальном здорово!

  • @pablodotsetti4437
    @pablodotsetti4437 4 ปีที่แล้ว

    Шикарно. Спасибо.

  • @alexandrucristea9854
    @alexandrucristea9854 4 ปีที่แล้ว +1

    Хорошая серия роликов, спосибо 😊👍🔥

  • @АлександрБаранов-ч6я
    @АлександрБаранов-ч6я 4 ปีที่แล้ว

    Очень полезная информация, спасибо

  • @liubomyrsiusar6589
    @liubomyrsiusar6589 3 ปีที่แล้ว

    А можно ли для №3 ефекта использивать z-index для наложения текста на фото?

  • @mazilofirefox6506
    @mazilofirefox6506 ปีที่แล้ว

    Круто спасибо.

  • @vova2966
    @vova2966 4 ปีที่แล้ว

    Годно!

  • @Strawhat..
    @Strawhat.. 4 ปีที่แล้ว

    Друг, ты пользуешься граф. редакторами типо Avocode или Zeplin? Или только фотошоп?

  • @leonidboyko980
    @leonidboyko980 4 ปีที่แล้ว

    Огонь!!))

  • @ovellon9526
    @ovellon9526 4 ปีที่แล้ว

    Оч круто, спасибо🙏👍

  • @alexdrugs1979
    @alexdrugs1979 2 ปีที่แล้ว

    Какую прогу ты используешь для написания?

  • @panmazurokbunpalolecsandr178
    @panmazurokbunpalolecsandr178 4 ปีที่แล้ว

    Ты лучший)

  • @Dmitriy15486
    @Dmitriy15486 4 ปีที่แล้ว +1

    что ты подключаешь в visual code для того чтобы ставя точку у тебя получался класс, спасибо

    • @SuprunAlexey
      @SuprunAlexey  4 ปีที่แล้ว +1

      Насколько я помню, это уже из коробки работает. Таб просто нажмите и получится блок с классом

    • @Dmitriy15486
      @Dmitriy15486 4 ปีที่แล้ว

      @@SuprunAlexey к сожалению не работает таб, и еще вопрос, есть ли плагины автоматически исправляющие разметку и синтаксис, раставляют отступы, спасибо

    • @tavernaan
      @tavernaan 4 ปีที่แล้ว

      @@Dmitriy15486 Для Brackets есть beautify и emmet (для vc вроде тоже). А .имя_класса[TAB] по дефолту работает

    • @СергейПресняков-о4р
      @СергейПресняков-о4р 3 ปีที่แล้ว

      Это emmet, он в vscode из коробки есть, на остальные редакторы дополнительно ставить надо. Для разметки есть beautify, их полно таких плагинов

  • @ganjackal
    @ganjackal 3 ปีที่แล้ว

    Прикольно но быстро очень рассказал и примеры на верстке есть( урок видео)!?

  • @volydymyr9897
    @volydymyr9897 4 ปีที่แล้ว +5

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

    • @SuprunAlexey
      @SuprunAlexey  4 ปีที่แล้ว +2

      И то и другое

  • @andrTaylor
    @andrTaylor 4 ปีที่แล้ว

    Как сделать анимацию при скроле? Да, я понял что такое keyframes, но как чтобы именно при скроле работало(когда пользователь докрутит до нужного блока)

  • @АнтонФедоринчик-г6ф
    @АнтонФедоринчик-г6ф 4 ปีที่แล้ว

    Крутое видео, спасибо!

  • @vitaliypodolyak3247
    @vitaliypodolyak3247 3 ปีที่แล้ว

    вопрос, а нет какого то расширения которое бы из кода html в css подтягивало созданные классы и в обратном направлении тоже?

    • @СергейПресняков-о4р
      @СергейПресняков-о4р 3 ปีที่แล้ว

      Для VSCode есть eCSStractor. Выделяешь html, правой кнопкой мыши - в меню eCSStractor run, переходишь в css и нажимаешь вставить. А обратно - как программа должна угадать структуру твоего html на основании списка классов css? По моему нет такого

  • @baton4iki
    @baton4iki 4 ปีที่แล้ว

    Спасибо за Clip-path помог)

  • @DmytroPariiev
    @DmytroPariiev 4 ปีที่แล้ว

    Подскажите не работают псевдоклассы кроме hover, для него добавил метатег, остальные не работают в чем проблема?

    • @sergeykazmin2795
      @sergeykazmin2795 4 ปีที่แล้ว

      если они не работают, значит ты их неверно используешь. htmlbook.ru/css/cat/pseudoclass

  • @ФедусьВладислав
    @ФедусьВладислав 4 ปีที่แล้ว

    Очень интересно. Хочу єщо

  • @АнтонФедоренко-ф5ж
    @АнтонФедоренко-ф5ж 4 ปีที่แล้ว

    Привет. Сейчас сижу разбираю CSS и HTML(по нему уже успел на линкедыне провалить тест, вообще не видел тегов о которых там говориться). Я сейчас учусь по freecodcamap и мне кажется, что то что я учу уже не совсем актуально и плюс к этому я не могу понять когда и что применять, да я прошел базовый блок про анимации о которых ты говорил в этом выпуске, но где его применять? Та же верстка сайтов, там используются не простые теги P и не просто блоки div, там уже strong span и более "профессиональные", а информации нигде нет, я смотрел много видео с версткой и все они отличаются и в большинстве из них люди просто делают в "старом" формате. Где можно посмотреть как ПРАВИЛЬНО верстать, чтобы было применение всех современных и узкоспециализированных тегов или может посоветуешь сайт на котором можно научится. Заранее спасибо :)

    • @СергейПресняков-о4р
      @СергейПресняков-о4р 3 ปีที่แล้ว

      На линкедине тесты сложные. Там вопросы по английски, причем текст может быть длинный, пока прочитаешь, а таймер тикает. В панике выбираешь вариант - неправильно, попробуйте ещё через полгода.

  • @YoutubeAitishnik
    @YoutubeAitishnik 2 ปีที่แล้ว

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

  • @lub8777
    @lub8777 2 ปีที่แล้ว

    Привет, классное видео, прям сижу повторяю сразу, но почему-то не получился polygon и масштабирование при наведении, хотя повторяла вс' точь в точь((

  • @metallolomov
    @metallolomov 4 ปีที่แล้ว

    зачет!!!

  • @ВолодимирКоторажук
    @ВолодимирКоторажук 4 ปีที่แล้ว

    прикольна рубрика

  • @СергійКоршун-н3ь
    @СергійКоршун-н3ь 4 ปีที่แล้ว

    Просто коментарий для продвижения видео в топ

  • @AlexanderGrinvald
    @AlexanderGrinvald 3 ปีที่แล้ว

    Respect!

  • @Дядька-б7ю
    @Дядька-б7ю 4 ปีที่แล้ว +5

    Неделю назад начал учить html css через год отпишусь и расскажу что из этого вышло ( напомните мне через год, а то могу забыть😁)

    • @ilnev3738
      @ilnev3738 4 ปีที่แล้ว

      А что так долго то учить?

    • @Дядька-б7ю
      @Дядька-б7ю 4 ปีที่แล้ว

      @@ilnev3738 да не знаю, за это время я уже почти все выучил, только с css еще надо помучаться

    • @Дядька-б7ю
      @Дядька-б7ю 4 ปีที่แล้ว

      @@ilnev3738 и мало практики еще

    • @ilnev3738
      @ilnev3738 4 ปีที่แล้ว

      @@Дядька-б7ю там впрниципе легко все учиться

    • @ДроменДроминов
      @ДроменДроминов 3 ปีที่แล้ว

      Почти год прошёл, ты выучил?

  • @takert8061
    @takert8061 4 ปีที่แล้ว

    Найс, пасиб

  • @mqst
    @mqst 4 ปีที่แล้ว

    Лучший

  • @BolshoySochiTuapse
    @BolshoySochiTuapse 3 ปีที่แล้ว +1

    *Я перескочила сюда не пройдя HTML, но результат анимации показался простоват*

    • @module_os
      @module_os 3 ปีที่แล้ว

      Привет Туапсе из Лазы:)

  • @xczm225
    @xczm225 4 ปีที่แล้ว

    круто, подписался!

  • @НикитаСемашко-н5щ
    @НикитаСемашко-н5щ 2 ปีที่แล้ว

    крутое видео

  • @Даниил-т4ю
    @Даниил-т4ю 4 ปีที่แล้ว

    интересное видео, спасибо

  • @hey2956
    @hey2956 4 ปีที่แล้ว

    Чувак ты топ спасибо тебе