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

[@ivankuzmich4539]

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

[@web8845]

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

[@nurasylmelsuly1863]

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

[@hilight3r]

rigt 😬

[@роррголлл]

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

[@1stabatvoix]

Sirckle же!

[@SuprunAlexey]

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

[@deanArtDev]

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

[@hilight3r]

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

[@MaxBondarenko]

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

[@SuprunAlexey]

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

[@k3Ng0T]

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

[@Artem-hd6ou]

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

[@jowenerjowener8672]

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

[@gritsienkooleg3447]

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

[@aitify6880]

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

[@hannasavostianova7155]

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

[@l_e_g_e_n_d_a_37cehat89]

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

[@khalilmutallibov]

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

[@ВладБабыкин]

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

[@romanvik]

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

[@romastyi83]

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

[@stanf5488]

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

[@SuprunAlexey]

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

[@mr.greenns6267]

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

[@apache5446]

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

[@ВладимирТюрин-з6е]

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

[@SuprunAlexey]

Спасибо 🙏🏻

[@anamillor8416]

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

[@insomniad2317]

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

[@ДмитрийСергеев-е7ь]

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

[@aibartolegenov7784]

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

[@GreatNorthernWar1700]

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

[@dinalytvynenko6780]

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

[@SuprunAlexey]

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

[@Anastasia-oe9fr]

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

[@РоманМ-ф3р]

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

[@qaswert167]

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

[@skorotanya]

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

[@SuprunAlexey]

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

[@m_mariya_mari]

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

[@extov7759]

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

[@bigthinks2290]

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

[@somwho_somewhere]

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

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

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

[@natalianadi]

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

[@lolalol8404]

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

[@izi.papizi]

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

[@maxberg524]

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

[@kaizadi28]

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

[@_S0MNAMBU1A_]

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

[@vovaka440]

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

[@ИЗБАЧИТАЛЬНЯ-ш9о]

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

[@eleukhin]

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

[@Укротительбудней]

#6 отсутвует

[@andrii5575]

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

[@iga6459]

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

[@goodirkutsk]

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

[@MegaPapoy]

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

[@YoutubeAitishnik]

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

[@Коннор-ч7е]

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

[@filiptraum9976]

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

[@romaskhin]

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

[@artemmanzhos2681]

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

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

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

[@SuprunAlexey]

Хорошо

[@za_dobro_ya]

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

[@lefury1337]

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

[@elbiemdoot464]

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

[@arturlomakin3555]

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

[@ВладФилиппов-ш6щ]

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

[@КириллАбдулов-ц8м]

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

[@sergeykazmin2795]

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

[@klmnprst777]

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

[@michaeldeoz]

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

[@Жизнь-я3ъ]

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

[@NikolaNIbel]

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

[@СергейПресняков-о4р]

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

[@diar7874]

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

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

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

[@Mifuragon]

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

[@Anwill57]

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

[@SuprunAlexey]

Окс

[@alexandrucristea9854]

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

[@SuprunAlexey]

Супер

[@happypie4859]

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

[@РудыйАлександр-р2б]

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

[@_Fantom_.]

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

[@LectorWeb]

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

[@mainsport7851]

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

[@Мурад-ы3ш]

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

[@АнтонМакаров-ъ5е]

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

[@Cycle329]

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

[@baton4iki]

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

[@arturkulik1024]

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

[@SuprunAlexey]

Лайк

[@Rozalinaag]

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

[@25id52]

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

[@hallmes9221]

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

[@Strawhat..]

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

[@volydymyr9897]

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

[@SuprunAlexey]

И то и другое

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

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

[@trimo1120]

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

[@ganjackal]

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

[@СергійКоршун-н3ь]

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

[@moneymoney4106]

Потрясающе, очень годное видео! Пожалуйста, продолжай эту рубрику, и вообще, продолжай делать свой контент, он очень помогает

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

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

[@1ommy398]

Большое спасибо, что снова активизировались. А то уже канал умирал

[@liubomyrsiusar6589]

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

[@pablodotsetti4437]

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

[@oskarrimjan4520]

12:42 эта фигура получается адаптивной, или нет?

[@ФедусьВладислав]

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

[@pavloging]

Web, выложи ролик по ScrollTOP кнопке

[@NikitaHoncharovv]

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

[@gatrianL]

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

[@SuprunAlexey]

Окс

[@tuRistst]

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

[@Dmitriy15486]

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

[@SuprunAlexey]

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

[@Dmitriy15486]

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

[@tavernaan]

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

[@СергейПресняков-о4р]

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

[@alexdrugs1979]

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

[@ovellon9526]

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

[@BolshoySochiTuapse]

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

[@module_os]

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

[@andrTaylor]

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

[@Даниил-т4ю]

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

[@hurt7723]

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

[@АнтонФедоренко-ф5ж]

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

[@СергейПресняков-о4р]

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

[@lub8777]

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

[@LinArt]

вСЕ это знаю но все равно подписался )))

[@hey2956]

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

[@SuprunAlexey]

Спасибо

[@Трип-з5ю]

Модеш скинуть готовый какой-то футер с лого соц.сетей)

[@EverrynN]

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

[@SuprunAlexey]

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

[@MORVWY]

background: center center/cover no-repeat?

[@Дядька-б7ю]

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

[@ilnev3738]

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

[@Дядька-б7ю]

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

[@Дядька-б7ю]

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

[@ilnev3738]

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

[@ДроменДроминов]

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

[@МихаилРазуваев-ь6л]

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