ТОП-10 фишек HTML/CSS верстки сайта КОТОРЫЕ ТЫ ОБЯЗАН ЗНАТЬ

[@SuprunAlexey]

Таймкоды: 1:27 - Адаптивное меню самым быстрым способом 6:19 - Переменные CSS 8:10 - Иконка для сайта в браузере во вкладках 9:22 - Автозаполняемый выпадающий список 10:16 - Плавная прокрутка к якорькам 12:11 - Выбор цвета через инпут 12:50 - Видео для фона сайта 14:21 - CSS Grid, адаптивность для сайта за три секунды

[@apache5446]

Спасибо за то, что ускорил свою речь до хорошей скорости. Теперь максимально информативно и кратко по времени(раньше смотрел твои видео в 1,25)

[@ElferCool]

@@apache5446 А мне наоборот - забыстро. Замедление ставлю. Потому что одно дело - по-быстрому прослушать, а другое дело - вникнуть и запомнить. На скорости это тяжело сделать, что влетает в ухо, сразу вылетает не задерживаясь, т.к. уже другая информация речёвки замещает предыдущую.

[@CathodeUT]

Для человека только начавшего изучать эти языки это просто взрыв мозга, всё так быстро что я даже не успеваю понять какая строка что меняет, а ты уже на следующей))

[@DreamingDolphing]

Верстка стала чуть проще в том, что IE наконец подох. В остальном с 2010 писать код стало намного сложнее, потому что объём знаний сильно вырос.

[@twainprod]

Прикольный видос, спасибо! Сохранил себе! Из всех фишек знал про иконку сайта и гриды, адаптивное меню делал через Bootstrap, а переменные в CSS использовал в SASS.

[@SuprunAlexey]

Круто

[@alexeffect1765]

Про гриды интересно, спасибо, даже коммент оставил)

[@SuprunAlexey]

Спасибо, это важно!

[@nodirayakubova6395]

Класс больше про JavaScript HTML CSS 👍👍👍

[@АлександрПешков-ф1ж]

Спасибо! Плавный скролл порадовал!

[@amelianceskymusic]

8:30 - 16x16 - это минимальный размер favicon для десктоп, лучше делать по гайдам

[@PashaRomanovich]

Спасибо за очень классное и познавательное видео!

[@OlesiaMiller-i1d]

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

[@PanzarMarina]

Круто! Спасибо огромное!

[@mykhailo6062]

Спасибо большое! Очень интересное и познавательное видео. Бистро, очень информативно, а главное без воды. С нетерпением ждём новых видосиков ;)

[@evgenii8672]

Спасибо большое за видео! ))

[@sergeypolovov8965]

Картинка с Box Model на 3:38, конечно, ничего общего с реальностью не имеет, box-sizing: border-box никогда не включал в себя margin, а в content-box не знаю как вообще могло получиться 220px в общем счете

[@alexko100lom]

После данного видео, хотелось бы видео по фронту, с обзором каких-либо фишек вроде нативного lazy load, переменных css и прочего, что сейчас нужно бы обязательно знать - но думаю харя треснет у меня)) Не могу найти - есть ли серия видео по Sass, и прочим инструментам фронта, кроме html/css/js P.S. Еще бы так же узнать - какие нынче тренды в этой ветке так сказать)

[@Zadrot1080p]

scss более актуален, нежели sass

[@andreychernykh256]

Было полезно!

[@aleksandryushka9571]

Спасибо за отличное видео. Очень полезно.

[@nemirovandrei]

Спасибо за инфу, сохранил себе

[@technic_and_programming]

Спасибо!

[@SuprunAlexey]

Всегда пожалуйста!

[@maxokream3011]

Расскажи плиз 🙏🏼 про приложения вебью и технологию эту очень интересно 🧐

[@SuprunAlexey]

Договорились

[@maxokream3011]

@@SuprunAlexey АУФ💪🏼🔥

[@SuprunAlexey]

Еее👏🏻

[@hxaez9809]

Очень полезно Спасибо

[@shalkarsaparali6598]

спасибо было очень полезно

[@sergeyromanyuk5753]

Как на флексах сделать список в 2 колонки, чтобы верхние элементы выравнивались по верхнему краю, а остальные как им удобно, при этом в этом спике элементы разной высоты

[@DimitarRad]

