ТОП-10 фишек HTML/CSS верстки сайта КОТОРЫЕ ТЫ ОБЯЗАН ЗНАТЬ
Рет қаралды 43,671
3 жыл бұрынМы продолжаем рубрику фишки Html, CSS для верстки сайта для начинающих. В этом видео я расскажу моменты html css, которые обязан знать каждый начинающий верстальщик. В верстке сайтов есть очень много не очевидных и сложных моментов для новичков, которые вводят просто в ступор и иногда у новичка верстки сайтов даже отпадает желание продолжать изучение верстки. Но на самом деле верстка сайта уже не так сложна как это было те же 10 лет назад. Создано много новых свойст и концепций, все делается намного легче. В этом видео я подробно расскажу способ создания легчайшего адаптивного меню на html css и немного javascript. Рассмотрим работу с переменными CSS, и как сделать адаптивность для сайта за 3 секунды.
Nicepage - это сайт-билдер, с которым справится каждый.Размещайте элементы дизайна свободно, как в Figma и Photoshop, при этом получится работающий сайт и чистый HTML код.Nicepage автоматически адаптирует сайт для мобильных устройств.
Nicepage - bit.ly/nicepage-wd
@SuprunAlexey 3 жыл бұрын
Таймкоды: 1:27 - Адаптивное меню самым быстрым способом 6:19 - Переменные CSS 8:10 - Иконка для сайта в браузере во вкладках 9:22 - Автозаполняемый выпадающий список 10:16 - Плавная прокрутка к якорькам 12:11 - Выбор цвета через инпут 12:50 - Видео для фона сайта 14:21 - CSS Grid, адаптивность для сайта за три секунды
@apache5446 3 жыл бұрын
Спасибо за то, что ускорил свою речь до хорошей скорости. Теперь максимально информативно и кратко по времени(раньше смотрел твои видео в 1,25)
@ElferCool Жыл бұрын
@@apache5446 А мне наоборот - забыстро. Замедление ставлю. Потому что одно дело - по-быстрому прослушать, а другое дело - вникнуть и запомнить. На скорости это тяжело сделать, что влетает в ухо, сразу вылетает не задерживаясь, т.к. уже другая информация речёвки замещает предыдущую.
@CathodeUT Жыл бұрын
Для человека только начавшего изучать эти языки это просто взрыв мозга, всё так быстро что я даже не успеваю понять какая строка что меняет, а ты уже на следующей))
@DreamingDolphing 3 жыл бұрын
Верстка стала чуть проще в том, что IE наконец подох. В остальном с 2010 писать код стало намного сложнее, потому что объём знаний сильно вырос.
@nodirayakubova6395 3 жыл бұрын
Класс больше про JavaScript HTML CSS 👍👍👍
@twainprod 3 жыл бұрын
Прикольный видос, спасибо! Сохранил себе! Из всех фишек знал про иконку сайта и гриды, адаптивное меню делал через Bootstrap, а переменные в CSS использовал в SASS.
@SuprunAlexey 3 жыл бұрын
Круто
@alexeffect1765 3 жыл бұрын
Про гриды интересно, спасибо, даже коммент оставил)
@SuprunAlexey 3 жыл бұрын
Спасибо, это важно!
@user-wp8ej2sh6y 3 жыл бұрын
Много полезной информации. Спасибо)
@mykhailo6062 3 жыл бұрын
Спасибо большое! Очень интересное и познавательное видео. Бистро, очень информативно, а главное без воды. С нетерпением ждём новых видосиков ;)
@user-st4pb7xx9x 3 жыл бұрын
Спасибо! Плавный скролл порадовал!
@user-wz8jd9ud9f 3 жыл бұрын
4:13 А я пиццу ем
@PashaRomanovich 2 жыл бұрын
Спасибо за очень классное и познавательное видео!
@Zarmarinas 3 жыл бұрын
Круто! Спасибо огромное!
@aleksandryushka9571 3 жыл бұрын
Спасибо за отличное видео. Очень полезно.
@alexko100lom 3 жыл бұрын
После данного видео, хотелось бы видео по фронту, с обзором каких-либо фишек вроде нативного lazy load, переменных css и прочего, что сейчас нужно бы обязательно знать - но думаю харя треснет у меня)) Не могу найти - есть ли серия видео по Sass, и прочим инструментам фронта, кроме html/css/js P.S. Еще бы так же узнать - какие нынче тренды в этой ветке так сказать)
@Zadrot1080p 3 жыл бұрын
scss более актуален, нежели sass
@evgenii8672 3 жыл бұрын
Спасибо большое за видео! ))
@nemirovandrei 3 жыл бұрын
Спасибо за инфу, сохранил себе
@technic_and_programming 3 жыл бұрын
Спасибо!
@SuprunAlexey 3 жыл бұрын
Всегда пожалуйста!
@hxaez9809 3 жыл бұрын
Очень полезно Спасибо
@andreychernykh256 3 жыл бұрын
Было полезно!
@shalkarsaparali6598 3 жыл бұрын
спасибо было очень полезно
@amelianceskymusic 2 жыл бұрын
8:30 - 16x16 - это минимальный размер favicon для десктоп, лучше делать по гайдам
@maxokream3011 3 жыл бұрын
Расскажи плиз 🙏🏼 про приложения вебью и технологию эту очень интересно 🧐
@SuprunAlexey 3 жыл бұрын
Договорились
@maxokream3011 3 жыл бұрын
@@SuprunAlexey АУФ💪🏼🔥
@SuprunAlexey 3 жыл бұрын
Еее👏🏻
@sergeyromanyuk5753 3 жыл бұрын
Как на флексах сделать список в 2 колонки, чтобы верхние элементы выравнивались по верхнему краю, а остальные как им удобно, при этом в этом спике элементы разной высоты
@sergeypolovov8965 3 жыл бұрын
Картинка с Box Model на 3:38, конечно, ничего общего с реальностью не имеет, box-sizing: border-box никогда не включал в себя margin, а в content-box не знаю как вообще могло получиться 220px в общем счете
@Herp_B_TaHkE 2 жыл бұрын
Видео то неплохое, но новичок может и запутаться)
@__-qk1jr 3 жыл бұрын
Годно
@diekunstUA 3 жыл бұрын
Автозаполняемый выпадающий список - в чем разница с селектом? не могу придумать где бы это было удобней. спасибо за видео.
@SuprunAlexey 3 жыл бұрын
Просто удобнее где бы ни было
@user-nl9dk4tg8e 3 жыл бұрын
круто
@SuprunAlexey 3 жыл бұрын
Спасибо
@DimitarRad 3 жыл бұрын
Какой-то нонсенс! scroll-behavior: smooth; работает в лисе нормально, а в хроме нет. В чем проблема?
@ilnev3738 3 жыл бұрын
Добавьте префиксы
@apache5446 3 жыл бұрын
-webkit
@adilife6080 3 жыл бұрын
Добавь '-webkit-'
@vladyslavloktev7983 Жыл бұрын
код выкладывай в следующий раз, сэкономишь время тому кто читает и хочет проверить, да еще и сбережешь его от опечаток
@SuprunAlexey Жыл бұрын
Нет, кода никогда не будет. Пишите и вникайте а не бездумно копируйте
@genrihkutz 3 жыл бұрын
а разве css переменные всеми браузерами поддерживаются ?
@reshenie1 3 жыл бұрын
onclick в div это каменный век, не пишите так. В script.js пишите document.querySelector('.mobile-bar').onclick = toggleMobileMenu;
@stranger7025 2 жыл бұрын
меню не всплывает когда нажимаю на иконку , в чем может быть причина?
@klmnprst777 3 жыл бұрын
жду полной поддержки гридов, а пока флекс...
@drunken_rubbish 3 жыл бұрын
Вроде же все кроме explorer поддерживает
@mazya.youtube 3 жыл бұрын
Лёша, 2020 год же на дворе, какой .ico? Пропагандируй .svg в фавиконках)
@dmitriykurtsev2427 3 жыл бұрын
2020, а семантику так многие и не научились использовать, 🤦🏿♂️
@ekan272 3 жыл бұрын
Ну блин. в 20 году прописывать onclick в теге? не серьезно как-то :( потом начинающие перенимают это и пишут также. Может для Вас это не играет роли(надеюсь это не так), но я противник такого написания, сами говорите, мы не в 10 году уже и html должен быть отдельно, css отдельно, а js отдельно. При этом лаконично структурирован.
@rolandjeleniewicz3501 3 жыл бұрын
Прописал код буква по букве и без результата(((( Ссылки так и остаются и не превращаются в меню
@user-dt7kd8oe9s Жыл бұрын
у меня пишет что none не может быть значением visibility
@user-dt7kd8oe9s Жыл бұрын
в первом
@The-Tezzo 2 жыл бұрын
13:35 Почему у меня не работает? Не просвечивается кто знает?пж
@trygoboi4790 3 жыл бұрын
Не понимаю это видео. Я допустим пишу свой интернет магазин, у меня на бекенде HTML, а на фронтенде FORTRAN и Perl. По моему это лучший стек для разработки интернет программы.
@lllyx93 3 жыл бұрын
Наоборот наверное? Лучший не лучший у каждого инструмента есть плюсы и минусы
@trygoboi4790 3 жыл бұрын
@@lllyx93 я шучу))) Я бекендер на Java
@user-hv8rh8nk9d 3 жыл бұрын
Первый
@SuprunAlexey 3 жыл бұрын
Быстро ты
@FA-tu5ti 3 жыл бұрын
и что?
@ozimnadius 3 жыл бұрын
Кнопки должны быть кнопками, кнопка меню - div, не семантично, не забывай что тебя много новичков смотрят.
@sergeypetrovetsky3431 3 жыл бұрын
Если должно произойти событие то кнопка через Баттон. Если переход то ссылка
@ozimnadius 3 жыл бұрын
@@sergeypetrovetsky3431 здорово, но это не тебе адресовано.
@BrunchHouse-lo7pv Ай бұрын
Очень разочаровало видео, хотя автор явно профи. Я начинающий верстальщик и пытаюсь найти контент, который можно свободно воспринимать и изучать. 5 минут - растянулись на 2 часа, я постоянно останавливала и пересматривала каждый момент, параллельно перепроверяя информацию в интернете. По итогу - я переписала весь код, очень долго проверяла - и визуал у меня получился - но по функционалу меню просто не работает. Возможно, я допустила ошибку(которую не могу найти), но на будущее... ПОЖАЛУЙСТА ОБЪЯСНЯЙТЕ, ДЛЯ ЧЕГО пишется код. Мы подключили JS - хорошо, А ЦЕЛЬ? Я более чем уверена, что контент смотрят новички в деле - и полноценного знания JS у них нет, мне лично до сих пор не ясно, зачем мы подключили JS и на что это повлияло - А ВОЗМОЖНО именно из-за этого у меня и не работает код, ведь JS мог не подключится - а как это проверить, и на что влияет код написанный в нем - я не могу.
@ilnev3738 3 жыл бұрын
12.12 а что так можно было?
@SuprunAlexey 3 жыл бұрын
Ага:)
@asex9535 3 жыл бұрын
Спасибо за видео , моя цель - стать HTML-программистом .
@lllyx93 3 жыл бұрын
Если это шутка, очень смешно
@maxfatyanov7096 3 жыл бұрын
Жаль только, что scroll-behavior не поддерживается safari
@SuprunAlexey 3 жыл бұрын
Все впереди
@RomanRachkov 3 жыл бұрын
у nicepage чистый код?!!! ага, конечно.
@Alexus1504 3 жыл бұрын
Верстка стала проще!!!??? Ну ну, пойди освой эту простоту!!! Если учесть, что к самой верстке с ее сложными компонентами, такие как флексы, гриды, формы и т.д. есть еще и множество разнообразных элементов, которые нужно уметь заверстать , еще и вплетается Ява Скрипт!!! То конечно проще некуда!!!
@SuprunAlexey 3 жыл бұрын
Стала намного проще
@-Forever-Young- Жыл бұрын
Просто у тебя мало практики
@dmitriykurtsev2427 3 жыл бұрын
Ммм, круто, урок как сделать обсолютно не доступное меню, ммм. Кнопку меню делаем с помощью div, ссылкам не делаем visually: hidden, и еще не используем aria от слова совсем. Новички, не делайте так как в видео, потом из-за такого меню будут люди страдать
@jeb_7749 3 жыл бұрын
Я новичок. Можно поподробнее?
@dmitriykurtsev2427 3 жыл бұрын
@@jeb_7749 хорошее бургер меню это: 1. Использовать для кнопки тег button, так же указывать ему aria-expanded и aria-controls атрибуты (можешь сам про них почитать) для того, чтобы screen reader знал, что открывает и закрывает эта кнопка и чем она управляет. 1.1. Если в кнопке три полоске или что то на подобии, то следует еще указывать aria-label, дабы screen-reader произнес что делает эта кнопка. 2. При открытии меню на мобилках надо блокировать все элементы за пределами меню, на которые можно перейти с клавы или которые может произнести screen reader.
@dmitriykurtsev2427 3 жыл бұрын
@@jeb_7749 могу скинуть свою реализацию
@maksymgapachilo9507 3 жыл бұрын
@@dmitriykurtsev2427 скинь мне плс)
@dmitriykurtsev2427 3 жыл бұрын
@@maksymgapachilo9507 codepen.io/DmitriyKurtsev/pen/OJymmpV
@Professor_Ro 3 жыл бұрын
предлагаю эту скороговорку слушать на 0.75, от алкаша голова меньше грузиться будет
@SuprunAlexey 3 жыл бұрын
Та лаадноо
@Professor_Ro 3 жыл бұрын
@@SuprunAlexey не ты быстро говоришь а я медленно слушаю))
@onebytesiteit30-75 3 жыл бұрын
Полезное крутое видео. Если хотите еще доп инфы забегайте в гости. Правда у меня на канале для начинающих материал. Делюсь опытом так сказать. Стараюсь делать годный контент. Ну а тут лайк за видос. Очень полезные фишечки
@SuprunAlexey 3 жыл бұрын
Спам.
@Fristonit 5 ай бұрын
Слишком сжато по сути просто переписывание без обяснения
@user-og2wi8wh7s 3 жыл бұрын
Не очень подача из за скорости выдаваемой информации.
@FA-tu5ti 3 жыл бұрын
сделай по-медленнее тогда
@Kopo4e 3 жыл бұрын
Adobe Muse - Главная фишка и uKit, остальное в мусорку, верстальщики не нужны
@SuprunAlexey 3 жыл бұрын
Хзхз, субъективно
@Kopo4e 3 жыл бұрын
@@SuprunAlexey Го видос по Adobe Muse
@SPUA 3 жыл бұрын
@@Kopo4e последняя версия 2 года назад.. хм...
@lllyx93 3 жыл бұрын
Неподдерживаемый говно код детектед
@MaxYanov 3 жыл бұрын
Всё хорошо, но после УЛ и СПАН захотелось выключить видео
@lsnowl8924 3 жыл бұрын
выключи и не возвращайся от тебя гавной воняет аж сюда слышно
@romangolumbevskiy7268 Жыл бұрын
Ужасная подача информации. 1) Если видео называется ТОП-10 фишек HTML/CSS, то должно быть последовательно 10 фишек с объяснением, где и как каждая применяется. 2) Зачем JS в ролике про HTML/CSS? Ставь в описание или превью тогда и JS.
@timurislamov1671 3 жыл бұрын
Ничего не понятно и очень не интересно! Нафиг создал это видео? Всё очень быстро и непонятно!!!!
@SuprunAlexey 3 жыл бұрын
Капец, наоборот интересно и понятно
@Maria-Alekseevna 3 жыл бұрын
Спасибо!
Web Developer Blog
Рет қаралды 45 М.
Northern Lights
Рет қаралды 878
Web Developer Blog
Рет қаралды 40 М.