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

Поделиться
HTML-код
  • Опубликовано: 27 ноя 2024

Комментарии • 306

  • @ivankuzmich4539
    @ivankuzmich4539 4 года назад +277

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

    • @web8845
      @web8845 4 года назад +2

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

    • @nurasylmelsuly1863
      @nurasylmelsuly1863 4 года назад +21

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

    • @hilight3r
      @hilight3r 4 года назад +20

      rigt 😬

    • @роррголлл
      @роррголлл 4 года назад +3

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

    • @1stabatvoix
      @1stabatvoix 4 года назад +9

      Sirckle же!

  • @Artem-hd6ou
    @Artem-hd6ou 4 года назад +29

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

    • @jowenerjowener8672
      @jowenerjowener8672 3 года назад +2

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

    • @gritsienkooleg3447
      @gritsienkooleg3447 2 года назад

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

  • @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 8 месяцев назад

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

  • @romanvik
    @romanvik 4 года назад +5

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

    • @romastyi83
      @romastyi83 4 года назад

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

  • @mr.greenns6267
    @mr.greenns6267 4 года назад

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

  • @apache5446
    @apache5446 4 года назад

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

  • @aitify6880
    @aitify6880 2 года назад +4

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

  • @khalilmutallibov
    @khalilmutallibov 4 года назад +4

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

  • @ВладимирТюрин-з6е
    @ВладимирТюрин-з6е 4 года назад +2

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

  • @hannasavostianova7155
    @hannasavostianova7155 4 года назад +12

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

  • @dinalytvynenko6780
    @dinalytvynenko6780 4 года назад +3

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

    • @SuprunAlexey
      @SuprunAlexey  4 года назад +1

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

  • @anamillor8416
    @anamillor8416 2 года назад

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

  • @stanf5488
    @stanf5488 4 года назад +48

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

    • @SuprunAlexey
      @SuprunAlexey  4 года назад +7

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

  • @somwho_somewhere
    @somwho_somewhere 4 года назад +2

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

  • @ДмитрийСергеев-е7ь
    @ДмитрийСергеев-е7ь 4 года назад +1

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

  • @m_mariya_mari
    @m_mariya_mari 4 года назад +5

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

    • @extov7759
      @extov7759 4 года назад +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"

  • @aibartolegenov7784
    @aibartolegenov7784 2 года назад

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

  • @YoutubeAitishnik
    @YoutubeAitishnik 2 года назад

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

  • @eleukhin
    @eleukhin 4 года назад +5

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

  • @qaswert167
    @qaswert167 4 года назад +1

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

  • @bigthinks2290
    @bigthinks2290 4 года назад

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

  • @GreatNorthernWar1700
    @GreatNorthernWar1700 4 года назад +1

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

  • @РоманМ-ф3р
    @РоманМ-ф3р 2 года назад

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

  • @andrii5575
    @andrii5575 4 года назад

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

  • @insomniad2317
    @insomniad2317 4 года назад

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

  • @skorotanya
    @skorotanya 4 года назад

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

    • @SuprunAlexey
      @SuprunAlexey  4 года назад +1

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

  • @goodirkutsk
    @goodirkutsk 4 года назад

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

  • @Anastasia-oe9fr
    @Anastasia-oe9fr 4 года назад +1

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

  • @СергейПресняков-о4р
    @СергейПресняков-о4р 3 года назад +1

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

  • @izi.papizi
    @izi.papizi 4 года назад

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

  • @kaizadi28
    @kaizadi28 4 года назад

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

    • @_S0MNAMBU1A_
      @_S0MNAMBU1A_ 2 года назад

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

  • @АрсенийПятецкий-ы6д

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

  • @natalianadi
    @natalianadi 3 года назад

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

  • @ИЗБАЧИТАЛЬНЯ-ш9о
    @ИЗБАЧИТАЛЬНЯ-ш9о 3 года назад

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

  • @_Fantom_.
    @_Fantom_. 4 года назад

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

  • @lolalol8404
    @lolalol8404 2 года назад

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

  • @iga6459
    @iga6459 4 года назад

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

  • @diar7874
    @diar7874 Год назад

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

  • @vovaka440
    @vovaka440 3 года назад

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

  • @Anwill57
    @Anwill57 4 года назад +6

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

  • @Cycle329
    @Cycle329 4 года назад +1

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

  • @МаксимГринцевич-х5д

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

  • @MegaPapoy
    @MegaPapoy 4 года назад

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

  • @РудыйАлександр-р2б
    @РудыйАлександр-р2б 4 года назад +1

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

  • @NikolaNIbel
    @NikolaNIbel 4 года назад

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

  • @romaskhin
    @romaskhin 4 года назад +1

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

  • @maxberg524
    @maxberg524 4 года назад

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

  • @mainsport7851
    @mainsport7851 4 года назад

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

  • @artemmanzhos2681
    @artemmanzhos2681 4 года назад

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

  • @hurt7723
    @hurt7723 4 года назад

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

  • @Mifuragon
    @Mifuragon 4 года назад

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

  • @elbiemdoot464
    @elbiemdoot464 4 года назад

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

  • @happypie4859
    @happypie4859 3 года назад

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

  • @filiptraum9976
    @filiptraum9976 4 года назад

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

  • @LectorWeb
    @LectorWeb 4 года назад +1

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

  • @АлександрБаранов-ч6я

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

  • @ОстапЧичигинаров-ь3ы

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

  • @lefury1337
    @lefury1337 4 года назад

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

  • @Коннор-ч7е
    @Коннор-ч7е 4 года назад

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

  • @arturkulik1024
    @arturkulik1024 4 года назад +2

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

  • @NikitaHoncharovv
    @NikitaHoncharovv 4 года назад

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

  • @АнтонМакаров-ъ5е
    @АнтонМакаров-ъ5е 4 года назад

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

  • @Мурад-ы3ш
    @Мурад-ы3ш Год назад

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

  • @СергійКоршун-н3ь
    @СергійКоршун-н3ь 4 года назад

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

  • @25id52
    @25id52 4 года назад +2

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

  • @mazilofirefox6506
    @mazilofirefox6506 Год назад

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

  • @ФедусьВладислав
    @ФедусьВладислав 4 года назад

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

  • @alexandrucristea9854
    @alexandrucristea9854 4 года назад +1

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

  • @pablodotsetti4437
    @pablodotsetti4437 4 года назад

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

  • @Strawhat..
    @Strawhat.. 4 года назад

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

  • @Жизнь-я3ъ
    @Жизнь-я3ъ 2 года назад

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

  • @leonidboyko980
    @leonidboyko980 4 года назад

    Огонь!!))

  • @Даниил-т4ю
    @Даниил-т4ю 4 года назад

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

  • @vova2966
    @vova2966 4 года назад

    Годно!

  • @Rozalinaag
    @Rozalinaag 2 года назад

    То чувство, когда все это уже знаешь 😎

  • @metallolomov
    @metallolomov 4 года назад

    зачет!!!

  • @АнтонФедоринчик-г6ф

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

  • @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, их полно таких плагинов

  • @КириллЮрьевич-п3ы

    Красава

  • @ovellon9526
    @ovellon9526 4 года назад

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

  • @AlexanderGrinvald
    @AlexanderGrinvald 3 года назад

    Respect!

  • @alexdrugs1979
    @alexdrugs1979 2 года назад

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

  • @ВолодимирКоторажук

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

  • @trimo1120
    @trimo1120 5 месяцев назад

    Прикольно. Жаль, что это я всё делал, но не с css. Здесь намного легче работать, ахахаха

  • @baton4iki
    @baton4iki 4 года назад

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

  • @BolshoySochiTuapse
    @BolshoySochiTuapse 3 года назад +1

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

    • @module_os
      @module_os 3 года назад

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

  • @mqst
    @mqst 4 года назад

    Лучший

  • @sergeysokurenko845
    @sergeysokurenko845 3 года назад

    Спасибо

  • @gatrianL
    @gatrianL 4 года назад +10

    Идеи на следующий выпуск:
    pwa

    • @SuprunAlexey
      @SuprunAlexey  4 года назад +1

      Окс

    • @tuRistst
      @tuRistst 4 года назад

      Если осилит) Был бы очень сильный выпуск)

  • @volydymyr9897
    @volydymyr9897 4 года назад +5

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

  • @hey2956
    @hey2956 4 года назад

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

  • @АнтонФедоренко-ф5ж
    @АнтонФедоренко-ф5ж 4 года назад

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

    • @СергейПресняков-о4р
      @СергейПресняков-о4р 3 года назад

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

  • @panmazurokbunpalolecsandr178
    @panmazurokbunpalolecsandr178 4 года назад

    Ты лучший)

  • @back_to_life0
    @back_to_life0 4 года назад

    Супер.

  • @maxivanov3339
    @maxivanov3339 4 года назад

    ЗдОрово!

  • @xczm225
    @xczm225 4 года назад

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

  • @EverrynN
    @EverrynN 4 года назад +1

    Я так смотрю... смотрю... жду когда же ты заметишь ошибку в right)

    • @SuprunAlexey
      @SuprunAlexey  4 года назад

      Посмотри в какое время я записывал видео, сложно было что то заметить 😃

  • @ПавелРыжаков-н8з
    @ПавелРыжаков-н8з 4 года назад

    Gasoline down ya throat
    Light da match, spark da floor
    Take ya pick, who gon' go?
    Immolate, Geronimo
    Gasoline down ya throat
    Light da match, spark da floor
    Take ya pick, who gon' go?
    Immolate, Geronimo
    Watch it prance, watch it dance, watch da flash, my stance
    Gettin' ready for da army to advance
    My land got da green, got da team, got da camp, my camp
    Burn 'em high above da fire in trance, no chance
    I'ma burn up their oesophagus, caught da hippopotamus
    Hoarse in the river, vocals coarse in da providence
    Got em screaming pleadin' for their Savior the ominous
    Holding on to meaning when im beaming at da populace
    My money gettin' greener
    My demeanour cleaner
    Sweep 'em with da mop
    They drop. they drop, they drop, they drop
    Shootin' them birds, make 'em bloody buckshots, shots, shots
    Drop it like it's hot yuh
    I just wanna kill off foes with da trigga
    Plunge with da Dao, now yo body in da river
    Chop em like Kenpachi, cook em teriyaki
    Got da upper hand, Magatama like Itachi
    Watch it prance, watch it dance, watch da flash, my stance
    Gettin' ready for da army to advance
    My land got da green, got da team, got da camp, my camp
    Burn 'em high above da fire in trance, no chance
    Crack a collarbone, snap with da bass right at yo dome
    BFG shattering ya team, gonna clean like Listerine
    The dirt the mess, fuck all the rest
    My collar clean, rupture their nest
    I dip with Anna on my chest
    Gyp da crest and never less
    My money gettin' greener
    My demeanour cleaner
    Sweep em with da mop
    They drop. they drop, they drop, they drop
    Shootin' them birds, make em bloody buckshots, shots, shots
    Drop it like it's hot yuhGasoline down ya throat
    Light da match, spark da floor
    Take ya pick, who gon' go?
    Immolate, Geronimo
    Gasoline down ya throat
    Light da match, spark da floor
    Take ya pick, who gon' go?
    Immolate, Geronimo
    Watch it prance, watch it dance, watch da flash, my stance
    Gettin' ready for da army to advance
    My land got da green, got da team, got da camp, my camp
    Burn 'em high above da fire in trance, no chance
    I'ma burn up their oesophagus, caught da hippopotamus
    Hoarse in the river, vocals coarse in da providence
    Got em screaming pleadin' for their Savior the ominous
    Holding on to meaning when im beaming at da populace
    My money gettin' greener
    My demeanour cleaner
    Sweep 'em with da mop
    They drop. they drop, they drop, they drop
    Shootin' them birds, make 'em bloody buckshots, shots, shots
    Drop it like it's hot yuh
    I just wanna kill off foes with da trigga
    Plunge with da Dao, now yo body in da river
    Chop em like Kenpachi, cook em teriyaki
    Got da upper hand, Magatama like Itachi
    Watch it prance, watch it dance, watch da flash, my stance
    Gettin' ready for da army to advance
    My land got da green, got da team, got da camp, my camp
    Burn 'em high above da fire in trance, no chance
    Crack a collarbone, snap with da bass right at yo dome
    BFG shattering ya team, gonna clean like Listerine
    The dirt the mess, fuck all the rest
    My collar clean, rupture their nest
    I dip with Anna on my chest
    Gyp da crest and never less
    My money gettin' greener
    My demeanour cleaner
    Sweep em with da mop
    They drop. they drop, they drop, they drop
    Shootin' them birds, make em bloody buckshots, shots, shots
    Drop it like it's hot yuh

  • @Дядька-б7ю
    @Дядька-б7ю 4 года назад +5

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

    • @ilnev3738
      @ilnev3738 4 года назад

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

    • @Дядька-б7ю
      @Дядька-б7ю 4 года назад

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

    • @Дядька-б7ю
      @Дядька-б7ю 4 года назад

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

    • @ilnev3738
      @ilnev3738 4 года назад

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

    • @ДроменДроминов
      @ДроменДроминов 3 года назад

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