Тёмный

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

Web Developer Blog
Подписаться 246 тыс.
Просмотров 131 тыс.
50% 1

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

Опубликовано:

 

14 июн 2020

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 305   
@ivankuzmich4539
@ivankuzmich4539 3 года назад
Cirklе - это сильно))
@web8845
@web8845 3 года назад
Злорадствуете, уважаемый
@nurasylmelsuly1863
@nurasylmelsuly1863 3 года назад
Кратко о моем уровне английского)
@hilight3r
@hilight3r 3 года назад
rigt 😬
@user-he1pz9by2s
@user-he1pz9by2s 3 года назад
О, да вы из англии
@1stabatvoix
@1stabatvoix 3 года назад
Sirckle же!
@SuprunAlexey
@SuprunAlexey 3 года назад
Пишите комментарии, все читаю и отвечаю ✌🏻
@user-ci6pr6oy6q
@user-ci6pr6oy6q 3 года назад
Можно центровать в 2 строчки. Контейнеру display: flex; флекс-элементу margin: auto; =)
@hilight3r
@hilight3r 3 года назад
Самолайк - закон успеха.
@MaxBondarenko
@MaxBondarenko 3 года назад
Для это всего библиотеку script.js обязательно подключать? У вас на видео подключена
@SuprunAlexey
@SuprunAlexey 3 года назад
Max Bondarenko ни для чего, в этом видео можете не подключать, то с прошлых уроков осталось
@k3Ng0T
@k3Ng0T 2 месяца назад
братан спасибо тебе, я узнал что можно написать вместо background-size bs)
@hannasavostianova7155
@hannasavostianova7155 3 года назад
очень крутое видео! Я пока начинающий верстальщик и этим свойствам меня не учили) поэтому анимации, полупрозрачное наложение - это для меня как магия)) было бы круто, если бы такие видео выходили чаще)
@bigthinks2290
@bigthinks2290 3 года назад
Рубрика пушка!🦾 Спасибо за труд! Пили ещё!🙌🏽
@apache5446
@apache5446 3 года назад
Лучше я не видел. Постарался и изложил кратко и доступно. Конечно же продолжай делать так хорошо и дальше)
@insomniad2317
@insomniad2317 3 года назад
Видео снова огонь . Все четко и понятно , ещё бы таймлайн под видео или хотя разбивку по темам с указанием времени и пару тем в названии о чем будет разговор в видео чтоб оно не утонуло в закладках с одинаковыми именами и было сразу видно и легко найти интересующую фишку. Лайк
@Anastasia-oe9fr
@Anastasia-oe9fr 3 года назад
Очень крутая рубрика! Спасибо, ждём ещё!!!
@aitify6880
@aitify6880 2 года назад
Ого!!! Про анимацию реальный респект))) Сделай в следующем видео переходы (like transition)
@user-hf5ei5ir1k
@user-hf5ei5ir1k 3 года назад
Очень крутой подход, информация прям зашла как нужно! Хочется увидеть урок, про стилизацию форм (radiobutton, checkbox, text) ввод формы данными и отправка заполненных данных юзером себе на почту или телеграмм. Перекопал внятного ничего на эту тему не нашел. Спасибо за урок!!!
@user-ip3gp5in6n
@user-ip3gp5in6n 2 года назад
Класс! Побольше надо таких уроков ) Респект и уважуха за инфу!
@artemmanzhos2681
@artemmanzhos2681 3 года назад
Много полезной информации. Спасибо!
@anamillor8416
@anamillor8416 Год назад
Какие классные у тебя видео 👍🏻👍🏻👍🏻 Не понимаю, почему люди не ставят лайки. Можно потрудиться и коммент оставить. Мне кажется, твой контент того стоит!
@GreatNorthernWar1700
@GreatNorthernWar1700 3 года назад
Очень круто! Побольше бы такой тематики!
@qaswert167
@qaswert167 3 года назад
Лайк! Без воды все четко, быстро
@goodirkutsk
@goodirkutsk 3 года назад
Зачётно продемонстрировал! Заслуженный Лайк👍
@nataliaprasolova1981
@nataliaprasolova1981 2 года назад
Спасибо! Емко и полезно. Для начинающих(типа меня) - просто фантастика.
@maxberg524
@maxberg524 3 года назад
Ого, топовое видео, спасибо большое! Начну применять фишки
@Artem-hd6ou
@Artem-hd6ou 3 года назад
За clip-path - лайк! Всю жизнь для задач с необычными формами блоков с картинками просто использовал png, теперь смогу делать поинтереснее!)
@jowenerjowener8672
@jowenerjowener8672 2 года назад
я тоже! спасибо автору, годный видос!
@gritsienkooleg3447
@gritsienkooleg3447 2 года назад
Да, реально спасибо!
@khalilmutallibov
@khalilmutallibov 3 года назад
Большое спасибо вам! Недавно начал изучать html/css/js, я думаю это поможет. Продолжайте делать такой контент!
@user-nq6ri1oc7s
@user-nq6ri1oc7s 2 года назад
Как продвижения в изучении?
@ivankuzmich4539
@ivankuzmich4539 3 года назад
Топчек.Спасибо за видосик, удачи!
@user-mp1uf6xn1n
@user-mp1uf6xn1n 3 года назад
Больше бы таких видео.СПАСИБО ЧТО ДЕЛИШСЯ С НАМИ ЗНАНИЯМИ for free.
@user-wo7vc6ow6d
@user-wo7vc6ow6d 3 года назад
Спасибо. Реально нужная и ценная информация. Просто, быстро и понятно! Удачи!
@SuprunAlexey
@SuprunAlexey 3 года назад
Спасибо 🙏🏻
@andrii5575
@andrii5575 3 года назад
Просто и понятно. Супер. Давай ещё
@levgurov7738
@levgurov7738 3 года назад
Спасибо большое, очень хороший контент и подан качественно.
@Mifuragon
@Mifuragon 3 года назад
Полезные примеры, спасибо!
@MegaPapoy
@MegaPapoy 3 года назад
такие видосы как всегда пушка, добавил к себе в закладочки
@romanvik
@romanvik 3 года назад
Спасибо за clip-path, все ясно и понятно и ничего лишнего в видео, а то у других такое на час растягивают.
@romastyi83
@romastyi83 3 года назад
Ага)) какие-то цифры делают что-то))
@mel.roflit
@mel.roflit 3 года назад
Спасибо большое за это видео. Мне как начинающему очень интересно и полезно!
@elbiemdoot464
@elbiemdoot464 3 года назад
Спасибо, достаточно познавательно, много для себя нашел
@user-gl6ph9gc6b
@user-gl6ph9gc6b 3 года назад
Очень полезная информация, спасибо
@aibartolegenov7784
@aibartolegenov7784 2 года назад
лучший канал, всем советую. Вот только многие ролики уже старые
@filiptraum9976
@filiptraum9976 3 года назад
Харош, терь будет более интересный сайт для екзамена :) Спасибо и продолжай )
@25id52
@25id52 3 года назад
Пасиб, как раз во время.
@alexdomanskyi7301
@alexdomanskyi7301 3 года назад
Сначала лайк, потом смотрю!
@pablodotsetti4437
@pablodotsetti4437 3 года назад
Шикарно. Спасибо.
@user-ld1gz1cr1j
@user-ld1gz1cr1j 3 года назад
Топчик контент👍 Спасибо!
@iga6459
@iga6459 3 года назад
отличный фармат видео, для новичков самый раз!!!!
@NikolaNIbel
@NikolaNIbel 3 года назад
Ставлю 1000 лайков и жду продолжения :) 😄
@mr.greenns6267
@mr.greenns6267 3 года назад
Чуваки ставьте лайки, а не просто смотрите. Просто человек старается, а так вяло набираются лайки как бы тафталогично это не звучало. Тем более информация то полезная.
@stanf5488
@stanf5488 3 года назад
Настоящий трудяга - почти в час ночи видео вышло.
@SuprunAlexey
@SuprunAlexey 3 года назад
Ага, заслуживает лайка
@_Fantom_.
@_Fantom_. 3 года назад
Лови лайкос, амигос, фишки супер!
@diar7874
@diar7874 6 месяцев назад
Это видео невероятное, спасибо
@ovellon9526
@ovellon9526 3 года назад
Оч круто, спасибо🙏👍
@mainsport7851
@mainsport7851 3 года назад
Отличный выпуск.
@LectorWeb
@LectorWeb 3 года назад
У clip-path подержка не очень пока, а так свойство классное, что касается пункта #5 то для лучшего эффекта, обернуть картинку в блок, задать ему размеры и overflow:hidden и так же картинки добавить плавности через transition. Будет намного круче смотреться )
@baton4iki
@baton4iki 3 года назад
Спасибо за Clip-path помог)
@user-gz4fl7ct8h
@user-gz4fl7ct8h 3 года назад
you are cool/ больше бы таких видосов
@vovaka440
@vovaka440 3 года назад
Да были неточности в видео, но спасибо за старание и труд, продолжай в том же духе!
@dinalytvynenko6780
@dinalytvynenko6780 3 года назад
Спасибо! Рубрика классная! Продолжение будет весьма актуально.
@SuprunAlexey
@SuprunAlexey 3 года назад
Ооооо, как нибудь сделаю
@user-nc4ni3eb9d
@user-nc4ni3eb9d 3 года назад
Крутое видео, спасибо!
@hurt7723
@hurt7723 3 года назад
Очень круто ! 😄
@user-kh7fv5rn1g
@user-kh7fv5rn1g 3 года назад
Класс! И к черту плагины- анимашки, все ручками и головой можно сделать 👍👏
@extov7759
@extov7759 3 года назад
К черту флексы, пойду на таблицах делать)
@skorotanya
@skorotanya 3 года назад
Спасибо. Очень полезные ролики. Без воды и всё понятно. Хочется узнать про особенности использования svg картинок. Никак не доберусь самостоятельно.
@SuprunAlexey
@SuprunAlexey 3 года назад
Приму к сведению
@happypie4859
@happypie4859 2 года назад
Спасибо большое за видео! очень помогло
@arturkulik1024
@arturkulik1024 3 года назад
Круто, спасибо!
@SuprunAlexey
@SuprunAlexey 3 года назад
Лайк
@mazilofirefox6506
@mazilofirefox6506 Год назад
Круто спасибо.
@alexandrucristea9854
@alexandrucristea9854 3 года назад
Хорошая серия роликов, спосибо 😊👍🔥
@SuprunAlexey
@SuprunAlexey 3 года назад
Супер
@xczm225
@xczm225 3 года назад
круто, подписался!
@vova2966
@vova2966 3 года назад
Годно!
@leonidboyko980
@leonidboyko980 3 года назад
Огонь!!))
@user-bj6em6rv3i
@user-bj6em6rv3i 3 года назад
Хороший урок👍👍👍
@user-lj8hp9lo2x
@user-lj8hp9lo2x 8 месяцев назад
Красава
@user-vy1op2kt3q
@user-vy1op2kt3q 3 года назад
интересное видео, спасибо
@AlexanderGrinvald
@AlexanderGrinvald 2 года назад
Respect!
@user-zp5zf7kx5c
@user-zp5zf7kx5c 3 года назад
Классный видос, делай больше таких
@SuprunAlexey
@SuprunAlexey 3 года назад
Хорошо
@Putiny_Pizda
@Putiny_Pizda 3 года назад
Супер.
@metallolomov
@metallolomov 3 года назад
зачет!!!
@Cycle329
@Cycle329 3 года назад
Клас продолжай , я узнал много
@user-wc1uw7vs2e
@user-wc1uw7vs2e 3 года назад
Просто коментарий для продвижения видео в топ
@sergeysokurenko845
@sergeysokurenko845 2 года назад
Спасибо
@user-fy4fx5dy2m
@user-fy4fx5dy2m 10 месяцев назад
Класс, я об этом уже знал)😅
@user-gh9ok4mi1r
@user-gh9ok4mi1r 3 года назад
5 копеек по поводу анимации. Вместо left/right где это возможно лучше использовать transform: translate. Это избавит от ненужных repaint/reflow.
@panmazurokbunpalolecsandr178
@panmazurokbunpalolecsandr178 3 года назад
Ты лучший)
@arturlomakin3555
@arturlomakin3555 3 года назад
Идеи на следующий выпуск: 1. Shape-outside 2. Offset-path 3. Сделать кастомные input. 4. Inset 5. Transition. Ты про анимацию рассказал, а про переходы нет.
@user-ix4qh6ke4h
@user-ix4qh6ke4h 3 года назад
как сделать кастомный select без готовых вариантов. чтобы изменялся даже dropdown
@user-hw1bi2qc7m
@user-hw1bi2qc7m 3 года назад
плюсую кастомный input
@sergeykazmin2795
@sergeykazmin2795 3 года назад
@@user-hw1bi2qc7m ::before и ::after вам поможет
@klmnprst777
@klmnprst777 3 года назад
+кастомные input и всякие чекбоксы
@michaeldeoz
@michaeldeoz 3 года назад
лучше кастомизацию input type="date"
@mqst
@mqst 3 года назад
Лучший
@user-dw3gt5bj4s
@user-dw3gt5bj4s 3 года назад
думал старое видео смотрю, а тут оно только недавно вышло
@takert8061
@takert8061 3 года назад
Найс, пасиб
@chuvital
@chuvital 3 года назад
спасибо!
@user-cs4pp6he7d
@user-cs4pp6he7d 3 года назад
Очень интересно. Хочу єщо
@eleukhin
@eleukhin 3 года назад
Замечание по №6: можно было transform-duration указать для transform: scale(1.3)), чтобы изображение "не прыгало", только указывать на селектор элемента, а не на :hover
@user-lx1mv9el2z
@user-lx1mv9el2z 3 года назад
#6 отсутвует
@user-wf4np1ne2c
@user-wf4np1ne2c 3 года назад
круть)
@user-gk9wt1wh3h
@user-gk9wt1wh3h 3 года назад
прикольна рубрика
@user-gn7mt9vl2o
@user-gn7mt9vl2o 3 года назад
спасибо)
@romaskhin
@romaskhin 3 года назад
Привет я новичок в программировании изучаю Django, но понимаю что без html и css нормально сайт не сделать Но не понимаю как соединить например Django и html+css , или так же с JS, буду рад любому ответу:) Вопрос тупой конечно для опытных, но все с этого начинали, а так как ты очень опытный в веб разработки, принять информацию от тебя будет очень полезно))
@Anwill57
@Anwill57 3 года назад
Побольше видосов с фишками! 👍
@SuprunAlexey
@SuprunAlexey 3 года назад
Окс
@kaizadi28
@kaizadi28 3 года назад
Спасибо. Смотрю я на это и приунываю. Вроде все и предельно понятно и непонятно сразу. Очень надеюсь за 3 месяца освоить html и css чтобы хоть зацепиться и начать работать за еду
@_S0MNAMBU1A_
@_S0MNAMBU1A_ 2 года назад
Ну как ты? Освоил?
@user-bw8eh1dm9t
@user-bw8eh1dm9t 3 года назад
Спасибо, советы очень полезные и решения таких ситуаций всегда пригодятся. Но мне кажется, было бы полезно расширить эту тему и показывать, как эти решения сделать кроссбраузерными. А вообще, лайкос!
@user-wi5kt2gf7v
@user-wi5kt2gf7v Год назад
крутое видео
@hey2956
@hey2956 3 года назад
Чувак ты топ спасибо тебе
@SuprunAlexey
@SuprunAlexey 3 года назад
Спасибо
@casuale1200
@casuale1200 3 года назад
спасибо помог) cirkle😂😂
@Strawhat..
@Strawhat.. 3 года назад
Друг, ты пользуешься граф. редакторами типо Avocode или Zeplin? Или только фотошоп?
@hallmes9221
@hallmes9221 3 года назад
Продолжай эту рубрику, очень полезно. В ближайшее время планируется ещё один видео курс по вёрстке?
@qobilruzmatov48
@qobilruzmatov48 3 года назад
Nice good
@sea-lucky7143
@sea-lucky7143 3 года назад
Круто, ну большинство фишек из видео и так часто использую, было бы интересно рассмотреть рисование разных фигур на svg. Думаю на данный момент это очень актуально. Спасибо за видосы!
@liubomyrsiusar6589
@liubomyrsiusar6589 3 года назад
А можно ли для №3 ефекта использивать z-index для наложения текста на фото?
@front_praxis
@front_praxis 11 месяцев назад
топ
@LinArt
@LinArt 3 года назад
вСЕ это знаю но все равно подписался )))
@lolalol8404
@lolalol8404 2 года назад
А это нормально, что привстает от уроков этого парня? Бомбический контент
@user-gs5sf8ou9r
@user-gs5sf8ou9r Год назад
спасибо!)) 0:34 что за тема с голубой подсветкой? очень понравилась! Красный с зеленым уже достали везде((
@moneymoney4106
@moneymoney4106 3 года назад
Потрясающе, очень годное видео! Пожалуйста, продолжай эту рубрику, и вообще, продолжай делать свой контент, он очень помогает
Далее
ТОРТ СЕЙЧАС vs 100 ЛЕТ НАЗАД
20:49
where is the ball to play this?😳⚽
00:13
Просмотров 2,4 млн
格斗裁判暴力执法!#fighting #shorts
00:15
Просмотров 13 млн
Responsive Image Gallery
1:33
Просмотров 305
CSS Grid - Полное руководство
38:21
Просмотров 342 тыс.
ТОРТ СЕЙЧАС vs 100 ЛЕТ НАЗАД
20:49