Какой-то нонсенс! scroll-behavior: smooth; работает в лисе нормально, а в хроме нет. В чем проблема?

[@ilnev3738]

Добавьте префиксы

[@apache5446]

-webkit

[@adilife6080]

Добавь '-webkit-'

[@CLEARSKY98]

Видео то неплохое, но новичок может и запутаться)

[@Dioni-h5q]

4:13 А я пиццу ем

[@The-Tezzo]

13:35 Почему у меня не работает? Не просвечивается кто знает?пж

[@diekunstUA]

Автозаполняемый выпадающий список - в чем разница с селектом? не могу придумать где бы это было удобней. спасибо за видео.

[@SuprunAlexey]

Просто удобнее где бы ни было

[@genrihkutz]

а разве css переменные всеми браузерами поддерживаются ?

[@stranger7025]

меню не всплывает когда нажимаю на иконку , в чем может быть причина?

[@vladyslavloktev7983]

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

[@SuprunAlexey]

Нет, кода никогда не будет. Пишите и вникайте а не бездумно копируйте

[@ЕгорКубышкин-ц4м]

у меня пишет что none не может быть значением visibility

[@ЕгорКубышкин-ц4м]

в первом

[@reshenie1]

onclick в div это каменный век, не пишите так. В script.js пишите document.querySelector('.mobile-bar').onclick = toggleMobileMenu;

[@rolandjeleniewicz3501]

Прописал код буква по букве и без результата(((( Ссылки так и остаются и не превращаются в меню

[@ДмитрийАрзяков-б4р]

круто

[@SuprunAlexey]

Спасибо

[@__-qk1jr]

Годно

[@ekan272]

Ну блин. в 20 году прописывать onclick в теге? не серьезно как-то :( потом начинающие перенимают это и пишут также. Может для Вас это не играет роли(надеюсь это не так), но я противник такого написания, сами говорите, мы не в 10 году уже и html должен быть отдельно, css отдельно, а js отдельно. При этом лаконично структурирован.

[@trygoboi4790]

Не понимаю это видео. Я допустим пишу свой интернет магазин, у меня на бекенде HTML, а на фронтенде FORTRAN и Perl. По моему это лучший стек для разработки интернет программы.

[@lllyx93]

Наоборот наверное? Лучший не лучший у каждого инструмента есть плюсы и минусы

[@trygoboi4790]

@@lllyx93 я шучу))) Я бекендер на Java

[@maxfatyanov7096]

Жаль только, что scroll-behavior не поддерживается safari

[@SuprunAlexey]

Все впереди

[@ilnev3738]

12.12 а что так можно было?

[@SuprunAlexey]

Ага:)

[@klmnprst777]

жду полной поддержки гридов, а пока флекс...

[@drunken_rubbish]

Вроде же все кроме explorer поддерживает

[@mazya.youtube]

Лёша, 2020 год же на дворе, какой .ico? Пропагандируй .svg в фавиконках)

[@dmitriykurtsev2427]

2020, а семантику так многие и не научились использовать, 🤦🏿‍♂️

[@user-hv8rh8nk9d]

Первый

[@SuprunAlexey]

Быстро ты

[@FA-tu5ti]

и что?

[@BrunchHouse-lo7pv]

Очень разочаровало видео, хотя автор явно профи. Я начинающий верстальщик и пытаюсь найти контент, который можно свободно воспринимать и изучать. 5 минут - растянулись на 2 часа, я постоянно останавливала и пересматривала каждый момент, параллельно перепроверяя информацию в интернете. По итогу - я переписала весь код, очень долго проверяла - и визуал у меня получился - но по функционалу меню просто не работает. Возможно, я допустила ошибку(которую не могу найти), но на будущее... ПОЖАЛУЙСТА ОБЪЯСНЯЙТЕ, ДЛЯ ЧЕГО пишется код. Мы подключили JS - хорошо, А ЦЕЛЬ? Я более чем уверена, что контент смотрят новички в деле - и полноценного знания JS у них нет, мне лично до сих пор не ясно, зачем мы подключили JS и на что это повлияло - А ВОЗМОЖНО именно из-за этого у меня и не работает код, ведь JS мог не подключится - а как это проверить, и на что влияет код написанный в нем - я не могу.

[@ozimnadius]

Кнопки должны быть кнопками, кнопка меню - div, не семантично, не забывай что тебя много новичков смотрят.

[@sergeypetrovetsky3431]

