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

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

[@ivankuzmich4539]

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

[@web8845]

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

[@nurasylmelsuly1863]

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

[@hilight3r]

rigt 😬

[@user-he1pz9by2s]

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

[@1stabatvoix]

Sirckle же!

[@SuprunAlexey]

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

[@user-ci6pr6oy6q]

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

[@hilight3r]

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

[@MaxBondarenko]

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

[@SuprunAlexey]

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

[@k3Ng0T]

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

[@hannasavostianova7155]

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

[@bigthinks2290]

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

[@Anastasia-oe9fr]

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

[@Artem-hd6ou]

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

[@jowenerjowener8672]

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

[@gritsienkooleg3447]

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

[@aitify6880]

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

[@stanf5488]

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

[@SuprunAlexey]

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

[@insomniad2317]

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

[@apache5446]

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

[@GreatNorthernWar1700]

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

[@ivankuzmich4539]

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

[@user-ip3gp5in6n]

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

[@goodirkutsk]

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

[@khalilmutallibov]

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

[@user-nq6ri1oc7s]

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

[@qaswert167]

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

[@user-hf5ei5ir1k]

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

[@artemmanzhos2681]

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

[@romanvik]

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

[@romastyi83]

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

[@maxberg524]

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

[@user-mp1uf6xn1n]

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

[@nataliaprasolova1981]

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

[@user-wo7vc6ow6d]

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

[@SuprunAlexey]

Спасибо 🙏🏻

[@MegaPapoy]

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

[@andrii5575]

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

[@alexdomanskyi7301]

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

[@levgurov7738]

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

[@dinalytvynenko6780]

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

[@SuprunAlexey]

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

[@mel.roflit]

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

[@anamillor8416]

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

[@Mifuragon]

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

[@filiptraum9976]

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

[@LectorWeb]

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

[@aibartolegenov7784]

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

[@pablodotsetti4437]

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

[@user-kh7fv5rn1g]

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

[@extov7759]

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

[@user-ld1gz1cr1j]

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

[@user-gl6ph9gc6b]

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

[@25id52]

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

[@NikolaNIbel]

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

[@iga6459]

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

[@elbiemdoot464]

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

[@hurt7723]

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

[@diar7874]

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

[@arturkulik1024]

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

[@SuprunAlexey]

Лайк

[@skorotanya]

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

[@SuprunAlexey]

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

[@user-gz4fl7ct8h]

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

[@mr.greenns6267]

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

[@arturlomakin3555]

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

[@user-ix4qh6ke4h]

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

[@user-hw1bi2qc7m]

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

[@sergeykazmin2795]

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

[@klmnprst777]

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

[@michaeldeoz]

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

[@vovaka440]

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

[@mainsport7851]

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

[@_Fantom_.]

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

[@user-lj8hp9lo2x]

Красава

[@ovellon9526]

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

[@eleukhin]

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

[@user-lx1mv9el2z]

#6 отсутвует

[@baton4iki]

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

[@mazilofirefox6506]

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

[@alexandrucristea9854]

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

[@SuprunAlexey]

Супер

[@leonidboyko980]

Огонь!!))

[@user-dw3gt5bj4s]

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

[@vova2966]

Годно!

[@user-nc4ni3eb9d]

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

[@user-gh9ok4mi1r]

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

[@user-zp5zf7kx5c]

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

[@SuprunAlexey]

Хорошо

[@kaizadi28]

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

[@_S0MNAMBU1A_]

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

[@xczm225]

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

[@metallolomov]

зачет!!!

[@happypie4859]

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

[@user-wc1uw7vs2e]

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

[@user-bj6em6rv3i]

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

[@Cycle329]

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

[@user-vy1op2kt3q]

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

[@mqst]

Лучший

[@Strawhat..]

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

[@user-wf4np1ne2c]

круть)

[@AlexanderGrinvald]

Respect!

[@panmazurokbunpalolecsandr178]

Ты лучший)

[@takert8061]

Найс, пасиб

[@romaskhin]

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

[@Putiny_Pizda]

Супер.

[@user-gk9wt1wh3h]

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

[@sergeysokurenko845]

Спасибо

[@Anwill57]

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

[@SuprunAlexey]

Окс

[@user-cs4pp6he7d]

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

[@chuvital]

спасибо!

[@user-wi5kt2gf7v]

крутое видео

[@user-fy4fx5dy2m]

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

[@volydymyr9897]

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

[@SuprunAlexey]

И то и другое

[@user-dv9fk1hd3s]

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

[@user-gn7mt9vl2o]

спасибо)

[@hey2956]

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

[@SuprunAlexey]

Спасибо

[@user-gs5sf8ou9r]

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

[@liubomyrsiusar6589]

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

[@lolalol8404]

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

[@andrTaylor]

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

[@casuale1200]

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

[@maxivanov3339]

ЗдОрово!

[@qobilruzmatov48]

Nice good

[@user-ef7if4bp4x]

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

[@user-dv9fk1hd3s]

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

[@Dmitriy15486]

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

[@SuprunAlexey]

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

[@Dmitriy15486]

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

[@tavernaan]

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

[@user-dv9fk1hd3s]

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