KZhead

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

Web Developer Blog
2020 ж. 14 Мау.
130 942 Рет қаралды
Жүктеу

Мы продолжаем рубрику улучшаем код и в этом видео мы поговорим про топ 7 фишек html css для верстки сайта, котоые вы должны знать. Верстка сайта на самом деле не такая сложная как кажется на первый взгляд, да и html css кажется для начинающих темным лесом. В этом видео я покажу как легким способом сделать паралакс эфеект на вашей странице, добавить анимации CSS и многое другое, что поможет вам в дальнейшем быстрее верстать и применять в своей работе.

Пікірлер

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

    @ivankuzmich4539@ivankuzmich45393 жыл бұрын

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

      @web8845@web88453 жыл бұрын

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

      @nurasylmelsuly1863@nurasylmelsuly18633 жыл бұрын

    • rigt 😬

      @hilight3r@hilight3r3 жыл бұрын

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

      @user-he1pz9by2s@user-he1pz9by2s3 жыл бұрын

    • Sirckle же!

      @1stabatvoix@1stabatvoix3 жыл бұрын

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

    @SuprunAlexey@SuprunAlexey3 жыл бұрын

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

      @user-ci6pr6oy6q@user-ci6pr6oy6q3 жыл бұрын

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

      @hilight3r@hilight3r3 жыл бұрын

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

      @MaxBondarenko@MaxBondarenko3 жыл бұрын

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

      @SuprunAlexey@SuprunAlexey3 жыл бұрын

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

      @k3Ng0T@k3Ng0T2 ай бұрын

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

    @hannasavostianova7155@hannasavostianova71553 жыл бұрын

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

    @insomniad2317@insomniad23173 жыл бұрын

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

    @Artem-hd6ou@Artem-hd6ou3 жыл бұрын

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

      @jowenerjowener8672@jowenerjowener86722 жыл бұрын

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

      @gritsienkooleg3447@gritsienkooleg34472 жыл бұрын

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

    @apache5446@apache54463 жыл бұрын

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

    @user-hf5ei5ir1k@user-hf5ei5ir1k3 жыл бұрын

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

    @bigthinks2290@bigthinks22903 жыл бұрын

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

    @aitify6880@aitify68802 жыл бұрын

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

    @khalilmutallibov@khalilmutallibov3 жыл бұрын

    • Как продвижения в изучении?

      @user-nq6ri1oc7s@user-nq6ri1oc7s2 жыл бұрын

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

    @Anastasia-oe9fr@Anastasia-oe9fr3 жыл бұрын

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

    @user-wo7vc6ow6d@user-wo7vc6ow6d3 жыл бұрын

    • Спасибо 🙏🏻

      @SuprunAlexey@SuprunAlexey3 жыл бұрын

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

    @romanvik@romanvik3 жыл бұрын

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

      @romastyi83@romastyi833 жыл бұрын

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

    @stanf5488@stanf54883 жыл бұрын

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

      @SuprunAlexey@SuprunAlexey3 жыл бұрын

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

    @nataliaprasolova1981@nataliaprasolova19812 жыл бұрын

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

    @qaswert167@qaswert1673 жыл бұрын

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

    @user-ip3gp5in6n@user-ip3gp5in6n2 жыл бұрын

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

    @GreatNorthernWar1700@GreatNorthernWar17003 жыл бұрын

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

    @user-mp1uf6xn1n@user-mp1uf6xn1n3 жыл бұрын

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

    @artemmanzhos2681@artemmanzhos26813 жыл бұрын

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

    @mel.roflit@mel.roflit3 жыл бұрын

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

    @maxberg524@maxberg5243 жыл бұрын

  • Топчек.Спасибо за видосик, удачи!

    @ivankuzmich4539@ivankuzmich45393 жыл бұрын

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

    @levgurov7738@levgurov77383 жыл бұрын

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

    @goodirkutsk@goodirkutsk3 жыл бұрын

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

    @aibartolegenov7784@aibartolegenov77842 жыл бұрын

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

    @Mifuragon@Mifuragon3 жыл бұрын

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

    @MegaPapoy@MegaPapoy3 жыл бұрын

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

    @LectorWeb@LectorWeb3 жыл бұрын

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

    @25id52@25id523 жыл бұрын

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

    @andrii5575@andrii55753 жыл бұрын

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

    @user-gl6ph9gc6b@user-gl6ph9gc6b3 жыл бұрын

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

    @anamillor8416@anamillor8416 Жыл бұрын

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

    @elbiemdoot464@elbiemdoot4643 жыл бұрын

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

    @alexdomanskyi7301@alexdomanskyi73013 жыл бұрын

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

    @iga6459@iga64593 жыл бұрын

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

    @skorotanya@skorotanya3 жыл бұрын

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

      @SuprunAlexey@SuprunAlexey3 жыл бұрын

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

    @diar7874@diar78746 ай бұрын

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

    @user-kh7fv5rn1g@user-kh7fv5rn1g3 жыл бұрын

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

      @extov7759@extov77593 жыл бұрын

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

    @mr.greenns6267@mr.greenns62673 жыл бұрын

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

    @dinalytvynenko6780@dinalytvynenko67803 жыл бұрын

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

      @SuprunAlexey@SuprunAlexey3 жыл бұрын

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

    @pablodotsetti4437@pablodotsetti44373 жыл бұрын

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

    @filiptraum9976@filiptraum99763 жыл бұрын

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

    @user-ld1gz1cr1j@user-ld1gz1cr1j3 жыл бұрын

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

    @baton4iki@baton4iki3 жыл бұрын

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

    @mainsport7851@mainsport78513 жыл бұрын

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

    @arturkulik1024@arturkulik10243 жыл бұрын

    • Лайк

      @SuprunAlexey@SuprunAlexey3 жыл бұрын

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

    @user-gz4fl7ct8h@user-gz4fl7ct8h3 жыл бұрын

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

    @hurt7723@hurt77233 жыл бұрын

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

    @vovaka440@vovaka4403 жыл бұрын

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

    @happypie4859@happypie48592 жыл бұрын

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

    @ovellon9526@ovellon95263 жыл бұрын

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

    @NikolaNIbel@NikolaNIbel3 жыл бұрын

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

    @user-nc4ni3eb9d@user-nc4ni3eb9d3 жыл бұрын

  • Красава

    @user-lj8hp9lo2x@user-lj8hp9lo2x8 ай бұрын

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

    @alexandrucristea9854@alexandrucristea98543 жыл бұрын

    • Супер

      @SuprunAlexey@SuprunAlexey3 жыл бұрын

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

    @_Fantom_.@_Fantom_.3 жыл бұрын

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

    @eleukhin@eleukhin3 жыл бұрын

    • #6 отсутвует

      @user-lx1mv9el2z@user-lx1mv9el2z3 жыл бұрын

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

    @mazilofirefox6506@mazilofirefox6506 Жыл бұрын

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

    @user-bj6em6rv3i@user-bj6em6rv3i3 жыл бұрын

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

    @user-dw3gt5bj4s@user-dw3gt5bj4s3 жыл бұрын

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

    @user-gh9ok4mi1r@user-gh9ok4mi1r3 жыл бұрын

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

    @romaskhin@romaskhin3 жыл бұрын

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

    @Strawhat..@Strawhat..3 жыл бұрын

  • Годно!

    @vova2966@vova29663 жыл бұрын

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

    @arturlomakin3555@arturlomakin35553 жыл бұрын

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

      @user-ix4qh6ke4h@user-ix4qh6ke4h3 жыл бұрын

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

      @user-hw1bi2qc7m@user-hw1bi2qc7m3 жыл бұрын

    • @@user-hw1bi2qc7m ::before и ::after вам поможет

      @sergeykazmin2795@sergeykazmin27953 жыл бұрын

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

      @klmnprst777@klmnprst7773 жыл бұрын

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

      @michaeldeoz@michaeldeoz3 жыл бұрын

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

    @xczm225@xczm2253 жыл бұрын

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

    @user-zp5zf7kx5c@user-zp5zf7kx5c3 жыл бұрын

    • Хорошо

      @SuprunAlexey@SuprunAlexey3 жыл бұрын

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

    @user-vy1op2kt3q@user-vy1op2kt3q3 жыл бұрын

  • Огонь!!))

    @leonidboyko980@leonidboyko9803 жыл бұрын

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

    @user-wc1uw7vs2e@user-wc1uw7vs2e3 жыл бұрын

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

    @user-fy4fx5dy2m@user-fy4fx5dy2m10 ай бұрын

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

    @Cycle329@Cycle3293 жыл бұрын

  • Ты лучший)

    @panmazurokbunpalolecsandr178@panmazurokbunpalolecsandr1783 жыл бұрын

  • зачет!!!

    @metallolomov@metallolomov3 жыл бұрын

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

    @user-cs4pp6he7d@user-cs4pp6he7d3 жыл бұрын

  • спасибо!

    @chuvital@chuvital3 жыл бұрын

  • Спасибо

    @sergeysokurenko845@sergeysokurenko8452 жыл бұрын

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

    @kaizadi28@kaizadi283 жыл бұрын

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

      @_S0MNAMBU1A_@_S0MNAMBU1A_2 жыл бұрын

  • Respect!

    @AlexanderGrinvald@AlexanderGrinvald2 жыл бұрын

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

    @user-gs5sf8ou9r@user-gs5sf8ou9r Жыл бұрын

  • Лучший

    @mqst@mqst3 жыл бұрын

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

    @hey2956@hey29563 жыл бұрын

    • Спасибо

      @SuprunAlexey@SuprunAlexey3 жыл бұрын

  • Найс, пасиб

    @takert8061@takert80613 жыл бұрын

  • Супер.

    @Putiny_Pizda@Putiny_Pizda3 жыл бұрын

  • спасибо)

    @user-gn7mt9vl2o@user-gn7mt9vl2o3 жыл бұрын

  • Продолжай эту рубрику, очень полезно. В ближайшее время планируется ещё один видео курс по вёрстке?

    @hallmes9221@hallmes92213 жыл бұрын

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

    @volydymyr9897@volydymyr98973 жыл бұрын

    • И то и другое

      @SuprunAlexey@SuprunAlexey3 жыл бұрын

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

    @user-gk9wt1wh3h@user-gk9wt1wh3h3 жыл бұрын

  • спасибо помог) cirkle😂😂

    @casuale1200@casuale12003 жыл бұрын

  • круть)

    @user-wf4np1ne2c@user-wf4np1ne2c3 жыл бұрын

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

    @user-bw8eh1dm9t@user-bw8eh1dm9t3 жыл бұрын

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

    @lolalol8404@lolalol84042 жыл бұрын

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

    @lub8777@lub8777 Жыл бұрын

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

    @user-dv9fk1hd3s@user-dv9fk1hd3s2 жыл бұрын

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

    @user-gh1qm1tt7q@user-gh1qm1tt7q3 жыл бұрын

  • крутое видео

    @user-wi5kt2gf7v@user-wi5kt2gf7v Жыл бұрын

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

    @Anwill57@Anwill573 жыл бұрын

    • Окс

      @SuprunAlexey@SuprunAlexey3 жыл бұрын

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

    @liubomyrsiusar6589@liubomyrsiusar65893 жыл бұрын

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

    @ganjackal@ganjackal3 жыл бұрын
KZhead