Если должно произойти событие то кнопка через Баттон. Если переход то ссылка

[@ozimnadius]

@@sergeypetrovetsky3431 здорово, но это не тебе адресовано.

[@user-nx5nx9]

Всё хорошо, но качество видео очень низкое, плохо видно . И музыку надо слать на х.е.р или сделать по тише.

[@dmitriykurtsev2427]

Ммм, круто, урок как сделать обсолютно не доступное меню, ммм. Кнопку меню делаем с помощью div, ссылкам не делаем visually: hidden, и еще не используем aria от слова совсем. Новички, не делайте так как в видео, потом из-за такого меню будут люди страдать

[@jeb_7749]

Я новичок. Можно поподробнее?

[@dmitriykurtsev2427]

@@jeb_7749 хорошее бургер меню это: 1. Использовать для кнопки тег button, так же указывать ему aria-expanded и aria-controls атрибуты (можешь сам про них почитать) для того, чтобы screen reader знал, что открывает и закрывает эта кнопка и чем она управляет. 1.1. Если в кнопке три полоске или что то на подобии, то следует еще указывать aria-label, дабы screen-reader произнес что делает эта кнопка. 2. При открытии меню на мобилках надо блокировать все элементы за пределами меню, на которые можно перейти с клавы или которые может произнести screen reader.

[@dmitriykurtsev2427]

@@jeb_7749 могу скинуть свою реализацию

[@maksymgapachilo9507]

@@dmitriykurtsev2427 скинь мне плс)

[@dmitriykurtsev2427]

@@maksymgapachilo9507 codepen.io/DmitriyKurtsev/pen/OJymmpV

[@Professor_Ro]

предлагаю эту скороговорку слушать на 0.75, от алкаша голова меньше грузиться будет

[@SuprunAlexey]

Та лаадноо

[@Professor_Ro]

@@SuprunAlexey не ты быстро говоришь а я медленно слушаю))

[@RomanRachkov]

у nicepage чистый код?!!! ага, конечно.

[@Alexus1504]

Верстка стала проще!!!??? Ну ну, пойди освой эту простоту!!! Если учесть, что к самой верстке с ее сложными компонентами, такие как флексы, гриды, формы и т.д. есть еще и множество разнообразных элементов, которые нужно уметь заверстать , еще и вплетается Ява Скрипт!!! То конечно проще некуда!!!

[@SuprunAlexey]

Стала намного проще

[@-Forever-Young-]

Просто у тебя мало практики

[@Fristonit]

Слишком сжато по сути просто переписывание без обяснения

[@timurislamov1671]

Ничего не понятно и очень не интересно! Нафиг создал это видео? Всё очень быстро и непонятно!!!!

[@SuprunAlexey]

Капец, наоборот интересно и понятно

[@romangolumbevskiy7268]

Ужасная подача информации. 1) Если видео называется ТОП-10 фишек HTML/CSS, то должно быть последовательно 10 фишек с объяснением, где и как каждая применяется. 2) Зачем JS в ролике про HTML/CSS? Ставь в описание или превью тогда и JS.

[@ВячеславКосолапов-з5д]

Не очень подача из за скорости выдаваемой информации.

[@FA-tu5ti]

сделай по-медленнее тогда

[@onebytesiteit30-75]

Полезное крутое видео. Если хотите еще доп инфы забегайте в гости. Правда у меня на канале для начинающих материал. Делюсь опытом так сказать. Стараюсь делать годный контент. Ну а тут лайк за видос. Очень полезные фишечки

[@SuprunAlexey]

Спам.

[@asex9535]

Спасибо за видео , моя цель - стать HTML-программистом .

[@lllyx93]

Если это шутка, очень смешно

[@MaxYanov]

Всё хорошо, но после УЛ и СПАН захотелось выключить видео

[@lsnowl8924]

выключи и не возвращайся от тебя гавной воняет аж сюда слышно

[@Kopo4e]

Adobe Muse - Главная фишка и uKit, остальное в мусорку, верстальщики не нужны

[@SuprunAlexey]

Хзхз, субъективно

[@Kopo4e]

@@SuprunAlexey Го видос по Adobe Muse

[@SPUA]

@@Kopo4e последняя версия 2 года назад.. хм...

[@lllyx93]

Неподдерживаемый говно код детектед

[@Maria-Alekseevna]

Спасибо!